chore: cleanup useEffect

README.md

@@ -308,7 +308,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 Remix 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 Next.js start command
 
 For local docker run
 

apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -96,16 +96,17 @@ export const AdminOrganisationCreateDialog = ({
     }
   };
 
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -73,20 +73,23 @@ 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={(value) => !isPending && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -83,15 +83,6 @@ 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({
@@ -145,12 +136,22 @@ 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={onOpenChange}>
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -80,14 +80,15 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
     }
   };
 
-  useEffect(() => {
-    if (!isCreateFolderOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isCreateFolderOpen, form]);
+    setIsCreateFolderOpen(value);
+  };
 
   return (
-    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button

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

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -92,14 +90,15 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isOpen]);
+    onOpenChange(value);
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -97,12 +97,13 @@ export const FolderMoveDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
       setSearchTerm('');
     }
-  }, [isOpen, form]);
+    onOpenChange(value);
+  };
 
   // Filter out the current folder, only show folders of the same type, and filter by search term
   const filteredFolders = foldersData?.filter(
@@ -113,7 +114,7 @@ export const FolderMoveDialog = ({
   );
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -71,15 +69,6 @@ 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;
@@ -110,8 +99,18 @@ 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={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -76,7 +76,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
   const [selectedPriceId, setSelectedPriceId] = useState<string>('');
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(actionSearchParam === 'add-organisation');
 
   const form = useForm({
     resolver: zodResolver(ZCreateOrganisationFormSchema),
@@ -91,6 +91,19 @@ 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({
@@ -126,17 +139,6 @@ 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 ||
@@ -145,11 +147,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
   };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">
@@ -314,13 +312,16 @@ const BillingPlanForm = ({
         };
       },
     );
-  }, [plans]);
+  }, [plans, t]);
 
   useEffect(() => {
-    if (value === '' && !canCreateFreeOrganisation) {
-      onChange(dynamicPlans[0][billingPeriod]?.id ?? '');
+    if (value === '' && !canCreateFreeOrganisation && dynamicPlans.length > 0) {
+      const defaultValue = dynamicPlans[0][billingPeriod]?.id ?? '';
+      if (defaultValue) {
+        onChange(defaultValue);
+      }
     }
-  }, [value]);
+  }, [canCreateFreeOrganisation, dynamicPlans, billingPeriod, onChange, value]);
 
   const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
     const plan = dynamicPlans.find(

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -93,14 +93,19 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) {
+      return;
+    }
+
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    setOpen(value);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -73,13 +73,6 @@ 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({
@@ -114,8 +107,17 @@ export const OrganisationEmailCreateDialog = ({
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!isPending) {
+      setOpen(value);
+    }
+  };
+
   return (
-    <Dialog {...props} open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/organisation-email-delete-dialog.tsx

@@ -36,6 +36,12 @@ 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: () => {
@@ -58,7 +64,7 @@ export const OrganisationEmailDeleteDialog = ({
     });
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/organisation-email-domain-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -75,14 +75,6 @@ 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({
@@ -118,12 +110,18 @@ 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={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/organisation-email-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -87,23 +87,20 @@ export const OrganisationEmailUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (value) {
+      form.reset({
+        emailName: organisationEmail.emailName,
+        // replyTo: organisationEmail.replyTo ?? undefined,
+      });
     }
-
-    form.reset({
-      emailName: organisationEmail.emailName,
-      // replyTo: organisationEmail.replyTo ?? undefined,
-    });
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger}
       </DialogTrigger>

apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -117,16 +117,17 @@ export const OrganisationGroupCreateDialog = ({
     }
   };
 
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -193,13 +193,6 @@ 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;
@@ -267,12 +260,18 @@ 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={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,32 +106,27 @@ export const OrganisationMemberUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  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;
+      }
     }
-
-    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',
-      });
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserOrganisationRole, organisationMemberRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -120,24 +120,21 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
     return passkeyName;
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleDialogOpenChange = (value: boolean) => {
+    if (!value) {
       const defaultPasskeyName = extractDefaultPasskeyName();
-
       form.reset({
         passkeyName: defaultPasskeyName,
       });
-
       setFormError(null);
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button variant="secondary" loading={isPending}>

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { 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 [open, setOpen] = useState(false);
+  const actionSearchParam = searchParams?.get('action');
+  const shouldOpenDialog = actionSearchParam === 'add-team';
+  const [open, setOpen] = useState(shouldOpenDialog);
 
   const { data: fullOrganisation } = trpc.organisation.get.useQuery({
     organisationReference: organisation.id,
   });
 
-  const actionSearchParam = searchParams?.get('action');
-
   const form = useForm({
     resolver: zodResolver(ZCreateTeamFormSchema),
     defaultValues: {
@@ -85,6 +85,18 @@ 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({
@@ -150,23 +162,8 @@ 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={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -114,14 +114,17 @@ export const TeamDeleteDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -103,18 +103,17 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button variant="outline" loading={isPending} className="bg-background">

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -92,18 +92,17 @@ export const TeamEmailUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="outline" className="bg-background">

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { 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,
       });
 
-      setOpen(false);
+      handleClose();
     } catch {
       toast({
         title: t`An unknown error occurred`,
@@ -117,17 +117,23 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setStep('SELECT');
+  const handleClose = () => {
+    setOpen(false);
+    form.reset();
+    setStep('SELECT');
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      handleClose();
     }
-  }, [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.
     >

apps/remix/app/components/dialogs/team-group-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,22 +106,17 @@ export const TeamGroupUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (!form.formState.isSubmitting) {
+      if (value) {
+        form.reset();
+      }
+      setOpen(value);
     }
-
-    form.reset();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, team.currentTeamRole, teamGroupRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -119,20 +119,17 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
       setStep('SELECT');
     }
-  }, [open, form]);
+    // 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
+  };
 
   return (
-    <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.
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         <Button variant="secondary" onClick={() => setOpen(true)}>
           <Trans>Add members</Trans>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,30 +106,25 @@ export const TeamMemberUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  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;
+      }
     }
-
-    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',
-      });
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -186,16 +186,20 @@ export const TemplateDirectLinkDialog = ({
   const isLoading =
     isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;
 
-  useEffect(() => {
-    resetCreateTemplateDirectLink();
-    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
-    setSelectedRecipientId(null);
+  const handleOpenChange = (value: boolean) => {
+    if (!isLoading) {
+      if (value) {
+        resetCreateTemplateDirectLink();
+        setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+        setSelectedRecipientId(null);
+      }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+      onOpenChange(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <fieldset disabled={isLoading} className="relative">
         <AnimateGenericFadeInOut motionKey={currentStep}>
           {match({ token, currentStep })

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -85,15 +85,6 @@ 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({
@@ -137,12 +128,22 @@ 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={onOpenChange}>
+    <Dialog {...props} open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -203,14 +203,17 @@ export function TemplateUseDialog({
     name: 'recipients',
   });
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) return;
+
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    setOpen(value);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger || (
           <Button variant="outline" className="bg-background">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -95,17 +95,17 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isOpen, form]);
+    if (!form.formState.isSubmitting) {
+      setIsOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
-    >
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild={true}>
         {children ?? (
           <Button className="mr-4" variant="destructive">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -88,14 +88,17 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {children ?? (
           <Button className="mr-4" variant="destructive">

apps/remix/app/components/embed/embed-document-waiting-for-turn.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 
 export const EmbedDocumentWaitingForTurn = () => {
-  const [hasPostedMessage, setHasPostedMessage] = useState(false);
-
   useEffect(() => {
-    if (window.parent && !hasPostedMessage) {
+    if (window.parent) {
       window.parent.postMessage(
         {
           action: 'document-waiting-for-turn',
@@ -15,13 +13,7 @@ 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">

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -136,18 +136,19 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
     setIsOpen(true);
   };
 
-  useEffect(() => {
-    enable2FAForm.reset();
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
 
-    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
-      setRecoveryCodes(null);
+    if (!open) {
+      enable2FAForm.reset();
+      if (recoveryCodes && recoveryCodes.length > 0) {
+        setRecoveryCodes(null);
+      }
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild={true}>
         <Button
           className="flex-shrink-0"

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -116,9 +116,18 @@ export const SignInForm = ({
   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');
+  }, []);
+
   const form = useForm<TSignInFormSchema>({
     values: {
-      email: initialEmail ?? '',
+      email: emailFromHash ?? initialEmail ?? '',
       password: '',
       totpCode: '',
       backupCode: '',
@@ -287,18 +296,6 @@ 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

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -84,10 +84,19 @@ 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: initialEmail ?? '',
+      email: emailFromHash ?? initialEmail ?? '',
       password: '',
       signature: '',
     },
@@ -162,18 +171,6 @@ 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">

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { DateTime } from 'luxon';
 import type { TooltipProps } from 'recharts';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

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

@@ -9,7 +9,6 @@ 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';
@@ -61,12 +60,6 @@ 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;
@@ -95,6 +88,14 @@ 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) => {
@@ -152,12 +153,6 @@ 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>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -80,20 +80,16 @@ export const DocumentSigningTextField = ({
   const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
-  const shouldAutoSignField =
-    (!field.inserted && parsedFieldMeta?.text) ||
-    (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);
+  const shouldAutoSignField = useMemo(
+    () =>
+      (!field.inserted && parsedFieldMeta?.text) ||
+      (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly),
+    [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);
@@ -216,14 +212,12 @@ export const DocumentSigningTextField = ({
     }
   };
 
-  useEffect(() => {
-    if (shouldAutoSignField) {
-      void executeActionAuthProcedure({
-        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        actionTarget: field.type,
-      });
-    }
-  }, []);
+  if (shouldAutoSignField) {
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  }
 
   const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;
 
@@ -318,7 +312,8 @@ export const DocumentSigningTextField = ({
                 className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
-                  setLocalCustomText('');
+                  setLocalCustomText(parsedFieldMeta?.text ?? '');
+                  setErrors(initialErrors);
                 }}
               >
                 <Trans>Cancel</Trans>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -26,16 +26,13 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
 
       setSearchParams(params);
     },
-    [searchParams],
+    [searchParams, setSearchParams],
   );
 
-  useEffect(() => {
-    const currentQueryParam = searchParams.get('query') || '';
-
-    if (debouncedSearchTerm !== currentQueryParam) {
-      handleSearch(debouncedSearchTerm);
-    }
-  }, [debouncedSearchTerm, searchParams]);
+  const currentQuery = searchParams?.get('query') ?? '';
+  if (currentQuery !== debouncedSearchTerm) {
+    handleSearch(debouncedSearchTerm);
+  }
 
   return (
     <Input

apps/remix/app/components/general/period-selector.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
+
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ['', '7d', '14d', '30d'].includes(value as string);
+};
+
+export const PeriodSelector = () => {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+
+  const navigate = useNavigate();
+
+  const period = useMemo(() => {
+    const p = searchParams?.get('period') ?? 'all';
+
+    return isPeriodSelectorValue(p) ? p : 'all';
+  }, [searchParams]);
+
+  const onPeriodChange = (newPeriod: string) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('period', newPeriod);
+
+    if (newPeriod === '' || newPeriod === 'all') {
+      params.delete('period');
+    }
+
+    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
+  };
+
+  return (
+    <Select defaultValue={period} onValueChange={onPeriodChange}>
+      <SelectTrigger className="text-muted-foreground max-w-[200px]">
+        <SelectValue />
+      </SelectTrigger>
+
+      <SelectContent position="popper">
+        <SelectItem value="all">
+          <Trans>All Time</Trans>
+        </SelectItem>
+        <SelectItem value="7d">
+          <Trans>Last 7 days</Trans>
+        </SelectItem>
+        <SelectItem value="14d">
+          <Trans>Last 14 days</Trans>
+        </SelectItem>
+        <SelectItem value="30d">
+          <Trans>Last 30 days</Trans>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -1,136 +1,80 @@
-import { useMemo, useTransition } from 'react';
+import { useMemo } from 'react';
 
-import { i18n } from '@lingui/core';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentSource } from '@prisma/client';
-import { InfoIcon, Loader } from 'lucide-react';
+import { DocumentSource, DocumentStatus as DocumentStatusEnum } from '@prisma/client';
+import { InfoIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
+import { z } from 'zod';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
-import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/schema';
 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';
-import { DataTable } from '@documenso/ui/primitives/data-table/data-table';
-import {
-  type TimePeriod,
-  isDateInPeriod,
-  timePeriods,
-} from '@documenso/ui/primitives/data-table/utils/time-filters';
+import { SelectItem } from '@documenso/ui/primitives/select';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { DocumentStatus as DocumentStatusComponent } from '~/components/general/document/document-status';
+import { SearchParamSelector } from '~/components/forms/search-param-selector';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from '~/components/tables/documents-table-action-button';
 import { DocumentsTableActionDropdown } from '~/components/tables/documents-table-action-dropdown';
 import { DataTableTitle } from '~/components/tables/documents-table-title';
-import { TemplateDocumentsTableEmptyState } from '~/components/tables/template-documents-table-empty-state';
 import { useCurrentTeam } from '~/providers/team';
 
+import { PeriodSelector } from '../period-selector';
+
 const DOCUMENT_SOURCE_LABELS: { [key in DocumentSource]: MessageDescriptor } = {
   DOCUMENT: msg`Document`,
   TEMPLATE: msg`Template`,
   TEMPLATE_DIRECT_LINK: msg`Direct link`,
 };
 
+const ZDocumentSearchParamsSchema = ZUrlSearchParamsSchema.extend({
+  source: z
+    .nativeEnum(DocumentSource)
+    .optional()
+    .catch(() => undefined),
+  status: z
+    .nativeEnum(DocumentStatusEnum)
+    .optional()
+    .catch(() => undefined),
+});
+
 type TemplatePageViewDocumentsTableProps = {
   templateId: number;
 };
 
-type DocumentsTableRow = TFindDocumentsInternalResponse['data'][number];
-
 export const TemplatePageViewDocumentsTable = ({
   templateId,
 }: TemplatePageViewDocumentsTableProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
+
   const [searchParams] = useSearchParams();
-  const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
 
   const team = useCurrentTeam();
 
-  const createFilterHandler = (paramName: string, isSingleValue = false) => {
-    return (values: string[]) => {
-      startTransition(() => {
-        if (values.length === 0) {
-          updateSearchParams({ [paramName]: undefined, page: undefined });
-        } else {
-          const value = isSingleValue ? values[0] : values.join(',');
-          updateSearchParams({ [paramName]: value, page: undefined });
-        }
-      });
-    };
-  };
+  const parsedSearchParams = ZDocumentSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
 
-  const getFilterValues = (paramName: string, isSingleValue = false): string[] => {
-    const value = searchParams.get(paramName);
-    if (!value) return [];
-    return isSingleValue ? [value] : value.split(',').filter(Boolean);
-  };
-
-  const handleStatusFilterChange = createFilterHandler('status');
-  const handleTimePeriodFilterChange = createFilterHandler('period', true);
-  const handleSourceFilterChange = createFilterHandler('source');
-
-  const selectedStatusValues = getFilterValues('status');
-  const selectedTimePeriodValues = getFilterValues('period', true);
-  const selectedSourceValues = getFilterValues('source');
-
-  const isStatusFiltered = selectedStatusValues.length > 0;
-  const isTimePeriodFiltered = selectedTimePeriodValues.length > 0;
-  const isSourceFiltered = selectedSourceValues.length > 0;
-
-  const handleResetFilters = () => {
-    startTransition(() => {
-      updateSearchParams({
-        status: undefined,
-        source: undefined,
-        period: undefined,
-        page: undefined,
-      });
-    });
-  };
-
-  const sourceParam = searchParams.get('source');
-  const statusParam = searchParams.get('status');
-  const periodParam = searchParams.get('period');
-
-  // Parse status parameter to handle multiple values
-  const parsedStatus = statusParam
-    ? statusParam
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean)
-        .filter((status) =>
-          Object.values(ExtendedDocumentStatus).includes(status as ExtendedDocumentStatus),
-        )
-        .map((status) => status as ExtendedDocumentStatus)
-    : undefined;
-
-  const parsedPeriod =
-    periodParam && timePeriods.includes(periodParam as TimePeriod)
-      ? (periodParam as TimePeriod)
-      : undefined;
-
-  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.document.findDocuments.useQuery(
     {
       templateId,
-      page: Number(searchParams.get('page')) || 1,
-      perPage: Number(searchParams.get('perPage')) || 10,
-      query: searchParams.get('query') || undefined,
-      source:
-        sourceParam && Object.values(DocumentSource).includes(sourceParam as DocumentSource)
-          ? (sourceParam as DocumentSource)
-          : undefined,
-      status: parsedStatus,
-      period: parsedPeriod,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+      query: parsedSearchParams.query,
+      source: parsedSearchParams.source,
+      status: parsedSearchParams.status,
     },
     {
       placeholderData: (previousData) => previousData,
@@ -138,11 +82,9 @@ export const TemplatePageViewDocumentsTable = ({
   );
 
   const onPaginationChange = (page: number, perPage: number) => {
-    startTransition(() => {
-      updateSearchParams({
-        page,
-        perPage,
-      });
+    updateSearchParams({
+      page,
+      perPage,
     });
   };
 
@@ -153,13 +95,6 @@ export const TemplatePageViewDocumentsTable = ({
     totalPages: 1,
   };
 
-  const getEmptyStateStatus = (): ExtendedDocumentStatus => {
-    if (selectedStatusValues.length > 0) {
-      return selectedStatusValues[0] as ExtendedDocumentStatus;
-    }
-    return ExtendedDocumentStatus.ALL;
-  };
-
   const columns = useMemo(() => {
     return [
       {
@@ -167,21 +102,12 @@ export const TemplatePageViewDocumentsTable = ({
         accessorKey: 'createdAt',
         cell: ({ row }) =>
           i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }),
-        filterFn: (row, id, value) => {
-          const createdAt = row.getValue(id) as Date;
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            return true;
-          }
-
-          const period = value[0] as TimePeriod;
-          return isDateInPeriod(createdAt, period);
-        },
       },
       {
         header: _(msg`Title`),
-        accessorKey: 'title',
         cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
       },
+
       {
         header: _(msg`Recipient`),
         accessorKey: 'recipient',
@@ -195,14 +121,8 @@ export const TemplatePageViewDocumentsTable = ({
       {
         header: _(msg`Status`),
         accessorKey: 'status',
-        cell: ({ row }) => <DocumentStatusComponent status={row.original.status} />,
+        cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
         size: 140,
-        filterFn: (row, id, value) => {
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            return true;
-          }
-          return value.includes(row.getValue(id));
-        },
       },
       {
         header: () => (
@@ -241,51 +161,79 @@ export const TemplatePageViewDocumentsTable = ({
             </Tooltip>
           </div>
         ),
-        accessorKey: 'source',
+        accessorKey: 'type',
         cell: ({ row }) => (
           <div className="flex flex-row items-center">
-            {_(DOCUMENT_SOURCE_LABELS[row.original.source as DocumentSource])}
+            {_(DOCUMENT_SOURCE_LABELS[row.original.source])}
           </div>
         ),
-        filterFn: (row, id, value) => {
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            return true;
-          }
-          return value.includes(row.getValue(id));
-        },
       },
       {
+        id: 'actions',
         header: _(msg`Actions`),
         cell: ({ row }) => (
-          <div className="flex items-center gap-x-4">
+          <div className="flex items-center space-x-2">
             <DocumentsTableActionButton row={row.original} />
+
             <DocumentsTableActionDropdown row={row.original} />
           </div>
         ),
       },
-    ] satisfies DataTableColumnDef<DocumentsTableRow>[];
-  }, [_, team?.url]);
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
 
   return (
-    <div className="relative">
+    <div>
+      <div className="mb-4 flex flex-row space-x-4">
+        <DocumentSearch />
+
+        <SearchParamSelector
+          paramKey="status"
+          isValueValid={(value) =>
+            [...DocumentStatusEnum.COMPLETED].includes(value as unknown as string)
+          }
+        >
+          <SelectItem value="all">
+            <Trans>Any Status</Trans>
+          </SelectItem>
+          <SelectItem value={DocumentStatusEnum.COMPLETED}>
+            <Trans>Completed</Trans>
+          </SelectItem>
+          <SelectItem value={DocumentStatusEnum.PENDING}>
+            <Trans>Pending</Trans>
+          </SelectItem>
+          <SelectItem value={DocumentStatusEnum.DRAFT}>
+            <Trans>Draft</Trans>
+          </SelectItem>
+        </SearchParamSelector>
+
+        <SearchParamSelector
+          paramKey="source"
+          isValueValid={(value) =>
+            [...DocumentSource.TEMPLATE].includes(value as unknown as string)
+          }
+        >
+          <SelectItem value="all">
+            <Trans>Any Source</Trans>
+          </SelectItem>
+          <SelectItem value={DocumentSource.TEMPLATE}>
+            <Trans>Template</Trans>
+          </SelectItem>
+          <SelectItem value={DocumentSource.TEMPLATE_DIRECT_LINK}>
+            <Trans>Direct Link</Trans>
+          </SelectItem>
+        </SearchParamSelector>
+
+        <PeriodSelector />
+      </div>
+
       <DataTable
-        data={results.data}
         columns={columns}
+        data={results.data}
         perPage={results.perPage}
         currentPage={results.currentPage}
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
-        stats={data?.stats}
-        onStatusFilterChange={handleStatusFilterChange}
-        selectedStatusValues={selectedStatusValues}
-        onTimePeriodFilterChange={handleTimePeriodFilterChange}
-        selectedTimePeriodValues={selectedTimePeriodValues}
-        onSourceFilterChange={handleSourceFilterChange}
-        selectedSourceValues={selectedSourceValues}
-        onResetFilters={handleResetFilters}
-        isStatusFiltered={isStatusFiltered}
-        isTimePeriodFiltered={isTimePeriodFiltered}
-        isSourceFiltered={isSourceFiltered}
         error={{
           enable: isLoadingError,
         }}
@@ -317,19 +265,9 @@ export const TemplatePageViewDocumentsTable = ({
             </>
           ),
         }}
-        emptyState={{
-          enable: !isLoading && !isLoadingError,
-          component: <TemplateDocumentsTableEmptyState status={getEmptyStateStatus()} />,
-        }}
       >
         {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
-
-      {isPending && (
-        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
-          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/verify-email-banner.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -22,11 +22,34 @@ 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(false);
+  const [isOpen, setIsOpen] = useState(shouldShowDialog);
   const [isPending, setIsPending] = useState(false);
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
@@ -62,27 +85,6 @@ 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">

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

@@ -1,6 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Bird, CheckCircle2, XCircle } from 'lucide-react';
+import { Bird, CheckCircle2 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -25,21 +25,6 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro
       message: msg`There are no active drafts at the current moment. You can upload a document to start drafting.`,
       icon: CheckCircle2,
     }))
-    .with(ExtendedDocumentStatus.PENDING, () => ({
-      title: msg`No pending documents`,
-      message: msg`There are no pending documents at the moment. Documents awaiting signatures will appear here.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.REJECTED, () => ({
-      title: msg`No rejected documents`,
-      message: msg`There are no rejected documents. Documents that have been declined will appear here.`,
-      icon: XCircle,
-    }))
-    .with(ExtendedDocumentStatus.INBOX, () => ({
-      title: msg`Your inbox is empty`,
-      message: msg`There are no documents waiting for your action. Documents requiring your signature will appear here.`,
-      icon: CheckCircle2,
-    }))
     .with(ExtendedDocumentStatus.ALL, () => ({
       title: msg`We're all empty`,
       message: msg`You have not yet created or received any documents. To create a document please upload one.`,
@@ -53,7 +38,7 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro
 
   return (
     <div
-      className="text-muted-foreground/60 mt-12 flex h-60 flex-col items-center justify-center gap-y-4"
+      className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4"
       data-testid="empty-document-state"
     >
       <Icon className="h-12 w-12" strokeWidth={1.5} />

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

@@ -1,100 +1,51 @@
 import { useMemo, useTransition } from 'react';
 
-import { i18n } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { DateTime } from 'luxon';
-import { Link, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/schema';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 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';
-import { DataTable } from '@documenso/ui/primitives/data-table/data-table';
-import {
-  type TimePeriod,
-  isDateInPeriod,
-} from '@documenso/ui/primitives/data-table/utils/time-filters';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
 import { DocumentStatus } from '~/components/general/document/document-status';
-import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { useCurrentTeam } from '~/providers/team';
 
+import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from './documents-table-action-button';
 import { DocumentsTableActionDropdown } from './documents-table-action-dropdown';
-import { DocumentsTableEmptyState } from './documents-table-empty-state';
 
-export type DataTableProps = {
-  data?: TFindDocumentsInternalResponse;
+export type DocumentsTableProps = {
+  data?: TFindDocumentsResponse;
   isLoading?: boolean;
   isLoadingError?: boolean;
   onMoveDocument?: (documentId: number) => void;
 };
 
-type DocumentsTableRow = TFindDocumentsInternalResponse['data'][number];
+type DocumentsTableRow = TFindDocumentsResponse['data'][number];
 
-export function DocumentsDataTable({
+export const DocumentsTable = ({
   data,
   isLoading,
   isLoadingError,
   onMoveDocument,
-}: DataTableProps) {
-  const { _ } = useLingui();
+}: DocumentsTableProps) => {
+  const { _, i18n } = useLingui();
+
   const team = useCurrentTeam();
-
   const [isPending, startTransition] = useTransition();
+
   const updateSearchParams = useUpdateSearchParams();
-  const [searchParams] = useSearchParams();
-
-  const handleStatusFilterChange = (values: string[]) => {
-    startTransition(() => {
-      if (values.length === 0) {
-        updateSearchParams({ status: undefined, page: undefined });
-      } else {
-        updateSearchParams({ status: values.join(','), page: undefined });
-      }
-    });
-  };
-
-  const currentStatus = searchParams.get('status');
-  const selectedStatusValues = currentStatus ? currentStatus.split(',').filter(Boolean) : [];
-
-  const handleResetFilters = () => {
-    startTransition(() => {
-      updateSearchParams({ status: undefined, period: undefined, page: undefined });
-    });
-  };
-
-  const isStatusFiltered = selectedStatusValues.length > 0;
-
-  const handleTimePeriodFilterChange = (values: string[]) => {
-    startTransition(() => {
-      if (values.length === 0) {
-        updateSearchParams({ period: undefined, page: undefined });
-      } else {
-        updateSearchParams({ period: values[0], page: undefined });
-      }
-    });
-  };
-
-  const currentPeriod = searchParams.get('period');
-  const selectedTimePeriodValues = currentPeriod ? [currentPeriod] : [];
-  const isTimePeriodFiltered = selectedTimePeriodValues.length > 0;
-
-  const handleSourceFilterChange = (values: string[]) => {
-    // Documents table doesn't have source filtering
-  };
-
-  const selectedSourceValues: string[] = [];
-  const isSourceFiltered = false;
 
   const columns = useMemo(() => {
     return [
@@ -103,19 +54,9 @@ export function DocumentsDataTable({
         accessorKey: 'createdAt',
         cell: ({ row }) =>
           i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }),
-        filterFn: (row, id, value) => {
-          const createdAt = row.getValue(id) as Date;
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            return true;
-          }
-
-          const period = value[0] as TimePeriod;
-          return isDateInPeriod(createdAt, period);
-        },
       },
       {
         header: _(msg`Title`),
-        accessorKey: 'title',
         cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
       },
       {
@@ -138,12 +79,6 @@ export function DocumentsDataTable({
         accessorKey: 'status',
         cell: ({ row }) => <DocumentStatus status={row.original.status} />,
         size: 140,
-        filterFn: (row, id, value) => {
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            return true;
-          }
-          return value.includes(row.getValue(id));
-        },
       },
       {
         header: _(msg`Actions`),
@@ -177,34 +112,18 @@ export function DocumentsDataTable({
     totalPages: 1,
   };
 
-  const getEmptyStateStatus = (): ExtendedDocumentStatus => {
-    if (selectedStatusValues.length > 0) {
-      return selectedStatusValues[0] as ExtendedDocumentStatus;
-    }
-    return ExtendedDocumentStatus.ALL;
-  };
-
   return (
     <div className="relative">
       <DataTable
-        data={results.data}
         columns={columns}
+        data={results.data}
         perPage={results.perPage}
         currentPage={results.currentPage}
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
-        stats={data?.stats}
-        onStatusFilterChange={handleStatusFilterChange}
-        selectedStatusValues={selectedStatusValues}
-        onTimePeriodFilterChange={handleTimePeriodFilterChange}
-        selectedTimePeriodValues={selectedTimePeriodValues}
-        onSourceFilterChange={handleSourceFilterChange}
-        selectedSourceValues={selectedSourceValues}
-        onResetFilters={handleResetFilters}
-        isStatusFiltered={isStatusFiltered}
-        isTimePeriodFiltered={isTimePeriodFiltered}
-        isSourceFiltered={isSourceFiltered}
-        showSourceFilter={false}
+        columnVisibility={{
+          sender: team !== undefined,
+        }}
         error={{
           enable: isLoadingError || false,
         }}
@@ -233,10 +152,6 @@ export function DocumentsDataTable({
             </>
           ),
         }}
-        emptyState={{
-          enable: !isLoading && !isLoadingError,
-          component: <DocumentsTableEmptyState status={getEmptyStateStatus()} />,
-        }}
       >
         {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
@@ -248,14 +163,14 @@ export function DocumentsDataTable({
       )}
     </div>
   );
-}
+};
 
 type DataTableTitleProps = {
   row: DocumentsTableRow;
   teamUrl: string;
 };
 
-export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
+const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const { user } = useSession();
 
   const recipient = row.recipients.find((recipient) => recipient.email === user.email);

apps/remix/app/components/tables/template-documents-table-empty-state.tsx

@@ -1,70 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Bird, CheckCircle2 } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-
-export type TemplateDocumentsTableEmptyStateProps = { status: ExtendedDocumentStatus };
-
-export const TemplateDocumentsTableEmptyState = ({
-  status,
-}: TemplateDocumentsTableEmptyStateProps) => {
-  const { _ } = useLingui();
-
-  const {
-    title,
-    message,
-    icon: Icon,
-  } = match(status)
-    .with(ExtendedDocumentStatus.COMPLETED, () => ({
-      title: msg`No completed documents`,
-      message: msg`No documents created from this template have been completed yet. Completed documents will appear here once all recipients have signed.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.DRAFT, () => ({
-      title: msg`No draft documents`,
-      message: msg`There are no draft documents created from this template. Use this template to create a new document.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.PENDING, () => ({
-      title: msg`No pending documents`,
-      message: msg`There are no pending documents created from this template. Documents awaiting signatures will appear here.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.REJECTED, () => ({
-      title: msg`No rejected documents`,
-      message: msg`No documents created from this template have been rejected. Documents that have been declined will appear here.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.INBOX, () => ({
-      title: msg`No documents in inbox`,
-      message: msg`There are no documents from this template waiting for your action. Documents requiring your signature will appear here.`,
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.ALL, () => ({
-      title: msg`No documents yet`,
-      message: msg`No documents have been created from this template yet. Use this template to create your first document.`,
-      icon: Bird,
-    }))
-    .otherwise(() => ({
-      title: msg`No documents found`,
-      message: msg`No documents created from this template match the current filters. Try adjusting your search criteria.`,
-      icon: CheckCircle2,
-    }));
-
-  return (
-    <div
-      className="text-muted-foreground/60 mt-12 flex h-60 flex-col items-center justify-center gap-y-4"
-      data-testid="empty-template-document-state"
-    >
-      <Icon className="h-12 w-12" strokeWidth={1.5} />
-
-      <div className="text-center">
-        <h3 className="text-lg font-semibold">{_(title)}</h3>
-
-        <p className="mt-2 max-w-[60ch]">{_(message)}</p>
-      </div>
-    </div>
-  );
-};

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -29,22 +29,29 @@ export default function TeamsSettingsMembersPage() {
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router';
@@ -20,21 +20,28 @@ export default function OrganisationSettingsTeamsPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/_layout.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { Outlet, useNavigate } from 'react-router';
 
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
@@ -30,13 +28,8 @@ 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;
   }
 

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

@@ -1,21 +1,30 @@
 import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { FolderType } from '@prisma/client';
+import { FolderType, OrganisationType } from '@prisma/client';
 import { useParams, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 import { z } from 'zod';
 
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
-import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+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 { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
 import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
 import { FolderGrid } from '~/components/general/folder/folder-grid';
-import { DocumentsDataTable } from '~/components/tables/documents-table';
+import { PeriodSelector } from '~/components/general/period-selector';
+import { DocumentsTable } from '~/components/tables/documents-table';
+import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
+import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
@@ -24,26 +33,17 @@ export function meta() {
 }
 
 const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
+  status: true,
   period: true,
   page: true,
   perPage: true,
   query: true,
 }).extend({
   senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
-  status: z
-    .string()
-    .transform(
-      (val) =>
-        val
-          .split(',')
-          .map((s) => s.trim())
-          .filter(Boolean) as ExtendedDocumentStatus[],
-    )
-    .optional()
-    .catch(undefined),
 });
 
 export default function DocumentsPage() {
+  const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
 
   const { folderId } = useParams();
@@ -62,6 +62,49 @@ 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);
+
+    params.set('status', value);
+
+    if (value === ExtendedDocumentStatus.ALL) {
+      params.delete('status');
+    }
+
+    if (value === ExtendedDocumentStatus.INBOX && organisation.type === OrganisationType.PERSONAL) {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    let path = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      path += `/f/${folderId}`;
+    }
+
+    if (params.toString()) {
+      path += `?${params.toString()}`;
+    }
+
+    return path;
+  };
+
   return (
     <DocumentDropZoneWrapper>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
@@ -80,18 +123,72 @@ export default function DocumentsPage() {
               <Trans>Documents</Trans>
             </h2>
           </div>
+
+          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+              <TabsList>
+                {[
+                  ExtendedDocumentStatus.INBOX,
+                  ExtendedDocumentStatus.PENDING,
+                  ExtendedDocumentStatus.COMPLETED,
+                  ExtendedDocumentStatus.DRAFT,
+                  ExtendedDocumentStatus.ALL,
+                ]
+                  .filter((value) => {
+                    if (organisation.type === OrganisationType.PERSONAL) {
+                      return value !== ExtendedDocumentStatus.INBOX;
+                    }
+
+                    return true;
+                  })
+                  .map((value) => (
+                    <TabsTrigger
+                      key={value}
+                      className="hover:text-foreground min-w-[60px]"
+                      value={value}
+                      asChild
+                    >
+                      <Link to={getTabHref(value)} preventScrollReset>
+                        <DocumentStatus status={value} />
+
+                        {value !== ExtendedDocumentStatus.ALL && (
+                          <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                        )}
+                      </Link>
+                    </TabsTrigger>
+                  ))}
+              </TabsList>
+            </Tabs>
+
+            {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <PeriodSelector />
+            </div>
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <DocumentSearch initialValue={findDocumentSearchParams.query} />
+            </div>
+          </div>
         </div>
 
         <div className="mt-8">
-          <DocumentsDataTable
-            data={data}
-            isLoading={isLoading}
-            isLoadingError={isLoadingError}
-            onMoveDocument={(documentId) => {
-              setDocumentToMove(documentId);
-              setIsMovingDocument(true);
-            }}
-          />
+          <div>
+            {data && data.count === 0 ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+          </div>
         </div>
 
         {documentToMove && (

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useLocation, useSearchParams } from 'react-router';
@@ -19,26 +19,33 @@ export default function TeamsSettingsMembersPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      // If nothing to change then do nothing.
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -130,12 +130,8 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
     }
   };
 
-  useEffect(() => {
-    setIsPublicProfileVisible(profile.enabled);
-  }, [profile.enabled]);
-
   return (
-    <div className="max-w-2xl">
+    <div key={team.id} className="max-w-2xl">
       <SettingsHeader
         title={t`Public Profile`}
         subtitle={t`You can choose to enable or disable the profile for public view.`}

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

@@ -1,29 +1,29 @@
 import { Trans } from '@lingui/react/macro';
-import { FolderType } from '@prisma/client';
 import { Bird } from 'lucide-react';
 import { useParams, useSearchParams } from 'react-router';
 
+import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { 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');
 }
 
 export default function TemplatesPage() {
-  const [searchParams] = useSearchParams();
-  const { folderId } = useParams();
-
   const team = useCurrentTeam();
 
+  const { folderId } = useParams();
+  const [searchParams] = useSearchParams();
+
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx

@@ -1,6 +1,5 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
 
@@ -91,25 +90,19 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
       <Card>
         <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
           <p>
-            <span className="font-medium">
-              <Trans>Document ID</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Document ID`)}</span>
 
             <span className="mt-1 block break-words">{document.id}</span>
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Enclosed Document</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Enclosed Document`)}</span>
 
             <span className="mt-1 block break-words">{document.title}</span>
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Status</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Status`)}</span>
 
             <span className="mt-1 block">
               {_(
@@ -119,9 +112,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Owner</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Owner`)}</span>
 
             <span className="mt-1 block break-words">
               {document.user.name} ({document.user.email})
@@ -129,9 +120,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Created At</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Created At`)}</span>
 
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.createdAt)
@@ -141,9 +130,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Last Updated</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Last Updated`)}</span>
 
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.updatedAt)
@@ -153,9 +140,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
           </p>
 
           <p>
-            <span className="font-medium">
-              <Trans>Time Zone</Trans>
-            </span>
+            <span className="font-medium">{_(msg`Time Zone`)}</span>
 
             <span className="mt-1 block break-words">
               {document.documentMeta?.timezone ?? 'N/A'}
@@ -163,9 +148,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
           </p>
 
           <div>
-            <p className="font-medium">
-              <Trans>Recipients</Trans>
-            </p>
+            <p className="font-medium">{_(msg`Recipients`)}</p>
 
             <ul className="mt-1 list-inside list-disc">
               {document.recipients.map((recipient) => (

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

@@ -1,6 +1,5 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 import { FieldType, SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
@@ -200,9 +199,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
   return (
     <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
       <div className="flex items-center">
-        <h1 className="my-8 text-2xl font-bold">
-          <Trans>Signing Certificate</Trans>
-        </h1>
+        <h1 className="my-8 text-2xl font-bold">{_(msg`Signing Certificate`)}</h1>
       </div>
 
       <Card>
@@ -210,15 +207,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
           <Table overflowHidden>
             <TableHeader>
               <TableRow>
-                <TableHead>
-                  <Trans>Signer Events</Trans>
-                </TableHead>
-                <TableHead>
-                  <Trans>Signature</Trans>
-                </TableHead>
-                <TableHead>
-                  <Trans>Details</Trans>
-                </TableHead>
+                <TableHead>{_(msg`Signer Events`)}</TableHead>
+                <TableHead>{_(msg`Signature`)}</TableHead>
+                <TableHead>{_(msg`Details`)}</TableHead>
                 {/* <TableHead>Security</TableHead> */}
               </TableRow>
             </TableHeader>
@@ -238,9 +229,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                       </p>
 
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        <span className="font-medium">
-                          <Trans>Authentication Level</Trans>:
-                        </span>{' '}
+                        <span className="font-medium">{_(msg`Authentication Level`)}:</span>{' '}
                         <span className="block">{getAuthenticationLevel(recipient.id)}</span>
                       </p>
                     </TableCell>
@@ -270,9 +259,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                           </div>
 
                           <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">
-                              <Trans>Signature ID</Trans>:
-                            </span>{' '}
+                            <span className="font-medium">{_(msg`Signature ID`)}:</span>{' '}
                             <span className="block font-mono uppercase">
                               {signature.secondaryId}
                             </span>
@@ -283,18 +270,14 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                       )}
 
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        <span className="font-medium">
-                          <Trans>IP Address</Trans>:
-                        </span>{' '}
+                        <span className="font-medium">{_(msg`IP Address`)}:</span>{' '}
                         <span className="inline-block">
                           {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
                         </span>
                       </p>
 
                       <p className="text-muted-foreground mt-1 text-sm print:text-xs">
-                        <span className="font-medium">
-                          <Trans>Device</Trans>:
-                        </span>{' '}
+                        <span className="font-medium">{_(msg`Device`)}:</span>{' '}
                         <span className="inline-block">
                           {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
                         </span>
@@ -304,9 +287,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                     <TableCell truncate={false} className="w-[min-content] align-top">
                       <div className="space-y-1">
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">
-                            <Trans>Sent</Trans>:
-                          </span>{' '}
+                          <span className="font-medium">{_(msg`Sent`)}:</span>{' '}
                           <span className="inline-block">
                             {logs.EMAIL_SENT[0]
                               ? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt)
@@ -317,9 +298,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                         </p>
 
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">
-                            <Trans>Viewed</Trans>:
-                          </span>{' '}
+                          <span className="font-medium">{_(msg`Viewed`)}:</span>{' '}
                           <span className="inline-block">
                             {logs.DOCUMENT_OPENED[0]
                               ? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt)
@@ -331,9 +310,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
 
                         {logs.DOCUMENT_RECIPIENT_REJECTED[0] ? (
                           <p className="text-muted-foreground text-sm print:text-xs">
-                            <span className="font-medium">
-                              <Trans>Rejected</Trans>:
-                            </span>{' '}
+                            <span className="font-medium">{_(msg`Rejected`)}:</span>{' '}
                             <span className="inline-block">
                               {logs.DOCUMENT_RECIPIENT_REJECTED[0]
                                 ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_REJECTED[0].createdAt)
@@ -344,9 +321,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                           </p>
                         ) : (
                           <p className="text-muted-foreground text-sm print:text-xs">
-                            <span className="font-medium">
-                              <Trans>Signed</Trans>:
-                            </span>{' '}
+                            <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
                             <span className="inline-block">
                               {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
                                 ? DateTime.fromJSDate(
@@ -360,9 +335,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                         )}
 
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">
-                            <Trans>Reason</Trans>:
-                          </span>{' '}
+                          <span className="font-medium">{_(msg`Reason`)}:</span>{' '}
                           <span className="inline-block">
                             {recipient.signingStatus === SigningStatus.REJECTED
                               ? recipient.rejectionReason
@@ -398,7 +371,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
 
           <div className="flex items-end justify-end gap-x-4">
             <p className="flex-shrink-0 text-sm font-medium print:text-xs">
-              <Trans>Signing certificate provided by</Trans>:
+              {_(msg`Signing certificate provided by`)}:
             </p>
             <BrandingLogo className="max-h-6 print:max-h-4" />
           </div>

apps/remix/app/routes/_unauthenticated+/verify-email.$token.tsx

@@ -38,33 +38,48 @@ 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(() => {
-    void verifyToken();
+    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;
+    };
   }, []);
 
   if (isLoading || state === null) {

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

@@ -1,6 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';
 
@@ -52,8 +51,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
       if (!configuration || !configuration.documentData) {
         toast({
           variant: 'destructive',
-          title: _(msg`Error`),
-          description: _(msg`Please configure the document first`),
+          title: _('Error'),
+          description: _('Please configure the document first'),
         });
 
         return;
@@ -104,8 +103,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
       });
 
       toast({
-        title: _(msg`Success`),
-        description: _(msg`Document created successfully`),
+        title: _('Success'),
+        description: _('Document created successfully'),
       });
 
       // Send a message to the parent window with the document details
@@ -131,8 +130,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
 
       toast({
         variant: 'destructive',
-        title: _(msg`Error`),
-        description: _(msg`Failed to create document`),
+        title: _('Error'),
+        description: _('Failed to create document'),
       });
     }
   };

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

@@ -1,6 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';
 
@@ -50,8 +49,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
       if (!configuration || !configuration.documentData) {
         toast({
           variant: 'destructive',
-          title: _(msg`Error`),
-          description: _(msg`Please configure the template first`),
+          title: _('Error'),
+          description: _('Please configure the template first'),
         });
 
         return;
@@ -94,8 +93,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
       });
 
       toast({
-        title: _(msg`Success`),
-        description: _(msg`Template created successfully`),
+        title: _('Success'),
+        description: _('Template created successfully'),
       });
 
       // Send a message to the parent window with the template details
@@ -121,8 +120,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
 
       toast({
         variant: 'destructive',
-        title: _(msg`Error`),
-        description: _(msg`Failed to create template`),
+        title: _('Error'),
+        description: _('Failed to create template'),
       });
     }
   };

packages/api/v1/implementation.ts

@@ -330,7 +330,6 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
         userId: user.id,
         teamId: team?.id,
         formValues: body.formValues,
-        folderId: body.folderId,
         documentDataId: documentData.id,
         requestMetadata: metadata,
       });
@@ -737,7 +736,6 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
           teamId: team?.id,
           recipients: body.recipients,
           prefillFields: body.prefillFields,
-          folderId: body.folderId,
           override: {
             title: body.title,
             ...body.meta,

packages/api/v1/schema.ts

@@ -136,12 +136,6 @@ export type TUploadDocumentSuccessfulSchema = z.infer<typeof ZUploadDocumentSucc
 export const ZCreateDocumentMutationSchema = z.object({
   title: z.string().min(1),
   externalId: z.string().nullish(),
-  folderId: z
-    .string()
-    .describe(
-      'The ID of the folder to create the document in. If not provided, the document will be created in the root folder.',
-    )
-    .optional(),
   recipients: z.array(
     z.object({
       name: z.string().min(1),
@@ -293,12 +287,6 @@ export type TCreateDocumentFromTemplateMutationResponseSchema = z.infer<
 export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
   title: z.string().optional(),
   externalId: z.string().optional(),
-  folderId: z
-    .string()
-    .describe(
-      'The ID of the folder to create the document in. If not provided, the document will be created in the root folder.',
-    )
-    .optional(),
   recipients: z
     .array(
       z.object({

packages/lib/client-only/hooks/use-element-bounds.ts

@@ -1,23 +1,23 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 
 export const useElementBounds = (elementOrSelector: HTMLElement | string, withScroll = false) => {
-  const [bounds, setBounds] = useState({
-    top: 0,
-    left: 0,
-    height: 0,
-    width: 0,
-  });
+  const [forceRecalc, setForceRecalc] = useState(0);
 
-  const calculateBounds = useCallback(() => {
+  const bounds = useMemo(() => {
     const $el =
       typeof elementOrSelector === 'string'
         ? document.querySelector<HTMLElement>(elementOrSelector)
         : elementOrSelector;
 
     if (!$el) {
-      throw new Error('Element not found');
+      return {
+        top: 0,
+        left: 0,
+        height: 0,
+        width: 0,
+      };
     }
 
     if (withScroll) {
@@ -32,15 +32,11 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
       width,
       height,
     };
-  }, [elementOrSelector, withScroll]);
-
-  useEffect(() => {
-    setBounds(calculateBounds());
-  }, []);
+  }, [elementOrSelector, withScroll, forceRecalc]);
 
   useEffect(() => {
     const onResize = () => {
-      setBounds(calculateBounds());
+      setForceRecalc((prev) => prev + 1);
     };
 
     window.addEventListener('resize', onResize);
@@ -61,7 +57,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     }
 
     const observer = new ResizeObserver(() => {
-      setBounds(calculateBounds());
+      setForceRecalc((prev) => prev + 1);
     });
 
     observer.observe($el);
@@ -69,7 +65,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [elementOrSelector]);
 
   return bounds;
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
-import { RefObject, useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 /**
  * Calculate the width and height of a text element.
@@ -64,13 +64,7 @@ export function useElementScaleSize(
   fontSize: number,
   fontFamily: string,
 ) {
-  const [scalingFactor, setScalingFactor] = useState(1);
-
-  useEffect(() => {
-    const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
-
-    setScalingFactor(scaleSize);
-  }, [text, container, fontFamily, fontSize]);
-
-  return scalingFactor;
+  return useMemo(() => {
+    return calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
+  }, [container, text, fontSize, fontFamily]);
 }

packages/lib/client-only/hooks/use-field-page-coords.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { Field } from '@prisma/client';
 
@@ -6,20 +6,20 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 
 export const useFieldPageCoords = (field: Field) => {
-  const [coords, setCoords] = useState({
-    x: 0,
-    y: 0,
-    height: 0,
-    width: 0,
-  });
+  const [forceRecalc, setForceRecalc] = useState(0);
 
-  const calculateCoords = useCallback(() => {
+  const coords = useMemo(() => {
     const $page = document.querySelector<HTMLElement>(
       `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
     );
 
     if (!$page) {
-      return;
+      return {
+        x: 0,
+        y: 0,
+        height: 0,
+        width: 0,
+      };
     }
 
     const { top, left, height, width } = getBoundingClientRect($page);
@@ -31,21 +31,17 @@ export const useFieldPageCoords = (field: Field) => {
     const fieldHeight = (Number(field.height) / 100) * height;
     const fieldWidth = (Number(field.width) / 100) * width;
 
-    setCoords({
+    return {
       x: fieldX,
       y: fieldY,
       height: fieldHeight,
       width: fieldWidth,
-    });
-  }, [field.height, field.page, field.positionX, field.positionY, field.width]);
-
-  useEffect(() => {
-    calculateCoords();
-  }, [calculateCoords]);
+    };
+  }, [field.height, field.page, field.positionX, field.positionY, field.width, forceRecalc]);
 
   useEffect(() => {
     const onResize = () => {
-      calculateCoords();
+      setForceRecalc((prev) => prev + 1);
     };
 
     window.addEventListener('resize', onResize);
@@ -53,7 +49,7 @@ export const useFieldPageCoords = (field: Field) => {
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, [calculateCoords]);
+  }, []);
 
   useEffect(() => {
     const $page = document.querySelector<HTMLElement>(
@@ -65,7 +61,7 @@ export const useFieldPageCoords = (field: Field) => {
     }
 
     const observer = new ResizeObserver(() => {
-      calculateCoords();
+      setForceRecalc((prev) => prev + 1);
     });
 
     observer.observe($page);
@@ -73,7 +69,7 @@ export const useFieldPageCoords = (field: Field) => {
     return () => {
       observer.disconnect();
     };
-  }, [calculateCoords, field.page]);
+  }, [field.page]);
 
   return coords;
 };

packages/lib/client-only/hooks/use-is-mounted.ts

@@ -1,11 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
+
+const subscribe = () => {
+  return () => {};
+};
+
+const getSnapshot = () => {
+  return true;
+};
+
+const getServerSnapshot = () => {
+  return false;
+};
 
 export const useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  return isMounted;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };

packages/lib/server-only/document/create-document-v2.ts

@@ -1,7 +1,6 @@
 import type { DocumentVisibility, TemplateMeta } from '@prisma/client';
 import {
   DocumentSource,
-  FolderType,
   RecipientRole,
   SendStatus,
   SigningStatus,
@@ -46,7 +45,6 @@ export type CreateDocumentOptions = {
     globalActionAuth?: TDocumentActionAuthTypes[];
     formValues?: TDocumentFormValues;
     recipients: TCreateDocumentV2Request['recipients'];
-    folderId?: string;
   };
   meta?: Partial<Omit<TemplateMeta, 'id' | 'templateId'>>;
   requestMetadata: ApiRequestMetadata;
@@ -61,7 +59,7 @@ export const createDocumentV2 = async ({
   meta,
   requestMetadata,
 }: CreateDocumentOptions) => {
-  const { title, formValues, folderId } = data;
+  const { title, formValues } = data;
 
   const team = await prisma.team.findFirst({
     where: buildTeamWhereQuery({ teamId, userId }),
@@ -80,22 +78,6 @@ export const createDocumentV2 = async ({
     });
   }
 
-  if (folderId) {
-    const folder = await prisma.folder.findUnique({
-      where: {
-        id: folderId,
-        type: FolderType.DOCUMENT,
-        team: buildTeamWhereQuery({ teamId, userId }),
-      },
-    });
-
-    if (!folder) {
-      throw new AppError(AppErrorCode.NOT_FOUND, {
-        message: 'Folder not found',
-      });
-    }
-  }
-
   const settings = await getTeamSettings({
     userId,
     teamId,
@@ -182,7 +164,6 @@ export const createDocumentV2 = async ({
         teamId,
         authOptions,
         visibility,
-        folderId,
         formValues,
         source: DocumentSource.DOCUMENT,
         documentMeta: {

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

@@ -5,26 +5,27 @@ import { match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import type { TimePeriod } from '@documenso/ui/primitives/data-table/utils/time-filters';
 
 import { DocumentVisibility } from '../../types/document-visibility';
 import { type FindResultResponse } from '../../types/search-params';
 import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document';
 import { getTeamById } from '../team/get-team';
 
+export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+
 export type FindDocumentsOptions = {
   userId: number;
   teamId?: number;
   templateId?: number;
   source?: DocumentSource;
-  status?: ExtendedDocumentStatus[];
+  status?: ExtendedDocumentStatus;
   page?: number;
   perPage?: number;
   orderBy?: {
     column: keyof Omit<Document, 'document'>;
     direction: 'asc' | 'desc';
   };
-  period?: TimePeriod;
+  period?: PeriodSelectorValue;
   senderIds?: number[];
   query?: string;
   folderId?: string;
@@ -35,7 +36,7 @@ export const findDocuments = async ({
   teamId,
   templateId,
   source,
-  status = [ExtendedDocumentStatus.ALL],
+  status = ExtendedDocumentStatus.ALL,
   page = 1,
   perPage = 10,
   orderBy,
@@ -105,30 +106,10 @@ export const findDocuments = async ({
     },
   ];
 
-  let filters: Prisma.DocumentWhereInput | null = null;
-
-  if (status.length === 1) {
-    filters = findDocumentsFilter(status[0], user, folderId);
-  } else if (status.length > 1) {
-    const statusFilters = status
-      .map((s) => findDocumentsFilter(s, user, folderId))
-      .filter((filter): filter is Prisma.DocumentWhereInput => filter !== null);
-    if (statusFilters.length > 0) {
-      filters = { OR: statusFilters };
-    }
-  }
+  let filters: Prisma.DocumentWhereInput | null = findDocumentsFilter(status, user, folderId);
 
   if (team) {
-    if (status.length === 1) {
-      filters = findTeamDocumentsFilter(status[0], team, visibilityFilters, folderId);
-    } else if (status.length > 1) {
-      const statusFilters = status
-        .map((s) => findTeamDocumentsFilter(s, team, visibilityFilters, folderId))
-        .filter((filter): filter is Prisma.DocumentWhereInput => filter !== null);
-      if (statusFilters.length > 0) {
-        filters = { OR: statusFilters };
-      }
-    }
+    filters = findTeamDocumentsFilter(status, team, visibilityFilters, folderId);
   }
 
   if (filters === null) {
@@ -216,73 +197,13 @@ export const findDocuments = async ({
     AND: whereAndClause,
   };
 
-  if (period && period !== 'all-time') {
-    const now = DateTime.now();
+  if (period) {
+    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
 
-    const { startDate, endDate } = match(period)
-      .with('today', () => ({
-        startDate: now.startOf('day'),
-        endDate: now.startOf('day').plus({ days: 1 }),
-      }))
-      .with('yesterday', () => {
-        const yesterday = now.minus({ days: 1 });
-        return {
-          startDate: yesterday.startOf('day'),
-          endDate: yesterday.startOf('day').plus({ days: 1 }),
-        };
-      })
-      .with('this-week', () => ({
-        startDate: now.startOf('week'),
-        endDate: now.startOf('week').plus({ weeks: 1 }),
-      }))
-      .with('last-week', () => {
-        const lastWeek = now.minus({ weeks: 1 });
-        return {
-          startDate: lastWeek.startOf('week'),
-          endDate: lastWeek.startOf('week').plus({ weeks: 1 }),
-        };
-      })
-      .with('this-month', () => ({
-        startDate: now.startOf('month'),
-        endDate: now.startOf('month').plus({ months: 1 }),
-      }))
-      .with('last-month', () => {
-        const lastMonth = now.minus({ months: 1 });
-        return {
-          startDate: lastMonth.startOf('month'),
-          endDate: lastMonth.startOf('month').plus({ months: 1 }),
-        };
-      })
-      .with('this-quarter', () => ({
-        startDate: now.startOf('quarter'),
-        endDate: now.startOf('quarter').plus({ quarters: 1 }),
-      }))
-      .with('last-quarter', () => {
-        const lastQuarter = now.minus({ quarters: 1 });
-        return {
-          startDate: lastQuarter.startOf('quarter'),
-          endDate: lastQuarter.startOf('quarter').plus({ quarters: 1 }),
-        };
-      })
-      .with('this-year', () => ({
-        startDate: now.startOf('year'),
-        endDate: now.startOf('year').plus({ years: 1 }),
-      }))
-      .with('last-year', () => {
-        const lastYear = now.minus({ years: 1 });
-        return {
-          startDate: lastYear.startOf('year'),
-          endDate: lastYear.startOf('year').plus({ years: 1 }),
-        };
-      })
-      .otherwise(() => ({
-        startDate: now.startOf('day'),
-        endDate: now.startOf('day').plus({ days: 1 }),
-      }));
+    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
 
     whereClause.createdAt = {
-      gte: startDate.toJSDate(),
-      lt: endDate.toJSDate(),
+      gte: startOfPeriod.toJSDate(),
     };
   }
 

packages/lib/server-only/document/get-stats.ts

@@ -1,17 +1,19 @@
+import { TeamMemberRole } from '@prisma/client';
 import type { Prisma, User } from '@prisma/client';
-import { DocumentVisibility, SigningStatus, TeamMemberRole } from '@prisma/client';
+import { SigningStatus } from '@prisma/client';
+import { DocumentVisibility } from '@prisma/client';
+import { DateTime } from 'luxon';
 import { match } from 'ts-pattern';
 
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import { prisma } from '@documenso/prisma';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import type { TimePeriod } from '@documenso/ui/primitives/data-table/utils/time-filters';
-import { getDateRangeForPeriod } from '@documenso/ui/primitives/data-table/utils/time-filters';
 
 export type GetStatsInput = {
   user: Pick<User, 'id' | 'email'>;
   team?: Omit<GetTeamCountsOption, 'createdAt'>;
-  period?: TimePeriod;
+  period?: PeriodSelectorValue;
   search?: string;
   folderId?: string;
 };
@@ -25,15 +27,14 @@ export const getStats = async ({
 }: GetStatsInput) => {
   let createdAt: Prisma.DocumentWhereInput['createdAt'];
 
-  if (period && period !== 'all-time') {
-    const dateRange = getDateRangeForPeriod(period);
+  if (period) {
+    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
 
-    if (dateRange) {
-      createdAt = {
-        gte: dateRange.start.toJSDate(),
-        lte: dateRange.end.toJSDate(),
-      };
-    }
+    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
+
+    createdAt = {
+      gte: startOfPeriod.toJSDate(),
+    };
   }
 
   const [ownerCounts, notSignedCounts, hasSignedCounts] = await (options.team

packages/lib/server-only/pdf/add-rejection-stamp-to-pdf.ts

@@ -3,7 +3,6 @@ import type { PDFDocument } from 'pdf-lib';
 import { TextAlignment, rgb, setFontAndSize } from 'pdf-lib';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
-import { getPageSize } from './get-page-size';
 
 /**
  * Adds a rejection stamp to each page of a PDF document.
@@ -28,7 +27,7 @@ export async function addRejectionStampToPdf(
 
   for (let i = 0; i < pages.length; i++) {
     const page = pages[i];
-    const { width, height } = getPageSize(page);
+    const { width, height } = page.getSize();
 
     // Draw the "REJECTED" text
     const rejectedTitleText = 'DOCUMENT REJECTED';

packages/lib/server-only/pdf/get-page-size.ts

@@ -1,18 +0,0 @@
-import type { PDFPage } from 'pdf-lib';
-
-/**
- * Gets the effective page size for PDF operations.
- *
- * Uses CropBox by default to handle rare cases where MediaBox is larger than CropBox.
- * Falls back to MediaBox when it's smaller than CropBox, following typical PDF reader behavior.
- */
-export const getPageSize = (page: PDFPage) => {
-  const cropBox = page.getCropBox();
-  const mediaBox = page.getMediaBox();
-
-  if (mediaBox.width < cropBox.width || mediaBox.height < cropBox.height) {
-    return mediaBox;
-  }
-
-  return cropBox;
-};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -33,7 +33,6 @@ import {
   ZRadioFieldMeta,
   ZTextFieldMeta,
 } from '../../types/field-meta';
-import { getPageSize } from './get-page-size';
 
 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
   const [fontCaveat, fontNoto] = await Promise.all([
@@ -78,7 +77,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
 
   const isPageRotatedToLandscape = pageRotationInDegrees === 90 || pageRotationInDegrees === 270;
 
-  let { width: pageWidth, height: pageHeight } = getPageSize(page);
+  let { width: pageWidth, height: pageHeight } = page.getSize();
 
   // PDFs can have pages that are rotated, which are correctly rendered in the frontend.
   // However when we load the PDF in the backend, the rotation is applied.

packages/lib/server-only/pdf/legacy-insert-field-in-pdf.ts

@@ -26,7 +26,6 @@ import {
   ZRadioFieldMeta,
   ZTextFieldMeta,
 } from '../../types/field-meta';
-import { getPageSize } from './get-page-size';
 
 export const legacy_insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
   const [fontCaveat, fontNoto] = await Promise.all([
@@ -64,7 +63,7 @@ export const legacy_insertFieldInPDF = async (pdf: PDFDocument, field: FieldWith
 
   const isPageRotatedToLandscape = pageRotationInDegrees === 90 || pageRotationInDegrees === 270;
 
-  let { width: pageWidth, height: pageHeight } = getPageSize(page);
+  let { width: pageWidth, height: pageHeight } = page.getSize();
 
   // PDFs can have pages that are rotated, which are correctly rendered in the frontend.
   // However when we load the PDF in the backend, the rotation is applied.

packages/lib/server-only/template/create-document-from-template.ts

@@ -2,7 +2,6 @@ import type { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/c
 import {
   DocumentSource,
   type Field,
-  FolderType,
   type Recipient,
   RecipientRole,
   SendStatus,
@@ -70,7 +69,6 @@ export type CreateDocumentFromTemplateOptions = {
     email: string;
     signingOrder?: number | null;
   }[];
-  folderId?: string;
   prefillFields?: TFieldMetaPrefillFieldsSchema[];
   customDocumentDataId?: string;
 
@@ -276,7 +274,6 @@ export const createDocumentFromTemplate = async ({
   customDocumentDataId,
   override,
   requestMetadata,
-  folderId,
   prefillFields,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
@@ -301,22 +298,6 @@ export const createDocumentFromTemplate = async ({
     });
   }
 
-  if (folderId) {
-    const folder = await prisma.folder.findUnique({
-      where: {
-        id: folderId,
-        type: FolderType.DOCUMENT,
-        team: buildTeamWhereQuery({ teamId, userId }),
-      },
-    });
-
-    if (!folder) {
-      throw new AppError(AppErrorCode.NOT_FOUND, {
-        message: 'Folder not found',
-      });
-    }
-  }
-
   const settings = await getTeamSettings({
     userId,
     teamId,
@@ -387,7 +368,6 @@ export const createDocumentFromTemplate = async ({
         externalId: externalId || template.externalId,
         templateId: template.id,
         userId,
-        folderId,
         teamId: template.teamId,
         title: override?.title || template.title,
         documentDataId: documentData.id,

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

@@ -137,7 +137,7 @@ export const documentRouter = router({
         templateId,
         query,
         source,
-        status: status ? [status] : undefined,
+        status,
         page,
         perPage,
         folderId,
@@ -284,7 +284,6 @@ export const documentRouter = router({
         globalActionAuth,
         recipients,
         meta,
-        folderId,
       } = input;
 
       const { remaining } = await getServerLimits({ userId: user.id, teamId });
@@ -317,7 +316,6 @@ export const documentRouter = router({
           globalAccessAuth,
           globalActionAuth,
           recipients,
-          folderId,
         },
         meta,
         requestMetadata: ctx.metadata,

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

@@ -142,23 +142,9 @@ export const ZFindDocumentsResponseSchema = ZFindResultResponse.extend({
 export type TFindDocumentsResponse = z.infer<typeof ZFindDocumentsResponseSchema>;
 
 export const ZFindDocumentsInternalRequestSchema = ZFindDocumentsRequestSchema.extend({
-  period: z
-    .enum([
-      'today',
-      'yesterday',
-      'this-week',
-      'last-week',
-      'this-month',
-      'last-month',
-      'this-quarter',
-      'last-quarter',
-      'this-year',
-      'last-year',
-      'all-time',
-    ])
-    .optional(),
+  period: z.enum(['7d', '14d', '30d']).optional(),
   senderIds: z.array(z.number()).optional(),
-  status: z.array(z.nativeEnum(ExtendedDocumentStatus)).optional(),
+  status: z.nativeEnum(ExtendedDocumentStatus).optional(),
   folderId: z.string().optional(),
 });
 
@@ -223,12 +209,6 @@ export const ZCreateDocumentV2RequestSchema = z.object({
   globalAccessAuth: z.array(ZDocumentAccessAuthTypesSchema).optional(),
   globalActionAuth: z.array(ZDocumentActionAuthTypesSchema).optional(),
   formValues: ZDocumentFormValuesSchema.optional(),
-  folderId: z
-    .string()
-    .describe(
-      'The ID of the folder to create the document in. If not provided, the document will be created in the root folder.',
-    )
-    .optional(),
   recipients: z
     .array(
       ZCreateRecipientSchema.extend({

packages/trpc/server/organisation-router/update-organisation.ts

@@ -1,6 +1,5 @@
 import { ORGANISATION_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/organisations';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { stripe } from '@documenso/lib/server-only/stripe';
 import { buildOrganisationWhereQuery } from '@documenso/lib/utils/organisations';
 import { prisma } from '@documenso/prisma';
 
@@ -39,7 +38,7 @@ export const updateOrganisationRoute = authenticatedProcedure
       });
     }
 
-    const updatedOrganisation = await prisma.organisation.update({
+    await prisma.organisation.update({
       where: {
         id: organisationId,
       },
@@ -48,12 +47,4 @@ export const updateOrganisationRoute = authenticatedProcedure
         url: data.url,
       },
     });
-
-    if (updatedOrganisation.customerId) {
-      await stripe.customers.update(updatedOrganisation.customerId, {
-        metadata: {
-          organisationName: data.name,
-        },
-      });
-    }
   });

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

@@ -339,14 +339,8 @@ export const templateRouter = router({
     .output(ZCreateDocumentFromTemplateResponseSchema)
     .mutation(async ({ ctx, input }) => {
       const { teamId } = ctx;
-      const {
-        templateId,
-        recipients,
-        distributeDocument,
-        customDocumentDataId,
-        prefillFields,
-        folderId,
-      } = input;
+      const { templateId, recipients, distributeDocument, customDocumentDataId, prefillFields } =
+        input;
 
       ctx.logger.info({
         input: {
@@ -367,7 +361,6 @@ export const templateRouter = router({
         recipients,
         customDocumentDataId,
         requestMetadata: ctx.metadata,
-        folderId,
         prefillFields,
       });
 

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

@@ -117,12 +117,6 @@ export const ZCreateDocumentFromTemplateRequestSchema = z.object({
       'The data ID of an alternative PDF to use when creating the document. If not provided, the PDF attached to the template will be used.',
     )
     .optional(),
-  folderId: z
-    .string()
-    .describe(
-      'The ID of the folder to create the document in. If not provided, the document will be created in the root folder.',
-    )
-    .optional(),
   prefillFields: z
     .array(ZFieldMetaPrefillFieldsSchema)
     .describe(

packages/ui/components/client-only.tsx

@@ -1,11 +1,23 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
-export const ClientOnly = async ({ children }: { children: React.ReactNode }) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return mounted ? children : null;
+const subscribe = () => {
+  return () => {};
+};
+
+const getSnapshot = () => {
+  return true;
+};
+
+const getServerSnapshot = () => {
+  return false;
+};
+
+export const ClientOnly = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement | null => {
+  const isClient = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  return isClient ? <>{children}</> : null;
 };

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

@@ -1,7 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { useState } from 'react';
 
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData } from '@prisma/client';
@@ -46,8 +45,8 @@ export const DocumentDownloadButton = ({
       setIsLoading(false);
 
       toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
+        title: _('Something went wrong'),
+        description: _('An error occurred while downloading your document.'),
         variant: 'destructive',
       });
     }

packages/ui/primitives/data-table-pagination.tsx

@@ -86,9 +86,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <Trans>
-              <span className="sr-only">Go to first page</span>
-            </Trans>
+            <span className="sr-only">Go to first page</span>
             <ChevronsLeft className="h-4 w-4" />
           </Button>
           <Button
@@ -97,9 +95,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <Trans>
-              <span className="sr-only">Go to previous page</span>
-            </Trans>
+            <span className="sr-only">Go to previous page</span>
             <ChevronLeft className="h-4 w-4" />
           </Button>
           <Button
@@ -108,9 +104,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <Trans>
-              <span className="sr-only">Go to next page</span>
-            </Trans>
+            <span className="sr-only">Go to next page</span>
             <ChevronRight className="h-4 w-4" />
           </Button>
           <Button
@@ -119,9 +113,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <Trans>
-              <span className="sr-only">Go to last page</span>
-            </Trans>
+            <span className="sr-only">Go to last page</span>
             <ChevronsRight className="h-4 w-4" />
           </Button>
         </div>

packages/ui/primitives/data-table/data-table-faceted-filter.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { Column } from '@tanstack/react-table';
-import { Check } from 'lucide-react';
-
-import { cn } from '../../lib/utils';
-import { Badge } from '../badge';
-import { Button } from '../button';
-import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '../command';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Separator } from '../separator';
-
-interface DataTableFacetedFilterProps<TData, TValue> {
-  column?: Column<TData, TValue>;
-  title?: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  stats?: Record<string, number>;
-  onFilterChange?: (values: string[]) => void;
-  selectedValues?: string[];
-  options: {
-    label: MessageDescriptor;
-    value: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    color?: string;
-    bgColor?: string;
-  }[];
-}
-
-export function DataTableFacetedFilter<TData, TValue>({
-  column,
-  title,
-  icon: Icon,
-  stats,
-  onFilterChange,
-  selectedValues,
-  options,
-}: DataTableFacetedFilterProps<TData, TValue>) {
-  const { _ } = useLingui();
-  const facets = column?.getFacetedUniqueValues();
-  const selectedValuesSet = new Set(selectedValues || (column?.getFilterValue() as string[]));
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 gap-1.5 border-dashed px-2.5">
-          {Icon && <Icon className="size-4" />}
-          {title}
-          {selectedValuesSet.size > 0 && (
-            <>
-              <Separator orientation="vertical" className="mx-1 h-8" />
-              <Badge variant="secondary" className="rounded-sm px-2 py-0.5 font-normal lg:hidden">
-                {selectedValuesSet.size}
-              </Badge>
-              <div className="hidden gap-1 lg:flex">
-                {selectedValuesSet.size > 2 ? (
-                  <Badge variant="neutral" className="rounded-sm px-2 py-0.5 font-normal">
-                    {selectedValuesSet.size} {_(msg`selected`)}
-                  </Badge>
-                ) : (
-                  options
-                    .filter((option) => selectedValuesSet.has(option.value))
-                    .map((option) => (
-                      <Badge
-                        variant="neutral"
-                        key={option.value}
-                        className={cn(
-                          'rounded-sm border-none px-2 py-0.5 font-normal',
-                          option.bgColor ? option.bgColor : 'bg-secondary',
-                        )}
-                      >
-                        {_(option.label)}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandList>
-            <CommandEmpty>
-              <Trans>No results found.</Trans>
-            </CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => {
-                const isSelected = selectedValuesSet.has(option.value);
-                return (
-                  <CommandItem
-                    key={option.value}
-                    className="gap-x-2"
-                    onSelect={() => {
-                      if (isSelected) {
-                        selectedValuesSet.delete(option.value);
-                      } else {
-                        selectedValuesSet.add(option.value);
-                      }
-                      const filterValues = Array.from(selectedValuesSet);
-
-                      if (onFilterChange) {
-                        onFilterChange(filterValues);
-                      } else {
-                        column?.setFilterValue(filterValues.length ? filterValues : undefined);
-                      }
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        'flex size-4 items-center justify-center rounded-[4px] border',
-                        isSelected
-                          ? 'bg-primary border-primary text-primary-foreground'
-                          : 'border-input [&_svg]:invisible',
-                      )}
-                    >
-                      <Check className="text-primary-foreground size-3.5" />
-                    </div>
-                    {option.icon && (
-                      <option.icon
-                        className={cn(
-                          'size-4',
-                          option.color ? option.color : 'text-muted-foreground',
-                        )}
-                      />
-                    )}
-                    <span>{_(option.label)}</span>
-                    {(stats?.[option.value] || facets?.get(option.value)) && (
-                      <span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
-                        {stats?.[option.value] || facets?.get(option.value)}
-                      </span>
-                    )}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}

packages/ui/primitives/data-table/data-table-pagination.tsx

@@ -1,98 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import type { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-
-import { Button } from '../button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-  return (
-    <div className="flex items-center justify-between px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
-        <Trans>
-          {table.getFilteredSelectedRowModel().rows.length} of{' '}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </Trans>
-      </div>
-      <div className="flex items-center space-x-6 lg:space-x-8">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">
-            <Trans>Rows per page</Trans>
-          </p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value));
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          <Trans>
-            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-          </Trans>
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="outline"
-            className="hidden size-8 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <Trans>
-              <span className="sr-only">Go to first page</span>
-            </Trans>
-            <ChevronsLeft />
-          </Button>
-          <Button
-            variant="outline"
-            className="size-8"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <Trans>
-              <span className="sr-only">Go to previous page</span>
-            </Trans>
-            <ChevronLeft />
-          </Button>
-          <Button
-            variant="outline"
-            className="size-8"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <Trans>
-              <span className="sr-only">Go to next page</span>
-            </Trans>
-            <ChevronRight />
-          </Button>
-          <Button
-            variant="outline"
-            className="hidden size-8 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <Trans>
-              <span className="sr-only">Go to last page</span>
-            </Trans>
-            <ChevronsRight />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

packages/ui/primitives/data-table/data-table-single-filter.tsx

@@ -1,139 +0,0 @@
-import * as React from 'react';
-
-import type { MessageDescriptor } from '@lingui/core';
-import { useLingui } from '@lingui/react';
-import type { Column } from '@tanstack/react-table';
-
-import { cn } from '../../lib/utils';
-import { Badge } from '../badge';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-} from '../select';
-import { Separator } from '../separator';
-
-interface DataTableSingleFilterProps<TData, TValue> {
-  column?: Column<TData, TValue>;
-  title?: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  onFilterChange?: (values: string[]) => void;
-  selectedValues?: string[];
-  options: {
-    label: MessageDescriptor;
-    value: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    color?: string;
-    bgColor?: string;
-  }[];
-  groups?: {
-    label: MessageDescriptor;
-    values: string[];
-  }[];
-}
-
-export function DataTableSingleFilter<TData, TValue>({
-  column,
-  title,
-  options,
-  groups,
-  icon: Icon,
-  onFilterChange,
-  selectedValues,
-}: DataTableSingleFilterProps<TData, TValue>) {
-  const { _ } = useLingui();
-  const filterValue = column?.getFilterValue() as string[] | undefined;
-  const selectedValue = selectedValues?.[0] || (filterValue?.[0] ?? undefined);
-  const selectedOption = options.find((option) => option.value === selectedValue);
-
-  const handleValueChange = (value: string) => {
-    if (value === selectedValue) {
-      if (onFilterChange) {
-        onFilterChange([]);
-      } else {
-        column?.setFilterValue(undefined);
-      }
-    } else {
-      if (onFilterChange) {
-        onFilterChange([value]);
-      } else {
-        column?.setFilterValue([value]);
-      }
-    }
-  };
-
-  const renderOptions = () => {
-    if (groups) {
-      return groups.map((group, groupIndex) => (
-        <React.Fragment key={JSON.stringify(group.label)}>
-          <SelectGroup>
-            <SelectLabel>{_(group.label)}</SelectLabel>
-            {options
-              .filter((option) => group.values.includes(option.value))
-              .map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  <div className="flex items-center gap-x-2">
-                    {option.icon && (
-                      <option.icon
-                        className={cn(
-                          'size-4',
-                          option.color ? option.color : 'text-muted-foreground',
-                        )}
-                      />
-                    )}
-                    <span>{_(option.label)}</span>
-                  </div>
-                </SelectItem>
-              ))}
-          </SelectGroup>
-          {groupIndex < groups.length - 1 && <SelectSeparator />}
-        </React.Fragment>
-      ));
-    }
-
-    return (
-      <SelectGroup>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            <div className="flex items-center gap-x-2">
-              {option.icon && (
-                <option.icon
-                  className={cn('size-4', option.color ? option.color : 'text-muted-foreground')}
-                />
-              )}
-              <span>{_(option.label)}</span>
-            </div>
-          </SelectItem>
-        ))}
-      </SelectGroup>
-    );
-  };
-
-  return (
-    <Select value={selectedValue || ''} onValueChange={handleValueChange}>
-      <SelectTrigger className="border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 w-auto gap-1.5 border border-dashed px-2.5 focus:ring-0">
-        {Icon && <Icon className="size-4" />}
-        {title}
-        {selectedValue && selectedOption && (
-          <>
-            <Separator orientation="vertical" className="mx-1 h-8" />
-            <Badge
-              variant="neutral"
-              className={cn(
-                'rounded-sm border-none px-2 py-0.5 font-normal',
-                selectedOption.bgColor ? selectedOption.bgColor : 'variant-secondary',
-              )}
-            >
-              {_(selectedOption.label)}
-            </Badge>
-          </>
-        )}
-      </SelectTrigger>
-      <SelectContent>{renderOptions()}</SelectContent>
-    </Select>
-  );
-}

packages/ui/primitives/data-table/data-table-toolbar.tsx

@@ -1,128 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type { Table } from '@tanstack/react-table';
-import { Calendar, CircleDashedIcon, Globe, ListFilter, X, XCircle } from 'lucide-react';
-
-import { Button } from '../button';
-import { Input } from '../input';
-import { DataTableFacetedFilter } from './data-table-faceted-filter';
-import { DataTableSingleFilter } from './data-table-single-filter';
-import { sources, statuses, timePeriodGroups, timePeriods } from './data/data';
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>;
-  stats?: Record<string, number>;
-  onStatusFilterChange?: (values: string[]) => void;
-  selectedStatusValues?: string[];
-  onTimePeriodFilterChange?: (values: string[]) => void;
-  selectedTimePeriodValues?: string[];
-  onSourceFilterChange?: (values: string[]) => void;
-  selectedSourceValues?: string[];
-  onResetFilters?: () => void;
-  isStatusFiltered?: boolean;
-  isTimePeriodFiltered?: boolean;
-  isSourceFiltered?: boolean;
-  showSourceFilter?: boolean;
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  stats,
-  onStatusFilterChange,
-  selectedStatusValues,
-  onTimePeriodFilterChange,
-  selectedTimePeriodValues,
-  onSourceFilterChange,
-  selectedSourceValues,
-  onResetFilters,
-  isStatusFiltered,
-  isTimePeriodFiltered,
-  isSourceFiltered,
-  showSourceFilter = true,
-}: DataTableToolbarProps<TData>) {
-  const { _ } = useLingui();
-  const isFiltered =
-    table.getState().columnFilters.length > 0 ||
-    isStatusFiltered ||
-    isTimePeriodFiltered ||
-    isSourceFiltered;
-  const searchValue = (table.getColumn('title')?.getFilterValue() as string) ?? '';
-
-  const handleClearFilter = () => {
-    table.getColumn('title')?.setFilterValue('');
-  };
-
-  const handleReset = () => {
-    table.resetColumnFilters();
-    onResetFilters?.();
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center gap-2">
-        <div className="relative">
-          <Input
-            className="peer h-8 w-[150px] pe-9 ps-9 lg:w-[250px]"
-            placeholder={_(msg`Search documents...`)}
-            value={searchValue}
-            onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
-          />
-          <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
-            <ListFilter size={16} aria-hidden="true" />
-          </div>
-          {searchValue && (
-            <button
-              className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md outline-none transition-[color,box-shadow] focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-              aria-label={_(msg`Clear filter`)}
-              onClick={handleClearFilter}
-            >
-              <XCircle className="size-3" aria-hidden="true" />
-            </button>
-          )}
-        </div>
-
-        {table.getColumn('status') && (
-          <DataTableFacetedFilter
-            column={table.getColumn('status')}
-            title={_(msg`Status`)}
-            options={statuses}
-            icon={CircleDashedIcon}
-            stats={stats}
-            onFilterChange={onStatusFilterChange}
-            selectedValues={selectedStatusValues}
-          />
-        )}
-
-        {table.getColumn('createdAt') && (
-          <DataTableSingleFilter
-            column={table.getColumn('createdAt')}
-            title={_(msg`Time Period`)}
-            options={timePeriods}
-            groups={timePeriodGroups}
-            icon={Calendar}
-            onFilterChange={onTimePeriodFilterChange}
-            selectedValues={selectedTimePeriodValues}
-          />
-        )}
-
-        {showSourceFilter && table.getColumn('source') && (
-          <DataTableFacetedFilter
-            column={table.getColumn('source')}
-            title={_(msg`Source`)}
-            options={sources}
-            icon={Globe}
-            onFilterChange={onSourceFilterChange}
-            selectedValues={selectedSourceValues}
-          />
-        )}
-
-        {isFiltered && (
-          <Button variant="ghost" className="h-8 gap-2" size="sm" onClick={handleReset}>
-            {_(msg`Reset`)}
-            <X className="size-4" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

packages/ui/primitives/data-table/data-table.tsx

@@ -1,236 +0,0 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  Updater,
-  VisibilityState,
-} from '@tanstack/react-table';
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-
-import type { DataTableChildren } from '../data-table';
-import { Skeleton } from '../skeleton';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
-import { DataTableToolbar } from './data-table-toolbar';
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  perPage?: number;
-  currentPage?: number;
-  totalPages?: number;
-  onPaginationChange?: (_page: number, _perPage: number) => void;
-  children?: DataTableChildren<TData>;
-  stats?: Record<string, number>;
-  onStatusFilterChange?: (values: string[]) => void;
-  selectedStatusValues?: string[];
-  onTimePeriodFilterChange?: (values: string[]) => void;
-  selectedTimePeriodValues?: string[];
-  onSourceFilterChange?: (values: string[]) => void;
-  selectedSourceValues?: string[];
-  onResetFilters?: () => void;
-  isStatusFiltered?: boolean;
-  isTimePeriodFiltered?: boolean;
-  isSourceFiltered?: boolean;
-  showSourceFilter?: boolean;
-  skeleton?: {
-    enable: boolean;
-    rows: number;
-    component?: React.ReactNode;
-  };
-  error?: {
-    enable: boolean;
-    component?: React.ReactNode;
-  };
-  emptyState?: {
-    enable: boolean;
-    component?: React.ReactNode;
-  };
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  error,
-  perPage,
-  currentPage,
-  totalPages,
-  skeleton,
-  onPaginationChange,
-  children,
-  stats,
-  onStatusFilterChange,
-  selectedStatusValues,
-  onTimePeriodFilterChange,
-  selectedTimePeriodValues,
-  onSourceFilterChange,
-  selectedSourceValues,
-  onResetFilters,
-  isStatusFiltered,
-  isTimePeriodFiltered,
-  isSourceFiltered,
-  showSourceFilter,
-  emptyState,
-}: DataTableProps<TData, TValue>) {
-  const { _ } = useLingui();
-  const [rowSelection, setRowSelection] = React.useState({});
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-
-  const pagination = useMemo<PaginationState>(() => {
-    if (currentPage !== undefined && perPage !== undefined) {
-      return {
-        pageIndex: currentPage - 1,
-        pageSize: perPage,
-      };
-    }
-
-    return {
-      pageIndex: 0,
-      pageSize: 0,
-    };
-  }, [currentPage, perPage]);
-
-  const manualPagination = Boolean(currentPage !== undefined && totalPages !== undefined);
-
-  const onTablePaginationChange = (updater: Updater<PaginationState>) => {
-    if (typeof updater === 'function') {
-      const newState = updater(pagination);
-
-      onPaginationChange?.(newState.pageIndex + 1, newState.pageSize);
-    } else {
-      onPaginationChange?.(updater.pageIndex + 1, updater.pageSize);
-    }
-  };
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-      pagination: manualPagination ? pagination : undefined,
-    },
-    manualPagination,
-    pageCount: manualPagination ? totalPages : undefined,
-    initialState: {
-      pagination: {
-        pageSize: 10,
-      },
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    onPaginationChange: onTablePaginationChange,
-  });
-
-  return (
-    <>
-      <div className="flex flex-col gap-4">
-        <DataTableToolbar
-          table={table}
-          stats={stats}
-          onStatusFilterChange={onStatusFilterChange}
-          selectedStatusValues={selectedStatusValues}
-          onTimePeriodFilterChange={onTimePeriodFilterChange}
-          selectedTimePeriodValues={selectedTimePeriodValues}
-          onSourceFilterChange={onSourceFilterChange}
-          selectedSourceValues={selectedSourceValues}
-          onResetFilters={onResetFilters}
-          isStatusFiltered={isStatusFiltered}
-          isTimePeriodFiltered={isTimePeriodFiltered}
-          isSourceFiltered={isSourceFiltered}
-          showSourceFilter={showSourceFilter}
-        />
-        {table.getRowModel().rows?.length || error?.enable || skeleton?.enable ? (
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                        </TableHead>
-                      );
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                ) : error?.enable ? (
-                  <TableRow>
-                    {error.component ?? (
-                      <TableCell colSpan={columns.length} className="h-32 text-center">
-                        <Trans>Something went wrong.</Trans>
-                      </TableCell>
-                    )}
-                  </TableRow>
-                ) : skeleton?.enable ? (
-                  Array.from({ length: skeleton.rows }).map((_, i) => (
-                    <TableRow key={`skeleton-row-${i}`}>
-                      {skeleton.component ?? <Skeleton />}
-                    </TableRow>
-                  ))
-                ) : null}
-              </TableBody>
-            </Table>
-          </div>
-        ) : emptyState?.enable ? (
-          (emptyState.component ?? (
-            <div className="flex h-24 items-center justify-center text-center">
-              {_(msg`No results.`)}
-            </div>
-          ))
-        ) : (
-          <div className="flex h-24 items-center justify-center text-center">
-            {_(msg`No results.`)}
-          </div>
-        )}
-      </div>
-
-      {children && (table.getRowModel().rows?.length || error?.enable || skeleton?.enable) && (
-        <div className="mt-8 w-full">{children(table)}</div>
-      )}
-    </>
-  );
-}

packages/ui/primitives/data-table/data/data.tsx

@@ -1,119 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { CheckCircle2, Clock, File, FileText, Inbox, Link, XCircle } from 'lucide-react';
-
-export const statuses = [
-  {
-    value: 'INBOX',
-    label: msg`Inbox`,
-    icon: Inbox,
-    color: 'text-blue-700 dark:text-blue-300',
-    bgColor: 'bg-blue-100 dark:bg-blue-100 text-blue-700 dark:text-blue-700',
-  },
-  {
-    value: 'DRAFT',
-    label: msg`Draft`,
-    icon: File,
-    color: 'text-yellow-500 dark:text-yellow-300',
-    bgColor: 'bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700',
-  },
-  {
-    value: 'PENDING',
-    label: msg`Pending`,
-    icon: Clock,
-    color: 'text-blue-700 dark:text-blue-300',
-    bgColor: 'bg-blue-100 dark:bg-blue-100 text-blue-700 dark:text-blue-700',
-  },
-  {
-    value: 'COMPLETED',
-    label: msg`Completed`,
-    icon: CheckCircle2,
-    color: 'text-documenso-700 dark:text-documenso-300',
-    bgColor: 'bg-documenso-200 dark:bg-documenso-200 text-documenso-800 dark:text-documenso-800',
-  },
-  {
-    value: 'REJECTED',
-    label: msg`Rejected`,
-    icon: XCircle,
-    color: 'text-red-700 dark:text-red-300',
-    bgColor: 'bg-red-100 dark:bg-red-100 text-red-500 dark:text-red-700',
-  },
-];
-
-export const sources = [
-  {
-    value: 'TEMPLATE',
-    label: msg`Template`,
-    icon: FileText,
-    color: 'text-blue-700 dark:text-blue-300',
-    bgColor: 'bg-blue-100 dark:bg-blue-100 text-blue-700 dark:text-blue-700',
-  },
-  {
-    value: 'DIRECT_LINK',
-    label: msg`Direct Link`,
-    icon: Link,
-    color: 'text-green-700 dark:text-green-300',
-    bgColor: 'bg-green-100 dark:bg-green-100 text-green-700 dark:text-green-700',
-  },
-];
-
-export const timePeriods = [
-  {
-    value: 'today',
-    label: msg`Today`,
-  },
-  {
-    value: 'this-week',
-    label: msg`This Week`,
-  },
-  {
-    value: 'this-month',
-    label: msg`This Month`,
-  },
-  {
-    value: 'this-quarter',
-    label: msg`This Quarter`,
-  },
-  {
-    value: 'this-year',
-    label: msg`This Year`,
-  },
-  {
-    value: 'yesterday',
-    label: msg`Yesterday`,
-  },
-  {
-    value: 'last-week',
-    label: msg`Last Week`,
-  },
-  {
-    value: 'last-month',
-    label: msg`Last Month`,
-  },
-  {
-    value: 'last-quarter',
-    label: msg`Last Quarter`,
-  },
-  {
-    value: 'last-year',
-    label: msg`Last Year`,
-  },
-  {
-    value: 'all-time',
-    label: msg`All Time`,
-  },
-];
-
-export const timePeriodGroups = [
-  {
-    label: msg`Present`,
-    values: ['today', 'this-week', 'this-month', 'this-quarter', 'this-year'],
-  },
-  {
-    label: msg`Past`,
-    values: ['yesterday', 'last-week', 'last-month', 'last-quarter', 'last-year'],
-  },
-  {
-    label: msg``,
-    values: ['all-time'],
-  },
-];

packages/ui/primitives/data-table/utils/time-filters.ts

@@ -1,116 +0,0 @@
-import { DateTime } from 'luxon';
-
-export const timePeriods = [
-  'today',
-  'this-week',
-  'this-month',
-  'this-quarter',
-  'this-year',
-  'yesterday',
-  'last-week',
-  'last-month',
-  'last-quarter',
-  'last-year',
-  'all-time',
-] as const;
-
-export type TimePeriod = (typeof timePeriods)[number];
-
-export function getDateRangeForPeriod(
-  period: TimePeriod,
-): { start: DateTime; end: DateTime } | null {
-  const now = DateTime.now();
-
-  switch (period) {
-    case 'today':
-      return {
-        start: now.startOf('day'),
-        end: now.endOf('day'),
-      };
-
-    case 'yesterday': {
-      const yesterday = now.minus({ days: 1 });
-      return {
-        start: yesterday.startOf('day'),
-        end: yesterday.endOf('day'),
-      };
-    }
-
-    case 'this-week':
-      return {
-        start: now.startOf('week'),
-        end: now.endOf('week'),
-      };
-
-    case 'last-week': {
-      const lastWeek = now.minus({ weeks: 1 });
-      return {
-        start: lastWeek.startOf('week'),
-        end: lastWeek.endOf('week'),
-      };
-    }
-
-    case 'this-month':
-      return {
-        start: now.startOf('month'),
-        end: now.endOf('month'),
-      };
-
-    case 'last-month': {
-      const lastMonth = now.minus({ months: 1 });
-      return {
-        start: lastMonth.startOf('month'),
-        end: lastMonth.endOf('month'),
-      };
-    }
-
-    case 'this-quarter':
-      return {
-        start: now.startOf('quarter'),
-        end: now.endOf('quarter'),
-      };
-
-    case 'last-quarter': {
-      const lastQuarter = now.minus({ quarters: 1 });
-      return {
-        start: lastQuarter.startOf('quarter'),
-        end: lastQuarter.endOf('quarter'),
-      };
-    }
-
-    case 'this-year':
-      return {
-        start: now.startOf('year'),
-        end: now.endOf('year'),
-      };
-
-    case 'last-year': {
-      const lastYear = now.minus({ years: 1 });
-      return {
-        start: lastYear.startOf('year'),
-        end: lastYear.endOf('year'),
-      };
-    }
-
-    case 'all-time':
-      return null;
-
-    default:
-      return null;
-  }
-}
-
-export function isDateInPeriod(date: Date, period: TimePeriod): boolean {
-  if (period === 'all-time') {
-    return true;
-  }
-
-  const dateTime = DateTime.fromJSDate(date);
-  const range = getDateRangeForPeriod(period);
-
-  if (!range) {
-    return false;
-  }
-
-  return dateTime >= range.start && dateTime <= range.end;
-}

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

@@ -18,7 +18,6 @@ import {
 } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { prop, sortBy } from 'remeda';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
@@ -103,6 +102,10 @@ export const AddFieldsFormPartial = ({
 
   const [isMissingSignatureDialogVisible, setIsMissingSignatureDialogVisible] = useState(false);
 
+  const handleMissingSignatureDialogOpenChange = (value: boolean) => {
+    setIsMissingSignatureDialogVisible(value);
+  };
+
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
   const { currentStep, totalSteps, previousStep } = useStep();
   const canRenderBackButtonAsRemove =
@@ -511,18 +514,24 @@ export const AddFieldsFormPartial = ({
     };
   }, []);
 
-  useEffect(() => {
+  const defaultSelectedSigner = useMemo(() => {
     const recipientsByRoleToDisplay = recipients.filter(
       (recipient) =>
         recipient.role !== RecipientRole.CC && recipient.role !== RecipientRole.ASSISTANT,
     );
 
-    setSelectedSigner(
+    return (
       recipientsByRoleToDisplay.find((r) => r.sendStatus !== SendStatus.SENT) ??
-        recipientsByRoleToDisplay[0],
+      recipientsByRoleToDisplay[0]
     );
   }, [recipients]);
 
+  if (selectedSigner && !recipients.find((r) => r.id === selectedSigner.id)) {
+    setSelectedSigner(defaultSelectedSigner);
+  } else if (!selectedSigner && defaultSelectedSigner) {
+    setSelectedSigner(defaultSelectedSigner);
+  }
+
   const recipientsByRole = useMemo(() => {
     const recipientsByRole: Record<RecipientRole, Recipient[]> = {
       CC: [],
@@ -539,29 +548,6 @@ export const AddFieldsFormPartial = ({
     return recipientsByRole;
   }, [recipients]);
 
-  const recipientsByRoleToDisplay = useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return (Object.entries(recipientsByRole) as [RecipientRole, Recipient[]][])
-      .filter(
-        ([role]) =>
-          role !== RecipientRole.CC &&
-          role !== RecipientRole.VIEWER &&
-          role !== RecipientRole.ASSISTANT,
-      )
-      .map(
-        ([role, roleRecipients]) =>
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          [
-            role,
-            sortBy(
-              roleRecipients,
-              [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'],
-              [prop('id'), 'asc'],
-            ),
-          ] as [RecipientRole, Recipient[]],
-      );
-  }, [recipientsByRole]);
-
   const handleAdvancedSettings = () => {
     setShowAdvancedSettings((prev) => !prev);
   };
@@ -995,7 +981,7 @@ export const AddFieldsFormPartial = ({
 
           <MissingSignatureFieldDialog
             isOpen={isMissingSignatureDialogVisible}
-            onOpenChange={(value) => setIsMissingSignatureDialogVisible(value)}
+            onOpenChange={handleMissingSignatureDialogOpenChange}
           />
         </>
       )}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -160,22 +160,32 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
 
     const defaultState: FieldMeta = getDefaultState(field.type);
 
-    const [fieldState, setFieldState] = useState(() => {
-      const savedState = localStorage.getItem(localStorageKey);
-      return savedState ? { ...defaultState, ...JSON.parse(savedState) } : defaultState;
-    });
-
-    useEffect(() => {
+    const initialFieldState = useMemo(() => {
       if (fieldMeta && typeof fieldMeta === 'object') {
         const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
-
-        setFieldState({
+        return {
           ...defaultState,
           ...parsedFieldMeta,
-        });
+        };
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fieldMeta]);
+
+      const savedState = localStorage.getItem(localStorageKey);
+      return savedState ? { ...defaultState, ...JSON.parse(savedState) } : defaultState;
+    }, [fieldMeta, defaultState, localStorageKey]);
+
+    const [fieldState, setFieldState] = useState(initialFieldState);
+
+    if (fieldMeta && typeof fieldMeta === 'object') {
+      const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
+      const expectedState = {
+        ...defaultState,
+        ...parsedFieldMeta,
+      };
+
+      if (JSON.stringify(fieldState) !== JSON.stringify(expectedState)) {
+        setFieldState(expectedState);
+      }
+    }
 
     const handleFieldChange = (
       key: FieldMetaKeys,

packages/ui/primitives/multiselect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useEffect } from 'react';
 

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

@@ -1,12 +1,12 @@
 import type { MouseEvent, PointerEvent, RefObject, TouchEvent } from 'react';
 import { useMemo, useRef, useState } from 'react';
+import { useLayoutEffect } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { Undo2 } from 'lucide-react';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
-import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
 import {
   SIGNATURE_CANVAS_DPI,
   SIGNATURE_MIN_COVERAGE_THRESHOLD,
@@ -247,7 +247,7 @@ export const SignaturePadDraw = ({
     onChange?.($el.current.toDataURL());
   };
 
-  unsafe_useEffectOnce(() => {
+  useLayoutEffect(() => {
     if ($el.current) {
       $el.current.width = $el.current.clientWidth * SIGNATURE_CANVAS_DPI;
       $el.current.height = $el.current.clientHeight * SIGNATURE_CANVAS_DPI;
@@ -270,7 +270,7 @@ export const SignaturePadDraw = ({
 
       img.src = value;
     }
-  });
+  }, [value]);
 
   return (
     <div className={cn('h-full w-full', className)}>

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

@@ -1,10 +1,9 @@
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { UploadCloudIcon } from 'lucide-react';
 
-import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
 import { SIGNATURE_CANVAS_DPI } from '@documenso/lib/constants/signatures';
 
 import { cn } from '../../lib/utils';
@@ -97,7 +96,7 @@ export const SignaturePadUpload = ({
     }
   };
 
-  unsafe_useEffectOnce(() => {
+  useLayoutEffect(() => {
     // Todo: Not really sure if this is required for uploaded images.
     if ($el.current) {
       $el.current.width = $el.current.clientWidth * SIGNATURE_CANVAS_DPI;
@@ -121,7 +120,7 @@ export const SignaturePadUpload = ({
 
       img.src = value;
     }
-  });
+  }, [value]);
 
   return (
     <div className={cn('relative h-full w-full', className)}>

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -16,7 +14,7 @@ import {
   DOCUMENT_SIGNATURE_TYPES,
 } from '@documenso/lib/constants/document';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
-import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -113,7 +111,8 @@ export const AddTemplateSettingsFormPartial = ({
       meta: {
         subject: template.templateMeta?.subject ?? '',
         message: template.templateMeta?.message ?? '',
-        timezone: template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        timezone:
+          template.templateMeta?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         dateFormat: (template.templateMeta?.dateFormat ??
           DEFAULT_DOCUMENT_DATE_FORMAT) as TDocumentMetaDateFormat,
@@ -152,14 +151,6 @@ export const AddTemplateSettingsFormPartial = ({
     )
     .otherwise(() => false);
 
-  // We almost always want to set the timezone to the user's local timezone to avoid confusion
-  // when the document is signed.
-  useEffect(() => {
-    if (!form.formState.touchedFields.meta?.timezone && !template.templateMeta?.timezone) {
-      form.setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
-    }
-  }, [form, form.setValue, form.formState.touchedFields.meta?.timezone]);
-
   return (
     <>
       <DocumentFlowFormContainerHeader