From 35acf059975e40449d6d12649bd4b18206d56d84 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Sat, 9 Sep 2023 04:38:37 +0000
Subject: [PATCH 1/8] feat: add devcontainer

---
 .devcontainer/devcontainer.json | 20 ++++++++++++++++++++
 .devcontainer/on-create.sh      | 21 +++++++++++++++++++++
 package.json                    |  2 +-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 .devcontainer/devcontainer.json
 create mode 100755 .devcontainer/on-create.sh

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 000000000..59a318b7f
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,20 @@
+{
+	"name": "Documenso",
+	"image": "mcr.microsoft.com/devcontainers/base:bullseye",
+	"features": {
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {
+			"version": "latest",
+			"enableNonRootDocker": "true",
+			"moby": "true"
+		},
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+  "onCreateCommand": "./.devcontainer/on-create.sh",
+	"forwardPorts": [
+    3000,
+    54320,
+    9000,
+    2500,
+    1100
+  ]
+}
diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh
new file mode 100755
index 000000000..2d823e864
--- /dev/null
+++ b/.devcontainer/on-create.sh
@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+# Start the database and mailserver
+docker compose -f ./docker/compose-without-app.yml up -d
+
+# Install dependencies
+npm install
+
+# Copy the env file
+cp .env.example .env
+
+# Source the env file, export the variables
+set -a
+source .env
+set +a
+
+# Run the migrations
+npm run -w @documenso/prisma prisma:migrate-dev
+
+# Start the app
+npm run dev
diff --git a/package.json b/package.json
index b66c194a2..3b2fbf6ca 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev --filter=@documenso/{web,marketing}",
+    "dev": "turbo run dev --filter=@documenso/web --filter=@documenso/marketing",
     "start": "cd apps && cd web && next start",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,mdx}\"",

From abc91f7eaccfe7459518d7c2c9f118e1fb55dacf Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Sat, 9 Sep 2023 15:44:10 +1000
Subject: [PATCH 2/8] fix: update devcontainer

---
 .devcontainer/devcontainer.json | 1 +
 .devcontainer/on-create.sh      | 3 ---
 .devcontainer/post-start.sh     | 3 +++
 3 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100755 .devcontainer/post-start.sh

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 59a318b7f..82c6d1e2b 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -10,6 +10,7 @@
 		"ghcr.io/devcontainers/features/node:1": {}
 	},
   "onCreateCommand": "./.devcontainer/on-create.sh",
+  "postStartCommand": "./.devcontainer/post-start.sh",
 	"forwardPorts": [
     3000,
     54320,
diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh
index 2d823e864..a66491ef7 100755
--- a/.devcontainer/on-create.sh
+++ b/.devcontainer/on-create.sh
@@ -16,6 +16,3 @@ set +a
 
 # Run the migrations
 npm run -w @documenso/prisma prisma:migrate-dev
-
-# Start the app
-npm run dev
diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh
new file mode 100755
index 000000000..80d19dc7c
--- /dev/null
+++ b/.devcontainer/post-start.sh
@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+npm run dev

From 933076fa3f32641e2a75969dcd6f1ea7f020a1c4 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Sat, 9 Sep 2023 15:49:40 +1000
Subject: [PATCH 3/8] fix: update devcontainer

---
 .devcontainer/devcontainer.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 82c6d1e2b..59a318b7f 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -10,7 +10,6 @@
 		"ghcr.io/devcontainers/features/node:1": {}
 	},
   "onCreateCommand": "./.devcontainer/on-create.sh",
-  "postStartCommand": "./.devcontainer/post-start.sh",
 	"forwardPorts": [
     3000,
     54320,

From 9186cb4d7b220eb9e65c307fe0f7709286d0b182 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 9 Sep 2023 10:42:03 +0000
Subject: [PATCH 4/8] fix: hide popover when user selects a recipients

---
 .../primitives/document-flow/add-fields.tsx   | 83 ++++++++++---------
 packages/ui/primitives/popover.tsx            |  4 +-
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index c56e91b49..62daf803b 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -22,7 +22,12 @@ import {
   CommandInput,
   CommandItem,
 } from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TAddFieldsFormSchema } from './add-fields.types';
