fix: merge conflicts

---
name: Pull Request
about: Submit changes to the project for review and inclusion
---

## Description

Experimental Short-Term Reo Integration

.npmrc

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

apps/documentation/next.config.js

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

apps/documentation/package.json

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

apps/documentation/theme.config.tsx

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

apps/openpage-api/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -57,7 +57,7 @@ export const ConfigureDocumentRecipients = ({
     name: 'signers',
   });
 
-  const { getValues, watch } = useFormContext<TConfigureEmbedFormSchema>();
+  const { getValues, watch, setValue } = useFormContext<TConfigureEmbedFormSchema>();
 
   const signingOrder = watch('meta.signingOrder');
 
@@ -67,13 +67,16 @@ export const ConfigureDocumentRecipients = ({
 
   const onAddSigner = useCallback(() => {
     const signerNumber = signers.length + 1;
+    const recipientSigningOrder =
+      signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1;
 
     appendSigner({
       formId: nanoid(8),
       name: isTemplate ? `Recipient ${signerNumber}` : '',
       email: isTemplate ? `recipient.${signerNumber}@document.com` : '',
       role: RecipientRole.SIGNER,
-      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1,
+      signingOrder:
+        signingOrder === DocumentSigningOrder.SEQUENTIAL ? recipientSigningOrder : undefined,
     });
   }, [appendSigner, signers]);
 
@@ -103,7 +106,7 @@ export const ConfigureDocumentRecipients = ({
       // Update signing order for each item
       const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
         ...s,
-        signingOrder: idx + 1,
+        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? idx + 1 : undefined,
       }));
 
       // Update the form
@@ -123,7 +126,7 @@ export const ConfigureDocumentRecipients = ({
       const currentSigners = getValues('signers');
       const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
         ...signer,
-        signingOrder: index + 1,
+        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? index + 1 : undefined,
       }));
 
       // Update the form with new ordering
