fix: duplicate document

feat: implement auto-save functionality for signers in document edit form (#1792 )
fix: access audit logs for documents in folder (#1989 )
2026-07-08 20:14:58 +10:00 · 2025-09-03 12:21:23 +03:00 · 2025-09-02 21:01:16 +10:00 · 2025-08-31 12:17:31 +10:00 · 2025-08-31 11:37:49 +10:00 · 2025-08-28 16:20:27 +10:00
247 changed files with 5780 additions and 2663 deletions
@@ -0,0 +1,57 @@
+# Agent Guidelines for Documenso
+
+## Build/Test/Lint Commands
+
+- `npm run build` - Build all packages
+- `npm run lint` - Lint all packages
+- `npm run lint:fix` - Auto-fix linting issues
+- `npm run test:e2e` - Run E2E tests with Playwright
+- `npm run test:dev -w @documenso/app-tests` - Run single E2E test in dev mode
+- `npm run test-ui:dev -w @documenso/app-tests` - Run E2E tests with UI
+- `npm run format` - Format code with Prettier
+- `npm run dev` - Start development server for Remix app
+
+## Code Style Guidelines
+
+- Use TypeScript for all code; prefer `type` over `interface`
+- Use functional components with `const Component = () => {}`
+- Never use classes; prefer functional/declarative patterns
+- Use descriptive variable names with auxiliary verbs (isLoading, hasError)
+- Directory names: lowercase with dashes (auth-wizard)
+- Use named exports for components
+- Never use 'use client' directive
+- Never use 1-line if statements
+- Structure files: exported component, subcomponents, helpers, static content, types
+
+## Error Handling & Validation
+
+- Use custom AppError class when throwing errors
+- When catching errors on the frontend use `const error = AppError.parse(error)` to get the error code
+- Use early returns and guard clauses
+- Use Zod for form validation and react-hook-form for forms
+- Use error boundaries for unexpected errors
+
+## UI & Styling
+
+- Use Shadcn UI, Radix, and Tailwind CSS with mobile-first approach
+- Use `<Form>` `<FormItem>` elements with fieldset having `:disabled` attribute when loading
+- Use Lucide icons with longhand names (HomeIcon vs Home)
+
+## TRPC Routes
+
+- Each route in own file: `routers/teams/create-team.ts`
+- Associated types file: `routers/teams/create-team.types.ts`
+- Request/response schemas: `Z[RouteName]RequestSchema`, `Z[RouteName]ResponseSchema`
+- Only use GET and POST methods in OpenAPI meta
+- Deconstruct input argument on its own line
+- Prefer route names such as get/getMany/find/create/update/delete
+- "create" routes request schema should have the ID and data in the top level
+- "update" routes request schema should have the ID in the top level and the data in a nested "data" object
+
+## Translations & Remix
+
+- Use `<Trans>string</Trans>` for JSX translations from `@lingui/react/macro`
+- Use `t\`string\`` macro for TypeScript translations
+- Use `(params: Route.Params)` and `(loaderData: Route.LoaderData)` for routes
+- Directly return data from loaders, don't use `json()`
+- Use `superLoaderJson` when sending complex data through loaders such as dates or prisma decimals
@@ -214,8 +214,6 @@ For detailed instructions on how to configure and run the Docker container, plea

 We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!

-> Please note that the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
-
 ### Fetch, configure, and build

 First, clone the code from Github:
@@ -258,7 +256,7 @@ npm run start

 This will start the server on `localhost:3000`. For now, any reverse proxy can then do the frontend and SSL termination.

-> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
+> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.

 ### Run as a service

@@ -308,7 +306,7 @@ The Web UI can be found at http://localhost:9000, while the SMTP port will be on

 ### Support IPv6

-If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Next.js start command
+If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Remix start command

 For local docker run

@@ -18,7 +18,7 @@ For the digital signature of your documents you need a signing certificate in .p

 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)

-5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
+5. Place the certificate `/apps/remix/resources/certificate.p12` (If the path does not exist, it needs to be created)

 ## Docker

@@ -25,7 +25,7 @@ The translation files are organized into folders represented by their respective
 Each PO file contains translations which look like this:

 ```po
-#: apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx:61
+#: apps/remix/app/(signing)/sign/[token]/no-longer-available.tsx:61
 msgid "Want to send slick signing links like this one? <0>Check out Documenso.</0>"
 msgstr "Möchten Sie auffällige Signatur-Links wie diesen senden? <0>Überprüfen Sie Documenso.</0>"
 ```
@@ -54,7 +54,7 @@ Install the project dependencies as follows:

 ```bash
 npm i
-npm run build:web
+npm run build
 npm run prisma:migrate-deploy
 ```

@@ -69,7 +69,7 @@ npm run start
 This will start the server on `localhost:3000`. Any reverse proxy can handle the front end and SSL termination.

 <Callout type="info">
- If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
+ If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.
 </Callout>

 </Steps>
@@ -249,7 +249,7 @@ After=network.target
 Environment=PATH=/path/to/your/node/binaries
 Type=simple
 User=www-data
-WorkingDirectory=/var/www/documenso/apps/web
+WorkingDirectory=/var/www/documenso/apps/remix
 ExecStart=/usr/bin/next start -p 3500
 TimeoutSec=15
 Restart=always
@@ -34,7 +34,7 @@ export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialo
  const [reason, setReason] = useState('');

  const { mutateAsync: deleteDocument, isPending: isDeletingDocument } =
-    trpc.admin.deleteDocument.useMutation();
+    trpc.admin.document.delete.useMutation();

  const handleDeleteDocument = async () => {
    try {
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -96,17 +96,16 @@ export const AdminOrganisationCreateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';

 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 export type AdminUserDeleteDialogProps = {
  className?: string;
-  user: User;
+  user: TGetUserResponse;
 };

 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
@@ -35,7 +35,7 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
  const [email, setEmail] = useState('');

  const { mutateAsync: deleteUser, isPending: isDeletingUser } =
-    trpc.admin.deleteUser.useMutation();
+    trpc.admin.user.delete.useMutation();

  const onDeleteAccount = async () => {
    try {
@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';

 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 export type AdminUserDisableDialogProps = {
  className?: string;
-  userToDisable: User;
+  userToDisable: TGetUserResponse;
 };

 export const AdminUserDisableDialog = ({
@@ -37,7 +37,7 @@ export const AdminUserDisableDialog = ({
  const [email, setEmail] = useState('');

  const { mutateAsync: disableUser, isPending: isDisablingUser } =
-    trpc.admin.disableUser.useMutation();
+    trpc.admin.user.disable.useMutation();

  const onDisableAccount = async () => {
    try {
@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';

 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 export type AdminUserEnableDialogProps = {
  className?: string;
-  userToEnable: User;
+  userToEnable: TGetUserResponse;
 };

 export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {
@@ -34,7 +34,7 @@ export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnab
  const [email, setEmail] = useState('');

  const { mutateAsync: enableUser, isPending: isEnablingUser } =
-    trpc.admin.enableUser.useMutation();
+    trpc.admin.user.enable.useMutation();

  const onEnableAccount = async () => {
    try {
@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';

 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 export type AdminUserResetTwoFactorDialogProps = {
  className?: string;
-  user: User;
+  user: TGetUserResponse;
 };

 export const AdminUserResetTwoFactorDialog = ({
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -49,7 +49,7 @@ export const DocumentDeleteDialog = ({
  const [inputValue, setInputValue] = useState('');
  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);

-  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
+  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.delete.useMutation({
    onSuccess: async () => {
      void refreshLimits();

@@ -73,23 +73,20 @@ export const DocumentDeleteDialog = ({
    },
  });

+  useEffect(() => {
+    if (open) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+  }, [open, status]);
+
  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
    setIsDeleteEnabled(event.target.value === _(deleteMessage));
  };

-  const handleOpenChange = (value: boolean) => {
-    if (value) {
-      setInputValue('');
-      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
-    }
-    if (!isPending) {
-      onOpenChange(value);
-    }
-  };
-
  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -36,11 +36,12 @@ export const DocumentDuplicateDialog = ({

  const team = useCurrentTeam();

-  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
+  const { data: document, isLoading } = trpcReact.document.get.useQuery(
    {
      documentId: id,
    },
    {
+      queryHash: `document-duplicate-dialog-${id}`,
      enabled: open === true,
    },
  );
@@ -55,7 +56,7 @@ export const DocumentDuplicateDialog = ({
  const documentsPath = formatDocumentsPath(team.url);

  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicateDocument.useMutation({
+    trpcReact.document.duplicate.useMutation({
      onSuccess: async ({ documentId }) => {
        toast({
          title: _(msg`Document Duplicated`),
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -83,6 +83,15 @@ export const DocumentMoveToFolderDialog = ({

  const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();

+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setSearchTerm('');
+    } else {
+      form.reset({ folderId: currentFolderId });
+    }
+  }, [open, currentFolderId, form]);
+
  const onSubmit = async (data: TMoveDocumentFormSchema) => {
    try {
      await moveDocumentToFolder({
@@ -136,22 +145,12 @@ export const DocumentMoveToFolderDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId });
-    }
-    onOpenChange(value);
-  };
-
  const filteredFolders = folders?.data.filter((folder) =>
    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
  );

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -71,7 +71,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
    document.status !== 'PENDING' ||
    !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);

-  const { mutateAsync: resendDocument } = trpcReact.document.resendDocument.useMutation();
+  const { mutateAsync: resendDocument } = trpcReact.document.redistribute.useMutation();

  const form = useForm<TResendDocumentFormSchema>({
    resolver: zodResolver(ZResendDocumentFormSchema),
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -80,15 +80,14 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!isCreateFolderOpen) {
      form.reset();
    }
-    setIsCreateFolderOpen(value);
-  };
+  }, [isCreateFolderOpen, form]);

  return (
-    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={handleOpenChange}>
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -90,15 +92,14 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!isOpen) {
      form.reset();
    }
-    onOpenChange(value);
-  };
+  }, [isOpen]);

  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -97,13 +97,12 @@ export const FolderMoveDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!isOpen) {
      form.reset();
      setSearchTerm('');
    }
-    onOpenChange(value);
-  };
+  }, [isOpen, form]);

  // Filter out the current folder, only show folders of the same type, and filter by search term
  const filteredFolders = foldersData?.filter(
@@ -114,7 +113,7 @@ export const FolderMoveDialog = ({
  );

  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -69,6 +71,15 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
    },
  });

+  useEffect(() => {
+    if (folder) {
+      form.reset({
+        name: folder.name,
+        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
+      });
+    }
+  }, [folder, form]);
+
  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
    if (!folder) {
      return;
@@ -99,18 +110,8 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (value && folder) {
-      form.reset({
-        name: folder.name,
-        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
-      });
-    }
-    onOpenChange(value);
-  };
-
  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -76,7 +76,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea

  const [selectedPriceId, setSelectedPriceId] = useState<string>('');

-  const [open, setOpen] = useState(actionSearchParam === 'add-organisation');
+  const [open, setOpen] = useState(false);

  const form = useForm({
    resolver: zodResolver(ZCreateOrganisationFormSchema),
@@ -91,19 +91,6 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
    enabled: IS_BILLING_ENABLED(),
  });

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      if (actionSearchParam === 'add-organisation') {
-        updateSearchParams({ action: null });
-      }
-    }
-
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
-
  const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
    try {
      const response = await createOrganisation({
@@ -139,6 +126,17 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
    }
  };

+  useEffect(() => {
+    if (actionSearchParam === 'add-organisation') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
  const isIndividualPlan = (priceId: string) => {
    return (
      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.monthlyPrice?.id === priceId ||
@@ -147,7 +145,11 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
  };

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -312,16 +314,13 @@ const BillingPlanForm = ({
        };
      },
    );
-  }, [plans, t]);
+  }, [plans]);

  useEffect(() => {
-    if (value === '' && !canCreateFreeOrganisation && dynamicPlans.length > 0) {
-      const defaultValue = dynamicPlans[0][billingPeriod]?.id ?? '';
-      if (defaultValue) {
-        onChange(defaultValue);
-      }
+    if (value === '' && !canCreateFreeOrganisation) {
+      onChange(dynamicPlans[0][billingPeriod]?.id ?? '');
    }
-  }, [canCreateFreeOrganisation, dynamicPlans, billingPeriod, onChange, value]);
+  }, [value]);

  const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
    const plan = dynamicPlans.find(
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -93,19 +93,14 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (form.formState.isSubmitting) {
-      return;
-    }
-
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    setOpen(value);
-  };
+  }, [open, form]);

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="destructive">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -73,6 +73,13 @@ export const OrganisationEmailCreateDialog = ({
  const { mutateAsync: createOrganisationEmail, isPending } =
    trpc.enterprise.organisation.email.create.useMutation();

+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
  const onFormSubmit = async (data: TCreateOrganisationEmailFormSchema) => {
    try {
      await createOrganisationEmail({
@@ -107,17 +114,8 @@ export const OrganisationEmailCreateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-    }
-    if (!isPending) {
-      setOpen(value);
-    }
-  };
-
  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog {...props} open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -36,12 +36,6 @@ export const OrganisationEmailDeleteDialog = ({

  const organisation = useCurrentOrganisation();

-  const handleOpenChange = (value: boolean) => {
-    if (!isDeleting) {
-      setOpen(value);
-    }
-  };
-
  const { mutateAsync: deleteEmail, isPending: isDeleting } =
    trpc.enterprise.organisation.email.delete.useMutation({
      onSuccess: () => {
@@ -64,7 +58,7 @@ export const OrganisationEmailDeleteDialog = ({
    });

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="secondary">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -75,6 +75,14 @@ export const OrganisationEmailDomainCreateDialog = ({
  const { mutateAsync: createOrganisationEmail } =
    trpc.enterprise.organisation.emailDomain.create.useMutation();

+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setStep('domain');
+    }
+  }, [open, form]);
+
  const onFormSubmit = async ({ domain }: TCreateOrganisationEmailDomainFormSchema) => {
    try {
      const { records } = await createOrganisationEmail({
@@ -110,18 +118,12 @@ export const OrganisationEmailDomainCreateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      setStep('domain');
-    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
-
  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -87,20 +87,23 @@ export const OrganisationEmailUpdateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (value) {
-      form.reset({
-        emailName: organisationEmail.emailName,
-        // replyTo: organisationEmail.replyTo ?? undefined,
-      });
+  useEffect(() => {
+    if (!open) {
+      return;
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+
+    form.reset({
+      emailName: organisationEmail.emailName,
+      // replyTo: organisationEmail.replyTo ?? undefined,
+    });
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger}
      </DialogTrigger>
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -117,17 +117,16 @@ export const OrganisationGroupCreateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -193,6 +193,13 @@ export const OrganisationMemberInviteDialog = ({
    return 'form';
  }, [fullOrganisation]);

+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setInvitationType('INDIVIDUAL');
+    }
+  }, [open, form]);
+
  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.length) {
      return;
@@ -260,18 +267,12 @@ export const OrganisationMemberInviteDialog = ({
    });
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      setInvitationType('INDIVIDUAL');
-    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
-
  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="secondary">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,27 +106,32 @@ export const OrganisationMemberUpdateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (value) {
-      form.reset();
-      if (
-        !isOrganisationRoleWithinUserHierarchy(currentUserOrganisationRole, organisationMemberRole)
-      ) {
-        setOpen(false);
-        toast({
-          title: _(msg`You cannot modify a organisation member who has a higher role than you.`),
-          variant: 'destructive',
-        });
-        return;
-      }
+  useEffect(() => {
+    if (!open) {
+      return;
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
+
+    form.reset();
+
+    if (
+      !isOrganisationRoleWithinUserHierarchy(currentUserOrganisationRole, organisationMemberRole)
+    ) {
+      setOpen(false);
+
+      toast({
+        title: _(msg`You cannot modify a organisation member who has a higher role than you.`),
+        variant: 'destructive',
+      });
    }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, currentUserOrganisationRole, organisationMemberRole, form, toast]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="secondary">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -65,9 +65,9 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
  });

  const { mutateAsync: createPasskeyRegistrationOptions, isPending } =
-    trpc.auth.createPasskeyRegistrationOptions.useMutation();
+    trpc.auth.passkey.createRegistrationOptions.useMutation();

-  const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
+  const { mutateAsync: createPasskey } = trpc.auth.passkey.create.useMutation();

  const onFormSubmit = async ({ passkeyName }: TCreatePasskeyFormSchema) => {
    setFormError(null);
@@ -120,21 +120,24 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
    return passkeyName;
  };

-  const handleDialogOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      const defaultPasskeyName = extractDefaultPasskeyName();
+
      form.reset({
        passkeyName: defaultPasskeyName,
      });
+
      setFormError(null);
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleDialogOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button variant="secondary" loading={isPending}>
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -66,14 +66,14 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
  const updateSearchParams = useUpdateSearchParams();
  const organisation = useCurrentOrganisation();

-  const actionSearchParam = searchParams?.get('action');
-  const shouldOpenDialog = actionSearchParam === 'add-team';
-  const [open, setOpen] = useState(shouldOpenDialog);
+  const [open, setOpen] = useState(false);

  const { data: fullOrganisation } = trpc.organisation.get.useQuery({
    organisationReference: organisation.id,
  });

+  const actionSearchParam = searchParams?.get('action');
+
  const form = useForm({
    resolver: zodResolver(ZCreateTeamFormSchema),
    defaultValues: {
@@ -85,18 +85,6 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia

  const { mutateAsync: createTeam } = trpc.team.create.useMutation();

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      if (shouldOpenDialog) {
-        updateSearchParams({ action: null });
-      }
-    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
-
  const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
    try {
      await createTeam({
@@ -162,8 +150,23 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
    return 'form';
  }, [fullOrganisation]);

+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button className="flex-shrink-0" variant="secondary">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -114,17 +114,14 @@ export const TeamDeleteDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  }, [open, form]);

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="destructive">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -103,17 +103,18 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
        {trigger ?? (
          <Button variant="outline" loading={isPending} className="bg-background">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -92,17 +92,18 @@ export const TeamEmailUpdateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="outline" className="bg-background">
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -107,7 +107,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
        duration: 5000,
      });

-      handleClose();
+      setOpen(false);
    } catch {
      toast({
        title: t`An unknown error occurred`,
@@ -117,23 +117,17 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
    }
  };

-  const handleClose = () => {
-    setOpen(false);
-    form.reset();
-    setStep('SELECT');
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      handleClose();
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setStep('SELECT');
    }
-  };
+  }, [open, form]);

  return (
    <Dialog
      {...props}
      open={open}
-      onOpenChange={handleOpenChange}
      // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
      // Since it would be annoying to redo the whole process.
    >
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,17 +106,22 @@ export const TeamGroupUpdateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!form.formState.isSubmitting) {
-      if (value) {
-        form.reset();
-      }
-      setOpen(value);
+  useEffect(() => {
+    if (!open) {
+      return;
    }
-  };
+
+    form.reset();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, team.currentTeamRole, teamGroupRole, form, toast]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="secondary">
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -119,17 +119,20 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
      setStep('SELECT');
    }
-    // Disable automatic onOpenChange events to prevent dialog from closing if user 'accidentally' clicks the overlay.
-    // Since it would be annoying to redo the whole process, we handle open state manually
-  };
+  }, [open, form]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
+      // Since it would be annoying to redo the whole process.
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        <Button variant="secondary" onClick={() => setOpen(true)}>
          <Trans>Add members</Trans>
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,25 +106,30 @@ export const TeamMemberUpdateDialog = ({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (value) {
-      form.reset();
-      if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
-        setOpen(false);
-        toast({
-          title: _(msg`You cannot modify a team member who has a higher role than you.`),
-          variant: 'destructive',
-        });
-        return;
-      }
+  useEffect(() => {
+    if (!open) {
+      return;
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
+
+    form.reset();
+
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
+      setOpen(false);
+
+      toast({
+        title: _(msg`You cannot modify a team member who has a higher role than you.`),
+        variant: 'destructive',
+      });
    }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);

  return (
-    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="secondary">
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -186,20 +186,16 @@ export const TemplateDirectLinkDialog = ({
  const isLoading =
    isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;

-  const handleOpenChange = (value: boolean) => {
-    if (!isLoading) {
-      if (value) {
-        resetCreateTemplateDirectLink();
-        setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
-        setSelectedRecipientId(null);
-      }
+  useEffect(() => {
+    resetCreateTemplateDirectLink();
+    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+    setSelectedRecipientId(null);

-      onOpenChange(value);
-    }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
      <fieldset disabled={isLoading} className="relative">
        <AnimateGenericFadeInOut motionKey={currentStep}>
          {match({ token, currentStep })
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -85,6 +85,15 @@ export function TemplateMoveToFolderDialog({

  const { mutateAsync: moveTemplateToFolder } = trpc.folder.moveTemplateToFolder.useMutation();

+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+      setSearchTerm('');
+    } else {
+      form.reset({ folderId: currentFolderId ?? null });
+    }
+  }, [isOpen, currentFolderId, form]);
+
  const onSubmit = async (data: TMoveTemplateFormSchema) => {
    try {
      await moveTemplateToFolder({
@@ -128,22 +137,12 @@ export function TemplateMoveToFolderDialog({
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId ?? null });
-    }
-    onOpenChange(value);
-  };
-
  const filteredFolders = folders?.data?.filter((folder) =>
    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
  );

  return (
-    <Dialog {...props} open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -203,17 +203,14 @@ export function TemplateUseDialog({
    name: 'recipients',
  });

-  const handleOpenChange = (value: boolean) => {
-    if (form.formState.isSubmitting) return;
-
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    setOpen(value);
-  };
+  }, [open, form]);

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
        {trigger || (
          <Button variant="outline" className="bg-background">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -56,7 +56,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe

  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;

-  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.delete.useMutation({
    onSuccess() {
      onDelete?.();
    },
@@ -95,17 +95,17 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!isOpen) {
      form.reset();
    }
-    if (!form.formState.isSubmitting) {
-      setIsOpen(value);
-    }
-  };
+  }, [isOpen, form]);

  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
      <DialogTrigger asChild={true}>
        {children ?? (
          <Button className="mr-4" variant="destructive">
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -88,17 +88,14 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
    }
  };

-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
+  useEffect(() => {
+    if (!open) {
      form.reset();
    }
-    if (!form.formState.isSubmitting) {
-      setOpen(value);
-    }
-  };
+  }, [open, form]);

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
        {children ?? (
          <Button className="mr-4" variant="destructive">
@@ -172,6 +172,8 @@ export const ConfigureFieldsView = ({
    name: 'fields',
  });

+  const highestPageNumber = Math.max(...localFields.map((field) => field.pageNumber));
+
  const onFieldCopy = useCallback(
    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
      const { duplicate = false, duplicateAll = false } = options ?? {};
@@ -540,7 +542,9 @@ export const ConfigureFieldsView = ({
                <div>
                  <PDFViewer documentData={normalizedDocumentData} />

-                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                  <ElementVisible
+                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+                  >
                    {localFields.map((field, index) => {
                      const recipientIndex = recipients.findIndex(
                        (r) => r.id === field.recipientId,
@@ -57,7 +57,7 @@ export const EmbedDirectTemplateClientPage = ({
  token,
  updatedAt,
  documentData,
-  recipient,
+  recipient: _recipient,
  fields,
  metadata,
  hidePoweredBy = false,
@@ -91,8 +91,12 @@ export const EmbedDirectTemplateClientPage = ({
    localFields.filter((field) => field.inserted),
  ];

+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);

+  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
+
  const { mutateAsync: createDocumentFromDirectTemplate, isPending: isSubmitting } =
    trpc.template.createDocumentFromDirectTemplate.useMutation();

@@ -343,19 +347,34 @@ export const EmbedDirectTemplateClientPage = ({
                  <Trans>Sign document</Trans>
                </h3>

-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                  {isExpanded ? (
-                    <LucideChevronDown
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(false)}
-                    />
-                  ) : (
-                    <LucideChevronUp
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(true)}
-                    />
-                  )}
-                </Button>
+                {isExpanded ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(false)}
+                  >
+                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : pendingFields.length > 0 ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(true)}
+                  >
+                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="md:hidden"
+                    disabled={isThrottled || (hasSignatureField && !signatureValid)}
+                    loading={isSubmitting}
+                    onClick={() => throttledOnCompleteClick()}
+                  >
+                    <Trans>Complete</Trans>
+                  </Button>
+                )}
              </div>
            </div>

@@ -442,7 +461,9 @@ export const EmbedDirectTemplateClientPage = ({
          </div>
        </div>

-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+        >
          {showPendingFieldTooltip && pendingFields.length > 0 && (
            <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
              <Trans>Click to insert field</Trans>
@@ -50,8 +50,10 @@ export const EmbedDocumentFields = ({
  onSignField,
  onUnsignField,
 }: EmbedDocumentFieldsProps) => {
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
  return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
      {fields.map((field) =>
        match(field.type)
          .with(FieldType.SIGNATURE, () => (
@@ -89,7 +89,7 @@ export const EmbedSignDocumentClientPage = ({
  const [isExpanded, setIsExpanded] = useState(false);
  const [isNameLocked, setIsNameLocked] = useState(false);
  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
-  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+  const [_showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
    useState(false);

  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
@@ -106,6 +106,8 @@ export const EmbedSignDocumentClientPage = ({
    fields.filter((field) => field.inserted),
  ];

+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
  const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
    trpc.recipient.completeDocumentWithToken.useMutation();

@@ -116,6 +118,8 @@ export const EmbedSignDocumentClientPage = ({

  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);

+  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
+
  const assistantSignersId = useId();

  const onNextFieldClick = () => {
@@ -305,19 +309,36 @@ export const EmbedSignDocumentClientPage = ({
                    )}
                  </h3>

-                  <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                    {isExpanded ? (
-                      <LucideChevronDown
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(false)}
-                      />
-                    ) : (
-                      <LucideChevronUp
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(true)}
-                      />
-                    )}
-                  </Button>
+                  {isExpanded ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(false)}
+                    >
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : pendingFields.length > 0 ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="md:hidden"
+                      disabled={
+                        isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
+                      }
+                      loading={isSubmitting}
+                      onClick={() => throttledOnCompleteClick()}
+                    >
+                      <Trans>Complete</Trans>
+                    </Button>
+                  )}
                </div>
              </div>

@@ -465,7 +486,9 @@ export const EmbedSignDocumentClientPage = ({
            </div>
          </div>

-          <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          <ElementVisible
+            target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+          >
            {showPendingFieldTooltip && pendingFields.length > 0 && (
              <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
                <Trans>Click to insert field</Trans>
@@ -1,10 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';

 import { Trans } from '@lingui/react/macro';

 export const EmbedDocumentWaitingForTurn = () => {
+  const [hasPostedMessage, setHasPostedMessage] = useState(false);
+
  useEffect(() => {
-    if (window.parent) {
+    if (window.parent && !hasPostedMessage) {
      window.parent.postMessage(
        {
          action: 'document-waiting-for-turn',
@@ -13,7 +15,13 @@ export const EmbedDocumentWaitingForTurn = () => {
        '*',
      );
    }
-  }, []);
+
+    setHasPostedMessage(true);
+  }, [hasPostedMessage]);
+
+  if (!hasPostedMessage) {
+    return null;
+  }

  return (
    <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
@@ -92,6 +92,8 @@ export const MultiSignDocumentSigningView = ({
      [],
  ];

+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
  const uninsertedFields = document?.fields.filter((field) => !field.inserted) ?? [];

  const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
@@ -357,7 +359,9 @@ export const MultiSignDocumentSigningView = ({
              </div>

              {hasDocumentLoaded && (
-                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                <ElementVisible
+                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+                >
                  {showPendingFieldTooltip && pendingFields.length > 0 && (
                    <FieldToolTip
                      key={pendingFields[0].id}
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -136,19 +136,18 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
    setIsOpen(true);
  };

-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
+  useEffect(() => {
+    enable2FAForm.reset();

-    if (!open) {
-      enable2FAForm.reset();
-      if (recoveryCodes && recoveryCodes.length > 0) {
-        setRecoveryCodes(null);
-      }
+    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
+      setRecoveryCodes(null);
    }
-  };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);

  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild={true}>
        <Button
          className="flex-shrink-0"
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -114,20 +114,11 @@ export const SignInForm = ({
  }, [returnTo]);

  const { mutateAsync: createPasskeySigninOptions } =
-    trpc.auth.createPasskeySigninOptions.useMutation();
-
-  const emailFromHash = useMemo(() => {
-    if (typeof window === 'undefined') {
-      return null;
-    }
-    const hash = window.location.hash.slice(1);
-    const params = new URLSearchParams(hash);
-    return params.get('email');
-  }, []);
+    trpc.auth.passkey.createSigninOptions.useMutation();

  const form = useForm<TSignInFormSchema>({
    values: {
-      email: emailFromHash ?? initialEmail ?? '',
+      email: initialEmail ?? '',
      password: '',
      totpCode: '',
      backupCode: '',
@@ -296,6 +287,18 @@ export const SignInForm = ({
    }
  };

+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    const params = new URLSearchParams(hash);
+
+    const email = params.get('email');
+
+    if (email) {
+      form.setValue('email', email);
+    }
+  }, [form]);
+
  return (
    <Form {...form}>
      <form
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -84,19 +84,10 @@ export const SignUpForm = ({

  const utmSrc = searchParams.get('utm_source') ?? null;

-  const emailFromHash = useMemo(() => {
-    if (typeof window === 'undefined') {
-      return null;
-    }
-    const hash = window.location.hash.slice(1);
-    const params = new URLSearchParams(hash);
-    return params.get('email');
-  }, []);
-
  const form = useForm<TSignUpFormSchema>({
    values: {
      name: '',
-      email: emailFromHash ?? initialEmail ?? '',
+      email: initialEmail ?? '',
      password: '',
      signature: '',
    },
@@ -171,6 +162,18 @@ export const SignUpForm = ({
    }
  };

+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    const params = new URLSearchParams(hash);
+
+    const email = params.get('email');
+
+    if (email) {
+      form.setValue('email', email);
+    }
+  }, [form]);
+
  return (
    <div className={cn('flex justify-center gap-x-12', className)}>
      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
@@ -13,7 +13,7 @@ import type { z } from 'zod';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -47,7 +47,7 @@ export const EXPIRATION_DATES = {
  ONE_YEAR: msg`12 months`,
 } as const;

-const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.pick({
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
  tokenName: true,
  expirationDate: true,
 });
@@ -75,7 +75,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
  const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
  const [noExpirationDate, setNoExpirationDate] = useState(false);

-  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
    onSuccess(data) {
      setNewlyCreatedToken(data);
    },
@@ -1,5 +1,3 @@
-'use client';
-
 import { DateTime } from 'luxon';
 import type { TooltipProps } from 'recharts';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
@@ -64,7 +64,7 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
  const [pages, setPages] = useState<string[]>([]);

  const { data: searchDocumentsData, isPending: isSearchingDocuments } =
-    trpcReact.document.searchDocuments.useQuery(
+    trpcReact.document.search.useQuery(
      {
        query: search,
      },
@@ -79,6 +79,8 @@ export const DirectTemplateSigningForm = ({
  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  const highestPageNumber = Math.max(...localFields.map((field) => field.page));
+
  const fieldsRequiringValidation = useMemo(() => {
    return localFields.filter((field) => isFieldUnsignedAndRequired(field));
  }, [localFields]);
@@ -221,7 +223,9 @@ export const DirectTemplateSigningForm = ({
      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />

      <DocumentFlowFormContainerContent>
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
          {validateUninsertedFields && uninsertedFields[0] && (
            <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
              <Trans>Click to insert field</Trans>
@@ -77,7 +77,7 @@ export const DocumentSigningAuthPasskey = ({
  });

  const { mutateAsync: createPasskeyAuthenticationOptions } =
-    trpc.auth.createPasskeyAuthenticationOptions.useMutation();
+    trpc.auth.passkey.createAuthenticationOptions.useMutation();

  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);

@@ -93,7 +93,7 @@ export const DocumentSigningAuthProvider = ({
    [documentAuthOptions, recipient],
  );

-  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
+  const passkeyQuery = trpc.auth.passkey.find.useQuery(
    {
      perPage: MAXIMUM_PASSKEYS,
    },
@@ -9,6 +9,7 @@ import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';

+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
 import { AUTO_SIGNABLE_FIELD_TYPES } from '@documenso/lib/constants/autosign';
 import { DocumentAuth } from '@documenso/lib/types/document-auth';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -60,6 +61,12 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
  const { email, fullName } = useRequiredDocumentSigningContext();
  const { derivedRecipientActionAuth } = useRequiredDocumentSigningAuthContext();

+  const [open, setOpen] = useState(false);
+
+  const form = useForm();
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+
  const autoSignableFields = fields.filter((field) => {
    if (field.inserted) {
      return false;
@@ -88,14 +95,6 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
    (actionAuth) => !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(actionAuth),
  );

-  const [open, setOpen] = useState(() => {
-    return actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD;
-  });
-
-  const form = useForm();
-
-  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
-
  const onSubmit = async () => {
    const results = await Promise.allSettled(
      autoSignableFields.map(async (field) => {
@@ -153,6 +152,12 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
    await revalidate();
  };

+  unsafe_useEffectOnce(() => {
+    if (actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD) {
+      setOpen(true);
+    }
+  });
+
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
@@ -7,14 +7,11 @@ import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/cl
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';

-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
-import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { sortFieldsByPosition } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
@@ -34,29 +31,33 @@ export type DocumentSigningFormProps = {
  document: DocumentAndSender;
  recipient: Recipient;
  fields: Field[];
-  redirectUrl?: string | null;
  isRecipientsTurn: boolean;
  allRecipients?: RecipientWithFields[];
  setSelectedSignerId?: (id: number | null) => void;
+  completeDocument: (
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => Promise<void>;
+  isSubmitting: boolean;
+  fieldsValidated: () => void;
+  nextRecipient?: RecipientWithFields;
 };

 export const DocumentSigningForm = ({
  document,
  recipient,
  fields,
-  redirectUrl,
  isRecipientsTurn,
  allRecipients = [],
  setSelectedSignerId,
+  completeDocument,
+  isSubmitting,
+  fieldsValidated,
+  nextRecipient,
 }: DocumentSigningFormProps) => {
-  const { sessionData } = useOptionalSession();
-  const user = sessionData?.user;
-
  const { _ } = useLingui();
  const { toast } = useToast();
-
  const navigate = useNavigate();
-  const analytics = useAnalytics();

  const assistantSignersId = useId();

@@ -66,21 +67,12 @@ export const DocumentSigningForm = ({
  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
  const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);

-  const {
-    mutateAsync: completeDocumentWithToken,
-    isPending,
-    isSuccess,
-  } = trpc.recipient.completeDocumentWithToken.useMutation();
-
  const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
    defaultValues: {
      selectedSignerId: undefined,
    },
  });

-  // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = isPending || isSuccess;
-
  const fieldsRequiringValidation = useMemo(
    () => fields.filter(isFieldUnsignedAndRequired),
    [fields],
@@ -96,9 +88,9 @@ export const DocumentSigningForm = ({
    return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
  }, [fieldsRequiringValidation, recipient]);

-  const fieldsValidated = () => {
+  const localFieldsValidated = () => {
    setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    fieldsValidated();
  };

  const onAssistantFormSubmit = () => {
@@ -126,55 +118,6 @@ export const DocumentSigningForm = ({
    }
  };

-  const completeDocument = async (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => {
-    const payload = {
-      token: recipient.token,
-      documentId: document.id,
-      authOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
-
-    await completeDocumentWithToken(payload);
-
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
-    if (redirectUrl) {
-      window.location.href = redirectUrl;
-    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
-    }
-  };
-
-  const nextRecipient = useMemo(() => {
-    if (
-      !document.documentMeta?.signingOrder ||
-      document.documentMeta.signingOrder !== 'SEQUENTIAL'
-    ) {
-      return undefined;
-    }
-
-    const sortedRecipients = allRecipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
-
  return (
    <div className="flex h-full flex-col">
      {validateUninsertedFields && uninsertedFields[0] && (
@@ -205,7 +148,7 @@ export const DocumentSigningForm = ({
                    isSubmitting={isSubmitting}
                    documentTitle={document.title}
                    fields={fields}
-                    fieldsValidated={fieldsValidated}
+                    fieldsValidated={localFieldsValidated}
                    onSignatureComplete={async (nextSigner) => {
                      await completeDocument(undefined, nextSigner);
                    }}
@@ -364,7 +307,7 @@ export const DocumentSigningForm = ({
                  isSubmitting={isSubmitting || isAssistantSubmitting}
                  documentTitle={document.title}
                  fields={fields}
-                  fieldsValidated={fieldsValidated}
+                  fieldsValidated={localFieldsValidated}
                  disabled={!isRecipientsTurn}
                  onSignatureComplete={async (nextSigner) => {
                    await completeDocument(undefined, nextSigner);
@@ -1,15 +1,18 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';

 import { Trans } from '@lingui/react/macro';
 import type { Field } from '@prisma/client';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
-import { match } from 'ts-pattern';
+import { useNavigate } from 'react-router';
+import { P, match } from 'ts-pattern';

+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
  ZCheckboxFieldMeta,
  ZDropdownFieldMeta,
@@ -18,8 +21,11 @@ import {
  ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import type { CompletedField } from '@documenso/lib/types/fields';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { trpc } from '@documenso/trpc/react';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -40,6 +46,7 @@ import { DocumentSigningRejectDialog } from '~/components/general/document-signi
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';

+import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';

 export type DocumentSigningPageViewProps = {
@@ -63,9 +70,56 @@ export const DocumentSigningPageView = ({
 }: DocumentSigningPageViewProps) => {
  const { documentData, documentMeta } = document;

+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
  const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
  const [isExpanded, setIsExpanded] = useState(false);

+  const {
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
+
+  // Keep the loading state going if successful since the redirect may take some time.
+  const isSubmitting = isPending || isSuccess;
+
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
+  const fieldsValidated = () => {
+    validateFieldsInserted(fieldsRequiringValidation);
+  };
+
+  const completeDocument = async (
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => {
+    const payload = {
+      token: recipient.token,
+      documentId: document.id,
+      authOptions,
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocumentWithToken(payload);
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    if (documentMeta?.redirectUrl) {
+      window.location.href = documentMeta.redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
+  };
+
  let senderName = document.user.name ?? '';
  let senderEmail = `(${document.user.email})`;

@@ -78,6 +132,31 @@ export const DocumentSigningPageView = ({
  const targetSigner =
    recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;

+  const nextRecipient = useMemo(() => {
+    if (!documentMeta?.signingOrder || documentMeta.signingOrder !== 'SEQUENTIAL') {
+      return undefined;
+    }
+
+    const sortedRecipients = allRecipients.sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
+      if (a.signingOrder === null) return 1;
+      if (b.signingOrder === null) return -1;
+      if (a.signingOrder === b.signingOrder) return a.id - b.id;
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
+  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
+
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
+  const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);
+  const hasPendingFields = pendingFields.length > 0;
+
  return (
    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
      <div className="mx-auto w-full max-w-screen-xl sm:px-6">
@@ -163,19 +242,55 @@ export const DocumentSigningPageView = ({
                    .otherwise(() => null)}
                </h3>

-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                  {isExpanded ? (
-                    <LucideChevronDown
-                      className="text-muted-foreground h-5 w-5"
+                {match({ hasPendingFields, isExpanded, role: recipient.role })
+                  .with(
+                    {
+                      hasPendingFields: false,
+                      role: P.not(RecipientRole.ASSISTANT),
+                      isExpanded: false,
+                    },
+                    () => (
+                      <div className="md:hidden">
+                        <DocumentSigningCompleteDialog
+                          isSubmitting={isSubmitting}
+                          documentTitle={document.title}
+                          fields={fields}
+                          fieldsValidated={fieldsValidated}
+                          disabled={!isRecipientsTurn}
+                          onSignatureComplete={async (nextSigner) => {
+                            await completeDocument(undefined, nextSigner);
+                          }}
+                          role={recipient.role}
+                          allowDictateNextSigner={
+                            nextRecipient && documentMeta?.allowDictateNextSigner
+                          }
+                          defaultNextSigner={
+                            nextRecipient
+                              ? { name: nextRecipient.name, email: nextRecipient.email }
+                              : undefined
+                          }
+                        />
+                      </div>
+                    ),
+                  )
+                  .with({ isExpanded: true }, () => (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
                      onClick={() => setIsExpanded(false)}
-                    />
-                  ) : (
-                    <LucideChevronUp
-                      className="text-muted-foreground h-5 w-5"
+                    >
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ))
+                  .otherwise(() => (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
                      onClick={() => setIsExpanded(true)}
-                    />
-                  )}
-                </Button>
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ))}
              </div>

              <div className="hidden group-data-[expanded]/document-widget:block md:block">
@@ -204,10 +319,13 @@ export const DocumentSigningPageView = ({
                  document={document}
                  recipient={recipient}
                  fields={fields}
-                  redirectUrl={documentMeta?.redirectUrl}
                  isRecipientsTurn={isRecipientsTurn}
                  allRecipients={allRecipients}
                  setSelectedSignerId={setSelectedSignerId}
+                  completeDocument={completeDocument}
+                  isSubmitting={isSubmitting}
+                  fieldsValidated={fieldsValidated}
+                  nextRecipient={nextRecipient}
                />
              </div>
            </div>
@@ -224,7 +342,9 @@ export const DocumentSigningPageView = ({
          <DocumentSigningAutoSign recipient={recipient} fields={fields} />
        )}

-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
          {fields
            .filter(
              (field) =>
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -80,16 +80,20 @@ export const DocumentSigningTextField = ({
  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;

  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
-  const shouldAutoSignField = useMemo(
-    () =>
-      (!field.inserted && parsedFieldMeta?.text) ||
-      (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly),
-    [field.inserted, parsedFieldMeta?.text, parsedFieldMeta?.readOnly],
-  );
+  const shouldAutoSignField =
+    (!field.inserted && parsedFieldMeta?.text) ||
+    (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);

  const [showCustomTextModal, setShowCustomTextModal] = useState(false);
  const [localText, setLocalCustomText] = useState(parsedFieldMeta?.text ?? '');

+  useEffect(() => {
+    if (!showCustomTextModal) {
+      setLocalCustomText(parsedFieldMeta?.text ?? '');
+      setErrors(initialErrors);
+    }
+  }, [showCustomTextModal]);
+
  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const text = e.target.value;
    setLocalCustomText(text);
@@ -212,12 +216,14 @@ export const DocumentSigningTextField = ({
    }
  };

-  if (shouldAutoSignField) {
-    void executeActionAuthProcedure({
-      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-      actionTarget: field.type,
-    });
-  }
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);

  const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;

@@ -312,8 +318,7 @@ export const DocumentSigningTextField = ({
                className="flex-1"
                onClick={() => {
                  setShowCustomTextModal(false);
-                  setLocalCustomText(parsedFieldMeta?.text ?? '');
-                  setErrors(initialErrors);
+                  setLocalCustomText('');
                }}
              >
                <Trans>Cancel</Trans>
@@ -21,7 +21,7 @@ export const DocumentAuditLogDownloadButton = ({
  const { _ } = useLingui();

  const { mutateAsync: downloadAuditLogs, isPending } =
-    trpc.document.downloadAuditLogs.useMutation();
+    trpc.document.auditLog.download.useMutation();

  const onDownloadAuditLogsClick = async () => {
    try {
@@ -49,7 +49,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon

  const { quota, remaining, refreshLimits } = useLimits();

-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.create.useMutation();

  const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;

@@ -59,23 +59,22 @@ export const DocumentEditForm = ({

  const utils = trpc.useUtils();

-  const { data: document, refetch: refetchDocument } =
-    trpc.document.getDocumentWithDetailsById.useQuery(
-      {
-        documentId: initialDocument.id,
-      },
-      {
-        initialData: initialDocument,
-        ...SKIP_QUERY_BATCH_META,
-      },
-    );
+  const { data: document, refetch: refetchDocument } = trpc.document.get.useQuery(
+    {
+      documentId: initialDocument.id,
+    },
+    {
+      initialData: initialDocument,
+      ...SKIP_QUERY_BATCH_META,
+    },
+  );

  const { recipients, fields } = document;

-  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.update.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
        {
          documentId: initialDocument.id,
        },
@@ -84,23 +83,10 @@ export const DocumentEditForm = ({
    },
  });

-  const { mutateAsync: setSigningOrderForDocument } =
-    trpc.document.setSigningOrderForDocument.useMutation({
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      onSuccess: (newData) => {
-        utils.document.getDocumentWithDetailsById.setData(
-          {
-            documentId: initialDocument.id,
-          },
-          (oldData) => ({ ...(oldData || initialDocument), ...newData, id: Number(newData.id) }),
-        );
-      },
-    });
-
  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: ({ fields: newFields }) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
        {
          documentId: initialDocument.id,
        },
@@ -112,7 +98,7 @@ export const DocumentEditForm = ({
  const { mutateAsync: setRecipients } = trpc.recipient.setDocumentRecipients.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: ({ recipients: newRecipients }) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
        {
          documentId: initialDocument.id,
        },
@@ -121,10 +107,10 @@ export const DocumentEditForm = ({
    },
  });

-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
+  const { mutateAsync: sendDocument } = trpc.document.distribute.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
        {
          documentId: initialDocument.id,
        },
@@ -173,34 +159,37 @@ export const DocumentEditForm = ({
    return initialStep;
  });

+  const saveSettingsData = async (data: TAddSettingsFormSchema) => {
+    const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
+
+    const parsedGlobalAccessAuth = z
+      .array(ZDocumentAccessAuthTypesSchema)
+      .safeParse(data.globalAccessAuth);
+
+    return updateDocument({
+      documentId: document.id,
+      data: {
+        title: data.title,
+        externalId: data.externalId || null,
+        visibility: data.visibility,
+        globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+        globalActionAuth: data.globalActionAuth ?? [],
+      },
+      meta: {
+        timezone,
+        dateFormat,
+        redirectUrl,
+        language: isValidLanguageCode(language) ? language : undefined,
+        typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+        uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+        drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+      },
+    });
+  };
+
  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
    try {
-      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
-
-      const parsedGlobalAccessAuth = z
-        .array(ZDocumentAccessAuthTypesSchema)
-        .safeParse(data.globalAccessAuth);
-
-      await updateDocument({
-        documentId: document.id,
-        data: {
-          title: data.title,
-          externalId: data.externalId || null,
-          visibility: data.visibility,
-          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
-          globalActionAuth: data.globalActionAuth ?? [],
-        },
-        meta: {
-          timezone,
-          dateFormat,
-          redirectUrl,
-          language: isValidLanguageCode(language) ? language : undefined,
-          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
-          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-        },
-      });
-
+      await saveSettingsData(data);
      setStep('signers');
    } catch (err) {
      console.error(err);
@@ -213,30 +202,58 @@ export const DocumentEditForm = ({
    }
  };

+  const onAddSettingsFormAutoSave = async (data: TAddSettingsFormSchema) => {
+    try {
+      await saveSettingsData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the document settings.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveSignersData = async (data: TAddSignersFormSchema) => {
+    return Promise.all([
+      updateDocument({
+        documentId: document.id,
+        meta: {
+          allowDictateNextSigner: data.allowDictateNextSigner,
+          signingOrder: data.signingOrder,
+        },
+      }),
+
+      setRecipients({
+        documentId: document.id,
+        recipients: data.signers.map((signer) => ({
+          ...signer,
+          // Explicitly set to null to indicate we want to remove auth if required.
+          actionAuth: signer.actionAuth ?? [],
+        })),
+      }),
+    ]);
+  };
+
+  const onAddSignersFormAutoSave = async (data: TAddSignersFormSchema) => {
+    try {
+      await saveSignersData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while adding signers.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
    try {
-      await Promise.all([
-        setSigningOrderForDocument({
-          documentId: document.id,
-          signingOrder: data.signingOrder,
-        }),
-
-        updateDocument({
-          documentId: document.id,
-          meta: {
-            allowDictateNextSigner: data.allowDictateNextSigner,
-          },
-        }),
-
-        setRecipients({
-          documentId: document.id,
-          recipients: data.signers.map((signer) => ({
-            ...signer,
-            // Explicitly set to null to indicate we want to remove auth if required.
-            actionAuth: signer.actionAuth ?? [],
-          })),
-        }),
-      ]);
+      await saveSignersData(data);

      setStep('fields');
    } catch (err) {
@@ -250,12 +267,16 @@ export const DocumentEditForm = ({
    }
  };

+  const saveFieldsData = async (data: TAddFieldsFormSchema) => {
+    return addFields({
+      documentId: document.id,
+      fields: data.fields,
+    });
+  };
+
  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
    try {
-      await addFields({
-        documentId: document.id,
-        fields: data.fields,
-      });
+      await saveFieldsData(data);

      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
@@ -277,24 +298,60 @@ export const DocumentEditForm = ({
    }
  };

-  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+  const onAddFieldsFormAutoSave = async (data: TAddFieldsFormSchema) => {
+    try {
+      await saveFieldsData(data);
+      // Don't clear localStorage on auto-save, only on explicit submit
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the fields.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveSubjectData = async (data: TAddSubjectFormSchema) => {
    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
      data.meta;

-    try {
-      await sendDocument({
-        documentId: document.id,
-        meta: {
-          subject,
-          message,
-          distributionMethod,
-          emailId,
-          emailReplyTo: emailReplyTo || null,
-          emailSettings: emailSettings,
-        },
-      });
+    return updateDocument({
+      documentId: document.id,
+      meta: {
+        subject,
+        message,
+        distributionMethod,
+        emailId,
+        emailReplyTo,
+        emailSettings: emailSettings,
+      },
+    });
+  };

-      if (distributionMethod === DocumentDistributionMethod.EMAIL) {
+  const sendDocumentWithSubject = async (data: TAddSubjectFormSchema) => {
+    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
+      data.meta;
+
+    return sendDocument({
+      documentId: document.id,
+      meta: {
+        subject,
+        message,
+        distributionMethod,
+        emailId,
+        emailReplyTo: emailReplyTo || null,
+        emailSettings,
+      },
+    });
+  };
+
+  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+    try {
+      await sendDocumentWithSubject(data);
+
+      if (data.meta.distributionMethod === DocumentDistributionMethod.EMAIL) {
        toast({
          title: _(msg`Document sent`),
          description: _(msg`Your document has been sent successfully.`),
@@ -322,6 +379,21 @@ export const DocumentEditForm = ({
    }
  };

+  const onAddSubjectFormAutoSave = async (data: TAddSubjectFormSchema) => {
+    try {
+      // Save form data without sending the document
+      await saveSubjectData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the subject form.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
  const currentDocumentFlow = documentFlow[step];

  /**
@@ -367,25 +439,28 @@ export const DocumentEditForm = ({
              fields={fields}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
              onSubmit={onAddSettingsFormSubmit}
+              onAutoSave={onAddSettingsFormAutoSave}
            />

            <AddSignersFormPartial
-              key={recipients.length}
+              key={document.id}
              documentFlow={documentFlow.signers}
              recipients={recipients}
              signingOrder={document.documentMeta?.signingOrder}
              allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
              fields={fields}
              onSubmit={onAddSignersFormSubmit}
+              onAutoSave={onAddSignersFormAutoSave}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
            />

            <AddFieldsFormPartial
-              key={fields.length}
+              key={document.id}
              documentFlow={documentFlow.fields}
              recipients={recipients}
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
+              onAutoSave={onAddFieldsFormAutoSave}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
              teamId={team.id}
            />
@@ -397,6 +472,7 @@ export const DocumentEditForm = ({
              recipients={recipients}
              fields={fields}
              onSubmit={onAddSubjectFormSubmit}
+              onAutoSave={onAddSubjectFormAutoSave}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
            />
          </Stepper>
@@ -42,7 +42,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps

  const onDownloadClick = async () => {
    try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
+      const documentWithData = await trpcClient.document.get.query(
        {
          documentId: document.id,
        },
@@ -71,7 +71,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP

  const onDownloadClick = async () => {
    try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
+      const documentWithData = await trpcClient.document.get.query(
        {
          documentId: document.id,
        },
@@ -100,7 +100,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP

  const onDownloadOriginalClick = async () => {
    try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
+      const documentWithData = await trpcClient.document.get.query(
        {
          documentId: document.id,
        },
@@ -32,7 +32,7 @@ export const DocumentPageViewRecentActivity = ({
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage,
-  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+  } = trpc.document.auditLog.find.useInfiniteQuery(
    {
      documentId,
      filterForRecentActivity: true,
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -26,13 +26,16 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })

      setSearchParams(params);
    },
-    [searchParams, setSearchParams],
+    [searchParams],
  );

-  const currentQuery = searchParams?.get('query') ?? '';
-  if (currentQuery !== debouncedSearchTerm) {
-    handleSearch(debouncedSearchTerm);
-  }
+  useEffect(() => {
+    const currentQueryParam = searchParams.get('query') || '';
+
+    if (debouncedSearchTerm !== currentQueryParam) {
+      handleSearch(debouncedSearchTerm);
+    }
+  }, [debouncedSearchTerm, searchParams]);

  return (
    <Input
@@ -52,7 +52,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp

  const [isLoading, setIsLoading] = useState(false);

-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.create.useMutation();

  const disabledMessage = useMemo(() => {
    if (organisation.subscription && remaining.documents === 0) {
@@ -28,7 +28,7 @@ export const LegacyFieldWarningPopover = ({
  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
    trpc.template.updateTemplate.useMutation();
  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
-    trpc.document.updateDocument.useMutation();
+    trpc.document.update.useMutation();

  const onUpdateFieldsClick = async () => {
    if (type === 'document') {
@@ -124,32 +124,36 @@ export const TemplateEditForm = ({
    },
  });

-  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+  const saveSettingsData = async (data: TAddTemplateSettingsFormSchema) => {
    const { signatureTypes } = data.meta;

    const parsedGlobalAccessAuth = z
      .array(ZDocumentAccessAuthTypesSchema)
      .safeParse(data.globalAccessAuth);

+    return updateTemplateSettings({
+      templateId: template.id,
+      data: {
+        title: data.title,
+        externalId: data.externalId || null,
+        visibility: data.visibility,
+        globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+        globalActionAuth: data.globalActionAuth ?? [],
+      },
+      meta: {
+        ...data.meta,
+        emailReplyTo: data.meta.emailReplyTo || null,
+        typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+        uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+        drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+        language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
+      },
+    });
+  };
+
+  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
    try {
-      await updateTemplateSettings({
-        templateId: template.id,
-        data: {
-          title: data.title,
-          externalId: data.externalId || null,
-          visibility: data.visibility,
-          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
-          globalActionAuth: data.globalActionAuth ?? [],
-        },
-        meta: {
-          ...data.meta,
-          emailReplyTo: data.meta.emailReplyTo || null,
-          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
-          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-          language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
-        },
-      });
+      await saveSettingsData(data);

      setStep('signers');
    } catch (err) {
@@ -163,24 +167,42 @@ export const TemplateEditForm = ({
    }
  };

+  const onAddSettingsFormAutoSave = async (data: TAddTemplateSettingsFormSchema) => {
+    try {
+      await saveSettingsData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the template settings.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveTemplatePlaceholderData = async (data: TAddTemplatePlacholderRecipientsFormSchema) => {
+    return Promise.all([
+      updateTemplateSettings({
+        templateId: template.id,
+        meta: {
+          signingOrder: data.signingOrder,
+          allowDictateNextSigner: data.allowDictateNextSigner,
+        },
+      }),
+
+      setRecipients({
+        templateId: template.id,
+        recipients: data.signers,
+      }),
+    ]);
+  };
+
  const onAddTemplatePlaceholderFormSubmit = async (
    data: TAddTemplatePlacholderRecipientsFormSchema,
  ) => {
    try {
-      await Promise.all([
-        updateTemplateSettings({
-          templateId: template.id,
-          meta: {
-            signingOrder: data.signingOrder,
-            allowDictateNextSigner: data.allowDictateNextSigner,
-          },
-        }),
-
-        setRecipients({
-          templateId: template.id,
-          recipients: data.signers,
-        }),
-      ]);
+      await saveTemplatePlaceholderData(data);

      setStep('fields');
    } catch (err) {
@@ -192,12 +214,46 @@ export const TemplateEditForm = ({
    }
  };

+  const onAddTemplatePlaceholderFormAutoSave = async (
+    data: TAddTemplatePlacholderRecipientsFormSchema,
+  ) => {
+    try {
+      await saveTemplatePlaceholderData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the template placeholders.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveFieldsData = async (data: TAddTemplateFieldsFormSchema) => {
+    return addTemplateFields({
+      templateId: template.id,
+      fields: data.fields,
+    });
+  };
+
+  const onAddFieldsFormAutoSave = async (data: TAddTemplateFieldsFormSchema) => {
+    try {
+      await saveFieldsData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the template fields.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
  const onAddFieldsFormSubmit = async (data: TAddTemplateFieldsFormSchema) => {
    try {
-      await addTemplateFields({
-        templateId: template.id,
-        fields: data.fields,
-      });
+      await saveFieldsData(data);

      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
@@ -270,11 +326,12 @@ export const TemplateEditForm = ({
              recipients={recipients}
              fields={fields}
              onSubmit={onAddSettingsFormSubmit}
+              onAutoSave={onAddSettingsFormAutoSave}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
            />

            <AddTemplatePlaceholderRecipientsFormPartial
-              key={recipients.length}
+              key={template.id}
              documentFlow={documentFlow.signers}
              recipients={recipients}
              fields={fields}
@@ -282,15 +339,17 @@ export const TemplateEditForm = ({
              allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
              templateDirectLink={template.directLink}
              onSubmit={onAddTemplatePlaceholderFormSubmit}
+              onAutoSave={onAddTemplatePlaceholderFormAutoSave}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
            />

            <AddTemplateFieldsFormPartial
-              key={fields.length}
+              key={template.id}
              documentFlow={documentFlow.fields}
              recipients={recipients}
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
+              onAutoSave={onAddFieldsFormAutoSave}
              teamId={team?.id}
            />
          </Stepper>
@@ -67,7 +67,7 @@ export const TemplatePageViewDocumentsTable = ({
    Object.fromEntries(searchParams ?? []),
  );

-  const { data, isLoading, isLoadingError } = trpc.document.findDocuments.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.document.find.useQuery(
    {
      templateId,
      page: parsedSearchParams.page,
@@ -18,7 +18,7 @@ export const TemplatePageViewRecentActivity = ({
  templateId,
  documentRootPath,
 }: TemplatePageViewRecentActivityProps) => {
-  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocuments.useQuery({
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.find.useQuery({
    templateId,
    orderByColumn: 'createdAt',
    orderByDirection: 'asc',
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -22,34 +22,11 @@ export type VerifyEmailBannerProps = {

 const RESEND_CONFIRMATION_EMAIL_TIMEOUT = 20 * ONE_SECOND;

-const shouldShowDialog = () => {
-  try {
-    const emailVerificationDialogLastShown = localStorage.getItem(
-      'emailVerificationDialogLastShown',
-    );
-
-    if (emailVerificationDialogLastShown) {
-      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
-
-      if (Date.now() - lastShownTimestamp < ONE_DAY) {
-        return false;
-      }
-    }
-
-    // Update the timestamp when showing the dialog
-    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
-    return true;
-  } catch {
-    // In case localStorage is not available (SSR, incognito mode, etc.)
-    return false;
-  }
-};
-
 export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
  const { _ } = useLingui();
  const { toast } = useToast();

-  const [isOpen, setIsOpen] = useState(shouldShowDialog);
+  const [isOpen, setIsOpen] = useState(false);
  const [isPending, setIsPending] = useState(false);

  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
@@ -85,6 +62,27 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
    setIsPending(false);
  };

+  useEffect(() => {
+    // Check localStorage to see if we've recently automatically displayed the dialog
+    // if it was within the past 24 hours, don't show it again
+    // otherwise, show it again and update the localStorage timestamp
+    const emailVerificationDialogLastShown = localStorage.getItem(
+      'emailVerificationDialogLastShown',
+    );
+
+    if (emailVerificationDialogLastShown) {
+      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
+
+      if (Date.now() - lastShownTimestamp < ONE_DAY) {
+        return;
+      }
+    }
+
+    setIsOpen(true);
+
+    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
+  }, []);
+
  return (
    <>
      <div className="bg-yellow-200 dark:bg-yellow-400">
@@ -52,7 +52,7 @@ export const AdminDocumentRecipientItemTable = ({ recipient }: RecipientItemProp
    },
  });

-  const { mutateAsync: updateRecipient } = trpc.admin.updateRecipient.useMutation();
+  const { mutateAsync: updateRecipient } = trpc.admin.recipient.update.useMutation();

  const columns = useMemo(() => {
    return [
@@ -34,7 +34,7 @@ export const DocumentLogsTable = ({ documentId }: DocumentLogsTableProps) => {

  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));

-  const { data, isLoading, isLoadingError } = trpc.document.findDocumentAuditLogs.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.document.auditLog.find.useQuery(
    {
      documentId,
      page: parsedSearchParams.page,
@@ -45,7 +45,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
  const onDownloadClick = async () => {
    try {
      const document = !recipient
-        ? await trpcClient.document.getDocumentById.query(
+        ? await trpcClient.document.get.query(
            {
              documentId: row.id,
            },
@@ -77,7 +77,7 @@ export const DocumentsTableActionDropdown = ({
  const onDownloadClick = async () => {
    try {
      const document = !recipient
-        ? await trpcClient.document.getDocumentById.query({
+        ? await trpcClient.document.get.query({
            documentId: row.id,
          })
        : await trpcClient.document.getDocumentByToken.query({
@@ -103,7 +103,7 @@ export const DocumentsTableActionDropdown = ({
  const onDownloadOriginalClick = async () => {
    try {
      const document = !recipient
-        ? await trpcClient.document.getDocumentById.query({
+        ? await trpcClient.document.get.query({
            documentId: row.id,
          })
        : await trpcClient.document.getDocumentByToken.query({
@@ -11,7 +11,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/find-documents.types';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -17,7 +17,6 @@ import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
-import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -32,12 +31,12 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';

 export type DocumentsTableProps = {
-  data?: TFindDocumentsResponse;
+  data?: TFindInboxResponse;
  isLoading?: boolean;
  isLoadingError?: boolean;
 };

-type DocumentsTableRow = TFindDocumentsResponse['data'][number];
+type DocumentsTableRow = TFindInboxResponse['data'][number];

 export const InboxTable = () => {
  const { _, i18n } = useLingui();
@@ -62,7 +62,7 @@ export const SettingsSecurityPasskeyTableActions = ({
  });

  const { mutateAsync: updatePasskey, isPending: isUpdatingPasskey } =
-    trpc.auth.updatePasskey.useMutation({
+    trpc.auth.passkey.update.useMutation({
      onSuccess: () => {
        toast({
          title: _(msg`Success`),
@@ -84,7 +84,7 @@ export const SettingsSecurityPasskeyTableActions = ({
    });

  const { mutateAsync: deletePasskey, isPending: isDeletingPasskey } =
-    trpc.auth.deletePasskey.useMutation({
+    trpc.auth.passkey.delete.useMutation({
      onSuccess: () => {
        toast({
          title: _(msg`Success`),
@@ -26,7 +26,7 @@ export const SettingsSecurityPasskeyTable = () => {

  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));

-  const { data, isLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.auth.passkey.find.useQuery(
    {
      page: parsedSearchParams.page,
      perPage: parsedSearchParams.perPage,
@@ -48,7 +48,7 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
  const { toast } = useToast();

  const { mutate: resealDocument, isPending: isResealDocumentLoading } =
-    trpc.admin.resealDocument.useMutation({
+    trpc.admin.document.reseal.useMutation({
      onSuccess: () => {
        toast({
          title: _(msg`Success`),
@@ -33,7 +33,7 @@ export default function AdminDocumentsPage() {
  const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;

  const { data: findDocumentsData, isPending: isFindDocumentsLoading } =
-    trpc.admin.findDocuments.useQuery(
+    trpc.admin.document.find.useQuery(
      {
        query: debouncedTerm,
        page: page || 1,
@@ -2,14 +2,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 { User } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
 import { Link } from 'react-router';
 import type { z } from 'zod';

 import { trpc } from '@documenso/trpc/react';
-import { ZAdminUpdateProfileMutationSchema } from '@documenso/trpc/server/admin-router/schema';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
+import { ZUpdateUserRequestSchema } from '@documenso/trpc/server/admin-router/update-user.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Form,
@@ -33,12 +33,12 @@ import { AdminOrganisationsTable } from '~/components/tables/admin-organisations

 import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';

-const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
+const ZUserFormSchema = ZUpdateUserRequestSchema.omit({ id: true });

 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;

 export default function UserPage({ params }: { params: { id: number } }) {
-  const { data: user, isLoading: isLoadingUser } = trpc.profile.getUser.useQuery(
+  const { data: user, isLoading: isLoadingUser } = trpc.admin.user.get.useQuery(
    {
      id: Number(params.id),
    },
@@ -78,14 +78,14 @@ export default function UserPage({ params }: { params: { id: number } }) {
  return <AdminUserPage user={user} />;
 }

-const AdminUserPage = ({ user }: { user: User }) => {
+const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
  const { _ } = useLingui();
  const { toast } = useToast();
  const { revalidate } = useRevalidator();

  const roles = user.roles ?? [];

-  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
+  const { mutateAsync: updateUserMutation } = trpc.admin.user.update.useMutation();

  const form = useForm<TUserFormSchema>({
    resolver: zodResolver(ZUserFormSchema),
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -29,29 +29,22 @@ export default function TeamsSettingsMembersPage() {
  /**
   * Handle debouncing the search query.
   */
-  const handleSearchQueryChange = useCallback(
-    (newQuery: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());

-      if (newQuery.trim()) {
-        params.set('query', newQuery);
-      } else {
-        params.delete('query');
-      }
+    params.set('query', debouncedSearchQuery);

-      if (params.toString() === searchParams?.toString()) {
-        return;
-      }
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }

-      setSearchParams(params);
-    },
-    [searchParams, setSearchParams],
-  );
+    // If nothing  to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }

-  const currentParamQuery = searchParams?.get('query') ?? '';
-  if (currentParamQuery !== debouncedSearchQuery) {
-    handleSearchQueryChange(debouncedSearchQuery);
-  }
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);

  return (
    <div>
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { useLingui } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router';
@@ -20,28 +20,21 @@ export default function OrganisationSettingsTeamsPage() {
  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');

  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
  /**
   * Handle debouncing the search query.
   */
-  const handleSearchQueryChange = useCallback(
-    (newQuery: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());

-      if (newQuery.trim()) {
-        params.set('query', newQuery);
-      } else {
-        params.delete('query');
-      }
+    params.set('query', debouncedSearchQuery);

-      setSearchParams(params);
-    },
-    [searchParams, setSearchParams],
-  );
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }

-  const currentParamQuery = searchParams?.get('query') ?? '';
-  if (currentParamQuery !== debouncedSearchQuery) {
-    handleSearchQueryChange(debouncedSearchQuery);
-  }
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);

  return (
    <div>
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { Outlet, useNavigate } from 'react-router';

 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
@@ -28,8 +30,13 @@ export default function Layout() {
  const currentOrganisation = organisations[0];
  const team = currentOrganisation?.teams[0] || null;

+  useEffect(() => {
+    if (!isPersonalLayoutMode || !team) {
+      void navigate('/settings/profile');
+    }
+  }, []);
+
  if (!isPersonalLayoutMode || !team) {
-    void navigate('/settings/profile');
    return null;
  }

@@ -67,6 +67,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
  const documentVisibility = document?.visibility;
  const currentTeamMemberRole = team.currentTeamRole;
  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
+
  let canAccessDocument = true;

  if (!isRecipient && document?.userId !== user.id) {
@@ -50,10 +50,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
    throw redirect(documentRootPath);
  }

-  if (document.folderId) {
-    throw redirect(documentRootPath);
-  }
-
  const recipients = await getRecipientsForDocument({
    documentId,
    userId: user.id,
@@ -68,13 +64,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {

  return {
    document,
-    documentRootPath,
    recipients,
+    documentRootPath,
  };
 }

 export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
-  const { document, documentRootPath, recipients } = loaderData;
+  const { document, recipients, documentRootPath } = loaderData;

  const { _, i18n } = useLingui();

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { Trans } from '@lingui/react/macro';
 import { FolderType, OrganisationType } from '@prisma/client';
@@ -12,7 +12,8 @@ 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 { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/schema';
+import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/find-documents-internal.types';
+import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';

@@ -52,6 +53,15 @@ export default function DocumentsPage() {
  const [isMovingDocument, setIsMovingDocument] = useState(false);
  const [documentToMove, setDocumentToMove] = useState<number | null>(null);

+  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],
@@ -62,19 +72,6 @@ export default function DocumentsPage() {
    folderId,
  });

-  const stats = useMemo(
-    () =>
-      data?.stats ?? {
-        [ExtendedDocumentStatus.DRAFT]: 0,
-        [ExtendedDocumentStatus.PENDING]: 0,
-        [ExtendedDocumentStatus.COMPLETED]: 0,
-        [ExtendedDocumentStatus.REJECTED]: 0,
-        [ExtendedDocumentStatus.INBOX]: 0,
-        [ExtendedDocumentStatus.ALL]: 0,
-      },
-    [data?.stats],
-  );
-
  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
    const params = new URLSearchParams(searchParams);

@@ -105,6 +102,12 @@ export default function DocumentsPage() {
    return path;
  };

+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
  return (
    <DocumentDropZoneWrapper>
      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { useLingui } from '@lingui/react/macro';
 import { useLocation, useSearchParams } from 'react-router';
@@ -19,33 +19,26 @@ export default function TeamsSettingsMembersPage() {
  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');

  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
  /**
   * Handle debouncing the search query.
   */
-  const handleSearchQueryChange = useCallback(
-    (newQuery: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());

-      if (newQuery.trim()) {
-        params.set('query', newQuery);
-      } else {
-        params.delete('query');
-      }
+    params.set('query', debouncedSearchQuery);

-      // If nothing to change then do nothing.
-      if (params.toString() === searchParams?.toString()) {
-        return;
-      }
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }

-      setSearchParams(params);
-    },
-    [searchParams, setSearchParams],
-  );
+    // If nothing  to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }

-  const currentParamQuery = searchParams?.get('query') ?? '';
-  if (currentParamQuery !== debouncedSearchQuery) {
-    handleSearchQueryChange(debouncedSearchQuery);
-  }
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);

  return (
    <div>
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -130,8 +130,12 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
    }
  };

+  useEffect(() => {
+    setIsPublicProfileVisible(profile.enabled);
+  }, [profile.enabled]);
+
  return (
-    <div key={team.id} className="max-w-2xl">
+    <div className="max-w-2xl">
      <SettingsHeader
        title={t`Public Profile`}
        subtitle={t`You can choose to enable or disable the profile for public view.`}
@@ -21,7 +21,7 @@ export function meta() {
 export default function ApiTokensPage() {
  const { i18n } = useLingui();

-  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
+  const { data: tokens } = trpc.apiToken.getMany.useQuery();

  const team = useOptionalCurrentTeam();

@@ -9,10 +9,10 @@ import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';

 import { FolderGrid } from '~/components/general/folder/folder-grid';
+import { TemplateDropZoneWrapper } from '~/components/general/template/template-drop-zone-wrapper';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
-import { TemplateDropZoneWrapper } from '~/components/general/template/template-drop-zone-wrapper';

 export function meta() {
  return appMetaTags('Templates');
@@ -45,6 +45,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
        mode: 'insensitive',
      },
    },
+    select: {
+      id: true,
+    },
  });

  // Directly convert the team member invite to a team member if they already have an account.
@@ -38,48 +38,33 @@ export default function VerifyEmailPage({ loaderData }: Route.ComponentProps) {
  const [state, setState] = useState<keyof typeof EMAIL_VERIFICATION_STATE | null>(null);
  const [isLoading, setIsLoading] = useState(false);

+  const verifyToken = async () => {
+    setIsLoading(true);
+
+    try {
+      const response = await authClient.emailPassword.verifyEmail({
+        token,
+      });
+
+      await refreshSession();
+
+      setState(response.state);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to verify your email at this time.`),
+      });
+
+      await navigate('/verify-email');
+    }
+
+    setIsLoading(false);
+  };
+
  useEffect(() => {
-    let ignore = false;
-
-    const verify = async () => {
-      try {
-        setIsLoading(true);
-
-        const response = await authClient.emailPassword.verifyEmail({
-          token,
-        });
-
-        if (ignore) {
-          return;
-        }
-
-        await refreshSession();
-        setState(response.state);
-      } catch (err) {
-        if (ignore) {
-          return;
-        }
-
-        console.error(err);
-
-        toast({
-          title: _(msg`Something went wrong`),
-          description: _(msg`We were unable to verify your email at this time.`),
-        });
-
-        await navigate('/verify-email');
-      } finally {
-        if (!ignore) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    void verify();
-
-    return () => {
-      ignore = true;
-    };
+    void verifyToken();
  }, []);

  if (isLoading || state === null) {
@@ -101,5 +101,5 @@
    "vite-plugin-babel-macros": "^1.0.6",
    "vite-tsconfig-paths": "^5.1.4"
  },
-  "version": "1.12.2-rc.4"
+  "version": "1.12.2-rc.6"
 }
@@ -51,4 +51,4 @@ services:
    ports:
      - 3000:3000
    volumes:
-      - ../../apps/web/example/cert.p12:/opt/documenso/cert.p12
+      - ../../apps/remix/example/cert.p12:/opt/documenso/cert.p12
@@ -1,12 +1,12 @@
 {
  "name": "@documenso/root",
-  "version": "1.12.2-rc.4",
+  "version": "1.12.2-rc.6",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@documenso/root",
-      "version": "1.12.2-rc.4",
+      "version": "1.12.2-rc.6",
      "workspaces": [
        "apps/*",
        "packages/*"
@@ -89,7 +89,7 @@
    },
    "apps/remix": {
      "name": "@documenso/remix",
-      "version": "1.12.2-rc.4",
+      "version": "1.12.2-rc.6",
      "dependencies": {
        "@documenso/api": "*",
        "@documenso/assets": "*",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Catalin Pit	913a59ec23	fix: duplicate document	2025-09-03 12:21:23 +03:00
Catalin Pit	bb5c2edefd	feat: implement auto-save functionality for signers in document edit form (#1792 )	2025-09-02 21:01:16 +10:00
Ephraim Duncan	19565c1821	fix: access audit logs for documents in folder (#1989 )	2025-08-31 12:17:31 +10:00
samuel-cglg	2603ae8b90	fix: send signing request email after the document status is updated (#1944 ) When sending a document for signing, emails for recipients are sent before the document status is updated. In this case, the job "send.signing.requested.email" fails because it cannot find the document with a PENDING status.	2025-08-31 11:37:49 +10:00
samuel-cglg	7d257236a6	fix: default pagination on documents list API (#1929 )	2025-08-28 16:20:27 +10:00
Ephraim Duncan	31c1a9a783	fix: preserve existing recipient properties when adding new recipient (#1987 )	2025-08-28 16:19:14 +10:00
Lucas Smith	657db3bc84	fix: improve mobile signing ux (#2003 ) Improves the mobile signing UX making actions available via the floating navbar more obvious. Also adds an automatic switch to the complete button once all fields have been signed.	2025-08-28 16:15:52 +10:00
Lucas Smith	184ebdedf1	v1.12.2-rc.6	2025-08-26 11:17:43 +10:00
Lucas Smith	4012022f55	fix: element visible race condition (#1996 ) On larger documents we could accidentally start trying to render fields while not all pages of the PDF have loaded due to us checking for a single page existing. This would cause an error to be thrown, hard locking those documents. This change resolves this by grabbing the highest page number from the given fields and using it for the visibility check instead.	2025-08-26 11:08:43 +10:00
David Nguyen	44f5da95b3	chore: refactor routes (#1992 )	2025-08-25 21:00:35 +10:00
David Nguyen	7eb882aea8	fix: email domain sender logic (#1993 )	2025-08-25 20:59:37 +10:00
David Nguyen	dbf10e5b7b	chore: add agents file (#1991 )	2025-08-25 11:32:15 +10:00
Lucas Smith	fe4d3ed1fd	v1.12.2-rc.5	2025-08-25 09:48:04 +10:00
David Nguyen	b8d07fd1a6	fix: refactor token router (#1981 )	2025-08-25 08:25:01 +10:00
David Nguyen	49fabeb0ec	fix: refactor auth router (#1983 )	2025-08-25 08:24:32 +10:00
David Nguyen	5a5bfe6e34	fix: refactor admin router (#1982 )	2025-08-25 08:23:48 +10:00
David Nguyen	d7e5a9eec7	fix: refactor document router (#1990 )	2025-08-25 08:23:12 +10:00
Ephraim Duncan	adefac81e2	fix: outdated docs (#1985 )	2025-08-24 16:48:30 +10:00
Catalin Pit	67501b45cf	feat: create document in a specific folder (#1965 )	2025-08-23 00:12:17 +10:00
Catalin Pit	17b36ac8e4	feat: sync organization name with stripe (#1974 )	2025-08-22 23:28:04 +10:00
Lucas Smith	80e452afa2	fix: get accurate pdf page size (#1980 ) Handles edge cases with PDF media boxes and crop boxes, deals with certain documents that had been uploaded with weird combos of sizings.	2025-08-22 22:50:41 +10:00
Ephraim Duncan	1cb9de8083	chore: remove 'use client' directives (#1979 )	2025-08-22 02:20:41 +00:00