@@ -324,7 +329,7 @@ export const AddFieldsFormPartial = ({
                 >
                   {selectedSigner?.email && (
                     <span className="flex-1 truncate text-left">
-                      {selectedSigner?.email} ({selectedSigner?.email})
+                      {selectedSigner?.name} ({selectedSigner?.email})
                     </span>
                   )}
 
@@ -345,45 +350,49 @@ export const AddFieldsFormPartial = ({
                     {recipients.map((recipient, index) => (
                       <CommandItem
                         key={index}
-                        className={cn({
-                          'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                        })}
+                        className="p-0"
                         onSelect={() => setSelectedSigner(recipient)}
                       >
-                        {recipient.sendStatus !== SendStatus.SENT ? (
-                          <Check
-                            aria-hidden={recipient !== selectedSigner}
-                            className={cn('mr-2 h-4 w-4 flex-shrink-0', {
-                              'opacity-0': recipient !== selectedSigner,
-                              'opacity-100': recipient === selectedSigner,
-                            })}
-                          />
-                        ) : (
-                          <Tooltip>
-                            <TooltipTrigger>
-                              <Info className="mr-2 h-4 w-4" />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-xs">
-                              This document has already been sent to this recipient. You can no
-                              longer edit this recipient.
-                            </TooltipContent>
-                          </Tooltip>
-                        )}
+                        <PopoverClose
+                          className={cn('flex w-full px-1 py-2', {
+                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                          })}
+                        >
+                          {recipient.sendStatus !== SendStatus.SENT ? (
+                            <Check
+                              aria-hidden={recipient !== selectedSigner}
+                              className={cn('mr-2 h-4 w-4 flex-shrink-0', {
+                                'opacity-0': recipient !== selectedSigner,
+                                'opacity-100': recipient === selectedSigner,
+                              })}
+                            />
+                          ) : (
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <Info className="mr-2 h-4 w-4" />
+                              </TooltipTrigger>
+                              <TooltipContent className="max-w-xs">
+                                This document has already been sent to this recipient. You can no
+                                longer edit this recipient.
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
 
-                        {recipient.name && (
-                          <span
-                            className="truncate"
-                            title={`${recipient.name} (${recipient.email})`}
-                          >
-                            {recipient.name} ({recipient.email})
-                          </span>
-                        )}
+                          {recipient.name && (
+                            <span
+                              className="truncate"
+                              title={`${recipient.name} (${recipient.email})`}
+                            >
+                              {recipient.name} ({recipient.email})
+                            </span>
+                          )}
 
-                        {!recipient.name && (
-                          <span className="truncate" title={recipient.email}>
-                            {recipient.email}
-                          </span>
-                        )}
+                          {!recipient.name && (
+                            <span className="truncate" title={recipient.email}>
+                              {recipient.email}
+                            </span>
+                          )}
+                        </PopoverClose>
                       </CommandItem>
                     ))}
                   </CommandGroup>
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index e84f6cc6d..640b3087e 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -10,6 +10,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -30,4 +32,4 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

From f8a193c0f8906cf9c042ed24b06c6a15bc9bf717 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 9 Sep 2023 10:56:45 +0000
Subject: [PATCH 5/8] refactor: replace whole implementation with a state

---
 .../primitives/document-flow/add-fields.tsx   | 89 +++++++++----------
 packages/ui/primitives/popover.tsx            |  4 +-
 2 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 62daf803b..5de43c411 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -22,12 +22,7 @@ import {
   CommandInput,
   CommandItem,
 } from '@documenso/ui/primitives/command';
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-} from '@documenso/ui/primitives/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TAddFieldsFormSchema } from './add-fields.types';
@@ -107,6 +102,7 @@ export const AddFieldsFormPartial = ({
 
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
   const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
+  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
   const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
 
@@ -319,7 +315,7 @@ export const AddFieldsFormPartial = ({
           ))}
 
           {!hideRecipients && (
-            <Popover>
+            <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
               <PopoverTrigger asChild>
                 <Button
                   type="button"
@@ -350,49 +346,48 @@ export const AddFieldsFormPartial = ({
                     {recipients.map((recipient, index) => (
                       <CommandItem
                         key={index}
-                        className="p-0"
-                        onSelect={() => setSelectedSigner(recipient)}
+                        className={cn({
+                          'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                        })}
+                        onSelect={() => {
+                          setSelectedSigner(recipient);
+                          setShowRecipientsSelector(false);
+                        }}
                       >
-                        <PopoverClose
-                          className={cn('flex w-full px-1 py-2', {
-                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                          })}
-                        >
-                          {recipient.sendStatus !== SendStatus.SENT ? (
-                            <Check
-                              aria-hidden={recipient !== selectedSigner}
-                              className={cn('mr-2 h-4 w-4 flex-shrink-0', {
-                                'opacity-0': recipient !== selectedSigner,
-                                'opacity-100': recipient === selectedSigner,
-                              })}
-                            />
-                          ) : (
-                            <Tooltip>
-                              <TooltipTrigger>
-                                <Info className="mr-2 h-4 w-4" />
-                              </TooltipTrigger>
-                              <TooltipContent className="max-w-xs">
-                                This document has already been sent to this recipient. You can no
-                                longer edit this recipient.
-                              </TooltipContent>
-                            </Tooltip>
-                          )}
+                        {recipient.sendStatus !== SendStatus.SENT ? (
+                          <Check
+                            aria-hidden={recipient !== selectedSigner}
+                            className={cn('mr-2 h-4 w-4 flex-shrink-0', {
+                              'opacity-0': recipient !== selectedSigner,
+                              'opacity-100': recipient === selectedSigner,
+                            })}
+                          />
+                        ) : (
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <Info className="mr-2 h-4 w-4" />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-xs">
+                              This document has already been sent to this recipient. You can no
+                              longer edit this recipient.
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
 
-                          {recipient.name && (
-                            <span
-                              className="truncate"
-                              title={`${recipient.name} (${recipient.email})`}
-                            >
-                              {recipient.name} ({recipient.email})
-                            </span>
-                          )}
+                        {recipient.name && (
+                          <span
+                            className="truncate"
+                            title={`${recipient.name} (${recipient.email})`}
+                          >
+                            {recipient.name} ({recipient.email})
+                          </span>
+                        )}
 
-                          {!recipient.name && (
-                            <span className="truncate" title={recipient.email}>
-                              {recipient.email}
-                            </span>
-                          )}
-                        </PopoverClose>
+                        {!recipient.name && (
+                          <span className="truncate" title={recipient.email}>
+                            {recipient.email}
+                          </span>
+                        )}
                       </CommandItem>
                     ))}
                   </CommandGroup>
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index 640b3087e..e84f6cc6d 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -10,8 +10,6 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverClose = PopoverPrimitive.Close;
-
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -32,4 +30,4 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
+export { Popover, PopoverTrigger, PopoverContent };

From 24036b0f24afecdb56c659753c1a3fee7fb8040f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?fl=C5=8D?= <florent.merian@gmail.com>
Date: Tue, 22 Aug 2023 08:53:21 +0200
Subject: [PATCH 6/8] fix typo

---
 apps/marketing/content/blog/next.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/content/blog/next.mdx b/apps/marketing/content/blog/next.mdx
index 4f846a0a7..c241cf3eb 100644
--- a/apps/marketing/content/blog/next.mdx
+++ b/apps/marketing/content/blog/next.mdx
@@ -12,7 +12,7 @@ tags:
 
 Since we launched [Documenso 0.9 on Product Hunt](https://producthunt.com/products/documenso#documenso) last May, the team's been hard at work behind the scenes to ramp up development and design to deliver an excellent next version.
 
-Last week, Lucas shared the reasoning how [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
+Last week, Lucas shared the reasoning on [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
 
 Today, I'm pleased to share with you a preview of the next Documenso.
 

From db3f75c42f244734786a87b0721abba70f3f2d9f Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Tue, 12 Sep 2023 10:37:47 +1000
Subject: [PATCH 7/8] fix: data table links for recipients

---
 .../documents/data-table-title.tsx            | 56 +++++++++++++++++++
 .../app/(dashboard)/documents/data-table.tsx  | 19 +++----
 2 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 apps/web/src/app/(dashboard)/documents/data-table-title.tsx

diff --git a/apps/web/src/app/(dashboard)/documents/data-table-title.tsx b/apps/web/src/app/(dashboard)/documents/data-table-title.tsx
new file mode 100644
index 000000000..c04f9f13d
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/data-table-title.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, Recipient, User } from '@documenso/prisma/client';
+
+export type DataTableTitleProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableTitle = ({ row }: DataTableTitleProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  const isRecipient = !!recipient;
+
+  return match({
+    isOwner,
+    isRecipient,
+  })
+    .with({ isOwner: true }, () => (
+      <Link
+        href={`/documents/${row.id}`}
+        title={row.title}
+        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+      >
+        {row.title}
+      </Link>
+    ))
+    .with({ isRecipient: true }, () => (
+      <Link
+        href={`/sign/${recipient?.token}`}
+        title={row.title}
+        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+      >
+        {row.title}
+      </Link>
+    ))
+    .otherwise(() => (
+      <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
+        {row.title}
+      </span>
+    ));
+};
diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx
index 1d6c08e73..245734a8e 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@@ -2,9 +2,8 @@
 
 import { useTransition } from 'react';
 
-import Link from 'next/link';
-
 import { Loader } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
@@ -18,6 +17,7 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 
 import { DataTableActionButton } from './data-table-action-button';
 import { DataTableActionDropdown } from './data-table-action-dropdown';
+import { DataTableTitle } from './data-table-title';
 
 export type DocumentsDataTableProps = {
   results: FindResultSet<
@@ -29,6 +29,7 @@ export type DocumentsDataTableProps = {
 };
 
 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+  const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
 
   const updateSearchParams = useUpdateSearchParams();
@@ -42,6 +43,10 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
     });
   };
 
+  if (!session) {
+    return null;
+  }
+
   return (
     <div className="relative">
       <DataTable
@@ -52,15 +57,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           },
           {
             header: 'Title',
-            cell: ({ row }) => (
-              <Link
-                href={`/documents/${row.original.id}`}
-                title={row.original.title}
-                className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
-              >
-                {row.original.title}
-              </Link>
-            ),
+            cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
           {
             header: 'Recipient',

From 24a2e9e6d4fb254a03a6f300996b3518678e68ee Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Tue, 12 Sep 2023 14:29:27 +1000
Subject: [PATCH 8/8] feat: update document table layout (#371)

* feat: update document table layout

- Removed dashboard page
- Removed redundant ID column
- Moved date to first column
- Added estimated locales for SSR dates
---
 .../src/app/(dashboard)/dashboard/page.tsx    | 124 ------------------
 .../documents/[id]/edit-document.tsx          |   2 +-
 .../app/(dashboard)/documents/data-table.tsx  |  12 +-
 .../src/app/(dashboard)/documents/page.tsx    |   3 +-
 .../upload-document.tsx                       |   0
 apps/web/src/app/layout.tsx                   |  26 ++--
 .../src/components/formatter/locale-date.tsx  |  23 +++-
 apps/web/src/components/forms/signin.tsx      |  16 +--
 packages/lib/client-only/providers/locale.tsx |  37 ++++++
 .../ui/primitives/data-table-pagination.tsx   |  33 ++++-
 10 files changed, 117 insertions(+), 159 deletions(-)
 delete mode 100644 apps/web/src/app/(dashboard)/dashboard/page.tsx
 rename apps/web/src/app/(dashboard)/{dashboard => documents}/upload-document.tsx (100%)
 create mode 100644 packages/lib/client-only/providers/locale.tsx

diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
deleted file mode 100644
index 77b18b98c..000000000
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import Link from 'next/link';
-
-import { Clock, File, FileCheck } from 'lucide-react';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
-import { getStats } from '@documenso/lib/server-only/document/get-stats';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@documenso/ui/primitives/table';
-
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
-import { DocumentStatus } from '~/components/formatter/document-status';
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-import { UploadDocument } from './upload-document';
-
-const CARD_DATA = [
-  {
-    icon: FileCheck,
-    title: 'Completed',
-    status: InternalDocumentStatus.COMPLETED,
-  },
-  {
-    icon: File,
-    title: 'Drafts',
-    status: InternalDocumentStatus.DRAFT,
-  },
-  {
-    icon: Clock,
-    title: 'Pending',
-    status: InternalDocumentStatus.PENDING,
-  },
-];
-
-export default async function DashboardPage() {
-  const user = await getRequiredServerComponentSession();
-
-  const [stats, results] = await Promise.all([
-    getStats({
-      user,
-    }),
-    findDocuments({
-      userId: user.id,
-      perPage: 10,
-    }),
-  ]);
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="text-4xl font-semibold">Dashboard</h1>
-
-      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
-        {CARD_DATA.map((card) => (
-          <Link key={card.status} href={`/documents?status=${card.status}`}>
-            <CardMetric icon={card.icon} title={card.title} value={stats[card.status]} />
-          </Link>
-        ))}
-      </div>
-
-      <div className="mt-12">
-        <UploadDocument />
-
-        <h2 className="mt-8 text-2xl font-semibold">Recent Documents</h2>
-
-        <div className="border-border mt-8 overflow-x-auto rounded-lg border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[100px]">ID</TableHead>
-                <TableHead>Title</TableHead>
-                <TableHead>Reciepient</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="text-right">Created</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {results.data.map((document) => {
-                return (
-                  <TableRow key={document.id}>
-                    <TableCell className="font-medium">{document.id}</TableCell>
-                    <TableCell>
-                      <Link
-                        href={`/documents/${document.id}`}
-                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        {document.title}
-                      </Link>
-                    </TableCell>
-
-                    <TableCell>
-                      <StackAvatarsWithTooltip recipients={document.Recipient} />
-                    </TableCell>
-
-                    <TableCell>
-                      <DocumentStatus status={document.status} />
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <LocaleDate date={document.created} />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-              {results.data.length === 0 && (
-                <TableRow>
-                  <TableCell colSpan={4} className="h-24 text-center">
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
index 7ed28feca..ba134ac58 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -136,7 +136,7 @@ export const EditDocumentForm = ({
         duration: 5000,
       });
 
-      router.push('/dashboard');
+      router.push('/documents');
     } catch (err) {
       console.error(err);
 
diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx
index 245734a8e..b8c735b59 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@@ -52,8 +52,9 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
       <DataTable
         columns={[
           {
-            header: 'ID',
-            accessorKey: 'id',
+            header: 'Created',
+            accessorKey: 'created',
+            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
           },
           {
             header: 'Title',
@@ -71,11 +72,6 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
           },
-          {
-            header: 'Created',
-            accessorKey: 'created',
-            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
-          },
           {
             header: 'Actions',
             cell: ({ row }) => (
@@ -92,7 +88,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
       >
-        {(table) => <DataTablePagination table={table} />}
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
 
       {isPending && (
diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 4ea55936b..d1f558806 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -11,8 +11,8 @@ import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-
 import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
-import { UploadDocument } from '../dashboard/upload-document';
 import { DocumentsDataTable } from './data-table';
+import { UploadDocument } from './upload-document';
 
 export type DocumentsPageProps = {
   searchParams?: {
@@ -81,6 +81,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                   {value !== ExtendedDocumentStatus.ALL && (
                     <span className="ml-1 hidden opacity-50 md:inline-block">
                       {Math.min(stats[value], 99)}
+                      {stats[value] > 99 && '+'}
                     </span>
                   )}
                 </Link>
diff --git a/apps/web/src/app/(dashboard)/dashboard/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
similarity index 100%
rename from apps/web/src/app/(dashboard)/dashboard/upload-document.tsx
rename to apps/web/src/app/(dashboard)/documents/upload-document.tsx
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 1d1e056ae..2ce8744d4 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,6 +2,8 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
+import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
@@ -45,6 +47,8 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getServerComponentAllFlags();
 
+  const locale = getLocale();
+
   return (
     <html
       lang="en"
@@ -63,16 +67,18 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       </Suspense>
 
       <body>
-        <FeatureFlagProvider initialFlags={flags}>
-          <PlausibleProvider>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <TooltipProvider>
-                <TrpcProvider>{children}</TrpcProvider>
-              </TooltipProvider>
-            </ThemeProvider>
-          </PlausibleProvider>
-          <Toaster />
-        </FeatureFlagProvider>
+        <LocaleProvider locale={locale}>
+          <FeatureFlagProvider initialFlags={flags}>
+            <PlausibleProvider>
+              <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                <TooltipProvider>
+                  <TrpcProvider>{children}</TrpcProvider>
+                </TooltipProvider>
+              </ThemeProvider>
+            </PlausibleProvider>
+            <Toaster />
+          </FeatureFlagProvider>
+        </LocaleProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/components/formatter/locale-date.tsx b/apps/web/src/components/formatter/locale-date.tsx
index 837c6aa38..ecefb1e3b 100644
--- a/apps/web/src/components/formatter/locale-date.tsx
+++ b/apps/web/src/components/formatter/locale-date.tsx
@@ -2,16 +2,31 @@
 
 import { HTMLAttributes, useEffect, useState } from 'react';
 
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+
+import { useLocale } from '@documenso/lib/client-only/providers/locale';
+
 export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
   date: string | number | Date;
+  format?: DateTimeFormatOptions;
 };
 
-export const LocaleDate = ({ className, date, ...props }: LocaleDateProps) => {
-  const [localeDate, setLocaleDate] = useState(() => new Date(date).toISOString());
+/**
+ * Formats the date based on the user locale.
+ *
+ * Will use the estimated locale from the user headers on SSR, then will use
+ * the client browser locale once mounted.
+ */
+export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
+  const { locale } = useLocale();
+
+  const [localeDate, setLocaleDate] = useState(() =>
+    DateTime.fromJSDate(new Date(date)).setLocale(locale).toLocaleString(format),
+  );
 
   useEffect(() => {
-    setLocaleDate(new Date(date).toLocaleString());
-  }, [date]);
+    setLocaleDate(DateTime.fromJSDate(new Date(date)).toLocaleString(format));
+  }, [date, format]);
 
   return (
     <span className={className} {...props}>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 5e44146ea..d9d727afc 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -18,13 +18,15 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const ErrorMessages = {
+const ERROR_MESSAGES = {
   [ErrorCode.CREDENTIALS_NOT_FOUND]: 'The email or password provided is incorrect',
   [ErrorCode.INCORRECT_EMAIL_PASSWORD]: 'The email or password provided is incorrect',
   [ErrorCode.USER_MISSING_PASSWORD]:
     'This account appears to be using a social login method, please sign in using that method',
 };
 
+const LOGIN_REDIRECT_PATH = '/documents';
+
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
@@ -37,9 +39,10 @@ export type SignInFormProps = {
 };
 
 export const SignInForm = ({ className }: SignInFormProps) => {
-  const { toast } = useToast();
   const searchParams = useSearchParams();
 
+  const { toast } = useToast();
+
   const {
     register,
     handleSubmit,
@@ -61,7 +64,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       timeout = setTimeout(() => {
         toast({
           variant: 'destructive',
-          description: ErrorMessages[errorCode] ?? 'An unknown error occurred',
+          description: ERROR_MESSAGES[errorCode] ?? 'An unknown error occurred',
         });
       }, 0);
     }
@@ -78,12 +81,10 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/documents',
+        callbackUrl: LOGIN_REDIRECT_PATH,
       }).catch((err) => {
         console.error(err);
       });
-
-      // throw new Error('Not implemented');
     } catch (err) {
       toast({
         title: 'An unknown error occurred',
@@ -95,8 +96,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
 
   const onSignInWithGoogleClick = async () => {
     try {
-      await signIn('google', { callbackUrl: '/dashboard' });
-      // throw new Error('Not implemented');
+      await signIn('google', { callbackUrl: LOGIN_REDIRECT_PATH });
     } catch (err) {
       toast({
         title: 'An unknown error occurred',
diff --git a/packages/lib/client-only/providers/locale.tsx b/packages/lib/client-only/providers/locale.tsx
new file mode 100644
index 000000000..ff8b03e5a
--- /dev/null
+++ b/packages/lib/client-only/providers/locale.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export type LocaleContextValue = {
+  locale: string;
+};
+
+export const LocaleContext = createContext<LocaleContextValue | null>(null);
+
+export const useLocale = () => {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error('useLocale must be used within a LocaleProvider');
+  }
+
+  return context;
+};
+
+export function LocaleProvider({
+  children,
+  locale,
+}: {
+  children: React.ReactNode;
+  locale: string;
+}) {
+  return (
+    <LocaleContext.Provider
+      value={{
+        locale: locale,
+      }}
+    >
+      {children}
+    </LocaleContext.Provider>
+  );
+}
diff --git a/packages/ui/primitives/data-table-pagination.tsx b/packages/ui/primitives/data-table-pagination.tsx
index 0ff27ae11..8147c92fb 100644
--- a/packages/ui/primitives/data-table-pagination.tsx
+++ b/packages/ui/primitives/data-table-pagination.tsx
@@ -1,19 +1,46 @@
 import { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { match } from 'ts-pattern';
 
 import { Button } from './button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
+
+  /**
+   * The type of information to show on the left hand side of the pagination.
+   *
+   * Defaults to 'VisibleCount'.
+   */
+  additionalInformation?: 'SelectedCount' | 'VisibleCount' | 'None';
 }
 
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+export function DataTablePagination<TData>({
+  table,
+  additionalInformation = 'VisibleCount',
+}: DataTablePaginationProps<TData>) {
   return (
     <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
       <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {match(additionalInformation)
+          .with('SelectedCount', () => (
+            <span>
+              {table.getFilteredSelectedRowModel().rows.length} of{' '}
+              {table.getFilteredRowModel().rows.length} row(s) selected.
+            </span>
+          ))
+          .with('VisibleCount', () => {
+            const visibleRows = table.getFilteredRowModel().rows.length;
+
+            return (
+              <span>
+                Showing {visibleRows} result{visibleRows > 1 && 's'}.
+              </span>
+            );
+          })
+          .with('None', () => null)
+          .exhaustive()}
       </div>
 
       <div className="flex items-center gap-x-2">