chore: merge main

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+packages/prisma/generated/types.ts
+
 # dependencies
 node_modules
 .pnp

.vscode/settings.json

@@ -5,12 +5,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "eslint.validate": [
+  "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
-    "typescript",
-    "typescriptreact",
-    "javascript",
-    "javascriptreact"
-  ],
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "javascript.preferences.useAliasesForRenames": false,
   "typescript.enablePromptUseWorkspaceTsdk": true,
@@ -20,4 +15,7 @@
   "[prisma]": {
     "editor.defaultFormatter": "Prisma.prisma"
   },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

README.md

@@ -261,6 +261,7 @@ npm run prisma:migrate-deploy
 Finally, you can start it with:
 
 ```
+cd apps/web
 npm run start
 ```
 

apps/documentation/pages/developers/webhooks.mdx

@@ -37,7 +37,7 @@ To create a new webhook subscription, you need to provide the following informat
 
 - Enter the webhook URL that will receive the event payload.
 - Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`.
-- Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Signature` header of the request.
+- Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Secret` header of the request.
 
 ![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
 

apps/marketing/content/blog/announcing-vial-21-cfr-part-11.mdx

@@ -11,14 +11,7 @@ tags:
   - Compliance
 ---
 
-<video
+<video id="vid" width="100%" src="/blog/vial.webm" autoPlay loop muted></video>
-  id="vid"
-  width="100%"
-  src="/blog/vial.webm"
-  autoPlay
-  loop
-  muted
-></video>
 <figcaption className="text-center">
   Vial.com uses Documenso for 21 CFR Part 11 compliant signing.
 </figcaption>
@@ -26,42 +19,40 @@ tags:
 > TLDR; We launched Vial.com on Documenso and are open for 21 CFR Part 11 business.
 
 # What is 21 CFR
+
 You have never heard of 21 CFR Part 11? You are in good company since most people haven't. If you have, you probably work in an industry regulated by the U.S. Food and Drug Administration (FDA). Title 21 of the Code of Federal Regulations (CFR) is dedicated to detailing FDA-regulated business, and sub-part 11 sets out guidelines for using electronic signatures in this highly regulated field. Hence, 21 CFR Part 11 is highly relevant for regulated industries that aim to employ digital signatures. The guidelines set out in 21 CFR Part 11 aim to provide trustworthy, reliable, and equivalent to paper records and handwritten signatures. All Industries that fall under the FDA's regulation, e.g. pharmaceuticals, biotechnology, medical devices, and biologics, must comply with these rules when choosing or creating systems for electronic signatures.
 
 Compliance with 21 CFR Part 11 is crucial for companies to use electronic records and signatures in their operations legally. It affects how companies manage documentation, conduct audits, and maintain regulatory submissions. Non-compliance can result in legal penalties, rejected submissions, and delays in product approvals, emphasizing the importance of adhering to these guidelines in FDA-regulated activities.
 
 # Vial.com
+
 Vial is a technology company on a mission to advance programs to market through computationally designed therapeutics and cost-effective clinical trials. It is imperative that Vial manages this process securely, effectively, and highly compliant. By leveraging it's modern platform, Vial aims to accelerate drug development and, ultimately, time to market for new therapies. You can learn more about them [here](https://vial.com/about-us).
 
 [Together](https://documen.so/vial-documenso), Documenso and Vial set out to create the first open-source, 21 CFR Part 11 compliant signing solution. After iterating over the product together, Vial moved their operation from DocuSign, a known legacy signing provider, to a Documenso Enterprise plan. We are very happy to be able to support Vial’s mission by fulfilling our own: bringing open signing and all its innovation to where it's needed.
 
 # 21 CFR Part 11 on Documenso Highlights
+
 21 CFR Part 11 is a highly complex statute, and going into the all design rationales and the following implementation details, deserves its own article later. For now, I want to share a few notable highlights.
 
 ## The Full Experience
+
 We implemented 21 CFR Part 11, keeping the main user experience of Documenso intact. Our 21 CFR module is not separate but natively integrated into all Documenso flows, thus not sacrificing usability for compliance. This also means most (if not all) advanced features we offer are usable in a compliant way. This prevents customers from being trapped in an anti-innovation bubble, not allowing access to new features for fear of non-compliance.
 
 ## Action Reauth Using Passkeys
-<video
+
-  id="vid"
+<video id="vid" width="100%" src="/blog/vial2.webm" autoPlay loop muted controls></video>
-  width="100%"
-  src="/blog/vial2.webm"
-  autoPlay
-  loop
-  muted
-  controls
-></video>
 <figcaption className="text-center">
   Using passkeys (used here via fingerprint scanner) is the smoothest way to re-authenticate.
 </figcaption>
 
-
 One of the requirements affecting day-to-day life the most is the requirement to actually reauthenticate every signature placed on a document. While we can't change that, we can help make the reauthentication as painless as possible. To this end, we opted for passkeys. While Documenso supports passkeys to log in, they are also supported to authenticate signing on a per-signature level as part of the Documenso Enterprise Plan. The user still has to authenticate every signature but can now do so from the comfort of their passkey provider, be that 1Password, their browser, or any other provider.
 
 ## Direct Links
+
 We recently launched [Direct Template Links](https://documen.so/direct-links), a new way to let people sign and fill out forms. Links can be completed anytime, creating a new document in the process. Direct Links are also 21 CFR part 11 compliant, using action reauthentication, audit log, and all other compliance requirements.
 
 # Documenso Enterprise Plan
+
 With the successful launch of Vial, we are now open for business. 21 CFR Part 11 compliance is part of the Documenso Enterprise plan, which includes all regulations we currently support and upcoming additions. While the pricing depends heavily on your needs and scale, we offer fixed-price plans for better predictability for both sides. In our experience, volume-based pricing is a legacy headache we want to avoid.
 
 If you are FDA-regulated and looking for a modern signing solution, we are happy to discuss your requirements in detail. You can write us (hi@documenso.com) or contact [our enterprise team](https://documen.so/21cfr) at any time or stage.
@@ -70,4 +61,3 @@ If you have any questions or comments, please reach out on [Twitter / X](https:/
 
 Best from Hamburg\
 Timur
-

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.6.1-rc.1",
+  "version": "1.7.0-rc.2",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -20,7 +20,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@openstatus/react": "^0.0.3",
     "cmdk": "^0.2.1",

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -44,6 +44,10 @@ export default async function OSSFriendsPage() {
           src={backgroundPattern}
           alt="background pattern"
           className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          }}
         />
       </div>
     </div>

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

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
@@ -46,8 +48,8 @@ export const SinglePlayerClient = () => {
 
   const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
     fields: {
-      title: 'Add document',
+      title: msg`Add document`,
-      description: 'Upload a document and add fields.',
+      description: msg`Upload a document and add fields.`,
       stepIndex: 1,
       onBackStep: uploadedFile
         ? () => {
@@ -58,8 +60,8 @@ export const SinglePlayerClient = () => {
       onNextStep: () => setStep('sign'),
     },
     sign: {
-      title: 'Sign',
+      title: msg`Sign`,
-      description: 'Enter your details.',
+      description: msg`Enter your details.`,
       stepIndex: 2,
       onBackStep: () => setStep('fields'),
     },

apps/marketing/src/app/not-found.tsx

@@ -26,6 +26,10 @@ export default function NotFound() {
             src={backgroundPattern}
             alt="background pattern"
             className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            }}
             priority
           />
         </motion.div>

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

@@ -2,11 +2,14 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import Link from 'next/link';
+
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { AutoplayType } from 'embla-carousel-autoplay';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
+import { usePlausible } from 'next-plausible';
 import { useTheme } from 'next-themes';
 
 import { Card } from '@documenso/ui/primitives/card';
@@ -61,6 +64,7 @@ const SLIDES = [
 
 export const Carousel = () => {
   const { _ } = useLingui();
+  const event = usePlausible();
 
   const slides = SLIDES;
   const [_isPlaying, setIsPlaying] = useState(false);
@@ -238,7 +242,10 @@ export const Carousel = () => {
   if (!mounted) return null;
   return (
     <>
-      <Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient>
+      <Card
+        className="relative mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl"
+        gradient
+      >
         <div className="overflow-hidden rounded-xl" ref={emblaRef}>
           <div className="flex touch-pan-y rounded-xl">
             {slides.map((slide, index) => (
@@ -269,6 +276,19 @@ export const Carousel = () => {
           </span>
           <Progress value={progress} className="h-1" />
         </div>
+
+        <Link
+          href="https://documen.so/book-a-demo"
+          className="bg-foreground/70 dark:bg-foreground/80 absolute inset-0 hidden flex-col items-center justify-center gap-y-2 rounded-xl opacity-0 backdrop-blur-[2px] transition-opacity group-hover:opacity-100 md:flex"
+          onClick={() => event('view-demo')}
+        >
+          <span className="text-background max-w-[60ch] text-2xl font-semibold">Book a Demo</span>
+          <span className="text-background max-w-[60ch] text-center text-sm">
+            Want to learn more about Documenso and how it works? Book a demo today! Our founders
+            will walk you through the application and answer any questions you may have regarding
+            usage, integration, and more.
+          </span>
+        </Link>
       </Card>
 
       <div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -24,6 +24,10 @@ export const FasterSmarterBeautifulBento = ({
           src={backgroundPattern}
           alt="background pattern"
           className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          }}
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">

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

@@ -86,6 +86,10 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             src={backgroundPattern}
             alt="background pattern"
             className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            }}
           />
         </motion.div>
       </div>

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -21,6 +21,10 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
           src={backgroundPattern}
           alt="background pattern"
           className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+          }}
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -25,6 +25,10 @@ export const ShareConnectPaidWidgetBento = ({
           src={backgroundPattern}
           alt="background pattern"
           className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+          }}
         />
       </div>
       <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
@@ -39,7 +43,7 @@ export const ShareConnectPaidWidgetBento = ({
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
               <strong className="block">
-                <Trans>Easy Sharing (Soon).</Trans>
+                <Trans>Easy Sharing.</Trans>
               </strong>
               <Trans>Receive your personal link to share with everyone you care about.</Trans>
             </p>

apps/web/lingui.config.ts

@@ -8,7 +8,7 @@ const config: LinguiConfig = {
   locales: APP_I18N_OPTIONS.supportedLangs as unknown as string[],
   catalogs: [
     {
-      path: '<rootDir>/../../packages/lib/translations/web/{locale}',
+      path: '<rootDir>/../../packages/lib/translations/{locale}/web',
       include: ['<rootDir>/apps/web/src'],
     },
     {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.6.1-rc.1",
+  "version": "1.7.0-rc.2",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -23,7 +23,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
@@ -60,9 +59,9 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@documenso/tailwind-config": "*",
     "@lingui/loader": "^4.11.1",
     "@lingui/swc-plugin": "4.0.6",
-    "@documenso/tailwind-config": "*",
     "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -2,6 +2,9 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { Recipient } from '@documenso/prisma/client';
 import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -22,20 +25,21 @@ export type AdminActionsProps = {
 };
 
 export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
     trpc.admin.resealDocument.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Document resealed',
+          description: _(msg`Document resealed`),
         });
       },
       onError: () => {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'Failed to reseal document',
+          description: _(msg`Failed to reseal document`),
           variant: 'destructive',
         });
       },
@@ -54,19 +58,23 @@ export const AdminActions = ({ className, document, recipients }: AdminActionsPr
               )}
               onClick={() => resealDocument({ id: document.id })}
             >
-              Reseal document
+              <Trans>Reseal document</Trans>
             </Button>
           </TooltipTrigger>
 
           <TooltipContent className="max-w-[40ch]">
+            <Trans>
               Attempts sealing the document again, useful for after a code change has occurred to
               resolve an erroneous document.
+            </Trans>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
       <Button variant="outline" asChild>
-        <Link href={`/admin/users/${document.userId}`}>Go to owner</Link>
+        <Link href={`/admin/users/${document.userId}`}>
+          <Trans>Go to owner</Trans>
+        </Link>
       </Button>
     </div>
   );

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

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import {
   Accordion,
@@ -23,6 +25,8 @@ type AdminDocumentDetailsPageProps = {
 };
 
 export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
+  setupI18nSSR();
+
   const document = await getEntireDocument({ id: Number(params.id) });
 
   return (
@@ -35,28 +39,34 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
         {document.deletedAt && (
           <Badge size="large" variant="destructive">
-            Deleted
+            <Trans>Deleted</Trans>
           </Badge>
         )}
       </div>
 
       <div className="text-muted-foreground mt-4 text-sm">
         <div>
-          Created on: <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
+          <Trans>Created on</Trans>:{' '}
+          <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
         </div>
         <div>
-          Last updated at: <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
+          <Trans>Last updated at</Trans>:{' '}
+          <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
         </div>
       </div>
 
       <hr className="my-4" />
 
-      <h2 className="text-lg font-semibold">Admin Actions</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Admin Actions</Trans>
+      </h2>
 
       <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
 
       <hr className="my-4" />
-      <h2 className="text-lg font-semibold">Recipients</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Recipients</Trans>
+      </h2>
 
       <div className="mt-4">
         <Accordion type="multiple" className="space-y-4">

apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx

@@ -1,7 +1,11 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -13,6 +17,7 @@ import {
 } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import {
   Form,
@@ -43,7 +48,9 @@ export type RecipientItemProps = {
 };
 
 export const RecipientItem = ({ recipient }: RecipientItemProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const form = useForm<TAdminUpdateRecipientFormSchema>({
@@ -55,6 +62,50 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
   const { mutateAsync: updateRecipient } = trpc.admin.updateRecipient.useMutation();
 
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+        cell: ({ row }) => <div>{row.original.id}</div>,
+      },
+      {
+        header: _(msg`Type`),
+        accessorKey: 'type',
+        cell: ({ row }) => <div>{row.original.type}</div>,
+      },
+      {
+        header: _(msg`Inserted`),
+        accessorKey: 'inserted',
+        cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
+      },
+      {
+        header: _(msg`Value`),
+        accessorKey: 'customText',
+        cell: ({ row }) => <div>{row.original.customText}</div>,
+      },
+      {
+        header: _(msg`Signature`),
+        accessorKey: 'signature',
+        cell: ({ row }) => (
+          <div>
+            {row.original.Signature?.typedSignature && (
+              <span>{row.original.Signature.typedSignature}</span>
+            )}
+
+            {row.original.Signature?.signatureImageAsBase64 && (
+              <img
+                src={row.original.Signature.signatureImageAsBase64}
+                alt="Signature"
+                className="h-12 w-full dark:invert"
+              />
+            )}
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof recipient)['Field'][number]>[];
+  }, []);
+
   const onUpdateRecipientFormSubmit = async ({ name, email }: TAdminUpdateRecipientFormSchema) => {
     try {
       await updateRecipient({
@@ -64,14 +115,14 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
       });
 
       toast({
-        title: 'Recipient updated',
+        title: _(msg`Recipient updated`),
-        description: 'The recipient has been updated successfully',
+        description: _(msg`The recipient has been updated successfully`),
       });
 
       router.refresh();
     } catch (error) {
       toast({
-        title: 'Failed to update recipient',
+        title: _(msg`Failed to update recipient`),
         description: error.message,
         variant: 'destructive',
       });
@@ -93,7 +144,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="name"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Name</FormLabel>
+                  <FormLabel required>
+                    <Trans>Name</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input {...field} />
@@ -109,7 +162,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="email"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Email</FormLabel>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input type="email" {...field} />
@@ -122,7 +177,7 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
             <div>
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update Recipient
+                <Trans>Update Recipient</Trans>
               </Button>
             </div>
           </fieldset>
@@ -131,52 +186,11 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
       <hr className="my-4" />
 
-      <h2 className="mb-4 text-lg font-semibold">Fields</h2>
+      <h2 className="mb-4 text-lg font-semibold">
+        <Trans>Fields</Trans>
+      </h2>
 
-      <DataTable
+      <DataTable columns={columns} data={recipient.Field} />
-        data={recipient.Field}
-        columns={[
-          {
-            header: 'ID',
-            accessorKey: 'id',
-            cell: ({ row }) => <div>{row.original.id}</div>,
-          },
-          {
-            header: 'Type',
-            accessorKey: 'type',
-            cell: ({ row }) => <div>{row.original.type}</div>,
-          },
-          {
-            header: 'Inserted',
-            accessorKey: 'inserted',
-            cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
-          },
-          {
-            header: 'Value',
-            accessorKey: 'customText',
-            cell: ({ row }) => <div>{row.original.customText}</div>,
-          },
-          {
-            header: 'Signature',
-            accessorKey: 'signature',
-            cell: ({ row }) => (
-              <div>
-                {row.original.Signature?.typedSignature && (
-                  <span>{row.original.Signature.typedSignature}</span>
-                )}
-
-                {row.original.Signature?.signatureImageAsBase64 && (
-                  <img
-                    src={row.original.Signature.signatureImageAsBase64}
-                    alt="Signature"
-                    className="h-12 w-full dark:invert"
-                  />
-                )}
-              </div>
-            ),
-          },
-        ]}
-      />
     </div>
   );
 };

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { Document } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -26,7 +29,9 @@ export type SuperDeleteDocumentDialogProps = {
 };
 
 export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const [reason, setReason] = useState('');
@@ -43,7 +48,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
       await deleteDocument({ id: document.id, reason });
 
       toast({
-        title: 'Document deleted',
+        title: _(msg`Document deleted`),
         description: 'The Document has been deleted successfully.',
         duration: 5000,
       });
@@ -52,13 +57,13 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
@@ -76,31 +81,41 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
           variant="neutral"
         >
           <div>
-            <AlertTitle>Delete Document</AlertTitle>
+            <AlertTitle>
+              <Trans>Delete Document</Trans>
+            </AlertTitle>
             <AlertDescription className="mr-2">
+              <Trans>
                 Delete the document. This action is irreversible so proceed with caution.
+              </Trans>
             </AlertDescription>
           </div>
 
           <div className="flex-shrink-0">
             <Dialog>
               <DialogTrigger asChild>
-                <Button variant="destructive">Delete Document</Button>
+                <Button variant="destructive">
+                  <Trans>Delete Document</Trans>
+                </Button>
               </DialogTrigger>
 
               <DialogContent>
                 <DialogHeader className="space-y-4">
-                  <DialogTitle>Delete Document</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Delete Document</Trans>
+                  </DialogTitle>
 
                   <Alert variant="destructive">
                     <AlertDescription className="selection:bg-red-100">
-                      This action is not reversible. Please be certain.
+                      <Trans>This action is not reversible. Please be certain.</Trans>
                     </AlertDescription>
                   </Alert>
                 </DialogHeader>
 
                 <div>
-                  <DialogDescription>To confirm, please enter the reason</DialogDescription>
+                  <DialogDescription>
+                    <Trans>To confirm, please enter the reason</Trans>
+                  </DialogDescription>
 
                   <Input
                     className="mt-2"
@@ -117,7 +132,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
                     variant="destructive"
                     disabled={!reason}
                   >
-                    {isDeletingDocument ? 'Deleting document...' : 'Delete Document'}
+                    <Trans>Delete document</Trans>
                   </Button>
                 </DialogFooter>
               </DialogContent>

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
@@ -12,6 +14,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+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 { Input } from '@documenso/ui/primitives/input';
@@ -23,6 +26,8 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 // export type AdminDocumentResultsProps = {};
 
 export const AdminDocumentResults = () => {
+  const { _ } = useLingui();
+
   const searchParams = useSearchParams();
 
   const updateSearchParams = useUpdateSearchParams();
@@ -45,32 +50,22 @@ export const AdminDocumentResults = () => {
       },
     );
 
-  const onPaginationChange = (newPage: number, newPerPage: number) => {
+  const results = findDocumentsData ?? {
-    updateSearchParams({
+    data: [],
-      page: newPage,
+    perPage: 20,
-      perPage: newPerPage,
+    currentPage: 1,
-    });
+    totalPages: 1,
   };
 
-  return (
+  const columns = useMemo(() => {
-    <div>
+    return [
-      <Input
-        type="search"
-        placeholder="Search by document title"
-        value={term}
-        onChange={(e) => setTerm(e.target.value)}
-      />
-
-      <div className="relative mt-4">
-        <DataTable
-          columns={[
       {
-              header: 'Created',
+        header: _(msg`Created`),
         accessorKey: 'createdAt',
         cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
       },
       {
-              header: 'Title',
+        header: _(msg`Title`),
         accessorKey: 'title',
         cell: ({ row }) => {
           return (
@@ -84,12 +79,12 @@ export const AdminDocumentResults = () => {
         },
       },
       {
-              header: 'Status',
+        header: _(msg`Status`),
         accessorKey: 'status',
         cell: ({ row }) => <DocumentStatus status={row.original.status} />,
       },
       {
-              header: 'Owner',
+        header: _(msg`Owner`),
         accessorKey: 'owner',
         cell: ({ row }) => {
           const avatarFallbackText = row.original.User.name
@@ -129,11 +124,32 @@ export const AdminDocumentResults = () => {
         accessorKey: 'updatedAt',
         cell: ({ row }) => <LocaleDate date={row.original.updatedAt} />,
       },
-          ]}
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
-          data={findDocumentsData?.data ?? []}
+  }, []);
-          perPage={findDocumentsData?.perPage ?? 20}
+
-          currentPage={findDocumentsData?.currentPage ?? 1}
+  const onPaginationChange = (newPage: number, newPerPage: number) => {
-          totalPages={findDocumentsData?.totalPages ?? 1}
+    updateSearchParams({
+      page: newPage,
+      perPage: newPerPage,
+    });
+  };
+
+  return (
+    <div>
+      <Input
+        type="search"
+        placeholder={_(msg`Search by document title`)}
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+      />
+
+      <div className="relative mt-4">
+        <DataTable
+          columns={columns}
+          data={results.data}
+          perPage={results.perPage ?? 20}
+          currentPage={results.currentPage ?? 1}
+          totalPages={results.totalPages ?? 1}
           onPaginationChange={onPaginationChange}
         >
           {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}

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

@@ -1,9 +1,17 @@
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { AdminDocumentResults } from './document-results';
 
 export default function AdminDocumentsPage() {
+  setupI18nSSR();
+
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage documents</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage documents</Trans>
+      </h2>
 
       <div className="mt-8">
         <AdminDocumentResults />

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 
@@ -12,6 +13,8 @@ export type AdminSectionLayoutProps = {
 };
 
 export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   if (!isAdmin(user)) {

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

@@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { BarChart3, FileStack, Settings, Users, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -33,7 +34,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/stats">
           <BarChart3 className="mr-2 h-5 w-5" />
-          Stats
+          <Trans>Stats</Trans>
         </Link>
       </Button>
 
@@ -47,7 +48,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/users">
           <Users className="mr-2 h-5 w-5" />
-          Users
+          <Trans>Users</Trans>
         </Link>
       </Button>
 
@@ -61,7 +62,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/documents">
           <FileStack className="mr-2 h-5 w-5" />
-          Documents
+          <Trans>Documents</Trans>
         </Link>
       </Button>
 
@@ -75,7 +76,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/subscriptions">
           <Wallet2 className="mr-2 h-5 w-5" />
-          Subscriptions
+          <Trans>Subscriptions</Trans>
         </Link>
       </Button>
 
@@ -89,7 +90,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/site-settings">
           <Settings className="mr-2 h-5 w-5" />
-          Site Settings
+          <Trans>Site Settings</Trans>
         </Link>
       </Button>
     </div>

apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -37,8 +39,10 @@ export type BannerFormProps = {
 };
 
 export function BannerForm({ banner }: BannerFormProps) {
-  const router = useRouter();
   const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const router = useRouter();
 
   const form = useForm<TBannerFormSchema>({
     resolver: zodResolver(ZBannerFormSchema),
@@ -67,8 +71,8 @@ export function BannerForm({ banner }: BannerFormProps) {
       });
 
       toast({
-        title: 'Banner Updated',
+        title: _(msg`Banner Updated`),
-        description: 'Your banner has been updated successfully.',
+        description: _(msg`Your banner has been updated successfully.`),
         duration: 5000,
       });
 
@@ -76,16 +80,17 @@ export function BannerForm({ banner }: BannerFormProps) {
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
-          description:
+          description: _(
-            'We encountered an unknown error while attempting to update the banner. Please try again later.',
+            msg`We encountered an unknown error while attempting to update the banner. Please try again later.`,
+          ),
         });
       }
     }
@@ -93,10 +98,14 @@ export function BannerForm({ banner }: BannerFormProps) {
 
   return (
     <div>
-      <h2 className="font-semibold">Site Banner</h2>
+      <h2 className="font-semibold">
+        <Trans>Site Banner</Trans>
+      </h2>
       <p className="text-muted-foreground mt-2 text-sm">
-        The site banner is a message that is shown at the top of the site. It can be used to display
+        <Trans>
-        important information to your users.
+          The site banner is a message that is shown at the top of the site. It can be used to
+          display important information to your users.
+        </Trans>
       </p>
 
       <Form {...form}>
@@ -110,7 +119,9 @@ export function BannerForm({ banner }: BannerFormProps) {
               name="enabled"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Enabled</FormLabel>
+                  <FormLabel>
+                    <Trans>Enabled</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <div>
@@ -131,7 +142,9 @@ export function BannerForm({ banner }: BannerFormProps) {
                 name="data.bgColor"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Background Color</FormLabel>
+                    <FormLabel>
+                      <Trans>Background Color</Trans>
+                    </FormLabel>
 
                     <FormControl>
                       <div>
@@ -149,7 +162,9 @@ export function BannerForm({ banner }: BannerFormProps) {
                 name="data.textColor"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Text Color</FormLabel>
+                    <FormLabel>
+                      <Trans>Text Color</Trans>
+                    </FormLabel>
 
                     <FormControl>
                       <div>
@@ -170,14 +185,16 @@ export function BannerForm({ banner }: BannerFormProps) {
               name="data.content"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Content</FormLabel>
+                  <FormLabel>
+                    <Trans>Content</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Textarea className="h-32 resize-none" {...field} />
                   </FormControl>
 
                   <FormDescription>
-                    The content to show in the banner, HTML is allowed
+                    <Trans>The content to show in the banner, HTML is allowed</Trans>
                   </FormDescription>
 
                   <FormMessage />
@@ -191,7 +208,7 @@ export function BannerForm({ banner }: BannerFormProps) {
             loading={isUpdateSiteSettingLoading}
             className="mt-4 justify-end self-end"
           >
-            Update Banner
+            <Trans>Update Banner</Trans>
           </Button>
         </form>
       </Form>

apps/web/src/app/(dashboard)/admin/site-settings/page.tsx

@@ -1,3 +1,7 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
 import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
 
@@ -8,13 +12,20 @@ import { BannerForm } from './banner-form';
 // import { BannerForm } from './banner-form';
 
 export default async function AdminBannerPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const banner = await getSiteSettings().then((settings) =>
     settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
   );
 
   return (
     <div>
-      <SettingsHeader title="Site Settings" subtitle="Manage your site settings here" />
+      <SettingsHeader
+        title={_(msg`Site Settings`)}
+        subtitle={_(msg`Manage your site settings here`)}
+      />
 
       <div className="mt-8">
         <BannerForm banner={banner} />

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

@@ -1,3 +1,5 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   File,
   FileCheck,
@@ -12,6 +14,7 @@ import {
   Users,
 } from 'lucide-react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
@@ -27,6 +30,10 @@ import { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
 export default async function AdminStatsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const [
     usersCount,
     usersWithSubscriptionsCount,
@@ -49,64 +56,98 @@ export default async function AdminStatsPage() {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Instance Stats</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Instance Stats</Trans>
+      </h2>
 
       <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <CardMetric icon={Users} title="Total Users" value={usersCount} />
+        <CardMetric icon={Users} title={_(msg`Total Users`)} value={usersCount} />
-        <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
+        <CardMetric icon={File} title={_(msg`Total Documents`)} value={docStats.ALL} />
         <CardMetric
           icon={UserPlus}
-          title="Active Subscriptions"
+          title={_(msg`Active Subscriptions`)}
           value={usersWithSubscriptionsCount}
         />
 
-        <CardMetric icon={FileCog} title="App Version" value={`v${process.env.APP_VERSION}`} />
+        <CardMetric
+          icon={FileCog}
+          title={_(msg`App Version`)}
+          value={`v${process.env.APP_VERSION}`}
+        />
       </div>
 
       <div className="mt-16 gap-8">
         <div>
-          <h3 className="text-3xl font-semibold">Document metrics</h3>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Document metrics</Trans>
+          </h3>
 
           <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
-            <CardMetric icon={FileEdit} title="Drafted Documents" value={docStats.DRAFT} />
+            <CardMetric icon={FileEdit} title={_(msg`Drafted Documents`)} value={docStats.DRAFT} />
-            <CardMetric icon={FileClock} title="Pending Documents" value={docStats.PENDING} />
+            <CardMetric
-            <CardMetric icon={FileCheck} title="Completed Documents" value={docStats.COMPLETED} />
+              icon={FileClock}
+              title={_(msg`Pending Documents`)}
+              value={docStats.PENDING}
+            />
+            <CardMetric
+              icon={FileCheck}
+              title={_(msg`Completed Documents`)}
+              value={docStats.COMPLETED}
+            />
           </div>
         </div>
 
         <div>
-          <h3 className="text-3xl font-semibold">Recipients metrics</h3>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Recipients metrics</Trans>
+          </h3>
 
           <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
             <CardMetric
               icon={UserSquare2}
-              title="Total Recipients"
+              title={_(msg`Total Recipients`)}
               value={recipientStats.TOTAL_RECIPIENTS}
             />
-            <CardMetric icon={Mail} title="Documents Received" value={recipientStats.SENT} />
+            <CardMetric
-            <CardMetric icon={MailOpen} title="Documents Viewed" value={recipientStats.OPENED} />
+              icon={Mail}
-            <CardMetric icon={PenTool} title="Signatures Collected" value={recipientStats.SIGNED} />
+              title={_(msg`Documents Received`)}
+              value={recipientStats.SENT}
+            />
+            <CardMetric
+              icon={MailOpen}
+              title={_(msg`Documents Viewed`)}
+              value={recipientStats.OPENED}
+            />
+            <CardMetric
+              icon={PenTool}
+              title={_(msg`Signatures Collected`)}
+              value={recipientStats.SIGNED}
+            />
           </div>
         </div>
       </div>
 
       <div className="mt-16">
-        <h3 className="text-3xl font-semibold">Charts</h3>
+        <h3 className="text-3xl font-semibold">
+          <Trans>Charts</Trans>
+        </h3>
         <div className="mt-5 grid grid-cols-2 gap-8">
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
-            title="MAU (created document)"
+            title={_(msg`MAU (created document)`)}
-            tooltip="Monthly Active Users: Users that created at least one Document"
+            tooltip={_(msg`Monthly Active Users: Users that created at least one Document`)}
           />
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             completed
-            title="MAU (had document completed)"
+            title={_(msg`MAU (had document completed)`)}
-            tooltip="Monthly Active Users: Users that had at least one of their documents completed"
+            tooltip={_(
+              msg`Monthly Active Users: Users that had at least one of their documents completed`,
+            )}
           />
           <SignerConversionChart title="Signers that Signed Up" data={signerConversionMonthly} />
           <SignerConversionChart
-            title="Total Signers that Signed Up"
+            title={_(msg`Total Signers that Signed Up`)}
             data={signerConversionMonthly}
             cummulative
           />

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

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { findSubscriptions } from '@documenso/lib/server-only/admin/get-all-subscriptions';
 import {
   Table,
@@ -11,20 +14,32 @@ import {
 } from '@documenso/ui/primitives/table';
 
 export default async function Subscriptions() {
+  setupI18nSSR();
+
   const subscriptions = await findSubscriptions();
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage subscriptions</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage subscriptions</Trans>
+      </h2>
       <div className="mt-8">
         <Table>
           <TableHeader>
             <TableRow>
               <TableHead>ID</TableHead>
-              <TableHead>Status</TableHead>
+              <TableHead>
-              <TableHead>Created At</TableHead>
+                <Trans>Status</Trans>
-              <TableHead>Ends On</TableHead>
+              </TableHead>
-              <TableHead>User ID</TableHead>
+              <TableHead>
+                <Trans>Created At</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>Ends On</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>User ID</Trans>
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

apps/web/src/app/(dashboard)/admin/users/[id]/delete-user-dialog.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -27,8 +30,10 @@ export type DeleteUserDialogProps = {
 };
 
 export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) => {
-  const router = useRouter();
   const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const router = useRouter();
 
   const [email, setEmail] = useState('');
 
@@ -43,8 +48,8 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
       });
 
       toast({
-        title: 'Account deleted',
+        title: _(msg`Account deleted`),
-        description: 'The account has been deleted successfully.',
+        description: _(msg`The account has been deleted successfully.`),
         duration: 5000,
       });
 
@@ -52,17 +57,19 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
-            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+            _(
+              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+            ),
         });
       }
     }
@@ -77,31 +84,39 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
         <div>
           <AlertTitle>Delete Account</AlertTitle>
           <AlertDescription className="mr-2">
+            <Trans>
               Delete the users account and all its contents. This action is irreversible and will
               cancel their subscription, so proceed with caution.
+            </Trans>
           </AlertDescription>
         </div>
 
         <div className="flex-shrink-0">
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="destructive">Delete Account</Button>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
             </DialogTrigger>
 
             <DialogContent>
               <DialogHeader className="space-y-4">
-                <DialogTitle>Delete Account</DialogTitle>
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
 
                 <Alert variant="destructive">
                   <AlertDescription className="selection:bg-red-100">
-                    This action is not reversible. Please be certain.
+                    <Trans>This action is not reversible. Please be certain.</Trans>
                   </AlertDescription>
                 </Alert>
               </DialogHeader>
 
               <div>
                 <DialogDescription>
+                  <Trans>
                     To confirm, please enter the accounts email address <br />({user.email}).
+                  </Trans>
                 </DialogDescription>
 
                 <Input
@@ -119,7 +134,7 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
                   variant="destructive"
                   disabled={email !== user.email}
                 >
-                  {isDeletingUser ? 'Deleting account...' : 'Delete Account'}
+                  <Trans>Delete account</Trans>
                 </Button>
               </DialogFooter>
             </DialogContent>

apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Trans } from '@lingui/macro';
 import { Check, ChevronsUpDown } from 'lucide-react';
 
 import { Role } from '@documenso/prisma/client';
@@ -59,7 +60,9 @@ const MultiSelectRoleCombobox = ({ listValues, onChange }: ComboboxProps) => {
       <PopoverContent className="w-[200px] p-0">
         <Command>
           <CommandInput placeholder={selectedValues.join(', ')} />
-          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandEmpty>
+            <Trans>No value found.</Trans>
+          </CommandEmpty>
           <CommandGroup>
             {allRoles.map((value: string, i: number) => (
               <CommandItem key={i} onSelect={() => handleSelect(value)}>

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

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -28,7 +30,9 @@ const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
 
 export default function UserPage({ params }: { params: { id: number } }) {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const { data: user } = trpc.profile.getUser.useQuery(
@@ -65,14 +69,14 @@ export default function UserPage({ params }: { params: { id: number } }) {
       router.refresh();
 
       toast({
-        title: 'Profile updated',
+        title: _(msg`Profile updated`),
-        description: 'Your profile has been updated.',
+        description: _(msg`Your profile has been updated.`),
         duration: 5000,
       });
     } catch (e) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating your profile.',
+        description: _(msg`An error occurred while updating your profile.`),
         variant: 'destructive',
       });
     }
@@ -80,7 +84,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage {user?.name}'s profile</Trans>
+      </h2>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <fieldset className="mt-6 flex w-full flex-col gap-y-4">
@@ -89,7 +95,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-muted-foreground">Name</FormLabel>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Name</Trans>
+                  </FormLabel>
                   <FormControl>
                     <Input type="text" {...field} value={field.value ?? ''} />
                   </FormControl>
@@ -102,7 +110,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-muted-foreground">Email</FormLabel>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Email</Trans>
+                  </FormLabel>
                   <FormControl>
                     <Input type="text" {...field} />
                   </FormControl>
@@ -117,7 +127,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               render={({ field: { onChange } }) => (
                 <FormItem>
                   <fieldset className="flex flex-col gap-2">
-                    <FormLabel className="text-muted-foreground">Roles</FormLabel>
+                    <FormLabel className="text-muted-foreground">
+                      <Trans>Roles</Trans>
+                    </FormLabel>
                     <FormControl>
                       <MultiSelectRoleCombobox
                         listValues={roles}
@@ -132,7 +144,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
             <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update user
+                <Trans>Update user</Trans>
               </Button>
             </div>
           </fieldset>

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

@@ -1,15 +1,18 @@
 'use client';
 
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import Link from 'next/link';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Edit, Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { Document, Role, Subscription } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
+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 { Input } from '@documenso/ui/primitives/input';
@@ -45,11 +48,70 @@ export const UsersDataTable = ({
   page,
   individualPriceIds,
 }: UsersDataTableProps) => {
+  const { _ } = useLingui();
+
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
   const [searchString, setSearchString] = useState('');
   const debouncedSearchString = useDebouncedValue(searchString, 1000);
 
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+        cell: ({ row }) => <div>{row.original.id}</div>,
+      },
+      {
+        header: _(msg`Name`),
+        accessorKey: 'name',
+        cell: ({ row }) => <div>{row.original.name}</div>,
+      },
+      {
+        header: _(msg`Email`),
+        accessorKey: 'email',
+        cell: ({ row }) => <div>{row.original.email}</div>,
+      },
+      {
+        header: _(msg`Roles`),
+        accessorKey: 'roles',
+        cell: ({ row }) => row.original.roles.join(', '),
+      },
+      {
+        header: _(msg`Subscription`),
+        accessorKey: 'subscription',
+        cell: ({ row }) => {
+          const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
+            individualPriceIds.includes(sub.priceId),
+          );
+
+          return foundIndividualSubscription?.status ?? 'NONE';
+        },
+      },
+      {
+        header: _(msg`Documents`),
+        accessorKey: 'documents',
+        cell: ({ row }) => {
+          return <div>{row.original.Document.length}</div>;
+        },
+      },
+      {
+        header: '',
+        accessorKey: 'edit',
+        cell: ({ row }) => {
+          return (
+            <Button className="w-24" asChild>
+              <Link href={`/admin/users/${row.original.id}`}>
+                <Edit className="-ml-1 mr-2 h-4 w-4" />
+                Edit
+              </Link>
+            </Button>
+          );
+        },
+      },
+    ] satisfies DataTableColumnDef<(typeof users)[number]>[];
+  }, [individualPriceIds]);
+
   useEffect(() => {
     startTransition(() => {
       updateSearchParams({
@@ -79,65 +141,12 @@ export const UsersDataTable = ({
       <Input
         className="my-6 flex flex-row gap-4"
         type="text"
-        placeholder="Search by name or email"
+        placeholder={_(msg`Search by name or email`)}
         value={searchString}
         onChange={handleChange}
       />
       <DataTable
-        columns={[
+        columns={columns}
-          {
-            header: 'ID',
-            accessorKey: 'id',
-            cell: ({ row }) => <div>{row.original.id}</div>,
-          },
-          {
-            header: 'Name',
-            accessorKey: 'name',
-            cell: ({ row }) => <div>{row.original.name}</div>,
-          },
-          {
-            header: 'Email',
-            accessorKey: 'email',
-            cell: ({ row }) => <div>{row.original.email}</div>,
-          },
-          {
-            header: 'Roles',
-            accessorKey: 'roles',
-            cell: ({ row }) => row.original.roles.join(', '),
-          },
-          {
-            header: 'Subscription',
-            accessorKey: 'subscription',
-            cell: ({ row }) => {
-              const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
-                individualPriceIds.includes(sub.priceId),
-              );
-
-              return foundIndividualSubscription?.status ?? 'NONE';
-            },
-          },
-          {
-            header: 'Documents',
-            accessorKey: 'documents',
-            cell: ({ row }) => {
-              return <div>{row.original.Document.length}</div>;
-            },
-          },
-          {
-            header: '',
-            accessorKey: 'edit',
-            cell: ({ row }) => {
-              return (
-                <Button className="w-24" asChild>
-                  <Link href={`/admin/users/${row.original.id}`}>
-                    <Edit className="-ml-1 mr-2 h-4 w-4" />
-                    Edit
-                  </Link>
-                </Button>
-              );
-            },
-          },
-        ]}
         data={users}
         perPage={perPage}
         currentPage={page}

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

@@ -1,4 +1,7 @@
+import { Trans } from '@lingui/macro';
+
 import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 
 import { UsersDataTable } from './data-table-users';
@@ -13,6 +16,8 @@ type AdminManageUsersProps = {
 };
 
 export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
+  setupI18nSSR();
+
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
@@ -26,7 +31,10 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage users</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage users</Trans>
+      </h2>
+
       <UsersDataTable
         users={users}
         individualPriceIds={individualPriceIds}

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

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
@@ -26,6 +28,7 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   if (!session) {
     return null;
@@ -57,8 +60,8 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
       await downloadPDF({ documentData, fileName: documentWithData.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -77,19 +80,19 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
             .with(RecipientRole.SIGNER, () => (
               <>
                 <Pencil className="-ml-1 mr-2 h-4 w-4" />
-                Sign
+                <Trans>Sign</Trans>
               </>
             ))
             .with(RecipientRole.APPROVER, () => (
               <>
                 <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
-                Approve
+                <Trans>Approve</Trans>
               </>
             ))
             .otherwise(() => (
               <>
                 <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-                View
+                <Trans>View</Trans>
               </>
             ))}
         </Link>
@@ -97,13 +100,15 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
     ))
     .with({ isComplete: false }, () => (
       <Button className="w-full" asChild>
-        <Link href={`${documentsPath}/${document.id}/edit`}>Edit</Link>
+        <Link href={`${documentsPath}/${document.id}/edit`}>
+          <Trans>Edit</Trans>
+        </Link>
       </Button>
     ))
     .with({ isComplete: true }, () => (
       <Button className="w-full" onClick={onDownloadClick}>
         <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        Download
+        <Trans>Download</Trans>
       </Button>
     ))
     .otherwise(() => null);

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

@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   Copy,
   Download,
@@ -47,6 +49,7 @@ export type DocumentPageViewDropdownProps = {
 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -82,8 +85,8 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
       await downloadPDF({ documentData, fileName: document.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -98,13 +101,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="end" forceMount>
-        <DropdownMenuLabel>Action</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
 
         {(isOwner || isCurrentTeamDocument) && !isComplete && (
           <DropdownMenuItem asChild>
             <Link href={`${documentsPath}/${document.id}/edit`}>
               <Edit className="mr-2 h-4 w-4" />
-              Edit
+              <Trans>Edit</Trans>
             </Link>
           </DropdownMenuItem>
         )}
@@ -112,20 +117,20 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
         {isComplete && (
           <DropdownMenuItem onClick={onDownloadClick}>
             <Download className="mr-2 h-4 w-4" />
-            Download
+            <Trans>Download</Trans>
           </DropdownMenuItem>
         )}
 
         <DropdownMenuItem asChild>
           <Link href={`${documentsPath}/${document.id}/logs`}>
             <ScrollTextIcon className="mr-2 h-4 w-4" />
-            Audit Log
+            <Trans>Audit Log</Trans>
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem
@@ -133,10 +138,12 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          <Trans>Delete</Trans>
         </DropdownMenuItem>
 
-        <DropdownMenuLabel>Share</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Share</Trans>
+        </DropdownMenuLabel>
 
         <ResendDocumentActionItem
           document={document}
@@ -151,7 +158,7 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share Signing Card
+                <Trans>Share Signing Card</Trans>
               </div>
             </DropdownMenuItem>
           )}

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

@@ -2,6 +2,8 @@
 
 import { useMemo } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
@@ -23,6 +25,7 @@ export const DocumentPageViewInformation = ({
   const isMounted = useIsMounted();
 
   const { locale } = useLocale();
+  const { _ } = useLingui();
 
   const documentInformation = useMemo(() => {
     let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
@@ -38,31 +41,34 @@ export const DocumentPageViewInformation = ({
 
     return [
       {
-        description: 'Uploaded by',
+        description: msg`Uploaded by`,
-        value: userId === document.userId ? 'You' : document.User.name ?? document.User.email,
+        value: userId === document.userId ? _(msg`You`) : document.User.name ?? document.User.email,
       },
       {
-        description: 'Created',
+        description: msg`Created`,
         value: createdValue,
       },
       {
-        description: 'Last modified',
+        description: msg`Last modified`,
         value: lastModifiedValue,
       },
     ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, document, locale, userId]);
 
   return (
     <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
-      <h1 className="px-4 py-3 font-medium">Information</h1>
+      <h1 className="px-4 py-3 font-medium">
+        <Trans>Information</Trans>
+      </h1>
 
       <ul className="divide-y border-t">
-        {documentInformation.map((item) => (
+        {documentInformation.map((item, i) => (
           <li
-            key={item.description}
+            key={i}
             className="flex items-center justify-between px-4 py-2.5 text-sm last:border-b"
           >
-            <span className="text-muted-foreground">{item.description}</span>
+            <span className="text-muted-foreground">{_(item.description)}</span>
             <span>{item.value}</span>
           </li>
         ))}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx

@@ -2,6 +2,8 @@
 
 import { useMemo } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCheckIcon, CheckIcon, Loader, MailOpen } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { match } from 'ts-pattern';
@@ -21,6 +23,8 @@ export const DocumentPageViewRecentActivity = ({
   documentId,
   userId,
 }: DocumentPageViewRecentActivityProps) => {
+  const { _ } = useLingui();
+
   const {
     data,
     isLoading,
@@ -49,7 +53,9 @@ export const DocumentPageViewRecentActivity = ({
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
       <div className="flex flex-row items-center justify-between border-b px-4 py-3">
-        <h1 className="text-foreground font-medium">Recent activity</h1>
+        <h1 className="text-foreground font-medium">
+          <Trans>Recent activity</Trans>
+        </h1>
 
         {/* Can add dropdown menu here for additional options. */}
       </div>
@@ -62,12 +68,14 @@ export const DocumentPageViewRecentActivity = ({
 
       {isLoadingError && (
         <div className="flex h-full flex-col items-center justify-center py-16">
-          <p className="text-foreground/80 text-sm">Unable to load document history</p>
+          <p className="text-foreground/80 text-sm">
+            <Trans>Unable to load document history</Trans>
+          </p>
           <button
             onClick={async () => refetch()}
             className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
           >
-            Click here to retry
+            <Trans>Click here to retry</Trans>
           </button>
         </div>
       )}
@@ -89,14 +97,16 @@ export const DocumentPageViewRecentActivity = ({
                   onClick={async () => fetchNextPage()}
                   className="text-foreground/70 hover:text-muted-foreground text-xs"
                 >
-                  {isFetchingNextPage ? 'Loading...' : 'Load older activity'}
+                  {isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
                 </button>
               </li>
             )}
 
             {documentAuditLogs.length === 0 && (
               <div className="flex items-center justify-center py-4">
-                <p className="text-muted-foreground/70 text-sm">No recent activity</p>
+                <p className="text-muted-foreground/70 text-sm">
+                  <Trans>No recent activity</Trans>
+                </p>
               </div>
             )}
 
@@ -133,6 +143,7 @@ export const DocumentPageViewRecentActivity = ({
                     ))}
                 </div>
 
+                {/* Todo: Translations. */}
                 <p
                   className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
                   title={`${formatDocumentAuditLogAction(auditLog, userId).prefix} ${

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

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckIcon, Clock, MailIcon, MailOpenIcon, PenIcon, PlusIcon } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -21,17 +23,21 @@ export const DocumentPageViewRecipients = ({
   document,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
+  const { _ } = useLingui();
+
   const recipients = document.Recipient;
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">Recipients</h1>
+        <h1 className="text-foreground font-medium">
+          <Trans>Recipients</Trans>
+        </h1>
 
         {document.status !== DocumentStatus.COMPLETED && (
           <Link
             href={`${documentRootPath}/${document.id}/edit?step=signers`}
-            title="Modify recipients"
+            title={_(msg`Modify recipients`)}
             className="flex flex-row items-center justify-between"
           >
             {recipients.length === 0 ? (
@@ -45,7 +51,9 @@ export const DocumentPageViewRecipients = ({
 
       <ul className="text-muted-foreground divide-y border-t">
         {recipients.length === 0 && (
-          <li className="flex flex-col items-center justify-center py-6 text-sm">No recipients</li>
+          <li className="flex flex-col items-center justify-center py-6 text-sm">
+            <Trans>No recipients</Trans>
+          </li>
         )}
 
         {recipients.map((recipient) => (
@@ -55,7 +63,7 @@ export const DocumentPageViewRecipients = ({
               primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
               secondaryText={
                 <p className="text-muted-foreground/70 text-xs">
-                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                  {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }
             />
@@ -67,19 +75,19 @@ export const DocumentPageViewRecipients = ({
                     .with(RecipientRole.APPROVER, () => (
                       <>
                         <CheckIcon className="mr-1 h-3 w-3" />
-                        Approved
+                        <Trans>Approved</Trans>
                       </>
                     ))
                     .with(RecipientRole.CC, () =>
                       document.status === DocumentStatus.COMPLETED ? (
                         <>
                           <MailIcon className="mr-1 h-3 w-3" />
-                          Sent
+                          <Trans>Sent</Trans>
                         </>
                       ) : (
                         <>
                           <CheckIcon className="mr-1 h-3 w-3" />
-                          Ready
+                          <Trans>Ready</Trans>
                         </>
                       ),
                     )
@@ -87,13 +95,13 @@ export const DocumentPageViewRecipients = ({
                     .with(RecipientRole.SIGNER, () => (
                       <>
                         <SignatureIcon className="mr-1 h-3 w-3" />
-                        Signed
+                        <Trans>Signed</Trans>
                       </>
                     ))
                     .with(RecipientRole.VIEWER, () => (
                       <>
                         <MailOpenIcon className="mr-1 h-3 w-3" />
-                        Viewed
+                        <Trans>Viewed</Trans>
                       </>
                     ))
                     .exhaustive()}
@@ -104,7 +112,7 @@ export const DocumentPageViewRecipients = ({
               recipient.signingStatus === SigningStatus.NOT_SIGNED && (
                 <Badge variant="secondary">
                   <Clock className="mr-1 h-3 w-3" />
-                  Pending
+                  <Trans>Pending</Trans>
                 </Badge>
               )}
           </li>

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

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Plural, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -42,6 +44,7 @@ export type DocumentPageViewProps = {
 
 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
   const { id } = params;
+  const { _ } = useLingui();
 
   const documentId = Number(id);
 
@@ -107,7 +110,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <div className="flex flex-row justify-between truncate">
@@ -132,12 +135,18 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
                   documentStatus={document.status}
                   position="bottom"
                 >
-                  <span>{recipients.length} Recipient(s)</span>
+                  <span>
+                    <Trans>{recipients.length} Recipient(s)</Trans>
+                  </span>
                 </StackAvatarsWithTooltip>
               </div>
             )}
 
-            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
+            {document.deletedAt && (
+              <Badge variant="destructive">
+                <Trans>Document deleted</Trans>
+              </Badge>
+            )}
           </div>
         </div>
 
@@ -146,7 +155,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
             <DocumentHistorySheet documentId={document.id} userId={user.id}>
               <Button variant="outline">
                 <Clock9 className="mr-1.5 h-4 w-4" />
-                Document history
+                <Trans>Document history</Trans>
               </Button>
             </DocumentHistorySheet>
           </div>
@@ -172,7 +181,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
             <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
               <div className="flex flex-row items-center justify-between px-4">
                 <h3 className="text-foreground text-2xl font-semibold">
-                  Document {FRIENDLY_STATUS_MAP[document.status].label.toLowerCase()}
+                  {_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
                 </h3>
 
                 <DocumentPageViewDropdown document={documentWithRecipients} team={team} />
@@ -180,22 +189,24 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
               <p className="text-muted-foreground mt-2 px-4 text-sm ">
                 {match(document.status)
-                  .with(
+                  .with(DocumentStatus.COMPLETED, () => (
-                    DocumentStatus.COMPLETED,
+                    <Trans>This document has been signed by all recipients</Trans>
-                    () => 'This document has been signed by all recipients',
+                  ))
-                  )
+                  .with(DocumentStatus.DRAFT, () => (
-                  .with(
+                    <Trans>This document is currently a draft and has not been sent</Trans>
-                    DocumentStatus.DRAFT,
+                  ))
-                    () => 'This document is currently a draft and has not been sent',
-                  )
                   .with(DocumentStatus.PENDING, () => {
                     const pendingRecipients = recipients.filter(
                       (recipient) => recipient.signingStatus === 'NOT_SIGNED',
                     );
 
-                    return `Waiting on ${pendingRecipients.length} recipient${
+                    return (
-                      pendingRecipients.length > 1 ? 's' : ''
+                      <Plural
-                    }`;
+                        value={pendingRecipients.length}
+                        one="Waiting on 1 recipient"
+                        other="Waiting on # recipients"
+                      />
+                    );
                   })
                   .exhaustive()}
               </p>

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

@@ -4,6 +4,9 @@ import { useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -45,6 +48,7 @@ export const EditDocumentForm = ({
   isDocumentEnterprise,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -125,23 +129,23 @@ export const EditDocumentForm = ({
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     settings: {
-      title: 'General',
+      title: msg`General`,
-      description: 'Configure general settings for the document.',
+      description: msg`Configure general settings for the document.`,
       stepIndex: 1,
     },
     signers: {
-      title: 'Add Signers',
+      title: msg`Add Signers`,
-      description: 'Add the people who will sign the document.',
+      description: msg`Add the people who will sign the document.`,
       stepIndex: 2,
     },
     fields: {
-      title: 'Add Fields',
+      title: msg`Add Fields`,
-      description: 'Add all relevant fields for each recipient.',
+      description: msg`Add all relevant fields for each recipient.`,
       stepIndex: 3,
     },
     subject: {
-      title: 'Add Subject',
+      title: msg`Add Subject`,
-      description: 'Add the subject and message you wish to send to signers.',
+      description: msg`Add the subject and message you wish to send to signers.`,
       stepIndex: 4,
     },
   };
@@ -191,8 +195,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating the document settings.',
+        description: _(msg`An error occurred while updating the document settings.`),
         variant: 'destructive',
       });
     }
@@ -218,8 +222,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }
@@ -248,8 +252,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding the fields.',
+        description: _(msg`An error occurred while adding the fields.`),
         variant: 'destructive',
       });
     }
@@ -269,8 +273,8 @@ export const EditDocumentForm = ({
       });
 
       toast({
-        title: 'Document sent',
+        title: _(msg`Document sent`),
-        description: 'Your document has been sent successfully.',
+        description: _(msg`Your document has been sent successfully.`),
         duration: 5000,
       });
 
@@ -279,8 +283,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while sending the document.',
+        description: _(msg`An error occurred while sending the document.`),
         variant: 'destructive',
       });
     }

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

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Plural, Trans } from '@lingui/macro';
 import { ChevronLeft, Users2 } from 'lucide-react';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@@ -78,7 +79,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
@@ -97,7 +98,9 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
               documentStatus={document.status}
               position="bottom"
             >
-              <span>{recipients.length} Recipient(s)</span>
+              <span>
+                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+              </span>
             </StackAvatarsWithTooltip>
           </div>
         )}

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentEditPageView } from './document-edit-page-view';
 
 export type DocumentPageProps = {
@@ -7,5 +9,7 @@ export type DocumentPageProps = {
 };
 
 export default function DocumentEditPage({ params }: DocumentPageProps) {
+  setupI18nSSR();
+
   return <DocumentEditPageView params={params} />;
 }

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

@@ -1,19 +1,23 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft, Loader } from 'lucide-react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 
 export default function Loading() {
+  setupI18nSSR();
+
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
       <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-        Loading Document...
+        <Trans>Loading Document...</Trans>
       </h1>
 
       <div className="flex h-10 items-center">
@@ -25,7 +29,9 @@ export default function Loading() {
           <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
-            <p className="text-muted-foreground mt-4">Loading document...</p>
+            <p className="text-muted-foreground mt-4">
+              <Trans>Loading document...</Trans>
+            </p>
           </div>
         </div>
 

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

@@ -1,7 +1,11 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 import type { DateTimeFormatOptions } from 'luxon';
 import { UAParser } from 'ua-parser-js';
@@ -10,6 +14,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
 import { trpc } from '@documenso/trpc/react';
+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 { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -27,7 +32,7 @@ const dateFormat: DateTimeFormatOptions = {
 };
 
 export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps) => {
-  const parser = new UAParser();
+  const { _ } = useLingui();
 
   const searchParams = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
@@ -66,16 +71,17 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
     totalPages: 1,
   };
 
-  return (
+  const columns = useMemo(() => {
-    <DataTable
+    const parser = new UAParser();
-      columns={[
+
+    return [
       {
-          header: 'Time',
+        header: _(msg`Time`),
         accessorKey: 'createdAt',
         cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
       },
       {
-          header: 'User',
+        header: _(msg`User`),
         accessorKey: 'name',
         cell: ({ row }) =>
           row.original.name || row.original.email ? (
@@ -97,12 +103,10 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
           ),
       },
       {
-          header: 'Action',
+        header: _(msg`Action`),
         accessorKey: 'type',
         cell: ({ row }) => (
-            <span>
+          <span>{uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}</span>
-              {uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}
-            </span>
         ),
       },
       {
@@ -123,7 +127,12 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
           return result.browser.name ?? 'N/A';
         },
       },
-      ]}
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
       data={results.data}
       perPage={results.perPage}
       currentPage={results.currentPage}

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

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import type { MessageDescriptor } from '@lingui/core';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronLeft } from 'lucide-react';
 import { DateTime } from 'luxon';
 
@@ -29,6 +32,8 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
+  const { _ } = useLingui();
+
   const locale = getLocale();
 
   const { id } = params;
@@ -60,39 +65,39 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     redirect(documentRootPath);
   }
 
-  const documentInformation: { description: string; value: string }[] = [
+  const documentInformation: { description: MessageDescriptor; value: string }[] = [
     {
-      description: 'Document title',
+      description: msg`Document title`,
       value: document.title,
     },
     {
-      description: 'Document ID',
+      description: msg`Document ID`,
       value: document.id.toString(),
     },
     {
-      description: 'Document status',
+      description: msg`Document status`,
-      value: FRIENDLY_STATUS_MAP[document.status].label,
+      value: _(FRIENDLY_STATUS_MAP[document.status].label),
     },
     {
-      description: 'Created by',
+      description: msg`Created by`,
       value: document.User.name
         ? `${document.User.name} (${document.User.email})`
         : document.User.email,
     },
     {
-      description: 'Date created',
+      description: msg`Date created`,
       value: DateTime.fromJSDate(document.createdAt)
         .setLocale(locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
-      description: 'Last updated',
+      description: msg`Last updated`,
       value: DateTime.fromJSDate(document.updatedAt)
         .setLocale(locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
-      description: 'Time zone',
+      description: msg`Time zone`,
       value: document.documentMeta?.timezone ?? 'N/A',
     },
   ];
@@ -114,7 +119,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         className="flex items-center text-[#7AC455] hover:opacity-80"
       >
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Document
+        <Trans>Document</Trans>
       </Link>
 
       <div className="flex flex-col justify-between truncate sm:flex-row">
@@ -147,7 +152,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
           {documentInformation.map((info, i) => (
             <div className="text-foreground text-sm" key={i}>
-              <h3 className="font-semibold">{info.description}</h3>
+              <h3 className="font-semibold">{_(info.description)}</h3>
               <p className="text-muted-foreground">{info.value}</p>
             </div>
           ))}

apps/web/src/app/(dashboard)/documents/[id]/logs/download-audit-log-button.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DownloadIcon } from 'lucide-react';
 
 import { trpc } from '@documenso/trpc/react';
@@ -19,6 +21,7 @@ export const DownloadAuditLogButton = ({
   documentId,
 }: DownloadAuditLogButtonProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: downloadAuditLogs, isLoading } =
     trpc.document.downloadAuditLogs.useMutation();
@@ -59,8 +62,10 @@ export const DownloadAuditLogButton = ({
       console.error(error);
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Sorry, we were unable to download the audit logs. Please try again later.',
+        description: _(
+          msg`Sorry, we were unable to download the audit logs. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -73,7 +78,7 @@ export const DownloadAuditLogButton = ({
       onClick={() => void onDownloadAuditLogsClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Audit Logs
+      <Trans>Download Audit Logs</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DownloadIcon } from 'lucide-react';
 
 import { DocumentStatus } from '@documenso/prisma/client';
@@ -20,6 +22,7 @@ export const DownloadCertificateButton = ({
   documentStatus,
 }: DownloadCertificateButtonProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: downloadCertificate, isLoading } =
     trpc.document.downloadCertificate.useMutation();
@@ -60,8 +63,10 @@ export const DownloadCertificateButton = ({
       console.error(error);
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Sorry, we were unable to download the certificate. Please try again later.',
+        description: _(
+          msg`Sorry, we were unable to download the certificate. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -76,7 +81,7 @@ export const DownloadCertificateButton = ({
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Certificate
+      <Trans>Download Certificate</Trans>
     </Button>
   );
 };

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentLogsPageView } from './document-logs-page-view';
 
 export type DocumentsLogsPageProps = {
@@ -7,5 +9,7 @@ export type DocumentsLogsPageProps = {
 };
 
 export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
+  setupI18nSSR();
+
   return <DocumentLogsPageView params={params} />;
 }

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentPageView } from './document-page-view';
 
 export type DocumentPageProps = {
@@ -7,5 +9,7 @@ export type DocumentPageProps = {
 };
 
 export default function DocumentPage({ params }: DocumentPageProps) {
+  setupI18nSSR();
+
   return <DocumentPageView params={params} />;
 }

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

@@ -1,17 +1,22 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 export default function DocumentSentPage() {
+  setupI18nSSR();
+
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
       <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-        Loading Document...
+        <Trans>Loading Document...</Trans>
       </h1>
     </div>
   );

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { History } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -62,6 +64,7 @@ export const ResendDocumentActionItem = ({
 }: ResendDocumentActionItemProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isOpen, setIsOpen] = useState(false);
   const isOwner = document.userId === session?.user?.id;
@@ -91,16 +94,16 @@ export const ResendDocumentActionItem = ({
       await resendDocument({ documentId: document.id, recipients, teamId: team?.id });
 
       toast({
-        title: 'Document re-sent',
+        title: _(msg`Document re-sent`),
-        description: 'Your document has been re-sent successfully.',
+        description: _(msg`Your document has been re-sent successfully.`),
         duration: 5000,
       });
 
       setIsOpen(false);
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be re-sent at this time. Please try again.',
+        description: _(msg`This document could not be re-sent at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -112,14 +115,16 @@ export const ResendDocumentActionItem = ({
       <DialogTrigger asChild>
         <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
           <History className="mr-2 h-4 w-4" />
-          Resend
+          <Trans>Resend</Trans>
         </DropdownMenuItem>
       </DialogTrigger>
 
       <DialogContent className="sm:max-w-sm" hideClose>
         <DialogHeader>
           <DialogTitle asChild>
-            <h1 className="text-center text-xl">Who do you want to remind?</h1>
+            <h1 className="text-center text-xl">
+              <Trans>Who do you want to remind?</Trans>
+            </h1>
           </DialogTitle>
         </DialogHeader>
 
@@ -178,12 +183,12 @@ export const ResendDocumentActionItem = ({
                 variant="secondary"
                 disabled={isSubmitting}
               >
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
             </DialogClose>
 
             <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
-              Send reminder
+              <Trans>Send reminder</Trans>
             </Button>
           </div>
         </DialogFooter>

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

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
@@ -27,6 +29,7 @@ export type DataTableActionButtonProps = {
 export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   if (!session) {
     return null;
@@ -69,8 +72,8 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
       await downloadPDF({ documentData, fileName: row.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -96,7 +99,7 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
         <Button className="w-32" asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="-ml-1 mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </Button>
       ),
@@ -108,19 +111,19 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
             .with(RecipientRole.SIGNER, () => (
               <>
                 <Pencil className="-ml-1 mr-2 h-4 w-4" />
-                Sign
+                <Trans>Sign</Trans>
               </>
             ))
             .with(RecipientRole.APPROVER, () => (
               <>
                 <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
-                Approve
+                <Trans>Approve</Trans>
               </>
             ))
             .otherwise(() => (
               <>
                 <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-                View
+                <Trans>View</Trans>
               </>
             ))}
         </Link>
@@ -129,13 +132,13 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
     .with({ isPending: true, isSigned: true }, () => (
       <Button className="w-32" disabled={true}>
         <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-        View
+        <Trans>View</Trans>
       </Button>
     ))
     .with({ isComplete: true }, () => (
       <Button className="w-32" onClick={onDownloadClick}>
         <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        Download
+        <Trans>Download</Trans>
       </Button>
     ))
     .otherwise(() => <div></div>);

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

@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   CheckCircle,
   Copy,
@@ -52,6 +54,7 @@ export type DataTableActionDropdownProps = {
 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -98,8 +101,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       await downloadPDF({ documentData, fileName: row.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -114,7 +117,9 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
-        <DropdownMenuLabel>Action</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
 
         {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
@@ -122,21 +127,21 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
               {recipient?.role === RecipientRole.VIEWER && (
                 <>
                   <EyeIcon className="mr-2 h-4 w-4" />
-                  View
+                  <Trans>View</Trans>
                 </>
               )}
 
               {recipient?.role === RecipientRole.SIGNER && (
                 <>
                   <Pencil className="mr-2 h-4 w-4" />
-                  Sign
+                  <Trans>Sign</Trans>
                 </>
               )}
 
               {recipient?.role === RecipientRole.APPROVER && (
                 <>
                   <CheckCircle className="mr-2 h-4 w-4" />
-                  Approve
+                  <Trans>Approve</Trans>
                 </>
               )}
             </Link>
@@ -146,25 +151,25 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
           <Download className="mr-2 h-4 w-4" />
-          Download
+          <Trans>Download</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         {/* We don't want to allow teams moving documents across at the moment. */}
         {!team && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
-            Move to Team
+            <Trans>Move to Team</Trans>
           </DropdownMenuItem>
         )}
 
@@ -179,10 +184,12 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           disabled={Boolean(!canManageDocument && team?.teamEmail)}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          {canManageDocument ? 'Delete' : 'Hide'}
+          {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
         </DropdownMenuItem>
 
-        <DropdownMenuLabel>Share</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Share</Trans>
+        </DropdownMenuLabel>
 
         <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} team={team} />
 
@@ -193,7 +200,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share Signing Card
+                <Trans>Share Signing Card</Trans>
               </div>
             </DropdownMenuItem>
           )}

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

@@ -2,6 +2,9 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { trpc } from '@documenso/trpc/react';
@@ -12,6 +15,8 @@ type DataTableSenderFilterProps = {
 };
 
 export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) => {
+  const { _ } = useLingui();
+
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -49,11 +54,13 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
     <MultiSelectCombobox
       emptySelectionPlaceholder={
         <p className="text-muted-foreground font-normal">
+          <Trans>
             <span className="text-muted-foreground/70">Sender:</span> All
+          </Trans>
         </p>
       }
       enableClearAllButton={true}
-      inputPlaceholder="Search"
+      inputPlaceholder={msg`Search`}
       loading={!isMounted || isInitialLoading}
       options={comboBoxOptions}
       selectedValues={senderIds}

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

@@ -1,7 +1,9 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useMemo, useTransition } from 'react';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
@@ -10,6 +12,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import type { FindResultSet } from '@documenso/lib/types/find-result-set';
 import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+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';
 
@@ -39,10 +42,62 @@ export const DocumentsDataTable = ({
   team,
 }: DocumentsDataTableProps) => {
   const { data: session } = useSession();
+  const { _ } = useLingui();
+
   const [isPending, startTransition] = useTransition();
 
   const updateSearchParams = useUpdateSearchParams();
 
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Created`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => (
+          <LocaleDate
+            date={row.original.createdAt}
+            format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
+          />
+        ),
+      },
+      {
+        header: _(msg`Title`),
+        cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
+      },
+      {
+        id: 'sender',
+        header: _(msg`Sender`),
+        cell: ({ row }) => row.original.User.name ?? row.original.User.email,
+      },
+      {
+        header: _(msg`Recipient`),
+        accessorKey: 'recipient',
+        cell: ({ row }) => (
+          <StackAvatarsWithTooltip
+            recipients={row.original.Recipient}
+            documentStatus={row.original.status}
+          />
+        ),
+      },
+      {
+        header: _(msg`Status`),
+        accessorKey: 'status',
+        cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+        size: 140,
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) =>
+          (!row.original.deletedAt || row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+            <div className="flex items-center gap-x-4">
+              <DataTableActionButton team={team} row={row.original} />
+              <DataTableActionDropdown team={team} row={row.original} />
+            </div>
+          ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, [team]);
+
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
       updateSearchParams({
@@ -59,54 +114,7 @@ export const DocumentsDataTable = ({
   return (
     <div className="relative">
       <DataTable
-        columns={[
+        columns={columns}
-          {
-            header: 'Created',
-            accessorKey: 'createdAt',
-            cell: ({ row }) => (
-              <LocaleDate
-                date={row.original.createdAt}
-                format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
-              />
-            ),
-          },
-          {
-            header: 'Title',
-            cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
-          },
-          {
-            id: 'sender',
-            header: 'Sender',
-            cell: ({ row }) => row.original.User.name ?? row.original.User.email,
-          },
-          {
-            header: 'Recipient',
-            accessorKey: 'recipient',
-            cell: ({ row }) => (
-              <StackAvatarsWithTooltip
-                recipients={row.original.Recipient}
-                documentStatus={row.original.status}
-              />
-            ),
-          },
-          {
-            header: 'Status',
-            accessorKey: 'status',
-            cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
-            size: 140,
-          },
-          {
-            header: 'Actions',
-            cell: ({ row }) =>
-              (!row.original.deletedAt ||
-                row.original.status === ExtendedDocumentStatus.COMPLETED) && (
-                <div className="flex items-center gap-x-4">
-                  <DataTableActionButton team={team} row={row.original} />
-                  <DataTableActionDropdown team={team} row={row.original} />
-                </div>
-              ),
-          },
-        ]}
         data={results.data}
         perPage={results.perPage}
         currentPage={results.currentPage}

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

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -43,6 +45,7 @@ export const DeleteDocumentDialog = ({
 
   const { toast } = useToast();
   const { refreshLimits } = useLimits();
+  const { _ } = useLingui();
 
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
@@ -53,8 +56,8 @@ export const DeleteDocumentDialog = ({
       void refreshLimits();
 
       toast({
-        title: 'Document deleted',
+        title: _(msg`Document deleted`),
-        description: `"${documentTitle}" has been successfully deleted`,
+        description: _(msg`"${documentTitle}" has been successfully deleted`),
         duration: 5000,
       });
 
@@ -74,8 +77,8 @@ export const DeleteDocumentDialog = ({
       await deleteDocument({ id, teamId });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be deleted at this time. Please try again.',
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -91,11 +94,20 @@ export const DeleteDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
 
           <DialogDescription>
-            You are about to {canManageDocument ? 'delete' : 'hide'}{' '}
+            {canManageDocument ? (
-            <strong>"{documentTitle}"</strong>
+              <Trans>
+                You are about to delete <strong>"{documentTitle}"</strong>
+              </Trans>
+            ) : (
+              <Trans>
+                You are about to hide <strong>"{documentTitle}"</strong>
+              </Trans>
+            )}
           </DialogDescription>
         </DialogHeader>
 
@@ -104,33 +116,53 @@ export const DeleteDocumentDialog = ({
             {match(status)
               .with(DocumentStatus.DRAFT, () => (
                 <AlertDescription>
+                  <Trans>
                     Please note that this action is <strong>irreversible</strong>. Once confirmed,
                     this document will be permanently deleted.
+                  </Trans>
                 </AlertDescription>
               ))
               .with(DocumentStatus.PENDING, () => (
                 <AlertDescription>
                   <p>
+                    <Trans>
                       Please note that this action is <strong>irreversible</strong>.
+                    </Trans>
                   </p>
 
-                  <p className="mt-1">Once confirmed, the following will occur:</p>
+                  <p className="mt-1">
+                    <Trans>Once confirmed, the following will occur:</Trans>
+                  </p>
 
                   <ul className="mt-0.5 list-inside list-disc">
-                    <li>Document will be permanently deleted</li>
+                    <li>
-                    <li>Document signing process will be cancelled</li>
+                      <Trans>Document will be permanently deleted</Trans>
-                    <li>All inserted signatures will be voided</li>
+                    </li>
-                    <li>All recipients will be notified</li>
+                    <li>
+                      <Trans>Document signing process will be cancelled</Trans>
+                    </li>
+                    <li>
+                      <Trans>All inserted signatures will be voided</Trans>
+                    </li>
+                    <li>
+                      <Trans>All recipients will be notified</Trans>
+                    </li>
                   </ul>
                 </AlertDescription>
               ))
               .with(DocumentStatus.COMPLETED, () => (
                 <AlertDescription>
-                  <p>By deleting this document, the following will occur:</p>
+                  <p>
+                    <Trans>By deleting this document, the following will occur:</Trans>
+                  </p>
 
                   <ul className="mt-0.5 list-inside list-disc">
-                    <li>The document will be hidden from your account</li>
+                    <li>
-                    <li>Recipients will still retain their copy of the document</li>
+                      <Trans>The document will be hidden from your account</Trans>
+                    </li>
+                    <li>
+                      <Trans>Recipients will still retain their copy of the document</Trans>
+                    </li>
                   </ul>
                 </AlertDescription>
               ))
@@ -139,7 +171,7 @@ export const DeleteDocumentDialog = ({
         ) : (
           <Alert variant="warning" className="-mt-1">
             <AlertDescription>
-              Please contact support if you would like to revert this action.
+              <Trans>Please contact support if you would like to revert this action.</Trans>
             </AlertDescription>
           </Alert>
         )}
@@ -149,13 +181,13 @@ export const DeleteDocumentDialog = ({
             type="text"
             value={inputValue}
             onChange={onInputChange}
-            placeholder="Type 'delete' to confirm"
+            placeholder={_(msg`Type 'delete' to confirm`)}
           />
         )}
 
         <DialogFooter>
           <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -165,7 +197,7 @@ export const DeleteDocumentDialog = ({
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"
           >
-            {canManageDocument ? 'Delete' : 'Hide'}
+            {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
@@ -104,7 +106,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
             </Avatar>
           )}
 
-          <h1 className="text-4xl font-semibold">Documents</h1>
+          <h1 className="text-4xl font-semibold">
+            <Trans>Documents</Trans>
+          </h1>
         </div>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">

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

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -28,7 +31,9 @@ export const DuplicateDocumentDialog = ({
   team,
 }: DuplicateDocumentDialogProps) => {
   const router = useRouter();
+
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
@@ -50,8 +55,8 @@ export const DuplicateDocumentDialog = ({
         router.push(`${documentsPath}/${newId}/edit`);
 
         toast({
-          title: 'Document Duplicated',
+          title: _(msg`Document Duplicated`),
-          description: 'Your document has been successfully duplicated.',
+          description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
@@ -64,8 +69,8 @@ export const DuplicateDocumentDialog = ({
       await duplicateDocument({ id, teamId: team?.id });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be duplicated at this time. Please try again.',
+        description: _(msg`This document could not be duplicated at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -76,12 +81,14 @@ export const DuplicateDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Duplicate</DialogTitle>
+          <DialogTitle>
+            <Trans>Duplicate</Trans>
+          </DialogTitle>
         </DialogHeader>
         {!documentData || isLoading ? (
           <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
             <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-              Loading Document...
+              <Trans>Loading Document...</Trans>
             </h1>
           </div>
         ) : (
@@ -98,7 +105,7 @@ export const DuplicateDocumentDialog = ({
               onClick={() => onOpenChange(false)}
               className="flex-1"
             >
-              Cancel
+              <Trans>Cancel</Trans>
             </Button>
 
             <Button
@@ -108,7 +115,7 @@ export const DuplicateDocumentDialog = ({
               onClick={onDuplicate}
               className="flex-1"
             >
-              Duplicate
+              <Trans>Duplicate</Trans>
             </Button>
           </div>
         </DialogFooter>

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -1,3 +1,5 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Bird, CheckCircle2 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -6,33 +8,31 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
 
 export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
+  const { _ } = useLingui();
+
   const {
     title,
     message,
     icon: Icon,
   } = match(status)
     .with(ExtendedDocumentStatus.COMPLETED, () => ({
-      title: 'Nothing to do',
+      title: msg`Nothing to do`,
-      message:
+      message: msg`There are no completed documents yet. Documents that you have created or received will appear here once completed.`,
-        'There are no completed documents yet. Documents that you have created or received will appear here once completed.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.DRAFT, () => ({
-      title: 'No active drafts',
+      title: msg`No active drafts`,
-      message:
+      message: msg`There are no active drafts at the current moment. You can upload a document to start drafting.`,
-        'There are no active drafts at the current moment. You can upload a document to start drafting.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.ALL, () => ({
-      title: "We're all empty",
+      title: msg`We're all empty`,
-      message:
+      message: msg`You have not yet created or received any documents. To create a document please upload one.`,
-        'You have not yet created or received any documents. To create a document please upload one.',
       icon: Bird,
     }))
     .otherwise(() => ({
-      title: 'Nothing to do',
+      title: msg`Nothing to do`,
-      message:
+      message: msg`All documents have been processed. Any new documents that are sent or received will show here.`,
-        'All documents have been processed. Any new documents that are sent or received will show here.',
       icon: CheckCircle2,
     }));
 
@@ -44,9 +44,9 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
       <Icon className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">
-        <h3 className="text-lg font-semibold">{title}</h3>
+        <h3 className="text-lg font-semibold">{_(title)}</h3>
 
-        <p className="mt-2 max-w-[60ch]">{message}</p>
+        <p className="mt-2 max-w-[60ch]">{_(message)}</p>
       </div>
     </div>
   );

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

@@ -2,6 +2,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -30,25 +33,29 @@ type MoveDocumentDialogProps = {
 };
 
 export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocumentDialogProps) => {
-  const router = useRouter();
+  const { _ } = useLingui();
   const { toast } = useToast();
+
+  const router = useRouter();
+
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
   const { mutateAsync: moveDocument, isLoading } = trpc.document.moveDocumentToTeam.useMutation({
     onSuccess: () => {
       router.refresh();
       toast({
-        title: 'Document moved',
+        title: _(msg`Document moved`),
-        description: 'The document has been successfully moved to the selected team.',
+        description: _(msg`The document has been successfully moved to the selected team.`),
         duration: 5000,
       });
       onOpenChange(false);
     },
     onError: (error) => {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: error.message || 'An error occurred while moving the document.',
+        description: error.message || _(msg`An error occurred while moving the document.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -56,7 +63,10 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
   });
 
   const onMove = async () => {
-    if (!selectedTeamId) return;
+    if (!selectedTeamId) {
+      return;
+    }
+
     await moveDocument({ documentId, teamId: selectedTeamId });
   };
 
@@ -64,20 +74,22 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Move Document to Team</DialogTitle>
+          <DialogTitle>
+            <Trans>Move Document to Team</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Select a team to move this document to. This action cannot be undone.
+            <Trans>Select a team to move this document to. This action cannot be undone.</Trans>
           </DialogDescription>
         </DialogHeader>
 
         <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
           <SelectTrigger>
-            <SelectValue placeholder="Select a team" />
+            <SelectValue placeholder={_(msg`Select a team`)} />
           </SelectTrigger>
           <SelectContent>
             {isLoadingTeams ? (
               <SelectItem value="loading" disabled>
-                Loading teams...
+                <Trans>Loading teams...</Trans>
               </SelectItem>
             ) : (
               teams?.map((team) => (

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

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import type { DocumentsPageViewProps } from './documents-page-view';
@@ -15,7 +16,10 @@ export const metadata: Metadata = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
+
   return (
     <>
       <UpcomingProfileClaimTeaser user={user} />

apps/web/src/app/(dashboard)/documents/upcoming-profile-claim-teaser.tsx

@@ -2,6 +2,9 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { User } from '@documenso/prisma/client';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -12,6 +15,7 @@ export type UpcomingProfileClaimTeaserProps = {
 };
 
 export const UpcomingProfileClaimTeaser = ({ user }: UpcomingProfileClaimTeaserProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [open, setOpen] = useState(false);
@@ -21,14 +25,17 @@ export const UpcomingProfileClaimTeaser = ({ user }: UpcomingProfileClaimTeaserP
     (open: boolean) => {
       if (!open && !claimed) {
         toast({
-          title: 'Claim your profile later',
+          title: _(msg`Claim your profile later`),
-          description: 'You can claim your profile later on by going to your profile settings!',
+          description: _(
+            msg`You can claim your profile later on by going to your profile settings!`,
+          ),
         });
       }
 
       setOpen(open);
       localStorage.setItem('app.hasShownProfileClaimDialog', 'true');
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [claimed, toast],
   );
 

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

@@ -4,6 +4,8 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -34,6 +36,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
   const { data: session } = useSession();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { quota, remaining, refreshLimits } = useLimits();
@@ -45,13 +48,14 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   const disabledMessage = useMemo(() => {
     if (remaining.documents === 0) {
       return team
-        ? 'Document upload disabled due to unpaid invoices'
+        ? msg`Document upload disabled due to unpaid invoices`
-        : 'You have reached your document limit.';
+        : msg`You have reached your document limit.`;
     }
 
     if (!session?.user.emailVerified) {
-      return 'Verify your email to upload documents.';
+      return msg`Verify your email to upload documents.`;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [remaining.documents, session?.user.emailVerified, team]);
 
   const onFileDrop = async (file: File) => {
@@ -74,8 +78,8 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
       void refreshLimits();
 
       toast({
-        title: 'Document uploaded',
+        title: _(msg`Document uploaded`),
-        description: 'Your document has been uploaded successfully.',
+        description: _(msg`Your document has been uploaded successfully.`),
         duration: 5000,
       });
 
@@ -93,20 +97,20 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
       if (error.code === 'INVALID_DOCUMENT_FILE') {
         toast({
-          title: 'Invalid file',
+          title: _(msg`Invalid file`),
-          description: 'You cannot upload encrypted PDFs',
+          description: _(msg`You cannot upload encrypted PDFs`),
           variant: 'destructive',
         });
       } else if (err instanceof TRPCClientError) {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'An error occurred while uploading your document.',
+          description: _(msg`An error occurred while uploading your document.`),
           variant: 'destructive',
         });
       }
@@ -117,8 +121,8 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
   const onFileDropRejected = () => {
     toast({
-      title: 'Your document failed to upload.',
+      title: _(msg`Your document failed to upload.`),
-      description: `File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
       duration: 5000,
       variant: 'destructive',
     });
@@ -139,7 +143,9 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
           remaining.documents > 0 &&
           Number.isFinite(remaining.documents) && (
             <p className="text-muted-foreground/60 text-xs">
+              <Trans>
                 {remaining.documents} of {quota.documents} documents remaining this month.
+              </Trans>
             </p>
           )}
       </div>

apps/web/src/app/(dashboard)/layout.tsx

@@ -5,6 +5,7 @@ import { redirect } from 'next/navigation';
 import { getServerSession } from 'next-auth';
 
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
@@ -22,6 +23,8 @@ export type AuthenticatedDashboardLayoutProps = {
 export default async function AuthenticatedDashboardLayout({
   children,
 }: AuthenticatedDashboardLayoutProps) {
+  setupI18nSSR();
+
   const session = await getServerSession(NEXT_AUTH_OPTIONS);
 
   if (!session) {

apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import type { MessageDescriptor } from '@lingui/core';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
@@ -21,11 +24,11 @@ const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
 
-const FRIENDLY_INTERVALS: Record<Interval, string> = {
+const FRIENDLY_INTERVALS: Record<Interval, MessageDescriptor> = {
-  day: 'Daily',
+  day: msg`Daily`,
-  week: 'Weekly',
+  week: msg`Weekly`,
-  month: 'Monthly',
+  month: msg`Monthly`,
-  year: 'Yearly',
+  year: msg`Yearly`,
 };
 
 const MotionCard = motion(Card);
@@ -35,6 +38,7 @@ export type BillingPlansProps = {
 };
 
 export const BillingPlans = ({ prices }: BillingPlansProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const isMounted = useIsMounted();
@@ -55,8 +59,8 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
       window.open(url);
     } catch (_err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while trying to create a checkout session.',
+        description: _(msg`An error occurred while trying to create a checkout session.`),
         variant: 'destructive',
       });
     } finally {
@@ -72,7 +76,7 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
             (interval) =>
               prices[interval].length > 0 && (
                 <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-                  {FRIENDLY_INTERVALS[interval]}
+                  {_(FRIENDLY_INTERVALS[interval])}
                 </TabsTrigger>
               ),
           )}
@@ -121,7 +125,7 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
                   loading={isFetchingCheckoutSession}
                   onClick={() => void onSubscribeClick(price.id)}
                 >
-                  Subscribe
+                  <Trans>Subscribe</Trans>
                 </Button>
               </CardContent>
             </MotionCard>

apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -12,6 +15,7 @@ export type BillingPortalButtonProps = {
 };
 
 export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isFetchingPortalUrl, setIsFetchingPortalUrl] = useState(false);
@@ -32,16 +36,18 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
 
       window.open(sessionUrl, '_blank');
     } catch (e) {
-      let description =
+      let description = _(
-        'We are unable to proceed to the billing portal at this time. Please try again, or contact support.';
+        msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
+      );
 
       if (e.message === 'CUSTOMER_NOT_FOUND') {
-        description =
+        description = _(
-          'You do not currently have a customer record, this should not happen. Please contact support for assistance.';
+          msg`You do not currently have a customer record, this should not happen. Please contact support for assistance.`,
+        );
       }
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
         description,
         variant: 'destructive',
         duration: 10000,
@@ -57,7 +63,7 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
       onClick={async () => handleFetchPortalUrl()}
       loading={isFetchingPortalUrl}
     >
-      Manage Subscription
+      <Trans>Manage Subscription</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -1,12 +1,14 @@
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { match } from 'ts-pattern';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
@@ -24,6 +26,8 @@ export const metadata: Metadata = {
 };
 
 export default async function BillingSettingsPage() {
+  setupI18nSSR();
+
   let { user } = await getRequiredServerComponentSession();
 
   const isBillingEnabled = await getServerComponentFlag('app_billing');
@@ -66,15 +70,20 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Billing</h3>
+      <h3 className="text-2xl font-semibold">
+        <Trans>Billing</Trans>
+      </h3>
 
       <div className="text-muted-foreground mt-2 text-sm">
         {isMissingOrInactiveOrFreePlan && (
           <p>
+            <Trans>
               You are currently on the <span className="font-semibold">Free Plan</span>.
+            </Trans>
           </p>
         )}
 
+        {/* Todo: Translation */}
         {!isMissingOrInactiveOrFreePlan &&
           match(subscription.status)
             .with('ACTIVE', () => (
@@ -108,7 +117,11 @@ export default async function BillingSettingsPage() {
               </p>
             ))
             .with('PAST_DUE', () => (
-              <p>Your current plan is past due. Please update your payment information.</p>
+              <p>
+                <Trans>
+                  Your current plan is past due. Please update your payment information.
+                </Trans>
+              </p>
             ))
             .otherwise(() => null)}
       </div>

apps/web/src/app/(dashboard)/settings/layout.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DesktopNav } from '~/components/(dashboard)/settings/layout/desktop-nav';
 import { MobileNav } from '~/components/(dashboard)/settings/layout/mobile-nav';
 
@@ -8,9 +12,13 @@ export type DashboardSettingsLayoutProps = {
 };
 
 export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+  setupI18nSSR();
+
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="text-4xl font-semibold">Settings</h1>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Settings</Trans>
+      </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
         <DesktopNav className="hidden md:col-span-3 md:flex" />

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { signOut } from 'next-auth/react';
 
 import type { User } from '@documenso/prisma/client';
@@ -28,6 +30,7 @@ export type DeleteAccountDialogProps = {
 };
 
 export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const hasTwoFactorAuthentication = user.twoFactorEnabled;
@@ -42,8 +45,8 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
       await deleteAccount();
 
       toast({
-        title: 'Account deleted',
+        title: _(msg`Account deleted`),
-        description: 'Your account has been deleted successfully.',
+        description: _(msg`Your account has been deleted successfully.`),
         duration: 5000,
       });
 
@@ -51,17 +54,19 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
-            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+            _(
+              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+            ),
         });
       }
     }
@@ -74,50 +79,63 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
         variant="neutral"
       >
         <div>
-          <AlertTitle>Delete Account</AlertTitle>
+          <AlertTitle>
+            <Trans>Delete Account</Trans>
+          </AlertTitle>
           <AlertDescription className="mr-2">
-            Delete your account and all its contents, including completed documents. This action is
+            <Trans>
-            irreversible and will cancel your subscription, so proceed with caution.
+              Delete your account and all its contents, including completed documents. This action
+              is irreversible and will cancel your subscription, so proceed with caution.
+            </Trans>
           </AlertDescription>
         </div>
 
         <div className="flex-shrink-0">
           <Dialog onOpenChange={() => setEnteredEmail('')}>
             <DialogTrigger asChild>
-              <Button variant="destructive">Delete Account</Button>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
             </DialogTrigger>
 
             <DialogContent>
               <DialogHeader className="space-y-4">
-                <DialogTitle>Delete Account</DialogTitle>
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
 
                 <Alert variant="destructive">
                   <AlertDescription className="selection:bg-red-100">
-                    This action is not reversible. Please be certain.
+                    <Trans>This action is not reversible. Please be certain.</Trans>
                   </AlertDescription>
                 </Alert>
 
                 {hasTwoFactorAuthentication && (
                   <Alert variant="destructive">
                     <AlertDescription className="selection:bg-red-100">
-                      Disable Two Factor Authentication before deleting your account.
+                      <Trans>Disable Two Factor Authentication before deleting your account.</Trans>
                     </AlertDescription>
                   </Alert>
                 )}
 
                 <DialogDescription>
-                  Documenso will delete <span className="font-semibold">all of your documents</span>
+                  <Trans>
-                  , along with all of your completed documents, signatures, and all other resources
+                    Documenso will delete{' '}
-                  belonging to your Account.
+                    <span className="font-semibold">all of your documents</span>, along with all of
+                    your completed documents, signatures, and all other resources belonging to your
+                    Account.
+                  </Trans>
                 </DialogDescription>
               </DialogHeader>
 
               {!hasTwoFactorAuthentication && (
                 <div className="mt-4">
                   <Label>
+                    <Trans>
                       Please type{' '}
                       <span className="text-muted-foreground font-semibold">{user.email}</span> to
                       confirm.
+                    </Trans>
                   </Label>
 
                   <Input
@@ -136,7 +154,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
                   variant="destructive"
                   disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
                 >
-                  {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'}
+                  {isDeletingAccount ? _(msg`Deleting account...`) : _(msg`Confirm Deletion`)}
                 </Button>
               </DialogFooter>
             </DialogContent>

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -1,5 +1,9 @@
 import type { Metadata } from 'next';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
@@ -13,11 +17,17 @@ export const metadata: Metadata = {
 };
 
 export default async function ProfileSettingsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>
-      <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
+      <SettingsHeader
+        title={_(msg`Profile`)}
+        subtitle={_(msg`Here you can edit your personal details.`)}
+      />
 
       <AvatarImageForm className="mb-8 max-w-xl" user={user} />
       <ProfileForm className="mb-8 max-w-xl" user={user} />

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -1,9 +1,12 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
 
 import { PublicProfilePageView } from './public-profile-page-view';
 
 export default async function Page() {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   const { profile } = await getUserPublicProfile({

apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx

@@ -2,6 +2,9 @@
 
 import { useEffect, useMemo, useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import type {
   Team,
@@ -36,22 +39,21 @@ type DirectTemplate = FindTemplateRow & {
 };
 
 const userProfileText = {
-  settingsTitle: 'Public Profile',
+  settingsTitle: msg`Public Profile`,
-  settingsSubtitle: 'You can choose to enable or disable your profile for public view.',
+  settingsSubtitle: msg`You can choose to enable or disable your profile for public view.`,
-  templatesTitle: 'My templates',
+  templatesTitle: msg`My templates`,
-  templatesSubtitle:
+  templatesSubtitle: msg`Show templates in your public profile for your audience to sign and get started quickly`,
-    'Show templates in your public profile for your audience to sign and get started quickly',
 };
 
 const teamProfileText = {
-  settingsTitle: 'Team Public Profile',
+  settingsTitle: msg`Team Public Profile`,
-  settingsSubtitle: 'You can choose to enable or disable your team profile for public view.',
+  settingsSubtitle: msg`You can choose to enable or disable your team profile for public view.`,
-  templatesTitle: 'Team templates',
+  templatesTitle: msg`Team templates`,
-  templatesSubtitle:
+  templatesSubtitle: msg`Show templates in your team public profile for your audience to sign and get started quickly`,
-    'Show templates in your team public profile for your audience to sign and get started quickly',
 };
 
 export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePageViewOptions) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
@@ -104,7 +106,7 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
     if (isVisible && !user.url) {
       toast({
-        title: 'You must set a profile URL before enabling your public profile.',
+        title: _(msg`You must set a profile URL before enabling your public profile.`),
         variant: 'destructive',
       });
 
@@ -119,8 +121,8 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
       });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'We were unable to set your public profile to public. Please try again.',
+        description: _(msg`We were unable to set your public profile to public. Please try again.`),
         variant: 'destructive',
       });
 
@@ -134,7 +136,10 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
   return (
     <div className="max-w-2xl">
-      <SettingsHeader title={profileText.settingsTitle} subtitle={profileText.settingsSubtitle}>
+      <SettingsHeader
+        title={_(profileText.settingsTitle)}
+        subtitle={_(profileText.settingsSubtitle)}
+      >
         <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
           <TooltipTrigger asChild>
             <div
@@ -146,13 +151,17 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
                 },
               )}
             >
-              <span>Hide</span>
+              <span>
+                <Trans>Hide</Trans>
+              </span>
               <Switch
                 disabled={isUpdating}
                 checked={isPublicProfileVisible}
                 onCheckedChange={togglePublicProfileVisibility}
               />
-              <span>Show</span>
+              <span>
+                <Trans>Show</Trans>
+              </span>
             </div>
           </TooltipTrigger>
 
@@ -160,18 +169,26 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
             {isPublicProfileVisible ? (
               <>
                 <p>
+                  <Trans>
                     Profile is currently <strong>visible</strong>.
+                  </Trans>
                 </p>
 
-                <p>Toggle the switch to hide your profile from the public.</p>
+                <p>
+                  <Trans>Toggle the switch to hide your profile from the public.</Trans>
+                </p>
               </>
             ) : (
               <>
                 <p>
+                  <Trans>
                     Profile is currently <strong>hidden</strong>.
+                  </Trans>
                 </p>
 
-                <p>Toggle the switch to show your profile to the public.</p>
+                <p>
+                  <Trans>Toggle the switch to show your profile to the public.</Trans>
+                </p>
               </>
             )}
           </TooltipContent>
@@ -187,14 +204,18 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
       <div className="mt-4">
         <SettingsHeader
-          title={profileText.templatesTitle}
+          title={_(profileText.templatesTitle)}
-          subtitle={profileText.templatesSubtitle}
+          subtitle={_(profileText.templatesSubtitle)}
           hideDivider={true}
           className="mt-8 [&>*>h3]:text-base"
         >
           <ManagePublicTemplateDialog
             directTemplates={enabledPrivateDirectTemplates}
-            trigger={<Button variant="outline">Link template</Button>}
+            trigger={
+              <Button variant="outline">
+                <Trans>Link template</Trans>
+              </Button>
+            }
           />
         </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/public-profile/public-templates-data-table.tsx

@@ -2,6 +2,8 @@
 
 import { useMemo, useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { EditIcon, FileIcon, LinkIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
@@ -30,6 +32,7 @@ type DirectTemplate = FindTemplateRow & {
 export const PublicTemplatesDataTable = () => {
   const team = useOptionalCurrentTeam();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [, copy] = useCopyToClipboard();
@@ -71,8 +74,8 @@ export const PublicTemplatesDataTable = () => {
   const onCopyClick = async (token: string) =>
     copy(formatDirectTemplatePath(token)).then(() => {
       toast({
-        title: 'Copied to clipboard',
+        title: _(msg`Copied to clipboard`),
-        description: 'The direct link has been copied to your clipboard',
+        description: _(msg`The direct link has been copied to your clipboard`),
       });
     });
 
@@ -105,26 +108,26 @@ export const PublicTemplatesDataTable = () => {
 
             {isLoadingError && (
               <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
-                Unable to load your public profile templates at this time
+                <Trans>Unable to load your public profile templates at this time</Trans>
                 <button
                   onClick={(e) => {
                     e.preventDefault();
                     void refetch();
                   }}
                 >
-                  Click here to retry
+                  <Trans>Click here to retry</Trans>
                 </button>
               </div>
             )}
 
             {!isInitialLoading && (
               <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
-                No public profile templates found
+                <Trans>No public profile templates found</Trans>
                 <ManagePublicTemplateDialog
                   directTemplates={privateDirectTemplates}
                   trigger={
                     <button className="hover:text-muted-foreground/80 mt-1 text-xs">
-                      Click here to get started
+                      <Trans>Click here to get started</Trans>
                     </button>
                   }
                 />
@@ -157,11 +160,13 @@ export const PublicTemplatesDataTable = () => {
               </DropdownMenuTrigger>
 
               <DropdownMenuContent className="w-52" align="center" side="left">
-                <DropdownMenuLabel>Action</DropdownMenuLabel>
+                <DropdownMenuLabel>
+                  <Trans>Action</Trans>
+                </DropdownMenuLabel>
 
                 <DropdownMenuItem onClick={() => void onCopyClick(template.directLink.token)}>
                   <LinkIcon className="mr-2 h-4 w-4" />
-                  Copy sharable link
+                  <Trans>Copy sharable link</Trans>
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
@@ -173,7 +178,7 @@ export const PublicTemplatesDataTable = () => {
                   }}
                 >
                   <EditIcon className="mr-2 h-4 w-4" />
-                  Update
+                  <Trans>Update</Trans>
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
@@ -185,7 +190,7 @@ export const PublicTemplatesDataTable = () => {
                   }
                 >
                   <Trash2Icon className="mr-2 h-4 w-4" />
-                  Remove
+                  <Trans>Remove</Trans>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>

apps/web/src/app/(dashboard)/settings/security/activity/page.tsx

@@ -1,5 +1,10 @@
 import type { Metadata } from 'next';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 
 import ActivityPageBackButton from '../../../../../components/(dashboard)/settings/layout/activity-back';
@@ -10,11 +15,15 @@ export const metadata: Metadata = {
 };
 
 export default function SettingsSecurityActivityPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   return (
     <div>
       <SettingsHeader
-        title="Security activity"
+        title={_(msg`Security activity`)}
-        subtitle="View all recent security activity related to your account."
+        subtitle={_(msg`View all security activity related to your account.`)}
         hideDivider={true}
       >
         <ActivityPageBackButton />

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -1,7 +1,11 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import type { DateTimeFormatOptions } from 'luxon';
 import { DateTime } from 'luxon';
 import { UAParser } from 'ua-parser-js';
@@ -10,6 +14,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { USER_SECURITY_AUDIT_LOG_MAP } from '@documenso/lib/constants/auth';
 import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
+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 { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -23,7 +28,7 @@ const dateFormat: DateTimeFormatOptions = {
 };
 
 export const UserSecurityActivityDataTable = () => {
-  const parser = new UAParser();
+  const { _ } = useLingui();
 
   const pathname = usePathname();
   const router = useRouter();
@@ -59,16 +64,17 @@ export const UserSecurityActivityDataTable = () => {
     totalPages: 1,
   };
 
-  return (
+  const columns = useMemo(() => {
-    <DataTable
+    const parser = new UAParser();
-      columns={[
+
+    return [
       {
-          header: 'Date',
+        header: _(msg`Date`),
         accessorKey: 'createdAt',
         cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
       },
       {
-          header: 'Device',
+        header: _(msg`Device`),
         cell: ({ row }) => {
           if (!row.original.userAgent) {
             return 'N/A';
@@ -92,7 +98,7 @@ export const UserSecurityActivityDataTable = () => {
         },
       },
       {
-          header: 'Browser',
+        header: _(msg`Browser`),
         cell: ({ row }) => {
           if (!row.original.userAgent) {
             return 'N/A';
@@ -111,11 +117,16 @@ export const UserSecurityActivityDataTable = () => {
         cell: ({ row }) => row.original.ipAddress ?? 'N/A',
       },
       {
-          header: 'Action',
+        header: _(msg`Action`),
         accessorKey: 'type',
         cell: ({ row }) => USER_SECURITY_AUDIT_LOG_MAP[row.original.type],
       },
-      ]}
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
       data={results.data}
       perPage={results.perPage}
       currentPage={results.currentPage}

apps/web/src/app/(dashboard)/settings/security/page.tsx

@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -17,6 +21,9 @@ export const metadata: Metadata = {
 };
 
 export default async function SecuritySettingsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();
 
   const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
@@ -24,8 +31,8 @@ export default async function SecuritySettingsPage() {
   return (
     <div>
       <SettingsHeader
-        title="Security"
+        title={_(msg`Security`)}
-        subtitle="Here you can manage your password and security settings."
+        subtitle={_(msg`Here you can manage your password and security settings.`)}
       />
 
       {user.identityProvider === 'DOCUMENSO' && (
@@ -41,13 +48,22 @@ export default async function SecuritySettingsPage() {
         variant="neutral"
       >
         <div className="mb-4 sm:mb-0">
-          <AlertTitle>Two factor authentication</AlertTitle>
+          <AlertTitle>
+            <Trans>Two factor authentication</Trans>
+          </AlertTitle>
 
           <AlertDescription className="mr-4">
-            Add an authenticator to serve as a secondary authentication method{' '}
+            {user.identityProvider === 'DOCUMENSO' ? (
-            {user.identityProvider === 'DOCUMENSO'
+              <Trans>
-              ? 'when signing in, or when signing documents.'
+                Add an authenticator to serve as a secondary authentication method when signing in,
-              : 'for signing documents.'}
+                or when signing documents.
+              </Trans>
+            ) : (
+              <Trans>
+                Add an authenticator to serve as a secondary authentication method for signing
+                documents.
+              </Trans>
+            )}
           </AlertDescription>
         </div>
 
@@ -64,11 +80,15 @@ export default async function SecuritySettingsPage() {
           variant="neutral"
         >
           <div className="mb-4 sm:mb-0">
-            <AlertTitle>Recovery codes</AlertTitle>
+            <AlertTitle>
+              <Trans>Recovery codes</Trans>
+            </AlertTitle>
 
             <AlertDescription className="mr-4">
-              Two factor authentication recovery codes are used to access your account in the event
+              <Trans>
-              that you lose access to your authenticator app.
+                Two factor authentication recovery codes are used to access your account in the
+                event that you lose access to your authenticator app.
+              </Trans>
             </AlertDescription>
           </div>
 
@@ -82,15 +102,21 @@ export default async function SecuritySettingsPage() {
           variant="neutral"
         >
           <div className="mb-4 sm:mb-0">
-            <AlertTitle>Passkeys</AlertTitle>
+            <AlertTitle>
+              <Trans>Passkeys</Trans>
+            </AlertTitle>
 
             <AlertDescription className="mr-4">
+              <Trans>
                 Allows authenticating using biometrics, password managers, hardware keys, etc.
+              </Trans>
             </AlertDescription>
           </div>
 
           <Button asChild variant="outline" className="bg-background">
-            <Link href="/settings/security/passkeys">Manage passkeys</Link>
+            <Link href="/settings/security/passkeys">
+              <Trans>Manage passkeys</Trans>
+            </Link>
           </Button>
         </Alert>
       )}
@@ -100,15 +126,19 @@ export default async function SecuritySettingsPage() {
         variant="neutral"
       >
         <div className="mb-4 mr-4 sm:mb-0">
-          <AlertTitle>Recent activity</AlertTitle>
+          <AlertTitle>
+            <Trans>Recent activity</Trans>
+          </AlertTitle>
 
           <AlertDescription className="mr-2">
-            View all recent security activity related to your account.
+            <Trans>View all recent security activity related to your account.</Trans>
           </AlertDescription>
         </div>
 
         <Button asChild variant="outline" className="bg-background">
-          <Link href="/settings/security/activity">View activity</Link>
+          <Link href="/settings/security/activity">
+            <Trans>View activity</Trans>
+          </Link>
         </Button>
       </Alert>
     </div>

apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { startRegistration } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
@@ -53,6 +55,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
   const [open, setOpen] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const form = useForm<TCreatePasskeyFormSchema>({
@@ -81,7 +84,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
       });
 
       toast({
-        description: 'Successfully created passkey',
+        description: _(msg`Successfully created passkey`),
         duration: 5000,
       });
 
@@ -140,17 +143,22 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
         {trigger ?? (
           <Button variant="secondary" loading={isLoading}>
             <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
-            Add passkey
+            <Trans>Add passkey</Trans>
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>Add passkey</DialogTitle>
+          <DialogTitle>
+            <Trans>Add passkey</Trans>
+          </DialogTitle>
 
           <DialogDescription className="mt-4">
-            Passkeys allow you to sign in and authenticate using biometrics, password managers, etc.
+            <Trans>
+              Passkeys allow you to sign in and authenticate using biometrics, password managers,
+              etc.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -165,7 +173,9 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
                 name="passkeyName"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel required>Passkey name</FormLabel>
+                    <FormLabel required>
+                      <Trans>Passkey name</Trans>
+                    </FormLabel>
                     <FormControl>
                       <Input className="bg-background" placeholder="eg. Mac" {...field} />
                     </FormControl>
@@ -176,13 +186,17 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
 
               <Alert variant="neutral">
                 <AlertDescription>
+                  <Trans>
                     When you click continue, you will be prompted to add the first available
                     authenticator on your system.
+                  </Trans>
                 </AlertDescription>
 
                 <AlertDescription className="mt-2">
-                  If you do not want to use the authenticator prompted, you can close it, which will
+                  <Trans>
-                  then display the next available authenticator.
+                    If you do not want to use the authenticator prompted, you can close it, which
+                    will then display the next available authenticator.
+                  </Trans>
                 </AlertDescription>
               </Alert>
 
@@ -190,30 +204,40 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
                 <Alert variant="destructive">
                   {match(formError)
                     .with('ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED', () => (
-                      <AlertDescription>This passkey has already been registered.</AlertDescription>
+                      <AlertDescription>
+                        <Trans>This passkey has already been registered.</Trans>
+                      </AlertDescription>
                     ))
                     .with('TOO_MANY_PASSKEYS', () => (
                       <AlertDescription>
-                        You cannot have more than {MAXIMUM_PASSKEYS} passkeys.
+                        <Trans>You cannot have more than {MAXIMUM_PASSKEYS} passkeys.</Trans>
                       </AlertDescription>
                     ))
                     .with('InvalidStateError', () => (
                       <>
                         <AlertTitle className="text-sm">
+                          <Trans>
                             Passkey creation cancelled due to one of the following reasons:
+                          </Trans>
                         </AlertTitle>
                         <AlertDescription>
                           <ul className="mt-1 list-inside list-disc">
-                            <li>Cancelled by user</li>
+                            <li>
-                            <li>Passkey already exists for the provided authenticator</li>
+                              <Trans>Cancelled by user</Trans>
-                            <li>Exceeded timeout</li>
+                            </li>
+                            <li>
+                              <Trans>Passkey already exists for the provided authenticator</Trans>
+                            </li>
+                            <li>
+                              <Trans>Exceeded timeout</Trans>
+                            </li>
                           </ul>
                         </AlertDescription>
                       </>
                     ))
                     .otherwise(() => (
                       <AlertDescription>
-                        Something went wrong. Please try again or contact support.
+                        <Trans>Something went wrong. Please try again or contact support.</Trans>
                       </AlertDescription>
                     ))}
                 </Alert>
@@ -221,11 +245,11 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
 
               <DialogFooter>
                 <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  Cancel
+                  <Trans>Cancel</Trans>
                 </Button>
 
                 <Button type="submit" loading={form.formState.isSubmitting}>
-                  Continue
+                  <Trans>Continue</Trans>
                 </Button>
               </DialogFooter>
             </fieldset>

apps/web/src/app/(dashboard)/settings/security/passkeys/page.tsx

@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
@@ -13,6 +17,9 @@ export const metadata: Metadata = {
 };
 
 export default async function SettingsManagePasskeysPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
 
   if (!isPasskeyEnabled) {
@@ -21,7 +28,11 @@ export default async function SettingsManagePasskeysPage() {
 
   return (
     <div>
-      <SettingsHeader title="Passkeys" subtitle="Manage your passkeys." hideDivider={true}>
+      <SettingsHeader
+        title={_(msg`Passkeys`)}
+        subtitle={_(msg`Manage your passkeys.`)}
+        hideDivider={true}
+      >
         <CreatePasskeyDialog />
       </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -45,6 +47,7 @@ export const UserPasskeysDataTableActions = ({
   passkeyId,
   passkeyName,
 }: UserPasskeysDataTableActionsProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -61,15 +64,16 @@ export const UserPasskeysDataTableActions = ({
     trpc.auth.updatePasskey.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Passkey has been updated',
+          description: _(msg`Passkey has been updated`),
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description:
+          description: _(
-            'We are unable to update this passkey at the moment. Please try again later.',
+            msg`We are unable to update this passkey at the moment. Please try again later.`,
+          ),
           duration: 10000,
           variant: 'destructive',
         });
@@ -80,15 +84,16 @@ export const UserPasskeysDataTableActions = ({
     trpc.auth.deletePasskey.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Passkey has been removed',
+          description: _(msg`Passkey has been removed`),
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description:
+          description: _(
-            'We are unable to remove this passkey at the moment. Please try again later.',
+            msg`We are unable to remove this passkey at the moment. Please try again later.`,
+          ),
           duration: 10000,
           variant: 'destructive',
         });
@@ -102,15 +107,21 @@ export const UserPasskeysDataTableActions = ({
         onOpenChange={(value) => !isUpdatingPasskey && setIsUpdateDialogOpen(value)}
       >
         <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-          <Button variant="outline">Edit</Button>
+          <Button variant="outline">
+            <Trans>Edit</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Update passkey</DialogTitle>
+            <DialogTitle>
+              <Trans>Update passkey</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 You are currently updating the <strong>{passkeyName}</strong> passkey.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -129,7 +140,9 @@ export const UserPasskeysDataTableActions = ({
                   name="name"
                   render={({ field }) => (
                     <FormItem className="w-full">
-                      <FormLabel required>Name</FormLabel>
+                      <FormLabel required>
+                        <Trans>Name</Trans>
+                      </FormLabel>
                       <FormControl>
                         <Input {...field} />
                       </FormControl>
@@ -141,12 +154,12 @@ export const UserPasskeysDataTableActions = ({
                 <DialogFooter className="mt-4">
                   <DialogClose asChild>
                     <Button type="button" variant="secondary">
-                      Cancel
+                      <Trans>Cancel</Trans>
                     </Button>
                   </DialogClose>
 
                   <Button type="submit" loading={isUpdatingPasskey}>
-                    Update
+                    <Trans>Update</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>
@@ -160,15 +173,21 @@ export const UserPasskeysDataTableActions = ({
         onOpenChange={(value) => !isDeletingPasskey && setIsDeleteDialogOpen(value)}
       >
         <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
-          <Button variant="destructive">Delete</Button>
+          <Button variant="destructive">
+            <Trans>Delete</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Delete passkey</DialogTitle>
+            <DialogTitle>
+              <Trans>Delete passkey</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 Are you sure you want to remove the <strong>{passkeyName}</strong> passkey.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -176,7 +195,7 @@ export const UserPasskeysDataTableActions = ({
             <DialogFooter>
               <DialogClose asChild>
                 <Button type="button" variant="secondary">
-                  Cancel
+                  <Trans>Cancel</Trans>
                 </Button>
               </DialogClose>
 
@@ -189,7 +208,7 @@ export const UserPasskeysDataTableActions = ({
                 variant="destructive"
                 loading={isDeletingPasskey}
               >
-                Delete
+                <Trans>Delete</Trans>
               </Button>
             </DialogFooter>
           </fieldset>

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx

@@ -1,12 +1,17 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
+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 { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -15,6 +20,8 @@ import { TableCell } from '@documenso/ui/primitives/table';
 import { UserPasskeysDataTableActions } from './user-passkeys-data-table-actions';
 
 export const UserPasskeysDataTable = () => {
+  const { _ } = useLingui();
+
   const pathname = usePathname();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -48,26 +55,25 @@ export const UserPasskeysDataTable = () => {
     totalPages: 1,
   };
 
-  return (
+  const columns = useMemo(() => {
-    <DataTable
+    return [
-      columns={[
       {
-          header: 'Name',
+        header: _(msg`Name`),
         accessorKey: 'name',
       },
       {
-          header: 'Created',
+        header: _(msg`Created`),
         accessorKey: 'createdAt',
         cell: ({ row }) => DateTime.fromJSDate(row.original.createdAt).toRelative(),
       },
 
       {
-          header: 'Last used',
+        header: _(msg`Last used`),
         accessorKey: 'updatedAt',
         cell: ({ row }) =>
           row.original.lastUsedAt
             ? DateTime.fromJSDate(row.original.lastUsedAt).toRelative()
-              : 'Never',
+            : msg`Never`,
       },
       {
         id: 'actions',
@@ -79,7 +85,12 @@ export const UserPasskeysDataTable = () => {
           />
         ),
       },
-      ]}
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
       data={results.data}
       perPage={results.perPage}
       currentPage={results.currentPage}

apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -9,6 +12,7 @@ export type AcceptTeamInvitationButtonProps = {
 };
 
 export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const {
@@ -18,17 +22,17 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
   } = trpc.team.acceptTeamInvitation.useMutation({
     onSuccess: () => {
       toast({
-        title: 'Success',
+        title: _(msg`Success`),
-        description: 'Accepted team invitation',
+        description: _(msg`Accepted team invitation`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to join this team at this time.`),
         variant: 'destructive',
         duration: 10000,
-        description: 'Unable to join this team at this time.',
       });
     },
   });
@@ -39,7 +43,7 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
       loading={isLoading}
       disabled={isLoading || isSuccess}
     >
-      Accept
+      <Trans>Accept</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/settings/teams/decline-team-invitation-button.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -9,6 +12,7 @@ export type DeclineTeamInvitationButtonProps = {
 };
 
 export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const {
@@ -18,17 +22,17 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
   } = trpc.team.declineTeamInvitation.useMutation({
     onSuccess: () => {
       toast({
-        title: 'Success',
+        title: _(msg`Success`),
-        description: 'Declined team invitation',
+        description: _(msg`Declined team invitation`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to decline this team invitation at this time.`),
         variant: 'destructive',
         duration: 10000,
-        description: 'Unable to decline this team invitation at this time.',
       });
     },
   });
@@ -40,7 +44,7 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
       disabled={isLoading || isSuccess}
       variant="ghost"
     >
-      Decline
+      <Trans>Decline</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/settings/teams/page.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AnimatePresence } from 'framer-motion';
 
 import { trpc } from '@documenso/trpc/react';
@@ -13,11 +15,16 @@ import { TeamEmailUsage } from './team-email-usage';
 import { TeamInvitations } from './team-invitations';
 
 export default function TeamsSettingsPage() {
+  const { _ } = useLingui();
+
   const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
 
   return (
     <div>
-      <SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
+      <SettingsHeader
+        title={_(msg`Teams`)}
+        subtitle={_(msg`Manage all teams you are currently associated with.`)}
+      >
         <CreateTeamDialog />
       </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { TeamEmail } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -24,24 +27,26 @@ export type TeamEmailUsageProps = {
 export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   const [open, setOpen] = useState(false);
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
     trpc.team.deleteTeamEmail.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'You have successfully revoked access.',
+          description: _(msg`You have successfully revoked access.`),
           duration: 5000,
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
+          description: _(
+            msg`We encountered an unknown error while attempting to revoke access. Please try again or contact support.`,
+          ),
           variant: 'destructive',
           duration: 10000,
-          description:
-            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
         });
       },
     });
@@ -49,43 +54,59 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   return (
     <Alert variant="neutral" className="flex flex-row items-center justify-between p-6">
       <div>
-        <AlertTitle className="mb-0">Team Email</AlertTitle>
+        <AlertTitle className="mb-0">
+          <Trans>Team Email</Trans>
+        </AlertTitle>
         <AlertDescription>
           <p>
+            <Trans>
               Your email is currently being used by team{' '}
               <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
               ).
+            </Trans>
           </p>
 
-          <p className="mt-1">They have permission on your behalf to:</p>
+          <p className="mt-1">
+            <Trans>They have permission on your behalf to:</Trans>
+          </p>
 
           <ul className="mt-0.5 list-inside list-disc">
-            <li>Display your name and email in documents</li>
+            <li>
-            <li>View all documents sent to your account</li>
+              <Trans>Display your name and email in documents</Trans>
+            </li>
+            <li>
+              <Trans>View all documents sent to your account</Trans>
+            </li>
           </ul>
         </AlertDescription>
       </div>
 
       <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
         <DialogTrigger asChild>
-          <Button variant="destructive">Revoke access</Button>
+          <Button variant="destructive">
+            <Trans>Revoke access</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Are you sure?</DialogTitle>
+            <DialogTitle>
+              <Trans>Are you sure?</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 You are about to revoke access for team{' '}
-              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
+                <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url})
-              use your email.
+                to use your email.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
           <fieldset disabled={isDeletingTeamEmail}>
             <DialogFooter>
               <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
 
               <Button
@@ -94,7 +115,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
                 loading={isDeletingTeamEmail}
                 onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
               >
-                Revoke
+                <Trans>Revoke</Trans>
               </Button>
             </DialogFooter>
           </fieldset>

apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Plural, Trans } from '@lingui/macro';
 import { AnimatePresence } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
@@ -33,23 +34,48 @@ export const TeamInvitations = () => {
               <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
 
               <AlertDescription className="mr-2">
-                You have <strong>{data.length}</strong> pending team invitation
+                <Plural
-                {data.length > 1 ? 's' : ''}.
+                  value={data.length}
+                  one={
+                    <span>
+                      You have <strong>1</strong> pending team invitation
+                    </span>
+                  }
+                  other={
+                    <span>
+                      You have <strong>#</strong> pending team invitations
+                    </span>
+                  }
+                />
               </AlertDescription>
 
               <Dialog>
                 <DialogTrigger asChild>
                   <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
-                    View invites
+                    <Trans>View invites</Trans>
                   </button>
                 </DialogTrigger>
 
                 <DialogContent position="center">
                   <DialogHeader>
-                    <DialogTitle>Pending invitations</DialogTitle>
+                    <DialogTitle>
+                      <Trans>Pending invitations</Trans>
+                    </DialogTitle>
 
                     <DialogDescription className="mt-4">
-                      You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
+                      <Plural
+                        value={data.length}
+                        one={
+                          <span>
+                            You have <strong>1</strong> pending team invitation
+                          </span>
+                        }
+                        other={
+                          <span>
+                            You have <strong>#</strong> pending team invitations
+                          </span>
+                        }
+                      />
                     </DialogDescription>
                   </DialogHeader>
 

apps/web/src/app/(dashboard)/settings/tokens/page.tsx

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
 import { Button } from '@documenso/ui/primitives/button';
@@ -9,15 +11,20 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { ApiTokenForm } from '~/components/forms/token';
 
 export default async function ApiTokensPage() {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   const tokens = await getUserTokens({ userId: user.id });
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">API Tokens</h3>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
 
       <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
           On this page, you can create new API tokens and manage the existing ones. <br />
           Also see our{' '}
           <a
@@ -28,6 +35,7 @@ export default async function ApiTokensPage() {
             Documentation
           </a>
           .
+        </Trans>
       </p>
 
       <hr className="my-4" />
@@ -36,12 +44,14 @@ export default async function ApiTokensPage() {
 
       <hr className="mb-4 mt-8" />
 
-      <h4 className="text-xl font-medium">Your existing tokens</h4>
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
 
       {tokens.length === 0 && (
         <div className="mb-4">
           <p className="text-muted-foreground mt-2 text-sm italic">
-            Your tokens will be shown here once you create them.
+            <Trans>Your tokens will be shown here once you create them.</Trans>
           </p>
         </div>
       )}
@@ -55,22 +65,26 @@ export default async function ApiTokensPage() {
                   <h5 className="text-base">{token.name}</h5>
 
                   <p className="text-muted-foreground mt-2 text-xs">
-                    Created on <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                    <Trans>Created on</Trans>{' '}
+                    <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
                   </p>
                   {token.expires ? (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      Expires on <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                      <Trans>Expires on</Trans>{' '}
+                      <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
                     </p>
                   ) : (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      Token doesn't have an expiration date
+                      <Trans>Token doesn't have an expiration date</Trans>
                     </p>
                   )}
                 </div>
 
                 <div>
                   <DeleteTokenDialog token={token}>
-                    <Button variant="destructive">Delete</Button>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
                   </DeleteTokenDialog>
                 </div>
               </div>

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

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
@@ -38,6 +40,7 @@ export type WebhookPageOptions = {
 };
 
 export default function WebhookPage({ params }: WebhookPageOptions) {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const router = useRouter();
 
@@ -68,16 +71,18 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
       });
 
       toast({
-        title: 'Webhook updated',
+        title: _(msg`Webhook updated`),
-        description: 'The webhook has been updated successfully.',
+        description: _(msg`The webhook has been updated successfully.`),
         duration: 5000,
       });
 
       router.refresh();
     } catch (err) {
       toast({
-        title: 'Failed to update webhook',
+        title: _(msg`Failed to update webhook`),
-        description: 'We encountered an error while updating the webhook. Please try again later.',
+        description: _(
+          msg`We encountered an error while updating the webhook. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -86,8 +91,8 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
   return (
     <div>
       <SettingsHeader
-        title="Edit webhook"
+        title={_(msg`Edit webhook`)}
-        subtitle="On this page, you can edit the webhook and its settings."
+        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
       />
 
       {isLoading && (
@@ -108,13 +113,15 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                 name="webhookUrl"
                 render={({ field }) => (
                   <FormItem className="flex-1">
-                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormLabel required>
+                      <Trans>Webhook URL</Trans>
+                    </FormLabel>
                     <FormControl>
                       <Input className="bg-background" {...field} />
                     </FormControl>
 
                     <FormDescription>
-                      The URL for Documenso to send webhook events to.
+                      <Trans>The URL for Documenso to send webhook events to.</Trans>
                     </FormDescription>
 
                     <FormMessage />
@@ -127,7 +134,9 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                 name="enabled"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Enabled</FormLabel>
+                    <FormLabel>
+                      <Trans>Enabled</Trans>
+                    </FormLabel>
 
                     <div>
                       <FormControl>
@@ -150,7 +159,9 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
               name="eventTriggers"
               render={({ field: { onChange, value } }) => (
                 <FormItem className="flex flex-col gap-2">
-                  <FormLabel required>Triggers</FormLabel>
+                  <FormLabel required>
+                    <Trans>Triggers</Trans>
+                  </FormLabel>
                   <FormControl>
                     <TriggerMultiSelectCombobox
                       listValues={value}
@@ -161,7 +172,7 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                   </FormControl>
 
                   <FormDescription>
-                    The events that will trigger a webhook to be sent to your URL.
+                    <Trans> The events that will trigger a webhook to be sent to your URL.</Trans>
                   </FormDescription>
 
                   <FormMessage />
@@ -174,14 +185,18 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
               name="secret"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Secret</FormLabel>
+                  <FormLabel>
+                    <Trans>Secret</Trans>
+                  </FormLabel>
                   <FormControl>
                     <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
                   </FormControl>
 
                   <FormDescription>
+                    <Trans>
                       A secret that will be sent to your URL so you can verify that the request has
                       been sent by Documenso.
+                    </Trans>
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -190,7 +205,7 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
 
             <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update webhook
+                <Trans>Update webhook</Trans>
               </Button>
             </div>
           </fieldset>

apps/web/src/app/(dashboard)/settings/webhooks/page.tsx

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { DateTime } from 'luxon';
 
@@ -17,13 +19,15 @@ import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/
 import { LocaleDate } from '~/components/formatter/locale-date';
 
 export default function WebhookPage() {
+  const { _ } = useLingui();
+
   const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
 
   return (
     <div>
       <SettingsHeader
-        title="Webhooks"
+        title={_(msg`Webhooks`)}
-        subtitle="On this page, you can create new Webhooks and manage the existing ones."
+        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
       >
         <CreateWebhookDialog />
       </SettingsHeader>
@@ -38,7 +42,9 @@ export default function WebhookPage() {
         // TODO: Perhaps add some illustrations here to make the page more engaging
         <div className="mb-4">
           <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>
               You have no webhooks yet. Your webhooks will be shown here once you create them.
+            </Trans>
           </p>
         </div>
       )}
@@ -66,29 +72,37 @@ export default function WebhookPage() {
                     </h5>
 
                     <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
-                      {webhook.enabled ? 'Enabled' : 'Disabled'}
+                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
                     </Badge>
                   </div>
 
                   <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
                       Listening to{' '}
                       {webhook.eventTriggers
                         .map((trigger) => toFriendlyWebhookEventName(trigger))
                         .join(', ')}
+                    </Trans>
                   </p>
 
                   <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
                       Created on{' '}
                       <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
+                    </Trans>
                   </p>
                 </div>
 
                 <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
                   <Button asChild variant="outline">
-                    <Link href={`/settings/webhooks/${webhook.id}`}>Edit</Link>
+                    <Link href={`/settings/webhooks/${webhook.id}`}>
+                      <Trans>Edit</Trans>
+                    </Link>
                   </Button>
                   <DeleteWebhookDialog webhook={webhook}>
-                    <Button variant="destructive">Delete</Button>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
                   </DeleteWebhookDialog>
                 </div>
               </div>

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -4,6 +4,9 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -42,7 +45,9 @@ export const EditTemplateForm = ({
   isEnterprise,
   templateRootPath,
 }: EditTemplateFormProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const team = useOptionalCurrentTeam();
@@ -68,18 +73,18 @@ export const EditTemplateForm = ({
 
   const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
     settings: {
-      title: 'General',
+      title: msg`General`,
-      description: 'Configure general settings for the template.',
+      description: msg`Configure general settings for the template.`,
       stepIndex: 1,
     },
     signers: {
-      title: 'Add Placeholders',
+      title: msg`Add Placeholders`,
-      description: 'Add all relevant placeholders for each recipient.',
+      description: msg`Add all relevant placeholders for each recipient.`,
       stepIndex: 2,
     },
     fields: {
-      title: 'Add Fields',
+      title: msg`Add Fields`,
-      description: 'Add all relevant fields for each recipient.',
+      description: msg`Add all relevant fields for each recipient.`,
       stepIndex: 3,
     },
   };
@@ -144,8 +149,8 @@ export const EditTemplateForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating the document settings.',
+        description: _(msg`An error occurred while updating the document settings.`),
         variant: 'destructive',
       });
     }
@@ -167,8 +172,8 @@ export const EditTemplateForm = ({
       setStep('fields');
     } catch (err) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }
@@ -190,8 +195,8 @@ export const EditTemplateForm = ({
       }
 
       toast({
-        title: 'Template saved',
+        title: _(msg`Template saved`),
-        description: 'Your templates has been saved successfully.',
+        description: _(msg`Your templates has been saved successfully.`),
         duration: 5000,
       });
 
@@ -201,8 +206,8 @@ export const EditTemplateForm = ({
       router.push(templateRootPath);
     } catch (err) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }

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

@@ -1,10 +1,14 @@
 import React from 'react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import type { TemplatePageViewProps } from './template-page-view';
 import { TemplatePageView } from './template-page-view';
 
 type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
 
 export default function TemplatePage({ params }: TemplatePageProps) {
+  setupI18nSSR();
+
   return <TemplatePageView params={params} />;
 }

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 
+import { Trans } from '@lingui/macro';
 import { LinkIcon } from 'lucide-react';
 
 import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
@@ -27,7 +28,12 @@ export const TemplateDirectLinkDialogWrapper = ({ template }: TemplatePageViewPr
         }}
       >
         <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
-        {template.directLink ? 'Manage' : 'Create'} Direct Link
+
+        {template.directLink ? (
+          <Trans>Manage Direct Link</Trans>
+        ) : (
+          <Trans>Create Direct Link</Trans>
+        )}
       </Button>
 
       <TemplateDirectLinkDialog

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@@ -56,7 +57,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
         <div>
           <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
             <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-            Templates
+            <Trans>Templates</Trans>
           </Link>
 
           <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>

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

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -58,7 +59,7 @@ export const DataTableActionDropdown = ({
         <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
           <Link href={`${templateRootPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </DropdownMenuItem>
 
@@ -67,18 +68,18 @@ export const DataTableActionDropdown = ({
           onClick={() => setDuplicateDialogOpen(true)}
         >
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
           <Share2Icon className="mr-2 h-4 w-4" />
-          Direct link
+          <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
         {!teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
-            Move to Team
+            <Trans>Move to Team</Trans>
           </DropdownMenuItem>
         )}
 
@@ -87,7 +88,7 @@ export const DataTableActionDropdown = ({
           onClick={() => setDeleteDialogOpen(true)}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          <Trans>Delete</Trans>
         </DropdownMenuItem>
       </DropdownMenuContent>
 

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

@@ -1,15 +1,18 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useMemo, useTransition } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+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 { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
@@ -45,47 +48,24 @@ export const TemplatesDataTable = ({
 
   const updateSearchParams = useUpdateSearchParams();
 
+  const { _ } = useLingui();
   const { remaining } = useLimits();
 
-  const onPaginationChange = (page: number, perPage: number) => {
+  const columns = useMemo(() => {
-    startTransition(() => {
+    return [
-      updateSearchParams({
-        page,
-        perPage,
-      });
-    });
-  };
-
-  return (
-    <div className="relative">
-      {remaining.documents === 0 && (
-        <Alert variant="warning" className="mb-4">
-          <AlertTriangle className="h-4 w-4" />
-          <AlertTitle>Document Limit Exceeded!</AlertTitle>
-          <AlertDescription className="mt-2">
-            You have reached your document limit.{' '}
-            <Link className="underline underline-offset-4" href="/settings/billing">
-              Upgrade your account to continue!
-            </Link>
-          </AlertDescription>
-        </Alert>
-      )}
-
-      <DataTable
-        columns={[
       {
-            header: 'Created',
+        header: _(msg`Created`),
         accessorKey: 'createdAt',
         cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
       },
       {
-            header: 'Title',
+        header: _(msg`Title`),
         cell: ({ row }) => <DataTableTitle row={row.original} />,
       },
       {
         header: () => (
           <div className="flex flex-row items-center">
-                Type
+            <Trans>Type</Trans>
             <Tooltip>
               <TooltipTrigger>
                 <InfoIcon className="mx-2 h-4 w-4" />
@@ -96,36 +76,45 @@ export const TemplatesDataTable = ({
                   <li>
                     <h2 className="mb-2 flex flex-row items-center font-semibold">
                       <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
-                          Public
+                      <Trans>Public</Trans>
                     </h2>
 
                     <p>
-                          Public templates are connected to your public profile. Any modifications
+                      <Trans>
-                          to public templates will also appear in your public profile.
+                        Public templates are connected to your public profile. Any modifications to
+                        public templates will also appear in your public profile.
+                      </Trans>
                     </p>
                   </li>
                   <li>
                     <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
                       <Link2Icon className="mr-1 h-3 w-3" />
-                          direct link
+                      <Trans>direct link</Trans>
                     </div>
 
                     <p>
-                          Direct link templates contain one dynamic recipient placeholder. Anyone
+                      <Trans>
-                          with access to this link can sign the document, and it will then appear on
+                        Direct link templates contain one dynamic recipient placeholder. Anyone with
-                          your documents page.
+                        access to this link can sign the document, and it will then appear on your
+                        documents page.
+                      </Trans>
                     </p>
                   </li>
                   <li>
                     <h2 className="mb-2 flex flex-row items-center font-semibold">
                       <LockIcon className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-300" />
-                          {teamId ? 'Team Only' : 'Private'}
+                      {teamId ? <Trans>Team Only</Trans> : <Trans>Private</Trans>}
                     </h2>
 
                     <p>
-                          {teamId
+                      {teamId ? (
-                            ? 'Team only templates are not linked anywhere and are visible only to your team.'
+                        <Trans>
-                            : 'Private templates can only be modified and viewed by you.'}
+                          Team only templates are not linked anywhere and are visible only to your
+                          team.
+                        </Trans>
+                      ) : (
+                        <Trans>Private templates can only be modified and viewed by you.</Trans>
+                      )}
                     </p>
                   </li>
                 </ul>
@@ -149,7 +138,7 @@ export const TemplatesDataTable = ({
         ),
       },
       {
-            header: 'Actions',
+        header: _(msg`Actions`),
         accessorKey: 'actions',
         cell: ({ row }) => {
           return (
@@ -169,7 +158,39 @@ export const TemplatesDataTable = ({
           );
         },
       },
-        ]}
+    ] satisfies DataTableColumnDef<(typeof templates)[number]>[];
+  }, [documentRootPath, teamId, templateRootPath]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  return (
+    <div className="relative">
+      {remaining.documents === 0 && (
+        <Alert variant="warning" className="mb-4">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>
+            <Trans>Document Limit Exceeded!</Trans>
+          </AlertTitle>
+          <AlertDescription className="mt-2">
+            <Trans>
+              You have reached your document limit.{' '}
+              <Link className="underline underline-offset-4" href="/settings/billing">
+                Upgrade your account to continue!
+              </Link>
+            </Trans>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <DataTable
+        columns={columns}
         data={templates}
         perPage={perPage}
         currentPage={page}

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -27,6 +30,7 @@ export const DeleteTemplateDialog = ({
 }: DeleteTemplateDialogProps) => {
   const router = useRouter();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTemplate, isLoading } = trpcReact.template.deleteTemplate.useMutation({
@@ -34,8 +38,8 @@ export const DeleteTemplateDialog = ({
       router.refresh();
 
       toast({
-        title: 'Template deleted',
+        title: _(msg`Template deleted`),
-        description: 'Your template has been successfully deleted.',
+        description: _(msg`Your template has been successfully deleted.`),
         duration: 5000,
       });
 
@@ -43,8 +47,8 @@ export const DeleteTemplateDialog = ({
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This template could not be deleted at this time. Please try again.',
+        description: _(msg`This template could not be deleted at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -55,11 +59,15 @@ export const DeleteTemplateDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to delete this template?</DialogTitle>
+          <DialogTitle>
+            <Trans>Do you want to delete this template?</Trans>
+          </DialogTitle>
 
           <DialogDescription>
+            <Trans>
               Please note that this action is irreversible. Once confirmed, your template will be
               permanently deleted.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -70,7 +78,7 @@ export const DeleteTemplateDialog = ({
             disabled={isLoading}
             onClick={() => onOpenChange(false)}
           >
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -79,7 +87,7 @@ export const DeleteTemplateDialog = ({
             loading={isLoading}
             onClick={async () => deleteTemplate({ id, teamId })}
           >
-            Delete
+            <Trans>Delete</Trans>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/duplicate-template-dialog.tsx

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -27,6 +30,7 @@ export const DuplicateTemplateDialog = ({
 }: DuplicateTemplateDialogProps) => {
   const router = useRouter();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: duplicateTemplate, isLoading } =
@@ -35,8 +39,8 @@ export const DuplicateTemplateDialog = ({
         router.refresh();
 
         toast({
-          title: 'Template duplicated',
+          title: _(msg`Template duplicated`),
-          description: 'Your template has been duplicated successfully.',
+          description: _(msg`Your template has been duplicated successfully.`),
           duration: 5000,
         });
 
@@ -44,8 +48,8 @@ export const DuplicateTemplateDialog = ({
       },
       onError: () => {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'An error occurred while duplicating template.',
+          description: _(msg`An error occurred while duplicating template.`),
           variant: 'destructive',
         });
       },
@@ -55,9 +59,13 @@ export const DuplicateTemplateDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to duplicate this template?</DialogTitle>
+          <DialogTitle>
+            <Trans>Do you want to duplicate this template?</Trans>
+          </DialogTitle>
 
-          <DialogDescription className="pt-2">Your template will be duplicated.</DialogDescription>
+          <DialogDescription className="pt-2">
+            <Trans>Your template will be duplicated.</Trans>
+          </DialogDescription>
         </DialogHeader>
 
         <DialogFooter>
@@ -67,7 +75,7 @@ export const DuplicateTemplateDialog = ({
             variant="secondary"
             onClick={() => onOpenChange(false)}
           >
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -80,7 +88,7 @@ export const DuplicateTemplateDialog = ({
               })
             }
           >
-            Duplicate
+            <Trans>Duplicate</Trans>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/empty-state.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import { Bird } from 'lucide-react';
 
 export const EmptyTemplateState = () => {
@@ -6,10 +7,14 @@ export const EmptyTemplateState = () => {
       <Bird className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">
-        <h3 className="text-lg font-semibold">We're all empty</h3>
+        <h3 className="text-lg font-semibold">
+          <Trans>We're all empty</Trans>
+        </h3>
 
         <p className="mt-2 max-w-[50ch]">
+          <Trans>
             You have not yet created any templates. To create a template please upload one.
+          </Trans>
         </p>
       </div>
     </div>

apps/web/src/app/(dashboard)/templates/move-template-dialog.tsx

@@ -2,6 +2,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -31,7 +34,10 @@ type MoveTemplateDialogProps = {
 
 export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTemplateDialogProps) => {
   const router = useRouter();
+
   const { toast } = useToast();
+  const { _ } = useLingui();
+
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
@@ -39,16 +45,16 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
     onSuccess: () => {
       router.refresh();
       toast({
-        title: 'Template moved',
+        title: _(msg`Template moved`),
-        description: 'The template has been successfully moved to the selected team.',
+        description: _(msg`The template has been successfully moved to the selected team.`),
         duration: 5000,
       });
       onOpenChange(false);
     },
     onError: (error) => {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: error.message || 'An error occurred while moving the template.',
+        description: error.message || _(msg`An error occurred while moving the template.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -67,20 +73,22 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Move Template to Team</DialogTitle>
+          <DialogTitle>
+            <Trans>Move Template to Team</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Select a team to move this template to. This action cannot be undone.
+            <Trans>Select a team to move this template to. This action cannot be undone.</Trans>
           </DialogDescription>
         </DialogHeader>
 
         <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
           <SelectTrigger>
-            <SelectValue placeholder="Select a team" />
+            <SelectValue placeholder={_(msg`Select a team`)} />
           </SelectTrigger>
           <SelectContent>
             {isLoadingTeams ? (
               <SelectItem value="loading" disabled>
-                Loading teams...
+                <Trans>Loading teams...</Trans>
               </SelectItem>
             ) : (
               teams?.map((team) => (
@@ -108,10 +116,10 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
 
         <DialogFooter>
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
           <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
-            {isLoading ? 'Moving...' : 'Move'}
+            {isLoading ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -4,6 +4,8 @@ import React, { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { FilePlus, Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -34,6 +36,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
@@ -61,9 +64,10 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       });
 
       toast({
-        title: 'Template document uploaded',
+        title: _(msg`Template document uploaded`),
-        description:
+        description: _(
-          'Your document has been uploaded successfully. You will be redirected to the template page.',
+          msg`Your document has been uploaded successfully. You will be redirected to the template page.`,
+        ),
         duration: 5000,
       });
 
@@ -72,8 +76,8 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       router.push(`${templateRootPath}/${id}`);
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Please try again later.',
+        description: _(msg`Please try again later.`),
         variant: 'destructive',
       });
 
@@ -89,15 +93,20 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       <DialogTrigger asChild>
         <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-          New Template
+          <Trans>New Template</Trans>
         </Button>
       </DialogTrigger>
 
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
-          <DialogTitle>New Template</DialogTitle>
+          <DialogTitle>
+            <Trans>New Template</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Templates allow you to quickly generate documents with pre-filled recipients and fields.
+            <Trans>
+              Templates allow you to quickly generate documents with pre-filled recipients and
+              fields.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -114,7 +123,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
         <DialogFooter>
           <DialogClose asChild>
             <Button type="button" variant="secondary" disabled={isUploadingFile}>
-              Close
+              <Trans>Close</Trans>
             </Button>
           </DialogClose>
         </DialogFooter>

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { Metadata } from 'next';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { TemplatesPageView } from './templates-page-view';
 import type { TemplatesPageViewProps } from './templates-page-view';
 
@@ -14,5 +16,7 @@ export const metadata: Metadata = {
 };
 
 export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  setupI18nSSR();
+
   return <TemplatesPageView searchParams={searchParams} />;
 }