@@ -132,6 +135,16 @@ export const ConfigureDocumentRecipients = ({
     [move, replace, getValues],
   );
 
+  const onSigningOrderChange = (signingOrder: DocumentSigningOrder) => {
+    setValue('meta.signingOrder', signingOrder);
+
+    if (signingOrder === DocumentSigningOrder.SEQUENTIAL) {
+      signers.forEach((_signer, index) => {
+        setValue(`signers.${index}.signingOrder`, index + 1);
+      });
+    }
+  };
+
   return (
     <div>
       <h3 className="text-foreground mb-1 text-lg font-medium">
@@ -152,11 +165,11 @@ export const ConfigureDocumentRecipients = ({
                 {...field}
                 id="signingOrder"
                 checked={field.value === DocumentSigningOrder.SEQUENTIAL}
-                onCheckedChange={(checked) => {
-                  field.onChange(
+                onCheckedChange={(checked) =>
+                  onSigningOrderChange(
                     checked ? DocumentSigningOrder.SEQUENTIAL : DocumentSigningOrder.PARALLEL,
-                  );
-                }}
+                  )
+                }
                 disabled={isSubmitting}
               />
             </FormControl>
@@ -184,6 +197,7 @@ export const ConfigureDocumentRecipients = ({
                 disabled={isSubmitting || !isSigningOrderEnabled}
               />
             </FormControl>
+
             <div className="flex items-center">
               <FormLabel
                 htmlFor="allowDictateNextSigner"
@@ -227,13 +241,14 @@ export const ConfigureDocumentRecipients = ({
                   key={signer.id}
                   draggableId={signer.id}
                   index={index}
-                  isDragDisabled={!isSigningOrderEnabled || isSubmitting}
+                  isDragDisabled={!isSigningOrderEnabled || isSubmitting || signer.disabled}
                 >
                   {(provided, snapshot) => (
-                    <div
+                    <fieldset
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
+                      disabled={signer.disabled}
                       className={cn('py-1', {
                         'bg-widget-foreground pointer-events-none rounded-md pt-2':
                           snapshot.isDragging,
@@ -349,7 +364,7 @@ export const ConfigureDocumentRecipients = ({
                                   {...field}
                                   isAssistantEnabled={isSigningOrderEnabled}
                                   onValueChange={field.onChange}
-                                  disabled={isSubmitting || snapshot.isDragging}
+                                  disabled={isSubmitting || snapshot.isDragging || signer.disabled}
                                 />
                               </FormControl>
                               <FormMessage />
@@ -360,13 +375,18 @@ export const ConfigureDocumentRecipients = ({
                         <Button
                           type="button"
                           variant="ghost"
-                          disabled={isSubmitting || signers.length === 1 || snapshot.isDragging}
+                          disabled={
+                            isSubmitting ||
+                            signers.length === 1 ||
+                            snapshot.isDragging ||
+                            signer.disabled
+                          }
                           onClick={() => removeSigner(index)}
                         >
                           <Trash className="h-4 w-4" />
                         </Button>
                       </motion.div>
-                    </div>
+                    </fieldset>
                   )}
                 </Draggable>
               ))}

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

@@ -30,10 +30,15 @@ import {
 export interface ConfigureDocumentViewProps {
   onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
   defaultValues?: Partial<TConfigureEmbedFormSchema>;
+  disableUpload?: boolean;
   isSubmitting?: boolean;
 }
 
-export const ConfigureDocumentView = ({ onSubmit, defaultValues }: ConfigureDocumentViewProps) => {
+export const ConfigureDocumentView = ({
+  onSubmit,
+  defaultValues,
+  disableUpload,
+}: ConfigureDocumentViewProps) => {
   const { isTemplate } = useConfigureDocument();
 
   const form = useForm<TConfigureEmbedFormSchema>({
@@ -47,6 +52,7 @@ export const ConfigureDocumentView = ({ onSubmit, defaultValues }: ConfigureDocu
           email: isTemplate ? `recipient.${1}@document.com` : '',
           role: RecipientRole.SIGNER,
           signingOrder: 1,
+          disabled: false,
         },
       ],
       meta: {
@@ -110,7 +116,7 @@ export const ConfigureDocumentView = ({ onSubmit, defaultValues }: ConfigureDocu
             />
           </div>
 
-          <ConfigureDocumentUpload isSubmitting={isSubmitting} />
+          {!disableUpload && <ConfigureDocumentUpload isSubmitting={isSubmitting} />}
           <ConfigureDocumentRecipients control={control} isSubmitting={isSubmitting} />
           <ConfigureDocumentAdvancedSettings control={control} isSubmitting={isSubmitting} />
 

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

@@ -15,11 +15,13 @@ export const ZConfigureEmbedFormSchema = z.object({
   signers: z
     .array(
       z.object({
+        nativeId: z.number().optional(),
         formId: z.string(),
         name: z.string().min(1, { message: 'Name is required' }),
         email: z.string().email('Invalid email address'),
         role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
         signingOrder: z.number().optional(),
+        disabled: z.boolean().optional(),
       }),
     )
     .min(1, { message: 'At least one signer is required' }),
@@ -34,7 +36,7 @@ export const ZConfigureEmbedFormSchema = z.object({
     language: ZDocumentMetaLanguageSchema.optional(),
     signatureTypes: z.array(z.string()).default([]),
     signingOrder: z.enum(['SEQUENTIAL', 'PARALLEL']),
-    allowDictateNextSigner: z.boolean().default(false),
+    allowDictateNextSigner: z.boolean().default(false).optional(),
     externalId: z.string().optional(),
   }),
   documentData: z

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

@@ -2,12 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentData } from '@prisma/client';
-import { FieldType, ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import type { DocumentData, FieldType } from '@prisma/client';
+import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { z } from 'zod';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
@@ -30,6 +29,7 @@ import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/shee
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+import type { TConfigureFieldsFormSchema } from './configure-fields-view.types';
 import { FieldAdvancedSettingsDrawer } from './field-advanced-settings-drawer';
 
 const MIN_HEIGHT_PX = 12;
@@ -38,28 +38,9 @@ const MIN_WIDTH_PX = 36;
 const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
 const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
-export const ZConfigureFieldsFormSchema = z.object({
-  fields: z.array(
-    z.object({
-      formId: z.string().min(1),
-      id: z.string().min(1),
-      type: z.nativeEnum(FieldType),
-      signerEmail: z.string().min(1),
-      recipientId: z.number().min(0),
-      pageNumber: z.number().min(1),
-      pageX: z.number().min(0),
-      pageY: z.number().min(0),
-      pageWidth: z.number().min(0),
-      pageHeight: z.number().min(0),
-      fieldMeta: ZFieldMetaSchema.optional(),
-    }),
-  ),
-});
-
-export type TConfigureFieldsFormSchema = z.infer<typeof ZConfigureFieldsFormSchema>;
-
 export type ConfigureFieldsViewProps = {
   configData: TConfigureEmbedFormSchema;
+  documentData?: DocumentData;
   defaultValues?: Partial<TConfigureFieldsFormSchema>;
   onBack: (data: TConfigureFieldsFormSchema) => void;
   onSubmit: (data: TConfigureFieldsFormSchema) => void;
@@ -67,13 +48,14 @@ export type ConfigureFieldsViewProps = {
 
 export const ConfigureFieldsView = ({
   configData,
+  documentData,
   defaultValues,
   onBack,
   onSubmit,
 }: ConfigureFieldsViewProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
-  const { _ } = useLingui();
 
   // Track if we're on a mobile device
   const [isMobile, setIsMobile] = useState(false);
@@ -99,7 +81,11 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const documentData = useMemo(() => {
+  const normalizedDocumentData = useMemo(() => {
+    if (documentData) {
+      return documentData;
+    }
+
     if (!configData.documentData) {
       return null;
     }
@@ -116,7 +102,7 @@ export const ConfigureFieldsView = ({
 
   const recipients = useMemo(() => {
     return configData.signers.map<Recipient>((signer, index) => ({
-      id: index,
+      id: signer.nativeId || index,
       name: signer.name || '',
       email: signer.email || '',
       role: signer.role,
@@ -129,14 +115,14 @@ export const ConfigureFieldsView = ({
       signedAt: null,
       authOptions: null,
       rejectionReason: null,
-      sendStatus: SendStatus.NOT_SENT,
-      readStatus: ReadStatus.NOT_OPENED,
-      signingStatus: SigningStatus.NOT_SIGNED,
+      sendStatus: signer.disabled ? SendStatus.SENT : SendStatus.NOT_SENT,
+      readStatus: signer.disabled ? ReadStatus.OPENED : ReadStatus.NOT_OPENED,
+      signingStatus: signer.disabled ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
     }));
   }, [configData.signers]);
 
   const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
-    () => recipients[0] || null,
+    () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
   );
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
   const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
@@ -187,34 +173,59 @@ export const ConfigureFieldsView = ({
   });
 
   const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
+      const { duplicate = false, duplicateAll = false } = options ?? {};
 
       if (lastActiveField) {
         event?.preventDefault();
 
-        if (!duplicate) {
-          setFieldClipboard(lastActiveField);
+        if (duplicate) {
+          const newField: TConfigureFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+            recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };
 
-          toast({
-            title: 'Copied field',
-            description: 'Copied field to clipboard',
+          append(newField);
+
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TConfigureFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+              recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+              pageNumber,
+            };
+
+            append(newField);
           });
 
           return;
         }
 
-        const newField: TConfigureFieldsFormSchema['fields'][0] = {
-          ...structuredClone(lastActiveField),
-          formId: nanoid(12),
-          id: nanoid(12),
-          signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
-          recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
+        setFieldClipboard(lastActiveField);
 
-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
       }
     },
     [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
@@ -229,8 +240,8 @@ export const ConfigureFieldsView = ({
 
         append({
           ...copiedField,
+          nativeId: undefined,
           formId: nanoid(12),
-          id: nanoid(12),
           signerEmail: selectedRecipient?.email ?? copiedField.signerEmail,
           recipientId: selectedRecipient?.id ?? copiedField.recipientId,
           pageX: copiedField.pageX + 3,
@@ -303,7 +314,6 @@ export const ConfigureFieldsView = ({
       pageY -= fieldPageHeight / 2;
 
       const field = {
-        id: nanoid(12),
         formId: nanoid(12),
         type: selectedField,
         pageNumber,
@@ -526,9 +536,9 @@ export const ConfigureFieldsView = ({
             )}
 
             <Form {...form}>
-              {documentData && (
+              {normalizedDocumentData && (
                 <div>
-                  <PDFViewer documentData={documentData} />
+                  <PDFViewer documentData={normalizedDocumentData} />
 
                   <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                     {localFields.map((field, index) => {
@@ -548,6 +558,7 @@ export const ConfigureFieldsView = ({
                           onMove={(node) => onFieldMove(node, index)}
                           onRemove={() => remove(index)}
                           onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                           onFocus={() => setLastActiveField(field)}
                           onBlur={() => setLastActiveField(null)}
                           onAdvancedSettings={() => {

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

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

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

@@ -1,6 +1,5 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import type { FieldType } from '@prisma/client';
 
 import { type TFieldMetaSchema as FieldMeta } from '@documenso/lib/types/field-meta';
 import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
@@ -8,35 +7,13 @@ import { FieldAdvancedSettings } from '@documenso/ui/primitives/document-flow/fi
 import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
 
+import type { TConfigureFieldsFormSchemaField } from './configure-fields-view.types';
+
 export type FieldAdvancedSettingsDrawerProps = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  currentField: {
-    id: string;
-    formId: string;
-    type: FieldType;
-    pageNumber: number;
-    pageX: number;
-    pageY: number;
-    pageWidth: number;
-    pageHeight: number;
-    recipientId: number;
-    signerEmail: string;
-    fieldMeta?: FieldMeta;
-  } | null;
-  fields: Array<{
-    id: string;
-    formId: string;
-    type: FieldType;
-    pageNumber: number;
-    pageX: number;
-    pageY: number;
-    pageWidth: number;
-    pageHeight: number;
-    recipientId: number;
-    signerEmail: string;
-    fieldMeta?: FieldMeta;
-  }>;
+  currentField: TConfigureFieldsFormSchemaField | null;
+  fields: TConfigureFieldsFormSchemaField[];
   onFieldUpdate: (formId: string, fieldMeta: FieldMeta) => void;
 };
 

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
@@ -6,9 +6,9 @@ import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { AppError } from '@documenso/lib/errors/app-error';
 import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DialogFooter } from '@documenso/ui/primitives/dialog';
 import {
@@ -20,6 +20,8 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 
@@ -51,6 +53,7 @@ export const DocumentSigningAuth2FA = ({
 }: DocumentSigningAuth2FAProps) => {
   const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
     useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();
 
   const form = useForm<T2FAAuthFormSchema>({
     resolver: zodResolver(Z2FAAuthFormSchema),
@@ -60,27 +63,104 @@ export const DocumentSigningAuth2FA = ({
   });
 
   const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
-  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+  const [isEmailCodeSent, setIsEmailCodeSent] = useState(false);
+  const [isEmailCodeSending, setIsEmailCodeSending] = useState(false);
+  const [canResendEmail, setCanResendEmail] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(0);
+  const countdownTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [verificationMethod, setVerificationMethod] = useState<'app' | 'email'>(
+    user?.twoFactorEnabled ? 'app' : 'email',
+  );
+  const emailSendInitiatedRef = useRef(false);
+
+  const sendVerificationMutation = trpc.auth.sendEmailVerification.useMutation({
+    onSuccess: () => {
+      setIsEmailCodeSent(true);
+      setCanResendEmail(false);
+      setResendCountdown(60);
+
+      countdownTimerRef.current = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            if (countdownTimerRef.current) {
+              clearInterval(countdownTimerRef.current);
+            }
+            setCanResendEmail(true);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      toast({
+        title: 'Verification code sent',
+        description: `A verification code has been sent to ${recipient.email}`,
+      });
+    },
+    onError: (error) => {
+      console.error('Failed to send verification code', error);
+      toast({
+        title: 'Failed to send verification code',
+        description: 'Please try again or contact support',
+        variant: 'destructive',
+      });
+    },
+    onSettled: () => {
+      setIsEmailCodeSending(false);
+    },
+  });
+
+  const verifyCodeMutation = trpc.auth.verifyEmailCode.useMutation();
+
+  const sendEmailVerificationCode = async () => {
+    try {
+      setIsEmailCodeSending(true);
+      await sendVerificationMutation.mutateAsync({
+        recipientId: recipient.id,
+      });
+    } catch (error) {
+      toast({
+        title: 'Failed to send verification code',
+        description: 'Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (countdownTimerRef.current) {
+        clearInterval(countdownTimerRef.current);
+      }
+    };
+  }, []);
 
   const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
     try {
       setIsCurrentlyAuthenticating(true);
 
+      if (verificationMethod === 'email') {
+        await verifyCodeMutation.mutateAsync({
+          code: token,
+          recipientId: recipient.id,
+        });
+      }
+
       await onReauthFormSubmit({
         type: DocumentAuth.TWO_FACTOR_AUTH,
         token,
       });
 
       setIsCurrentlyAuthenticating(false);
-
       onOpenChange(false);
     } catch (err) {
       setIsCurrentlyAuthenticating(false);
 
-      const error = AppError.parseError(err);
-      setFormErrorCode(error.code);
-
-      // Todo: Alert.
+      toast({
+        title: 'Unauthorized',
+        description: 'We were unable to verify your details.',
+        variant: 'destructive',
+      });
     }
   };
 
@@ -90,21 +170,47 @@ export const DocumentSigningAuth2FA = ({
     });
 
     setIs2FASetupSuccessful(false);
-    setFormErrorCode(null);
+    setIsEmailCodeSent(false);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+    if (open && !user?.twoFactorEnabled) {
+      setVerificationMethod('email');
+    }
+  }, [open, user?.twoFactorEnabled, form]);
 
-  if (!user?.twoFactorEnabled && !is2FASetupSuccessful) {
+  useEffect(() => {
+    if (!open || verificationMethod !== 'email') {
+      emailSendInitiatedRef.current = false;
+    }
+  }, [open, verificationMethod]);
+
+  useEffect(() => {
+    if (open && verificationMethod === 'email' && !isEmailCodeSent && !isEmailCodeSending) {
+      if (!emailSendInitiatedRef.current) {
+        emailSendInitiatedRef.current = true;
+        void sendEmailVerificationCode();
+      }
+    }
+  }, [open, verificationMethod, isEmailCodeSent, isEmailCodeSending]);
+
+  if (verificationMethod === 'app' && !user?.twoFactorEnabled && !is2FASetupSuccessful) {
     return (
       <div className="space-y-4">
+        <Tabs
+          value={verificationMethod}
+          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="app">Authenticator App</TabsTrigger>
+            <TabsTrigger value="email">Email Verification</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
         <Alert variant="warning">
           <AlertDescription>
             <p>
               {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
                 <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
               ) : (
-                // Todo: Translate
                 `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
               )}
             </p>
@@ -129,59 +235,106 @@ export const DocumentSigningAuth2FA = ({
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={isCurrentlyAuthenticating}>
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="token"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>2FA token</FormLabel>
+    <div className="space-y-4">
+      {user?.twoFactorEnabled && (
+        <Tabs
+          value={verificationMethod}
+          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="app">Authenticator App</TabsTrigger>
+            <TabsTrigger value="email">Email Verification</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      )}
 
-                  <FormControl>
-                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
-                      {Array(6)
-                        .fill(null)
-                        .map((_, i) => (
-                          <PinInputGroup key={i}>
-                            <PinInputSlot index={i} />
-                          </PinInputGroup>
-                        ))}
-                    </PinInput>
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {formErrorCode && (
-              <Alert variant="destructive">
-                <AlertTitle>
-                  <Trans>Unauthorized</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>
-                    We were unable to verify your details. Please try again or contact support
-                  </Trans>
-                </AlertDescription>
-              </Alert>
+      {verificationMethod === 'email' && (
+        <Alert variant="secondary">
+          <AlertDescription>
+            {isEmailCodeSent ? (
+              <p>
+                <Trans>
+                  A verification code has been sent to {recipient.email}. Please enter it below to
+                  continue.
+                </Trans>
+              </p>
+            ) : (
+              <p>
+                <Trans>
+                  We'll send a verification code to {recipient.email} to verify your identity.
+                </Trans>
+              </p>
             )}
+          </AlertDescription>
+        </Alert>
+      )}
 
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <fieldset disabled={isCurrentlyAuthenticating}>
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      {verificationMethod === 'app' ? (
+                        <Trans>2FA token</Trans>
+                      ) : (
+                        <Trans>Verification code</Trans>
+                      )}
+                    </FormLabel>
 
-              <Button type="submit" loading={isCurrentlyAuthenticating}>
-                <Trans>Sign</Trans>
-              </Button>
-            </DialogFooter>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
+                    <FormControl>
+                      <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                        {Array(6)
+                          .fill(null)
+                          .map((_, i) => (
+                            <PinInputGroup key={i}>
+                              <PinInputSlot index={i} />
+                            </PinInputGroup>
+                          ))}
+                      </PinInput>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {verificationMethod === 'email' && (
+                <div className="flex justify-center">
+                  <Button
+                    type="button"
+                    variant="link"
+                    disabled={isEmailCodeSending || !canResendEmail}
+                    onClick={() => void sendEmailVerificationCode()}
+                  >
+                    {isEmailCodeSending ? (
+                      <Trans>Sending...</Trans>
+                    ) : !canResendEmail ? (
+                      <Trans>Resend code ({resendCountdown}s)</Trans>
+                    ) : (
+                      <Trans>Resend code</Trans>
+                    )}
+                  </Button>
+                </div>
+              )}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={isCurrentlyAuthenticating}>
+                  <Trans>{actionTarget === 'DOCUMENT' ? 'Sign Document' : 'Sign Field'}</Trans>
+                </Button>
+              </DialogFooter>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
   );
 };

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

@@ -27,7 +27,6 @@ export type DocumentSigningAuthDialogProps = {
   actionTarget: FieldType | 'DOCUMENT';
   open: boolean;
   onOpenChange: (value: boolean) => void;
-
   /**
    * The callback to run when the reauth form is filled out.
    */
@@ -38,6 +37,7 @@ export const DocumentSigningAuthDialog = ({
   title,
   description,
   documentAuthType,
+  actionTarget,
   open,
   onOpenChange,
   onReauthFormSubmit,
@@ -56,10 +56,22 @@ export const DocumentSigningAuthDialog = ({
     <Dialog open={open} onOpenChange={handleOnOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{title || <Trans>Sign field</Trans>}</DialogTitle>
+          <DialogTitle>
+            {title ||
+              (actionTarget === 'DOCUMENT' ? (
+                <Trans>Sign document</Trans>
+              ) : (
+                <Trans>Sign field</Trans>
+              ))}
+          </DialogTitle>
 
           <DialogDescription>
-            {description || <Trans>Reauthentication is required to sign this field</Trans>}
+            {description || (
+              <Trans>
+                Reauthentication is required to sign this{' '}
+                {actionTarget === 'DOCUMENT' ? 'document' : 'field'}
+              </Trans>
+            )}
           </DialogDescription>
         </DialogHeader>
 
@@ -78,6 +90,7 @@ export const DocumentSigningAuthDialog = ({
           ))
           .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
             <DocumentSigningAuth2FA
+              actionTarget={actionTarget === 'DOCUMENT' ? 'DOCUMENT' : 'FIELD'}
               open={open}
               onOpenChange={onOpenChange}
               onReauthFormSubmit={onReauthFormSubmit}

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

@@ -43,6 +43,7 @@ export type DocumentSigningAuthContextValue = {
   setPreferredPasskeyId: (_value: string | null) => void;
   user?: SessionUser | null;
   refetchPasskeys: () => Promise<void>;
+  isEnterprise: boolean;
 };
 
 const DocumentSigningAuthContext = createContext<DocumentSigningAuthContextValue | null>(null);
@@ -66,6 +67,7 @@ export interface DocumentSigningAuthProviderProps {
   recipient: Recipient;
   user?: SessionUser | null;
   children: React.ReactNode;
+  isEnterprise: boolean;
 }
 
 export const DocumentSigningAuthProvider = ({
@@ -73,6 +75,7 @@ export const DocumentSigningAuthProvider = ({
   recipient: initialRecipient,
   user,
   children,
+  isEnterprise,
 }: DocumentSigningAuthProviderProps) => {
   const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
   const [recipient, setRecipient] = useState(initialRecipient);
@@ -138,8 +141,13 @@ export const DocumentSigningAuthProvider = ({
     .exhaustive();
 
   const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
-    // Directly run callback if no auth required.
-    if (!derivedRecipientActionAuth || options.actionTarget !== FieldType.SIGNATURE) {
+    // Determine if authentication is required based on enterprise status and action target.
+    const requiresAuthTrigger = isEnterprise
+      ? derivedRecipientActionAuth && options.actionTarget === FieldType.SIGNATURE
+      : derivedRecipientActionAuth && options.actionTarget === 'DOCUMENT';
+
+    // Directly run callback if no auth trigger is needed.
+    if (!requiresAuthTrigger) {
       await options.onReauthFormSubmit();
       return;
     }
@@ -198,6 +206,7 @@ export const DocumentSigningAuthProvider = ({
         preferredPasskeyId,
         setPreferredPasskeyId,
         refetchPasskeys,
+        isEnterprise,
       }}
     >
       {children}
@@ -218,6 +227,8 @@ export const DocumentSigningAuthProvider = ({
 type ExecuteActionAuthProcedureOptions = Omit<
   DocumentSigningAuthDialogProps,
   'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole'
->;
+> & {
+  actionTarget: FieldType | 'DOCUMENT';
+};
 
 DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';

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

@@ -166,7 +166,7 @@ export const DocumentSigningFieldContainer = ({
             </TooltipTrigger>
 
             <TooltipContent
-              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
+              className="border-0 bg-orange-300 fill-orange-300 text-orange-900"
               sideOffset={2}
             >
               {tooltipText && <p>{tooltipText}</p>}

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

@@ -28,6 +28,7 @@ import {
   AssistantConfirmationDialog,
   type NextSigner,
 } from '../../dialogs/assistant-confirmation-dialog';
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
@@ -39,6 +40,7 @@ export type DocumentSigningFormProps = {
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
   setSelectedSignerId?: (id: number | null) => void;
+  isEnterprise: boolean;
 };
 
 export const DocumentSigningForm = ({
@@ -49,6 +51,7 @@ export const DocumentSigningForm = ({
   isRecipientsTurn,
   allRecipients = [],
   setSelectedSignerId,
+  isEnterprise,
 }: DocumentSigningFormProps) => {
   const { sessionData } = useOptionalSession();
   const user = sessionData?.user;
@@ -62,6 +65,7 @@ export const DocumentSigningForm = ({
   const assistantSignersId = useId();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
@@ -114,11 +118,16 @@ export const DocumentSigningForm = ({
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument(undefined, nextSigner);
+      await executeActionAuthProcedure({
+        actionTarget: 'DOCUMENT',
+        onReauthFormSubmit: async (authOptions) => {
+          await completeDocument(authOptions, nextSigner);
+        },
+      });
     } catch (err) {
       toast({
-        title: 'Error',
-        description: 'An error occurred while completing the document. Please try again.',
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while completing the document. Please try again.`),
         variant: 'destructive',
       });
 
@@ -229,7 +238,12 @@ export const DocumentSigningForm = ({
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
+                      await executeActionAuthProcedure({
+                        actionTarget: 'DOCUMENT',
+                        onReauthFormSubmit: async (authOptions) => {
+                          await completeDocument(authOptions, nextSigner);
+                        },
+                      });
                     }}
                     role={recipient.role}
                     allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
@@ -409,7 +423,12 @@ export const DocumentSigningForm = ({
                     fieldsValidated={fieldsValidated}
                     disabled={!isRecipientsTurn}
                     onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
+                      await executeActionAuthProcedure({
+                        actionTarget: 'DOCUMENT',
+                        onReauthFormSubmit: async (authOptions) => {
+                          await completeDocument(authOptions, nextSigner);
+                        },
+                      });
                     }}
                     role={recipient.role}
                     allowDictateNextSigner={

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

@@ -47,6 +47,7 @@ export type DocumentSigningPageViewProps = {
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
+  isEnterprise: boolean;
 };
 
 export const DocumentSigningPageView = ({
@@ -56,6 +57,7 @@ export const DocumentSigningPageView = ({
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
+  isEnterprise,
 }: DocumentSigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
@@ -153,6 +155,7 @@ export const DocumentSigningPageView = ({
               isRecipientsTurn={isRecipientsTurn}
               allRecipients={allRecipients}
               setSelectedSignerId={setSelectedSignerId}
+              isEnterprise={isEnterprise}
             />
           </div>
         </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -152,7 +152,7 @@ export const TemplateEditForm = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while updating the document settings.`),
+        description: _(msg`An error occurred while updating the template settings.`),
         variant: 'destructive',
       });
     }
@@ -208,7 +208,11 @@ export const TemplateEditForm = ({
         duration: 5000,
       });
 
-      await navigate(templateRootPath);
+      const templatePath = template.folderId
+        ? `${templateRootPath}/f/${template.folderId}`
+        : templateRootPath;
+
+      await navigate(templatePath);
     } catch (err) {
       console.error(err);
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -64,6 +64,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  if (document?.folderId) {
+    throw redirect(documentRootPath);
+  }
+
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);

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

@@ -49,6 +49,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  if (document?.folderId) {
+    throw redirect(documentRootPath);
+  }
+
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
@@ -83,7 +87,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   });
 
   return superLoaderJson({
-    document,
+    document: {
+      ...document,
+      folder: null,
+    },
     documentRootPath,
     isDocumentEnterprise,
   });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import DocumentsFoldersPage, { meta } from '~/routes/_authenticated+/documents.folders._index';
+
+export { meta };
+
+export default DocumentsFoldersPage;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import TemplatesPage, { meta } from '~/routes/_authenticated+/templates.f.$folderId._index';
+
+export { meta };
+
+export default TemplatesPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.folders._index.tsx

@@ -0,0 +1,5 @@
+import TemplatesFoldersPage, { meta } from '~/routes/_authenticated+/templates.folders._index';
+
+export { meta };
+
+export default TemplatesFoldersPage;

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

@@ -55,6 +55,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(templateRootPath);
   }
 
+  if (template.folderId) {
+    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
+  }
+
   return superLoaderJson({
     user,
     team,

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

@@ -45,13 +45,20 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(templateRootPath);
   }
 
+  if (template.folderId) {
+    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
+  }
+
   const isTemplateEnterprise = await isUserEnterprise({
     userId: user.id,
     teamId: team?.id,
   });
 
   return superLoaderJson({
-    template,
+    template: {
+      ...template,
+      folder: null,
+    },
     isTemplateEnterprise,
     templateRootPath,
   });
@@ -65,7 +72,11 @@ export default function TemplateEditPage() {
       <div className="flex flex-col justify-between sm:flex-row">
         <div>
           <Link
-            to={`${templateRootPath}/${template.id}`}
+            to={
+              template.folderId
+                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
+                : `${templateRootPath}/${template.id}`
+            }
             className="flex items-center text-[#7AC455] hover:opacity-80"
           >
             <ChevronLeft className="mr-2 inline-block h-5 w-5" />

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

@@ -1,15 +1,23 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Bird } from 'lucide-react';
-import { useSearchParams } from 'react-router';
+import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useSearchParams } from 'react-router';
 
+import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
+import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
+import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -19,10 +27,21 @@ export function meta() {
 }
 
 export default function TemplatesPage() {
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
   const team = useOptionalCurrentTeam();
 
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
@@ -34,19 +53,165 @@ export default function TemplatesPage() {
     perPage: perPage,
   });
 
-  // Refetch the templates when the team URL changes.
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.TEMPLATE,
+    parentId: null,
+  });
+
   useEffect(() => {
     void refetch();
+    void refetchFolders();
   }, [team?.url]);
 
+  const navigateToFolder = (folderId?: string | null) => {
+    const templatesPath = formatTemplatesPath(team?.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  const handleNavigate = (folderId: string) => {
+    navigateToFolder(folderId);
+  };
+
+  const handleMove = (folder: TFolderWithSubfolders) => {
+    setFolderToMove(folder);
+    setIsMovingFolder(true);
+  };
+
+  const handlePin = (folderId: string) => {
+    void pinFolder({ folderId });
+  };
+
+  const handleUnpin = (folderId: string) => {
+    void unpinFolder({ folderId });
+  };
+
+  const handleSettings = (folder: TFolderWithSubfolders) => {
+    setFolderToSettings(folder);
+    setIsSettingsFolderOpen(true);
+  };
+
+  const handleDelete = (folder: TFolderWithSubfolders) => {
+    setFolderToDelete(folder);
+    setIsDeletingFolder(true);
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatTemplatesPath(team?.url)}/folders`);
+  };
+
   return (
     <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-baseline justify-between">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateCreateDialog templateRootPath={templateRootPath} />
+          <TemplateFolderCreateDialog />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={handleNavigate}
+                      onMove={handleMove}
+                      onPin={handlePin}
+                      onUnpin={handleUnpin}
+                      onSettings={handleSettings}
+                      onDelete={handleDelete}
+                    />
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+              {foldersData?.folders
+                ?.filter((folder) => !folder.pinned)
+                .slice(0, 12)
+                .map((folder) => (
+                  <FolderCard
+                    key={folder.id}
+                    folder={folder}
+                    onNavigate={handleNavigate}
+                    onMove={handleMove}
+                    onPin={handlePin}
+                    onUnpin={handleUnpin}
+                    onSettings={handleSettings}
+                    onDelete={handleDelete}
+                  />
+                ))}
+            </div>
+
+            <div className="mt-6 flex items-center justify-center">
+              {foldersData && foldersData.folders?.length > 12 && (
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-muted-foreground hover:text-foreground"
+                  onClick={() => void handleViewAllFolders()}
+                >
+                  View all folders
+                </Button>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="mt-12">
         <div className="flex flex-row items-center">
           {team && (
             <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
               {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-xs text-gray-400">
+              <AvatarFallback className="text-muted-foreground text-xs">
                 {team.name.slice(0, 1)}
               </AvatarFallback>
             </Avatar>
@@ -57,38 +222,71 @@ export default function TemplatesPage() {
           </h1>
         </div>
 
-        <div>
-          <TemplateCreateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        <div className="mt-8">
+          {data && data.count === 0 ? (
+            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+              <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+              <div className="text-center">
+                <h3 className="text-lg font-semibold">
+                  <Trans>We're all empty</Trans>
+                </h3>
+
+                <p className="mt-2 max-w-[50ch]">
+                  <Trans>
+                    You have not yet created any templates. To create a template please upload one.
+                  </Trans>
+                </p>
+              </div>
+            </div>
+          ) : (
+            <TemplatesTable
+              data={data}
+              isLoading={isLoading}
+              isLoadingError={isLoadingError}
+              documentRootPath={documentRootPath}
+              templateRootPath={templateRootPath}
+            />
+          )}
         </div>
       </div>
 
-      <div className="relative mt-5">
-        {data && data.count === 0 ? (
-          <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
-            <Bird className="h-12 w-12" strokeWidth={1.5} />
+      <TemplateFolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
 
-            <div className="text-center">
-              <h3 className="text-lg font-semibold">
-                <Trans>We're all empty</Trans>
-              </h3>
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
 
-              <p className="mt-2 max-w-[50ch]">
-                <Trans>
-                  You have not yet created any templates. To create a template please upload one.
-                </Trans>
-              </p>
-            </div>
-          </div>
-        ) : (
-          <TemplatesTable
-            data={data}
-            isLoading={isLoading}
-            isLoadingError={isLoadingError}
-            documentRootPath={documentRootPath}
-            templateRootPath={templateRootPath}
-          />
-        )}
-      </div>
+      <TemplateFolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <TemplateFolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,230 @@
+import { Trans } from '@lingui/react/macro';
+import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
+import { ChevronLeft, LucideEdit } from 'lucide-react';
+import { Link, redirect, useNavigate } from 'react-router';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+
+import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
+import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
+import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
+import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
+import { TemplatePageViewRecentActivity } from '~/components/general/template/template-page-view-recent-activity';
+import { TemplatePageViewRecipients } from '~/components/general/template/template-page-view-recipients';
+import { TemplateType } from '~/components/general/template/template-type';
+import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/templates.$id._index';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  let team: TGetTeamByUrlResponse | null = null;
+
+  if (params.teamUrl) {
+    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+  }
+
+  const { id, folderId } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+    folderId,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
+    throw redirect(folderId ? `${templateRootPath}/f/${folderId}` : templateRootPath);
+  }
+
+  if (!template.folderId) {
+    throw redirect(`${templateRootPath}/${templateId}`);
+  }
+
+  if (template.folderId !== folderId) {
+    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
+  }
+
+  return superLoaderJson({
+    user,
+    team,
+    template,
+    templateRootPath,
+    documentRootPath,
+  });
+}
+
+export default function TemplatePage() {
+  const { user, team, template, templateRootPath, documentRootPath } =
+    useSuperLoaderData<typeof loader>();
+
+  const { templateDocumentData, fields, recipients, templateMeta } = template;
+
+  const navigate = useNavigate();
+
+  // Remap to fit the DocumentReadOnlyFields component.
+  const readOnlyFields = fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      name: '',
+      email: '',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return {
+      ...field,
+      recipient,
+      signature: null,
+    };
+  });
+
+  const mockedDocumentMeta = templateMeta
+    ? {
+        ...templateMeta,
+        signingOrder: templateMeta.signingOrder || DocumentSigningOrder.SEQUENTIAL,
+        documentId: 0,
+      }
+    : undefined;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link to={templateRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Templates</Trans>
+      </Link>
+
+      <div className="flex flex-row justify-between truncate">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 flex flex-row space-x-4 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+
+          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
+
+          <Button className="w-full" asChild>
+            <Link to={`${templateRootPath}/${template.id}/edit`}>
+              <LucideEdit className="mr-1.5 h-3.5 w-3.5" />
+              <Trans>Edit Template</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
+          </CardContent>
+        </Card>
+
+        <DocumentReadOnlyFields
+          fields={readOnlyFields}
+          showFieldStatus={false}
+          documentMeta={mockedDocumentMeta}
+        />
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  <Trans>Template</Trans>
+                </h3>
+
+                <div>
+                  <TemplatesTableActionDropdown
+                    row={template}
+                    teamId={team?.id}
+                    templateRootPath={templateRootPath}
+                    onDelete={async () => navigate(templateRootPath)}
+                    onMove={async ({ teamUrl, templateId }) =>
+                      navigate(`${formatTemplatesPath(teamUrl)}/${templateId}`)
+                    }
+                  />
+                </div>
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm">
+                <Trans>Manage and view template</Trans>
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <TemplateUseDialog
+                  templateId={template.id}
+                  templateSigningOrder={template.templateMeta?.signingOrder}
+                  recipients={template.recipients}
+                  documentRootPath={documentRootPath}
+                  trigger={
+                    <Button className="w-full">
+                      <Trans>Use</Trans>
+                    </Button>
+                  }
+                />
+              </div>
+            </section>
+
+            {/* Template information section. */}
+            <TemplatePageViewInformation template={template} userId={user.id} />
+
+            {/* Recipients section. */}
+            <TemplatePageViewRecipients template={template} templateRootPath={templateRootPath} />
+
+            {/* Recent activity section. */}
+            <TemplatePageViewRecentActivity
+              documentRootPath={documentRootPath}
+              templateId={template.id}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16" id="documents">
+        <h1 className="mb-4 text-2xl font-bold">
+          <Trans>Documents created from template</Trans>
+        </h1>
+
+        <TemplatePageViewDocumentsTable templateId={template.id} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplateEditForm } from '~/components/general/template/template-edit-form';
+import { TemplateType } from '~/components/general/template/template-type';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import { TemplateDirectLinkDialogWrapper } from '../../components/dialogs/template-direct-link-dialog-wrapper';
+import type { Route } from './+types/templates.$id.edit';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  let team: TGetTeamByUrlResponse | null = null;
+
+  if (params.teamUrl) {
+    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+  }
+
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    throw redirect(templateRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    throw redirect(templateRootPath);
+  }
+
+  if (!template.folderId) {
+    throw redirect(`${templateRootPath}/${templateId}/edit`);
+  }
+
+  if (template.folderId !== params.folderId) {
+    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
+  }
+
+  const isTemplateEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  return superLoaderJson({
+    template: {
+      ...template,
+      folder: null,
+    },
+    isTemplateEnterprise,
+    templateRootPath,
+  });
+}
+
+export default function TemplateEditPage() {
+  const { template, isTemplateEnterprise, templateRootPath } = useSuperLoaderData<typeof loader>();
+
+  return (
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link
+            to={
+              template.folderId
+                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
+                : `${templateRootPath}/${template.id}`
+            }
+            className="flex items-center text-[#7AC455] hover:opacity-80"
+          >
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            <Trans>Template</Trans>
+          </Link>
+
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
+      </div>
+
+      <TemplateEditForm
+        className="mt-6"
+        initialTemplate={template}
+        templateRootPath={templateRootPath}
+        isEnterprise={isTemplateEnterprise}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,369 @@
+import { useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
+
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesPage() {
+  const [searchParams] = useSearchParams();
+  const { folderId } = useParams();
+  const navigate = useNavigate();
+
+  const team = useOptionalCurrentTeam();
+
+  const page = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+    folderId: folderId,
+  });
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+    type: FolderType.TEMPLATE,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
+  const navigateToFolder = (folderId?: string) => {
+    const templatesPath = formatTemplatesPath(team?.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder()}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateFolderCreateDialog />
+          <TemplateCreateDialog templateRootPath={templateRootPath} folderId={folderId} />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <div
+                      key={folder.id}
+                      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                    >
+                      <div className="flex items-start justify-between">
+                        <button
+                          className="flex items-center space-x-2 text-left"
+                          onClick={() => navigateToFolder(folder.id)}
+                        >
+                          <FolderIcon className="text-documenso h-6 w-6" />
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <h3 className="font-medium">{folder.name}</h3>
+                              <PinIcon className="text-documenso h-3 w-3" />
+                            </div>
+                            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                              <span>{folder._count.templates || 0} templates</span>
+                              <span>•</span>
+                              <span>{folder._count.subfolders} folders</span>
+                            </div>
+                          </div>
+                        </button>
+
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="opacity-0 group-hover:opacity-100"
+                            >
+                              •••
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToMove(folder);
+                                setIsMovingFolder(true);
+                              }}
+                            >
+                              Move
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                void unpinFolder({ folderId: folder.id });
+                              }}
+                            >
+                              Unpin
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToSettings(folder);
+                                setIsSettingsFolderOpen(true);
+                              }}
+                            >
+                              Settings
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              className="text-red-500"
+                              onClick={() => {
+                                setFolderToDelete(folder);
+                                setIsDeletingFolder(true);
+                              }}
+                            >
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {foldersData?.folders
+              .filter((folder) => !folder.pinned)
+              .map((folder) => (
+                <div
+                  key={folder.id}
+                  className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                >
+                  <div className="flex items-start justify-between">
+                    <button
+                      className="flex items-center space-x-2 text-left"
+                      onClick={() => navigateToFolder(folder.id)}
+                    >
+                      <FolderIcon className="text-documenso h-6 w-6" />
+                      <div>
+                        <h3 className="font-medium">{folder.name}</h3>
+                        <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                          <span>{folder._count.templates || 0} templates</span>
+                          <span>•</span>
+                          <span>{folder._count.subfolders} folders</span>
+                        </div>
+                      </div>
+                    </button>
+
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="opacity-0 group-hover:opacity-100"
+                        >
+                          •••
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToMove(folder);
+                            setIsMovingFolder(true);
+                          }}
+                        >
+                          Move
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            void pinFolder({ folderId: folder.id });
+                          }}
+                        >
+                          Pin
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToSettings(folder);
+                            setIsSettingsFolderOpen(true);
+                          }}
+                        >
+                          Settings
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-red-500"
+                          onClick={() => {
+                            setFolderToDelete(folder);
+                            setIsDeletingFolder(true);
+                          }}
+                        >
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </>
+      )}
+
+      <div className="relative mt-12">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div className="mt-8">
+          {data && data.count === 0 ? (
+            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+              <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+              <div className="text-center">
+                <h3 className="text-lg font-semibold">
+                  <Trans>We're all empty</Trans>
+                </h3>
+
+                <p className="mt-2 max-w-[50ch]">
+                  <Trans>
+                    You have not yet created any templates. To create a template please upload one.
+                  </Trans>
+                </p>
+              </div>
+            </div>
+          ) : (
+            <TemplatesTable
+              data={data}
+              isLoading={isLoading}
+              isLoadingError={isLoadingError}
+              documentRootPath={documentRootPath}
+              templateRootPath={templateRootPath}
+            />
+          )}
+        </div>
+      </div>
+
+      <FolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

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

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -5,8 +5,10 @@ import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
+import { renderSVG } from 'uqr';
 
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
@@ -15,6 +17,7 @@ import {
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getTranslations } from '@documenso/lib/utils/i18n';
@@ -60,6 +63,10 @@ export async function loader({ request }: Route.LoaderArgs) {
     throw redirect('/');
   }
 
+  const team = document.teamId
+    ? await getTeamById({ teamId: document.teamId, userId: document.userId })
+    : null;
+
   const isPlatformDocument = await isDocumentPlatform(document);
 
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
@@ -72,6 +79,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 
   return {
     document,
+    team,
     documentLanguage,
     isPlatformDocument,
     auditLogs,
@@ -89,7 +97,7 @@ export async function loader({ request }: Route.LoaderArgs) {
  * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
-  const { document, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
+  const { document, team, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
 
   const { i18n, _ } = useLingui();
 
@@ -341,8 +349,19 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      {isPlatformDocument && (
-        <div className="my-8 flex-row-reverse">
+      {!isPlatformDocument && !team?.teamGlobalSettings?.brandingHidePoweredBy && (
+        <div className="my-8 flex-row-reverse space-y-4">
+          <div className="flex items-end justify-end gap-x-4">
+            <div
+              className="flex h-24 w-24 justify-center"
+              dangerouslySetInnerHTML={{
+                __html: renderSVG(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${document.qrToken}`, {
+                  ecc: 'Q',
+                }),
+              }}
+            />
+          </div>
+
           <div className="flex items-end justify-end gap-x-4">
             <p className="flex-shrink-0 text-sm font-medium print:text-xs">
               {_(msg`Signing certificate provided by`)}:

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -60,7 +60,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return superLoaderJson({
     isAccessAuthValid: true,
-    template,
+    template: {
+      ...template,
+      folder: null,
+    },
     directTemplateRecipient,
   } as const);
 }
@@ -91,6 +94,7 @@ export default function DirectTemplatePage() {
         documentAuthOptions={template.authOptions}
         recipient={directTemplateRecipient}
         user={user}
+        isEnterprise={false}
       >
         <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
           <h1

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -6,6 +6,7 @@ import { getOptionalLoaderContext } from 'server/utils/get-loader-session';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
@@ -60,6 +61,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw new Response('Not Found', { status: 404 });
   }
 
+  const isEnterprise = user?.id
+    ? await isUserEnterprise({ userId: user.id }).catch(() => false)
+    : false;
+
   const recipientWithFields = { ...recipient, fields };
 
   const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
@@ -115,6 +120,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
       isDocumentAccessValid: false,
       recipientEmail: recipient.email,
       recipientHasAccount,
+      isEnterprise,
     } as const);
   }
 
@@ -149,6 +155,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     completedFields,
     recipientSignature,
     isRecipientsTurn,
+    isEnterprise,
   } as const);
 }
 
@@ -176,6 +183,7 @@ export default function SigningPage() {
     isRecipientsTurn,
     allRecipients,
     recipientWithFields,
+    isEnterprise,
   } = data;
 
   if (document.deletedAt || document.status === DocumentStatus.REJECTED) {
@@ -241,6 +249,7 @@ export default function SigningPage() {
         documentAuthOptions={document.authOptions}
         recipient={recipient}
         user={user}
+        isEnterprise={isEnterprise}
       >
         <DocumentSigningPageView
           recipient={recipientWithFields}
@@ -249,6 +258,7 @@ export default function SigningPage() {
           completedFields={completedFields}
           isRecipientsTurn={isRecipientsTurn}
           allRecipients={allRecipients}
+          isEnterprise={isEnterprise}
         />
       </DocumentSigningAuthProvider>
     </DocumentSigningProvider>

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -119,7 +119,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
   return (
     <div
       className={cn(
-        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
         { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
       )}
     >

apps/remix/app/routes/_share+/_layout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router';
+
+export default function Layout() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative w-full">
+        <Outlet />
+      </div>
+    </main>
+  );
+}

apps/remix/app/routes/_share+/share.$slug.opengraph.tsx

@@ -22,6 +22,11 @@ const IMAGE_SIZE = {
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { slug } = params;
 
+  // QR codes are not supported for OpenGraph images
+  if (slug.startsWith('qr_')) {
+    return new Response('Not found', { status: 404 });
+  }
+
   const baseUrl = NEXT_PUBLIC_WEBAPP_URL();
 
   const [interSemiBold, interRegular, caveatRegular] = await Promise.all([

apps/remix/app/routes/_share+/share.$slug.tsx

@@ -1,10 +1,17 @@
-import { redirect } from 'react-router';
+import { redirect, useLoaderData } from 'react-router';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getDocumentByAccessToken } from '@documenso/lib/server-only/document/get-document-by-access-token';
+
+import { DocumentCertificateQRView } from '~/components/general/document/document-certificate-qr-view';
 
 import type { Route } from './+types/share.$slug';
 
 export function meta({ params: { slug } }: Route.MetaArgs) {
+  if (slug.startsWith('qr_')) {
+    return undefined;
+  }
+
   return [
     { title: 'Documenso - Share' },
     { description: 'I just signed a document in style with Documenso!' },
@@ -43,11 +50,23 @@ export function meta({ params: { slug } }: Route.MetaArgs) {
   ];
 }
 
-export const loader = ({ request }: Route.LoaderArgs) => {
+export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) => {
+  if (slug.startsWith('qr_')) {
+    const document = await getDocumentByAccessToken({ token: slug });
+
+    if (!document) {
+      throw redirect('/');
+    }
+
+    return {
+      document,
+    };
+  }
+
   const userAgent = request.headers.get('User-Agent') ?? '';
 
   if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
-    return null;
+    return {};
   }
 
   // Is hardcoded because this whole meta is hardcoded anyway for Documenso.
@@ -55,5 +74,20 @@ export const loader = ({ request }: Route.LoaderArgs) => {
 };
 
 export default function SharePage() {
+  const { document } = useLoaderData<typeof loader>();
+
+  if (document) {
+    return (
+      <DocumentCertificateQRView
+        documentId={document.id}
+        title={document.title}
+        documentData={document.documentData}
+        password={document.documentMeta?.password}
+        recipientCount={document.recipients?.length ?? 0}
+        completedDate={document.completedAt ?? undefined}
+      />
+    );
+  }
+
   return <div></div>;
 }

apps/remix/app/routes/api+/branding.logo.team.$teamId.ts

@@ -1,6 +1,6 @@
 import sharp from 'sharp';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
 import { prisma } from '@documenso/prisma';
 
 import type { Route } from './+types/branding.logo.team.$teamId';
@@ -24,27 +24,29 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  if (!settings || !settings.brandingEnabled) {
+  if (!settings || !settings.brandingLogo) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Logo not found',
       },
       { status: 404 },
     );
   }
 
-  if (!settings.brandingLogo) {
+  if (!settings.brandingEnabled) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Branding is not enabled',
       },
-      { status: 404 },
+      { status: 400 },
     );
   }
 
-  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
+  const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
+    console.error(e);
+  });
 
   if (!file) {
     return Response.json(

apps/remix/app/routes/embed+/_v0+/direct.$url.tsx

@@ -143,6 +143,7 @@ export default function EmbedDirectTemplatePage() {
         documentAuthOptions={template.authOptions}
         recipient={recipient}
         user={user}
+        isEnterprise={isEnterpriseDocument}
       >
         <DocumentSigningRecipientProvider recipient={recipient}>
           <EmbedDirectTemplateClientPage

apps/remix/app/routes/embed+/_v0+/sign.$url.tsx

@@ -168,6 +168,7 @@ export default function EmbedSignDocumentPage() {
         documentAuthOptions={document.authOptions}
         recipient={recipient}
         user={user}
+        isEnterprise={isEnterpriseDocument}
       >
         <EmbedSignDocumentClientPage
           token={token}

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -0,0 +1,102 @@
+import { useLayoutEffect } from 'react';
+
+import { Outlet, useLoaderData } from 'react-router';
+
+import { isCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { TrpcProvider } from '@documenso/trpc/react';
+
+import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
+import { injectCss } from '~/utils/css-vars';
+
+import type { Route } from './+types/_layout';
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const url = new URL(request.url);
+
+  const token = url.searchParams.get('token');
+
+  if (!token) {
+    return {
+      hasValidToken: false,
+      token,
+    };
+  }
+
+  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
+
+  let hasPlatformPlan = false;
+  let hasEnterprisePlan = false;
+  let hasCommunityPlan = false;
+
+  if (result) {
+    [hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan] = await Promise.all([
+      isCommunityPlan({
+        userId: result.userId,
+        teamId: result.teamId ?? undefined,
+      }),
+      isDocumentPlatform({
+        userId: result.userId,
+        teamId: result.teamId,
+      }),
+      isUserEnterprise({
+        userId: result.userId,
+        teamId: result.teamId ?? undefined,
+      }),
+    ]);
+  }
+
+  return {
+    hasValidToken: !!result,
+    token,
+    hasCommunityPlan,
+    hasPlatformPlan,
+    hasEnterprisePlan,
+  };
+};
+
+export default function AuthoringLayout() {
+  const { hasValidToken, token, hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan } =
+    useLoaderData<typeof loader>();
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      const { css, cssVars, darkModeDisabled } = result.data;
+
+      if (darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (hasCommunityPlan || hasPlatformPlan || hasEnterprisePlan) {
+        injectCss({
+          css,
+          cssVars,
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+
+  if (!hasValidToken) {
+    return <div>Invalid embedding presign token provided</div>;
+  }
+
+  return (
+    <TrpcProvider headers={{ authorization: `Bearer ${token}` }}>
+      <Outlet />
+    </TrpcProvider>
+  );
+}

apps/remix/app/routes/embed+/v1+/authoring+/document.create.tsx

@@ -12,10 +12,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
 import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
 import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import {
-  ConfigureFieldsView,
-  type TConfigureFieldsFormSchema,
-} from '~/components/embed/authoring/configure-fields-view';
+import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
+import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
 import {
   type TBaseEmbedAuthoringSchema,
   ZBaseEmbedAuthoringSchema,
@@ -71,6 +69,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
       // Use the externalId from the URL fragment if available
       const documentExternalId = externalId || configuration.meta.externalId;
 
+      const signatureTypes = configuration.meta.signatureTypes ?? [];
+
       const createResult = await createEmbeddingDocument({
         title: configuration.title,
         documentDataId: documentData.id,
@@ -78,14 +78,11 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
         meta: {
           ...configuration.meta,
           drawSignatureEnabled:
-            configuration.meta.signatureTypes.length === 0 ||
-            configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW),
+            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.DRAW),
           typedSignatureEnabled:
-            configuration.meta.signatureTypes.length === 0 ||
-            configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE),
+            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled:
-            configuration.meta.signatureTypes.length === 0 ||
-            configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD),
+            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.UPLOAD),
         },
         recipients: configuration.signers.map((signer) => ({
           name: signer.name,
@@ -126,7 +123,7 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
 
       // Navigate to the completion page instead of the document details page
       await navigate(
-        `/embed/v1/authoring/create-completed?documentId=${createResult.documentId}&externalId=${documentExternalId}#${hash}`,
+        `/embed/v1/authoring/completed/create?documentId=${createResult.documentId}&externalId=${documentExternalId}#${hash}`,
       );
     } catch (err) {
       console.error('Error creating document:', err);

apps/remix/app/routes/embed+/v1+/authoring+/document.edit.$id.tsx

@@ -0,0 +1,314 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentDistributionMethod, DocumentSigningOrder, SigningStatus } from '@prisma/client';
+import { redirect, useLoaderData } from 'react-router';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  isValidDateFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
+import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { nanoid } from '@documenso/lib/universal/id';
+import { trpc } from '@documenso/trpc/react';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
+import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
+import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
+import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
+import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
+import {
+  type TBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringSchema,
+} from '~/types/embed-authoring-base-schema';
+
+import type { Route } from './+types/document.edit.$id';
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { id } = params;
+
+  const url = new URL(request.url);
+
+  // We know that the token is present because we're checking it in the parent _layout route
+  const token = url.searchParams.get('token') || '';
+
+  // We also know that the token is valid, but we need the userId + teamId
+  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
+
+  if (!result) {
+    throw new Error('Invalid token');
+  }
+
+  const documentId = Number(id);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(`/embed/v1/authoring/error/not-found?documentId=${documentId}`);
+  }
+
+  const document = await getDocumentWithDetailsById({
+    documentId,
+    userId: result?.userId,
+    teamId: result?.teamId ?? undefined,
+  }).catch(() => null);
+
+  if (!document) {
+    throw redirect(`/embed/v1/authoring/error/not-found?documentId=${documentId}`);
+  }
+
+  const fields = document.fields.map((field) => ({
+    ...field,
+    positionX: field.positionX.toNumber(),
+    positionY: field.positionY.toNumber(),
+    width: field.width.toNumber(),
+    height: field.height.toNumber(),
+  }));
+
+  return {
+    document: {
+      ...document,
+      fields,
+    },
+  };
+};
+
+export default function EmbeddingAuthoringDocumentEditPage() {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { document } = useLoaderData<typeof loader>();
+
+  const signatureTypes = useMemo(() => {
+    const types: string[] = [];
+
+    if (document.documentMeta?.drawSignatureEnabled) {
+      types.push(DocumentSignatureType.DRAW);
+    }
+
+    if (document.documentMeta?.typedSignatureEnabled) {
+      types.push(DocumentSignatureType.TYPE);
+    }
+
+    if (document.documentMeta?.uploadSignatureEnabled) {
+      types.push(DocumentSignatureType.UPLOAD);
+    }
+
+    return types;
+  }, [document.documentMeta]);
+
+  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(() => ({
+    title: document.title,
+    documentData: undefined,
+    meta: {
+      subject: document.documentMeta?.subject ?? undefined,
+      message: document.documentMeta?.message ?? undefined,
+      distributionMethod:
+        document.documentMeta?.distributionMethod ?? DocumentDistributionMethod.EMAIL,
+      emailSettings: document.documentMeta?.emailSettings ?? ZDocumentEmailSettingsSchema.parse({}),
+      timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+      signingOrder: document.documentMeta?.signingOrder ?? DocumentSigningOrder.PARALLEL,
+      allowDictateNextSigner: document.documentMeta?.allowDictateNextSigner ?? false,
+      language: isValidLanguageCode(document.documentMeta?.language)
+        ? document.documentMeta.language
+        : undefined,
+      signatureTypes: signatureTypes,
+      dateFormat: isValidDateFormat(document.documentMeta?.dateFormat)
+        ? document.documentMeta?.dateFormat
+        : DEFAULT_DOCUMENT_DATE_FORMAT,
+      redirectUrl: document.documentMeta?.redirectUrl ?? undefined,
+    },
+    signers: document.recipients.map((recipient) => ({
+      nativeId: recipient.id,
+      formId: nanoid(8),
+      name: recipient.name,
+      email: recipient.email,
+      role: recipient.role,
+      signingOrder: recipient.signingOrder ?? undefined,
+      disabled: recipient.signingStatus !== SigningStatus.NOT_SIGNED,
+    })),
+  }));
+
+  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(() => ({
+    fields: document.fields.map((field) => ({
+      nativeId: field.id,
+      formId: nanoid(8),
+      type: field.type,
+      signerEmail:
+        document.recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
+      inserted: field.inserted,
+      recipientId: field.recipientId,
+      pageNumber: field.page,
+      pageX: field.positionX,
+      pageY: field.positionY,
+      pageWidth: field.width,
+      pageHeight: field.height,
+      fieldMeta: field.fieldMeta ?? undefined,
+    })),
+  }));
+
+  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
+  const [externalId, setExternalId] = useState<string | null>(null);
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const { mutateAsync: updateEmbeddingDocument } =
+    trpc.embeddingPresign.updateEmbeddingDocument.useMutation();
+
+  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
+    // Store the configuration data and move to the field placement stage
+    setConfiguration(data);
+    setFields((fieldData) => {
+      if (!fieldData) {
+        return fieldData;
+      }
+
+      const signerEmails = data.signers.map((signer) => signer.email);
+
+      return {
+        fields: fieldData.fields.filter((field) => signerEmails.includes(field.signerEmail)),
+      };
+    });
+    setCurrentStep(2);
+  };
+
+  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
+    // Return to the configuration view but keep the data
+    setFields(data);
+    setCurrentStep(1);
+  };
+
+  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
+    try {
+      if (!configuration) {
+        toast({
+          variant: 'destructive',
+          title: _(msg`Error`),
+          description: _(msg`Please configure the document first`),
+        });
+
+        return;
+      }
+
+      const fields = data.fields;
+
+      // Use the externalId from the URL fragment if available
+      const documentExternalId = externalId || configuration.meta.externalId;
+
+      const updateResult = await updateEmbeddingDocument({
+        documentId: document.id,
+        title: configuration.title,
+        externalId: documentExternalId,
+        meta: {
+          ...configuration.meta,
+          drawSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW)
+            : undefined,
+          typedSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE)
+            : undefined,
+          uploadSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD)
+            : undefined,
+        },
+        recipients: configuration.signers.map((signer) => ({
+          id: signer.nativeId,
+          name: signer.name,
+          email: signer.email,
+          role: signer.role,
+          signingOrder: signer.signingOrder,
+          fields: fields
+            .filter((field) => field.signerEmail === signer.email)
+            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map<any>((f) => ({
+              ...f,
+              id: f.nativeId,
+              pageX: f.pageX,
+              pageY: f.pageY,
+              width: f.pageWidth,
+              height: f.pageHeight,
+            })),
+        })),
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Document updated successfully`),
+      });
+
+      // Send a message to the parent window with the document details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'document-updated',
+            documentId: updateResult.documentId,
+            externalId: documentExternalId,
+          },
+          '*',
+        );
+      }
+    } catch (err) {
+      console.error('Error updating document:', err);
+
+      toast({
+        variant: 'destructive',
+        title: _(msg`Error`),
+        description: _(msg`Failed to update document`),
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      setFeatures(result.data.features);
+
+      // Extract externalId from the parsed data if available
+      if (result.data.externalId) {
+        setExternalId(result.data.externalId);
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+  }, []);
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
+      <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
+        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
+          <ConfigureDocumentView
+            defaultValues={configuration ?? undefined}
+            disableUpload={true}
+            onSubmit={handleConfigurePageViewSubmit}
+          />
+
+          <ConfigureFieldsView
+            configData={configuration!}
+            documentData={document.documentData}
+            defaultValues={fields ?? undefined}
+            onBack={handleBackToConfig}
+            onSubmit={handleConfigureFieldsSubmit}
+          />
+        </Stepper>
+      </ConfigureDocumentProvider>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v1+/authoring+/template.create.tsx

@@ -11,10 +11,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
 import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
 import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import {
-  ConfigureFieldsView,
-  type TConfigureFieldsFormSchema,
-} from '~/components/embed/authoring/configure-fields-view';
+import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
+import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
 import {
   type TBaseEmbedAuthoringSchema,
   ZBaseEmbedAuthoringSchema,
@@ -48,8 +46,6 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
 
   const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
     try {
-      console.log('configuration', configuration);
-      console.log('data', data);
       if (!configuration || !configuration.documentData) {
         toast({
           variant: 'destructive',
@@ -117,7 +113,7 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
 
       // Navigate to the completion page instead of the template details page
       await navigate(
-        `/embed/v1/authoring/create-completed?templateId=${createResult.templateId}&externalId=${metaWithExternalId.externalId}#${hash}`,
+        `/embed/v1/authoring/completed/create?templateId=${createResult.templateId}&externalId=${metaWithExternalId.externalId}#${hash}`,
       );
     } catch (err) {
       console.error('Error creating template:', err);

apps/remix/app/routes/embed+/v1+/authoring+/template.edit.$id.tsx

@@ -0,0 +1,314 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentDistributionMethod, DocumentSigningOrder, SigningStatus } from '@prisma/client';
+import { redirect, useLoaderData } from 'react-router';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  isValidDateFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
+import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { nanoid } from '@documenso/lib/universal/id';
+import { trpc } from '@documenso/trpc/react';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
+import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
+import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
+import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
+import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
+import {
+  type TBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringSchema,
+} from '~/types/embed-authoring-base-schema';
+
+import type { Route } from './+types/document.edit.$id';
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { id } = params;
+
+  const url = new URL(request.url);
+
+  // We know that the token is present because we're checking it in the parent _layout route
+  const token = url.searchParams.get('token') || '';
+
+  // We also know that the token is valid, but we need the userId + teamId
+  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
+
+  if (!result) {
+    throw new Error('Invalid token');
+  }
+
+  const templateId = Number(id);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    redirect(`/embed/v1/authoring/error/not-found?templateId=${templateId}`);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: result?.userId,
+    teamId: result?.teamId ?? undefined,
+  }).catch(() => null);
+
+  if (!template) {
+    throw redirect(`/embed/v1/authoring/error/not-found?templateId=${templateId}`);
+  }
+
+  const fields = template.fields.map((field) => ({
+    ...field,
+    positionX: field.positionX.toNumber(),
+    positionY: field.positionY.toNumber(),
+    width: field.width.toNumber(),
+    height: field.height.toNumber(),
+  }));
+
+  return {
+    template: {
+      ...template,
+      fields,
+    },
+  };
+};
+
+export default function EmbeddingAuthoringTemplateEditPage() {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { template } = useLoaderData<typeof loader>();
+
+  const signatureTypes = useMemo(() => {
+    const types: string[] = [];
+
+    if (template.templateMeta?.drawSignatureEnabled) {
+      types.push(DocumentSignatureType.DRAW);
+    }
+
+    if (template.templateMeta?.typedSignatureEnabled) {
+      types.push(DocumentSignatureType.TYPE);
+    }
+
+    if (template.templateMeta?.uploadSignatureEnabled) {
+      types.push(DocumentSignatureType.UPLOAD);
+    }
+
+    return types;
+  }, [template.templateMeta]);
+
+  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(() => ({
+    title: template.title,
+    documentData: undefined,
+    meta: {
+      subject: template.templateMeta?.subject ?? undefined,
+      message: template.templateMeta?.message ?? undefined,
+      distributionMethod:
+        template.templateMeta?.distributionMethod ?? DocumentDistributionMethod.EMAIL,
+      emailSettings: template.templateMeta?.emailSettings ?? ZDocumentEmailSettingsSchema.parse({}),
+      timezone: template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+      signingOrder: template.templateMeta?.signingOrder ?? DocumentSigningOrder.PARALLEL,
+      allowDictateNextSigner: template.templateMeta?.allowDictateNextSigner ?? false,
+      language: isValidLanguageCode(template.templateMeta?.language)
+        ? template.templateMeta.language
+        : undefined,
+      signatureTypes: signatureTypes,
+      dateFormat: isValidDateFormat(template.templateMeta?.dateFormat)
+        ? template.templateMeta?.dateFormat
+        : DEFAULT_DOCUMENT_DATE_FORMAT,
+      redirectUrl: template.templateMeta?.redirectUrl ?? undefined,
+    },
+    signers: template.recipients.map((recipient) => ({
+      nativeId: recipient.id,
+      formId: nanoid(8),
+      name: recipient.name,
+      email: recipient.email,
+      role: recipient.role,
+      signingOrder: recipient.signingOrder ?? undefined,
+      disabled: recipient.signingStatus !== SigningStatus.NOT_SIGNED,
+    })),
+  }));
+
+  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(() => ({
+    fields: template.fields.map((field) => ({
+      nativeId: field.id,
+      formId: nanoid(8),
+      type: field.type,
+      signerEmail:
+        template.recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
+      inserted: field.inserted,
+      recipientId: field.recipientId,
+      pageNumber: field.page,
+      pageX: field.positionX,
+      pageY: field.positionY,
+      pageWidth: field.width,
+      pageHeight: field.height,
+      fieldMeta: field.fieldMeta ?? undefined,
+    })),
+  }));
+
+  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
+  const [externalId, setExternalId] = useState<string | null>(null);
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const { mutateAsync: updateEmbeddingTemplate } =
+    trpc.embeddingPresign.updateEmbeddingTemplate.useMutation();
+
+  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
+    // Store the configuration data and move to the field placement stage
+    setConfiguration(data);
+    setFields((fieldData) => {
+      if (!fieldData) {
+        return fieldData;
+      }
+
+      const signerEmails = data.signers.map((signer) => signer.email);
+
+      return {
+        fields: fieldData.fields.filter((field) => signerEmails.includes(field.signerEmail)),
+      };
+    });
+    setCurrentStep(2);
+  };
+
+  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
+    // Return to the configuration view but keep the data
+    setFields(data);
+    setCurrentStep(1);
+  };
+
+  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
+    try {
+      if (!configuration) {
+        toast({
+          variant: 'destructive',
+          title: _(msg`Error`),
+          description: _(msg`Please configure the document first`),
+        });
+
+        return;
+      }
+
+      const fields = data.fields;
+
+      // Use the externalId from the URL fragment if available
+      const templateExternalId = externalId || configuration.meta.externalId;
+
+      const updateResult = await updateEmbeddingTemplate({
+        templateId: template.id,
+        title: configuration.title,
+        externalId: templateExternalId,
+        meta: {
+          ...configuration.meta,
+          drawSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW)
+            : undefined,
+          typedSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE)
+            : undefined,
+          uploadSignatureEnabled: configuration.meta.signatureTypes
+            ? configuration.meta.signatureTypes.length === 0 ||
+              configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD)
+            : undefined,
+        },
+        recipients: configuration.signers.map((signer) => ({
+          id: signer.nativeId,
+          name: signer.name,
+          email: signer.email,
+          role: signer.role,
+          signingOrder: signer.signingOrder,
+          fields: fields
+            .filter((field) => field.signerEmail === signer.email)
+            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map<any>((f) => ({
+              ...f,
+              id: f.nativeId,
+              pageX: f.pageX,
+              pageY: f.pageY,
+              width: f.pageWidth,
+              height: f.pageHeight,
+            })),
+        })),
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Template updated successfully`),
+      });
+
+      // Send a message to the parent window with the template details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'template-updated',
+            templateId: updateResult.templateId,
+            externalId: templateExternalId,
+          },
+          '*',
+        );
+      }
+    } catch (err) {
+      console.error('Error updating template:', err);
+
+      toast({
+        variant: 'destructive',
+        title: _(msg`Error`),
+        description: _(msg`Failed to update template`),
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      setFeatures(result.data.features);
+
+      // Extract externalId from the parsed data if available
+      if (result.data.externalId) {
+        setExternalId(result.data.externalId);
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+  }, []);
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
+      <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
+        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
+          <ConfigureDocumentView
+            defaultValues={configuration ?? undefined}
+            disableUpload={true}
+            onSubmit={handleConfigurePageViewSubmit}
+          />
+
+          <ConfigureFieldsView
+            configData={configuration!}
+            documentData={template.templateDocumentData}
+            defaultValues={fields ?? undefined}
+            onBack={handleBackToConfig}
+            onSubmit={handleConfigureFieldsSubmit}
+          />
+        </Stepper>
+      </ConfigureDocumentProvider>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v1.authoring+/_layout.tsx

@@ -1,66 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-
-import { Outlet } from 'react-router';
-
-import { TrpcProvider, trpc } from '@documenso/trpc/react';
-
-import { EmbedClientLoading } from '~/components/embed/embed-client-loading';
-import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
-import { injectCss } from '~/utils/css-vars';
-
-export default function AuthoringLayout() {
-  const [token, setToken] = useState('');
-
-  const {
-    mutateAsync: verifyEmbeddingPresignToken,
-    isPending: isVerifyingEmbeddingPresignToken,
-    data: isVerified,
-  } = trpc.embeddingPresign.verifyEmbeddingPresignToken.useMutation();
-
-  useLayoutEffect(() => {
-    try {
-      const hash = window.location.hash.slice(1);
-
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
-        JSON.parse(decodeURIComponent(atob(hash))),
-      );
-
-      if (!result.success) {
-        return;
-      }
-
-      const { token, css, cssVars, darkModeDisabled } = result.data;
-
-      if (darkModeDisabled) {
-        document.documentElement.classList.add('dark-mode-disabled');
-      }
-
-      injectCss({
-        css,
-        cssVars,
-      });
-
-      void verifyEmbeddingPresignToken({ token }).then((result) => {
-        if (result.success) {
-          setToken(token);
-        }
-      });
-    } catch (err) {
-      console.error('Error verifying embedding presign token:', err);
-    }
-  }, []);
-
-  if (isVerifyingEmbeddingPresignToken) {
-    return <EmbedClientLoading />;
-  }
-
-  if (typeof isVerified !== 'undefined' && !isVerified.success) {
-    return <div>Invalid embedding presign token</div>;
-  }
-
-  return (
-    <TrpcProvider headers={{ authorization: `Bearer ${token}` }}>
-      <Outlet />
-    </TrpcProvider>
-  );
-}

apps/remix/app/storage/lang-cookie.server.ts

@@ -1,6 +1,10 @@
 import { createCookie } from 'react-router';
 
+import { env } from '@documenso/lib/utils/env';
+
 export const langCookie = createCookie('lang', {
   path: '/',
   maxAge: 60 * 60 * 24 * 365 * 2,
+  httpOnly: true,
+  secure: env('NODE_ENV') === 'production',
 });

apps/remix/package.json

@@ -33,8 +33,8 @@
     "@lingui/react": "^5.2.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.1.5",
-    "@react-router/serve": "^7.1.5",
+    "@react-router/node": "^7.6.0",
+    "@react-router/serve": "^7.6.0",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
     "autoprefixer": "^10.4.13",
@@ -49,8 +49,8 @@
     "luxon": "^3.4.0",
     "papaparse": "^5.4.1",
     "plausible-tracker": "^0.3.9",
-    "posthog-js": "^1.224.0",
-    "posthog-node": "^4.8.1",
+    "posthog-js": "^1.245.0",
+    "posthog-node": "^4.17.0",
     "react": "^18",
     "react-call": "^1.3.0",
     "react-dom": "^18",
@@ -59,7 +59,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^5.4.0",
     "react-rnd": "^10.4.1",
-    "react-router": "^7.1.5",
+    "react-router": "^7.6.0",
     "recharts": "^2.7.2",
     "remeda": "^2.17.3",
     "remix-themes": "^2.0.4",
@@ -75,9 +75,9 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@lingui/babel-plugin-lingui-macro": "^5.2.0",
-    "@lingui/vite-plugin": "^5.2.0",
-    "@react-router/dev": "^7.1.5",
-    "@react-router/remix-routes-option-adapter": "^7.1.5",
+    "@lingui/vite-plugin": "^5.3.1",
+    "@react-router/dev": "^7.6.0",
+    "@react-router/remix-routes-option-adapter": "^7.6.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
@@ -91,14 +91,14 @@
     "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",
     "cross-env": "^7.0.3",
-    "esbuild": "0.24.2",
+    "esbuild": "^0.25.4",
     "remix-flat-routes": "^0.8.4",
     "rollup": "^4.34.5",
     "tsx": "^4.19.2",
     "typescript": "5.6.2",
-    "vite": "^6.1.0",
+    "vite": "^6.3.5",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.10.0-rc.5"
+  "version": "1.11.1"
 }

apps/remix/vite.config.ts

@@ -35,12 +35,27 @@ export default defineConfig({
   ],
   ssr: {
     noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
-    external: ['@node-rs/bcrypt', '@prisma/client', '@documenso/tailwind-config'],
+    external: [
+      '@node-rs/bcrypt',
+      '@prisma/client',
+      '@documenso/tailwind-config',
+      'playwright',
+      'playwright-core',
+      '@playwright/browser-chromium',
+    ],
   },
   optimizeDeps: {
     entries: ['./app/**/*', '../../packages/ui/**/*', '../../packages/lib/**/*'],
     include: ['prop-types', 'file-selector', 'attr-accept'],
-    exclude: ['node_modules', '@node-rs/bcrypt', '@documenso/pdf-sign', 'sharp'],
+    exclude: [
+      'node_modules',
+      '@node-rs/bcrypt',
+      '@documenso/pdf-sign',
+      'sharp',
+      'playwright',
+      'playwright-core',
+      '@playwright/browser-chromium',
+    ],
   },
   resolve: {
     alias: {
@@ -68,7 +83,8 @@ export default defineConfig({
         '@documenso/pdf-sign',
         '@aws-sdk/cloudfront-signer',
         'nodemailer',
-        'playwright',
+        /playwright/,
+        '@playwright/browser-chromium',
       ],
     },
   },

docker/Dockerfile

@@ -114,4 +114,4 @@ COPY --chown=nodejs:nodejs ./docker/start.sh /app/apps/remix/start.sh
 
 WORKDIR /app/apps/remix
 
-CMD ["sh", "start.sh"]
+CMD ["sh", "start.sh"]

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.10.0-rc.5",
+  "version": "1.11.1",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",
@@ -44,18 +44,22 @@
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@lingui/cli": "^5.2.0",
-    "@trigger.dev/cli": "^2.3.18",
-    "dotenv": "^16.3.1",
-    "dotenv-cli": "^7.3.0",
+    "dotenv": "^16.5.0",
+    "dotenv-cli": "^8.0.0",
     "eslint": "^8.40.0",
     "eslint-config-custom": "*",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "playwright": "1.43.0",
+    "playwright": "1.52.0",
     "prettier": "^3.3.3",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3",
-    "vite": "^6.1.0"
+    "vite": "^6.3.5",
+    "@prisma/client": "^6.8.2",
+    "prisma": "^6.8.2",
+    "prisma-extension-kysely": "^3.0.0",
+    "prisma-kysely": "^1.8.0",
+    "nodemailer": "^6.10.1"
   },
   "name": "@documenso/root",
   "workspaces": [
@@ -80,4 +84,4 @@
   "trigger.dev": {
     "endpointId": "documenso-app"
   }
-}
+}

packages/api/package.json

@@ -20,11 +20,11 @@
     "@ts-rest/core": "^3.30.5",
     "@ts-rest/open-api": "^3.33.0",
     "@ts-rest/serverless": "^3.30.5",
-    "@types/swagger-ui-react": "^4.18.3",
+    "@types/swagger-ui-react": "^5.18.0",
     "luxon": "^3.4.0",
     "superjson": "^1.13.1",
-    "swagger-ui-react": "^5.11.0",
+    "swagger-ui-react": "^5.21.0",
     "ts-pattern": "^5.0.5",
     "zod": "3.24.1"
   }
-}
+}

packages/api/v1/contract.ts

@@ -11,6 +11,7 @@ import {
   ZDeleteDocumentMutationSchema,
   ZDeleteFieldMutationSchema,
   ZDeleteRecipientMutationSchema,
+  ZDownloadDocumentQuerySchema,
   ZDownloadDocumentSuccessfulSchema,
   ZFindTeamMembersResponseSchema,
   ZGenerateDocumentFromTemplateMutationResponseSchema,
@@ -71,6 +72,7 @@ export const ApiContractV1 = c.router(
     downloadSignedDocument: {
       method: 'GET',
       path: '/api/v1/documents/:id/download',
+      query: ZDownloadDocumentQuerySchema,
       responses: {
         200: ZDownloadDocumentSuccessfulSchema,
         401: ZUnsuccessfulResponseSchema,

packages/api/v1/implementation.ts

@@ -142,6 +142,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
 
   downloadSignedDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
+    const { downloadOriginalDocument } = args.query;
 
     try {
       if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
@@ -177,7 +178,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
         };
       }
 
-      if (!isDocumentCompleted(document.status)) {
+      if (!downloadOriginalDocument && !isDocumentCompleted(document.status)) {
         return {
           status: 400,
           body: {
@@ -186,7 +187,9 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
         };
       }
 
-      const { url } = await getPresignGetUrl(document.documentData.data);
+      const { url } = await getPresignGetUrl(
+        downloadOriginalDocument ? document.documentData.initialData : document.documentData.data,
+      );
 
       return {
         status: 200,

packages/api/v1/schema.ts

@@ -119,6 +119,15 @@ export const ZUploadDocumentSuccessfulSchema = z.object({
   key: z.string(),
 });
 
+export const ZDownloadDocumentQuerySchema = z.object({
+  downloadOriginalDocument: z
+    .preprocess((val) => String(val) === 'true' || String(val) === '1', z.boolean())
+    .optional()
+    .default(false),
+});
+
+export type TDownloadDocumentQuerySchema = z.infer<typeof ZDownloadDocumentQuerySchema>;
+
 export const ZDownloadDocumentSuccessfulSchema = z.object({
   downloadUrl: z.string(),
 });

packages/app-tests/e2e/document-flow/settings-step.spec.ts

@@ -116,15 +116,15 @@ test.describe('[EE_ONLY]', () => {
       redirectPath: `/documents/${document.id}/edit`,
     });
 
-    // Global action auth should not be visible.
-    await expect(page.getByTestId('documentActionSelectValue')).not.toBeVisible();
+    // Global action auth should now be visible for all users
+    await expect(page.getByTestId('documentActionSelectValue')).toBeVisible();
 
     // Next step.
     await page.getByRole('button', { name: 'Continue' }).click();
     await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
 
-    // Advanced settings should not be visible.
-    await expect(page.getByLabel('Show advanced settings')).not.toBeVisible();
+    // Advanced settings should now be visible for all users
+    await expect(page.getByLabel('Show advanced settings')).toBeVisible();
   });
 });
 
@@ -146,8 +146,8 @@ test('[DOCUMENT_FLOW]: add settings', async ({ page }) => {
   await page.getByLabel('Require account').getByText('Require account').click();
   await expect(page.getByTestId('documentAccessSelectValue')).toContainText('Require account');
 
-  // Action auth should NOT be visible.
-  await expect(page.getByTestId('documentActionSelectValue')).not.toBeVisible();
+  // Action auth should now be visible for all users
+  await expect(page.getByTestId('documentActionSelectValue')).toBeVisible();
 
   // Save the settings by going to the next step.