Merge pull request #296 from documenso/feat/inbox

feat: add inbox
2025-11-10 04:22:32 +10:00 · 2023-08-30 10:27:32 +10:00
parent 068aef665d 8c4120f0a2
commit 1888ee97e6
28 changed files with 815 additions and 284 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -21,6 +21,7 @@
    "formidable": "^2.1.1",
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.214.0",
+    "luxon": "^3.4.0",
    "micro": "^10.0.1",
    "nanoid": "^4.0.2",
    "next": "13.4.12",
@ -43,6 +44,7 @@
  },
  "devDependencies": {
    "@types/formidable": "^2.0.6",
+    "@types/luxon": "^3.3.1",
    "@types/node": "20.1.0",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7"
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@ -22,14 +22,14 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { UploadDocument } from './upload-document';

 export default async function DashboardPage() {
-  const session = await getRequiredServerComponentSession();
+  const user = await getRequiredServerComponentSession();

  const [stats, results] = await Promise.all([
    getStats({
-      userId: session.id,
+      user,
    }),
    findDocuments({
-      userId: session.id,
+      userId: user.id,
      perPage: 10,
    }),
  ]);
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@ -0,0 +1,65 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Edit, Pencil, Share } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DataTableActionButtonProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+  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;
+  const isDraft = row.status === DocumentStatus.DRAFT;
+  const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  return match({
+    isOwner,
+    isRecipient,
+    isDraft,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isOwner: true, isDraft: true }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/documents/${row.id}`}>
+          <Edit className="-ml-1 mr-2 h-4 w-4" />
+          Edit
+        </Link>
+      </Button>
+    ))
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/sign/${recipient?.token}`}>
+          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          Sign
+        </Link>
+      </Button>
+    ))
+    .otherwise(() => (
+      <Button className="w-24" disabled>
+        <Share className="-ml-1 mr-2 h-4 w-4" />
+        Share
+      </Button>
+    ));
+};
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -0,0 +1,133 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+  Copy,
+  Download,
+  Edit,
+  History,
+  MoreHorizontal,
+  Pencil,
+  Share,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type DataTableActionDropdownProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+  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;
+  // const isDraft = row.status === DocumentStatus.DRAFT;
+  // const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  const onDownloadClick = () => {
+    let decodedDocument = row.document;
+
+    try {
+      decodedDocument = atob(decodedDocument);
+    } catch (err) {
+      // We're just going to ignore this error and try to download the document
+      console.error(err);
+    }
+
+    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="h-5 w-5 text-gray-500" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled={!recipient} asChild>
+          <Link href={`/sign/${recipient?.token}`}>
+            <Pencil className="mr-2 h-4 w-4" />
+            Sign
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isOwner} asChild>
+          <Link href={`/documents/${row.id}`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <XCircle className="mr-2 h-4 w-4" />
+          Void
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>Share</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -8,7 +8,7 @@ import { Loader } from 'lucide-react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
+import { Document, Recipient, User } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';

@ -16,8 +16,16 @@ import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-a
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';

+import { DataTableActionButton } from './data-table-action-button';
+import { DataTableActionDropdown } from './data-table-action-dropdown';
+
 export type DocumentsDataTableProps = {
-  results: FindResultSet<DocumentWithReciepient>;
+  results: FindResultSet<
+    Document & {
+      Recipient: Recipient[];
+      User: Pick<User, 'id' | 'name' | 'email'>;
+    }
+  >;
 };

 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@ -45,7 +53,11 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
          {
            header: 'Title',
            cell: ({ row }) => (
-              <Link href={`/documents/${row.original.id}`} className="font-medium hover:underline">
+              <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>
            ),
@ -67,6 +79,15 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
            accessorKey: 'created',
            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
          },
+          {
+            header: 'Actions',
+            cell: ({ row }) => (
+              <div className="flex items-center gap-x-4">
+                <DataTableActionButton row={row.original} />
+                <DataTableActionDropdown row={row.original} />
+              </div>
+            ),
+          },
        ]}
        data={results.data}
        perPage={results.perPage}
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@ -3,8 +3,8 @@ import Link from 'next/link';
 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 { isDocumentStatus } from '@documenso/lib/types/is-document-status';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';

 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
@ -16,7 +16,7 @@ import { DocumentsDataTable } from './data-table';

 export type DocumentsPageProps = {
  searchParams?: {
-    status?: InternalDocumentStatus | 'ALL';
+    status?: ExtendedDocumentStatus;
    period?: PeriodSelectorValue;
    page?: string;
    perPage?: string;
@ -24,22 +24,20 @@ export type DocumentsPageProps = {
 };

 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const session = await getRequiredServerComponentSession();
+  const user = await getRequiredServerComponentSession();

  const stats = await getStats({
-    userId: session.id,
+    user,
  });

-  const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
  // const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
  const page = Number(searchParams.page) || 1;
  const perPage = Number(searchParams.perPage) || 20;

-  const shouldDefaultToPending = status === 'ALL' && stats.PENDING > 0;
-
  const results = await findDocuments({
-    userId: session.id,
-    status: status === 'ALL' ? undefined : status,
+    userId: user.id,
+    status,
    orderBy: {
      column: 'created',
      direction: 'desc',
@ -57,10 +55,6 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
      params.delete('page');
    }

-    if (value === 'ALL') {
-      params.delete('status');
-    }
-
    return `/documents?${params.toString()}`;
  };

@ -70,47 +64,28 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage

      <h1 className="mt-12 text-4xl font-semibold">Documents</h1>

-      <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6 ">
-        <Tabs
-          className="overflow-x-auto"
-          defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : status}
-        >
+      <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
+        <Tabs defaultValue={status} className="overflow-x-auto">
          <TabsList>
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.PENDING)} scroll={false}>
-                <DocumentStatus status={InternalDocumentStatus.PENDING} />
+            {[
+              ExtendedDocumentStatus.INBOX,
+              ExtendedDocumentStatus.PENDING,
+              ExtendedDocumentStatus.COMPLETED,
+              ExtendedDocumentStatus.DRAFT,
+              ExtendedDocumentStatus.ALL,
+            ].map((value) => (
+              <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
+                <Link href={getTabHref(value)} scroll={false}>
+                  <DocumentStatus status={value} />

-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.PENDING, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.COMPLETED)} scroll={false}>
-                <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
-
-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.COMPLETED, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.DRAFT)} scroll={false}>
-                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
-
-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.DRAFT, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
-              <Link href={getTabHref('ALL')} scroll={false}>
-                All
-              </Link>
-            </TabsTrigger>
+                  {value !== ExtendedDocumentStatus.ALL && (
+                    <span className="ml-1 hidden opacity-50 md:inline-block">
+                      {Math.min(stats[value], 99)}
+                    </span>
+                  )}
+                </Link>
+              </TabsTrigger>
+            ))}
          </TabsList>
        </Tabs>

--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@ -7,9 +7,11 @@ import { cn } from '@documenso/ui/lib/utils';
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;

 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  // const pathname = usePathname();
+
  return (
    <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
-      {/* No Nav tabs while there is only one main page */}
+      {/* We have no other subpaths rn */}
      {/* <Link
        href="/documents"
        className={cn(
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@ -4,11 +4,8 @@ import { HTMLAttributes } from 'react';

 import Link from 'next/link';

-import { Menu } from 'lucide-react';
-
 import { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';

 import { Logo } from '~/components/branding/logo';

@ -23,7 +20,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
  return (
    <header
      className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-40 flex h-16 w-full items-center border-b backdrop-blur',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-50 flex h-16 w-full items-center border-b backdrop-blur',
        className,
      )}
      {...props}
@ -41,9 +38,9 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
        <div className="flex gap-x-4">
          <ProfileDropdown user={user} />

-          <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
+          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
            <Menu className="h-6 w-6" />
-          </Button>
+          </Button> */}
        </div>
      </div>
    </header>
--- a/apps/web/src/components/formatter/document-status.tsx
+++ b/apps/web/src/components/formatter/document-status.tsx
@ -3,16 +3,17 @@ import { HTMLAttributes } from 'react';
 import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';

-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { cn } from '@documenso/ui/lib/utils';

 type FriendlyStatus = {
  label: string;
-  icon: LucideIcon;
+  icon?: LucideIcon;
  color: string;
 };

-const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
+const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
  PENDING: {
    label: 'Pending',
    icon: Clock,
@ -28,10 +29,19 @@ const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
    icon: File,
    color: 'text-yellow-500',
  },
+  INBOX: {
+    label: 'Inbox',
+    icon: SignatureIcon,
+    color: 'text-muted-foreground',
+  },
+  ALL: {
+    label: 'All',
+    color: 'text-muted-foreground',
+  },
 };

 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
-  status: InternalDocumentStatus;
+  status: ExtendedDocumentStatus;
  inheritColor?: boolean;
 };

@ -45,11 +55,13 @@ export const DocumentStatus = ({

  return (
    <span className={cn('flex items-center', className)} {...props}>
-      <Icon
-        className={cn('mr-2 inline-block h-4 w-4', {
-          [color]: !inheritColor,
-        })}
-      />
+      {Icon && (
+        <Icon
+          className={cn('mr-2 inline-block h-4 w-4', {
+            [color]: !inheritColor,
+          })}
+        />
+      )}
      {label}
    </span>
  );
--- a/apps/web/src/hooks/use-debounced-value.ts
+++ b/apps/web/src/hooks/use-debounced-value.ts
@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@ -7,5 +7,6 @@ module.exports = {
  content: [
    ...baseConfig.content,
    `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@documenso/email'), '..')}/**/*.{ts,tsx}`,
  ],
 };
--- a/package-lock.json
+++ b/package-lock.json
@ -78,6 +78,7 @@
        "formidable": "^2.1.1",
        "framer-motion": "^10.12.8",
        "lucide-react": "^0.214.0",
+        "luxon": "^3.4.0",
        "micro": "^10.0.1",
        "nanoid": "^4.0.2",
        "next": "13.4.12",
@ -100,6 +101,7 @@
      },
      "devDependencies": {
        "@types/formidable": "^2.0.6",
+        "@types/luxon": "^3.3.1",
        "@types/node": "20.1.0",
        "@types/react": "18.2.18",
        "@types/react-dom": "18.2.7"
--- a/packages/email/template-components/template-document-completed.tsx
+++ b/packages/email/template-components/template-document-completed.tsx
@ -0,0 +1,71 @@
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateDocumentCompletedProps {
+  downloadLink: string;
+  reviewLink: string;
+  documentName: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentCompleted = ({
+  downloadLink,
+  reviewLink,
+  documentName,
+  assetBaseUrl,
+}: TemplateDocumentCompletedProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Completed
+        </Text>
+
+        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+          “{documentName}” was signed by all signers
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Continue by downloading or reviewing the document.
+        </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={reviewLink}
+          >
+            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            Review
+          </Button>
+          <Button
+            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={downloadLink}
+          >
+            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            Download
+          </Button>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateDocumentCompleted;
--- a/packages/email/template-components/template-document-invite.tsx
+++ b/packages/email/template-components/template-document-invite.tsx
@ -0,0 +1,59 @@
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateDocumentInviteProps {
+  inviterName: string;
+  inviterEmail: string;
+  documentName: string;
+  signDocumentLink: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentInvite = ({
+  inviterName,
+  documentName,
+  signDocumentLink,
+  assetBaseUrl,
+}: TemplateDocumentInviteProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          {inviterName} has invited you to sign "{documentName}"
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Continue by signing the document.
+        </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+            href={signDocumentLink}
+          >
+            Sign Document
+          </Button>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateDocumentInvite;
--- a/packages/email/template-components/template-document-pending.tsx
+++ b/packages/email/template-components/template-document-pending.tsx
@ -0,0 +1,52 @@
+import { Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateDocumentPendingProps {
+  documentName: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentPending = ({
+  documentName,
+  assetBaseUrl,
+}: TemplateDocumentPendingProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
+          <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Waiting for others
+        </Text>
+
+        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+          “{documentName}” has been signed
+        </Text>
+
+        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+          We're still waiting for other signers to sign this document.
+          <br />
+          We'll notify you as soon as it's ready.
+        </Text>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateDocumentPending;
--- a/packages/email/template-components/template-footer.tsx
+++ b/packages/email/template-components/template-footer.tsx
@ -0,0 +1,22 @@
+import { Link, Section, Text } from '@react-email/components';
+
+export const TemplateFooter = () => {
+  return (
+    <Section>
+      <Text className="my-4 text-base text-slate-400">
+        This document was sent using{' '}
+        <Link className="text-[#7AC455]" href="https://documenso.com">
+          Documenso.
+        </Link>
+      </Text>
+
+      <Text className="my-8 text-sm text-slate-400">
+        Documenso
+        <br />
+        2261 Market Street, #5211, San Francisco, CA 94114, USA
+      </Text>
+    </Section>
+  );
+};
+
+export default TemplateFooter;
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@ -1,25 +1,23 @@
 import {
  Body,
-  Button,
  Container,
  Head,
  Html,
  Img,
-  Link,
  Preview,
  Section,
  Tailwind,
-  Text,
 } from '@react-email/components';

 import config from '@documenso/tailwind-config';

-interface DocumentCompletedEmailTemplateProps {
-  downloadLink?: string;
-  reviewLink?: string;
-  documentName?: string;
-  assetBaseUrl?: string;
-}
+import {
+  TemplateDocumentCompleted,
+  TemplateDocumentCompletedProps,
+} from '../template-components/template-document-completed';
+import TemplateFooter from '../template-components/template-footer';
+
+export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentCompletedProps>;

 export const DocumentCompletedEmailTemplate = ({
  downloadLink = 'https://documenso.com',
@ -50,74 +48,23 @@ export const DocumentCompletedEmailTemplate = ({
          <Section className="bg-white">
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
              <Section className="p-2">
-                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />

-                <Section className="mt-4 flex-row items-center justify-center">
-                  <div className="flex items-center justify-center p-4">
-                    <Img
-                      className="h-42"
-                      src={getAssetUrl('/static/document.png')}
-                      alt="Documenso"
-                    />
-                  </div>
-
-                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
-                    <Img
-                      src={getAssetUrl('/static/completed.png')}
-                      className="-mb-0.5 mr-2 inline h-7 w-7"
-                    />
-                    Completed
-                  </Text>
-
-                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
-                    “{documentName}” was signed by all signers
-                  </Text>
-
-                  <Text className="my-1 text-center text-base text-slate-400">
-                    Continue by downloading or reviewing the document.
-                  </Text>
-
-                  <Section className="mb-6 mt-8 text-center">
-                    <Button
-                      className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
-                      href={reviewLink}
-                    >
-                      <Img
-                        src={getAssetUrl('/static/review.png')}
-                        className="-mb-1 mr-2 inline h-5 w-5"
-                      />
-                      Review
-                    </Button>
-                    <Button
-                      className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
-                      href={downloadLink}
-                    >
-                      <Img
-                        src={getAssetUrl('/static/download.png')}
-                        className="-mb-1 mr-2 inline h-5 w-5"
-                      />
-                      Download
-                    </Button>
-                  </Section>
-                </Section>
+                <TemplateDocumentCompleted
+                  downloadLink={downloadLink}
+                  reviewLink={reviewLink}
+                  documentName={documentName}
+                  assetBaseUrl={assetBaseUrl}
+                />
              </Section>
            </Container>

            <Container className="mx-auto max-w-xl">
-              <Section>
-                <Text className="my-4 text-base text-slate-400">
-                  This document was sent using{' '}
-                  <Link className="text-[#7AC455]" href="https://documenso.com">
-                    Documenso.
-                  </Link>
-                </Text>
-
-                <Text className="my-8 text-sm text-slate-400">
-                  Documenso
-                  <br />
-                  2261 Market Street, #5211, San Francisco, CA 94114, USA
-                </Text>
-              </Section>
+              <TemplateFooter />
            </Container>
          </Section>
        </Body>
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@ -1,6 +1,5 @@
 import {
  Body,
-  Button,
  Container,
  Head,
  Hr,
@ -15,13 +14,13 @@ import {

 import config from '@documenso/tailwind-config';

-interface DocumentInviteEmailTemplateProps {
-  inviterName?: string;
-  inviterEmail?: string;
-  documentName?: string;
-  signDocumentLink?: string;
-  assetBaseUrl?: string;
-}
+import {
+  TemplateDocumentInvite,
+  TemplateDocumentInviteProps,
+} from '../template-components/template-document-invite';
+import TemplateFooter from '../template-components/template-footer';
+
+export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps>;

 export const DocumentInviteEmailTemplate = ({
  inviterName = 'Lucas Smith',
@ -51,36 +50,21 @@ export const DocumentInviteEmailTemplate = ({
      >
        <Body className="mx-auto my-auto bg-white font-sans">
          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
-              <Section className="p-2">
-                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />

-                <Section className="mt-4 flex-row items-center justify-center">
-                  <div className="flex items-center justify-center p-4">
-                    <Img
-                      className="h-42"
-                      src={getAssetUrl('/static/document.png')}
-                      alt="Documenso"
-                    />
-                  </div>
-
-                  <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-                    {inviterName} has invited you to sign "{documentName}"
-                  </Text>
-
-                  <Text className="my-1 text-center text-base text-slate-400">
-                    Continue by signing the document.
-                  </Text>
-
-                  <Section className="mb-6 mt-8 text-center">
-                    <Button
-                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
-                      href={signDocumentLink}
-                    >
-                      Sign Document
-                    </Button>
-                  </Section>
-                </Section>
+                <TemplateDocumentInvite
+                  inviterName={inviterName}
+                  inviterEmail={inviterEmail}
+                  documentName={documentName}
+                  signDocumentLink={signDocumentLink}
+                  assetBaseUrl={assetBaseUrl}
+                />
              </Section>
            </Container>

@ -102,20 +86,7 @@ export const DocumentInviteEmailTemplate = ({
            <Hr className="mx-auto mt-12 max-w-xl" />

            <Container className="mx-auto max-w-xl">
-              <Section>
-                <Text className="my-4 text-base text-slate-400">
-                  This document was sent using{' '}
-                  <Link className="text-[#7AC455]" href="https://documenso.com">
-                    Documenso.
-                  </Link>
-                </Text>
-
-                <Text className="my-8 text-sm text-slate-400">
-                  Documenso
-                  <br />
-                  2261 Market Street, #5211, San Francisco, CA 94114, USA
-                </Text>
-              </Section>
+              <TemplateFooter />
            </Container>
          </Section>
        </Body>
--- a/packages/email/templates/document-pending.tsx
+++ b/packages/email/templates/document-pending.tsx
@ -4,19 +4,20 @@ import {
  Head,
  Html,
  Img,
-  Link,
  Preview,
  Section,
  Tailwind,
-  Text,
 } from '@react-email/components';

 import config from '@documenso/tailwind-config';

-interface DocumentPendingEmailTemplateProps {
-  documentName?: string;
-  assetBaseUrl?: string;
-}
+import {
+  TemplateDocumentPending,
+  TemplateDocumentPendingProps,
+} from '../template-components/template-document-pending';
+import { TemplateFooter } from '../template-components/template-footer';
+
+export type DocumentPendingEmailTemplateProps = Partial<TemplateDocumentPendingProps>;

 export const DocumentPendingEmailTemplate = ({
  documentName = 'Open Source Pledge.pdf',
@ -43,55 +44,20 @@ export const DocumentPendingEmailTemplate = ({
      >
        <Body className="mx-auto my-auto font-sans">
          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
-              <Section className="p-2">
-                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />

-                <Section className="mt-4 flex-row items-center justify-center">
-                  <div className="flex items-center justify-center p-4">
-                    <Img
-                      className="h-42"
-                      src={getAssetUrl('/static/document.png')}
-                      alt="Documenso"
-                    />
-                  </div>
-
-                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
-                    <Img
-                      src={getAssetUrl('/static/clock.png')}
-                      className="-mb-0.5 mr-2 inline h-7 w-7"
-                    />
-                    Waiting for others
-                  </Text>
-
-                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
-                    “{documentName}” has been signed
-                  </Text>
-
-                  <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-                    We're still waiting for other signers to sign this document.
-                    <br />
-                    We'll notify you as soon as it's ready.
-                  </Text>
-                </Section>
+                <TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
              </Section>
            </Container>

            <Container className="mx-auto max-w-xl">
-              <Section>
-                <Text className="my-4 text-base text-slate-400">
-                  This document was sent using{' '}
-                  <Link className="text-[#7AC455]" href="https://documenso.com">
-                    Documenso.
-                  </Link>
-                </Text>
-
-                <Text className="my-8 text-sm text-slate-400">
-                  Documenso
-                  <br />
-                  2261 Market Street, #5211, San Francisco, CA 94114, USA
-                </Text>
-              </Section>
+              <TemplateFooter />
            </Container>
          </Section>
        </Body>
--- a/packages/lib/server-only/document/find-documents.ts
+++ b/packages/lib/server-only/document/find-documents.ts
@ -1,13 +1,15 @@
+import { match } from 'ts-pattern';
+
 import { prisma } from '@documenso/prisma';
-import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
-import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
+import { Document, Prisma, SigningStatus } from '@documenso/prisma/client';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';

 import { FindResultSet } from '../../types/find-result-set';

 export interface FindDocumentsOptions {
  userId: number;
  term?: string;
-  status?: DocumentStatus;
+  status?: ExtendedDocumentStatus;
  page?: number;
  perPage?: number;
  orderBy?: {
@ -19,29 +21,102 @@ export interface FindDocumentsOptions {
 export const findDocuments = async ({
  userId,
  term,
-  status,
+  status = ExtendedDocumentStatus.ALL,
  page = 1,
  perPage = 10,
  orderBy,
-}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
+}: FindDocumentsOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
  const orderByColumn = orderBy?.column ?? 'created';
  const orderByDirection = orderBy?.direction ?? 'desc';

-  const filters: Prisma.DocumentWhereInput = {
-    status,
-    userId,
-  };
+  const termFilters = !term
+    ? undefined
+    : ({
+        title: {
+          contains: term,
+          mode: 'insensitive',
+        },
+      } as const);

-  if (term) {
-    filters.title = {
-      contains: term,
-      mode: 'insensitive',
-    };
-  }
+  const filters = match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
+    .with(ExtendedDocumentStatus.ALL, () => ({
+      OR: [
+        {
+          userId,
+        },
+        {
+          status: {
+            not: ExtendedDocumentStatus.DRAFT,
+          },
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+      ],
+    }))
+    .with(ExtendedDocumentStatus.INBOX, () => ({
+      status: {
+        not: ExtendedDocumentStatus.DRAFT,
+      },
+      Recipient: {
+        some: {
+          email: user.email,
+          signingStatus: SigningStatus.NOT_SIGNED,
+        },
+      },
+    }))
+    .with(ExtendedDocumentStatus.DRAFT, () => ({
+      userId,
+      status: ExtendedDocumentStatus.DRAFT,
+    }))
+    .with(ExtendedDocumentStatus.PENDING, () => ({
+      OR: [
+        {
+          userId,
+          status: ExtendedDocumentStatus.PENDING,
+        },
+        {
+          status: ExtendedDocumentStatus.PENDING,
+
+          Recipient: {
+            some: {
+              email: user.email,
+              signingStatus: SigningStatus.SIGNED,
+            },
+          },
+        },
+      ],
+    }))
+    .with(ExtendedDocumentStatus.COMPLETED, () => ({
+      OR: [
+        {
+          userId,
+          status: ExtendedDocumentStatus.COMPLETED,
+        },
+        {
+          status: ExtendedDocumentStatus.COMPLETED,
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+      ],
+    }))
+    .exhaustive();

  const [data, count] = await Promise.all([
    prisma.document.findMany({
      where: {
+        ...termFilters,
        ...filters,
      },
      skip: Math.max(page - 1, 0) * perPage,
@ -50,21 +125,37 @@ export const findDocuments = async ({
        [orderByColumn]: orderByDirection,
      },
      include: {
+        User: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
        Recipient: true,
      },
    }),
    prisma.document.count({
      where: {
+        ...termFilters,
        ...filters,
      },
    }),
  ]);

+  const maskedData = data.map((doc) => ({
+    ...doc,
+    Recipient: doc.Recipient.map((recipient) => ({
+      ...recipient,
+      token: recipient.email === user.email ? recipient.token : '',
+    })),
+  }));
+
  return {
-    data,
+    data: maskedData,
    count,
    currentPage: Math.max(page, 1),
    perPage,
    totalPages: Math.ceil(count / perPage),
-  };
+  } satisfies FindResultSet<typeof maskedData>;
 };
--- a/packages/lib/server-only/document/get-stats.ts
+++ b/packages/lib/server-only/document/get-stats.ts
@ -1,30 +1,88 @@
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
+import { SigningStatus, User } from '@documenso/prisma/client';
+import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';

 export type GetStatsInput = {
-  userId: number;
+  user: User;
 };

-export const getStats = async ({ userId }: GetStatsInput) => {
-  const result = await prisma.document.groupBy({
-    by: ['status'],
-    _count: {
-      _all: true,
-    },
-    where: {
-      userId,
-    },
-  });
+export const getStats = async ({ user }: GetStatsInput) => {
+  const [ownerCounts, notSignedCounts, hasSignedCounts] = await Promise.all([
+    prisma.document.groupBy({
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        userId: user.id,
+      },
+    }),
+    prisma.document.groupBy({
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        status: ExtendedDocumentStatus.PENDING,
+        Recipient: {
+          some: {
+            email: user.email,
+            signingStatus: SigningStatus.NOT_SIGNED,
+          },
+        },
+      },
+    }),
+    prisma.document.groupBy({
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        status: {
+          not: ExtendedDocumentStatus.DRAFT,
+        },
+        Recipient: {
+          some: {
+            email: user.email,
+            signingStatus: SigningStatus.SIGNED,
+          },
+        },
+      },
+    }),
+  ]);

-  const stats: Record<DocumentStatus, number> = {
-    [DocumentStatus.DRAFT]: 0,
-    [DocumentStatus.PENDING]: 0,
-    [DocumentStatus.COMPLETED]: 0,
+  const stats: Record<ExtendedDocumentStatus, number> = {
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
  };

-  result.forEach((stat) => {
+  ownerCounts.forEach((stat) => {
    stats[stat.status] = stat._count._all;
  });

+  notSignedCounts.forEach((stat) => {
+    stats[ExtendedDocumentStatus.INBOX] += stat._count._all;
+  });
+
+  hasSignedCounts.forEach((stat) => {
+    if (stat.status === ExtendedDocumentStatus.COMPLETED) {
+      stats[ExtendedDocumentStatus.COMPLETED] += stat._count._all;
+    }
+
+    if (stat.status === ExtendedDocumentStatus.PENDING) {
+      stats[ExtendedDocumentStatus.PENDING] += stat._count._all;
+    }
+  });
+
+  Object.keys(stats).forEach((key) => {
+    if (key !== ExtendedDocumentStatus.ALL && isExtendedDocumentStatus(key)) {
+      stats[ExtendedDocumentStatus.ALL] += stats[key];
+    }
+  });
+
  return stats;
 };
--- a/packages/lib/types/find-result-set.ts
+++ b/packages/lib/types/find-result-set.ts
@ -1,5 +1,5 @@
 export type FindResultSet<T> = {
-  data: T[];
+  data: T extends Array<any> ? T : T[];
  count: number;
  currentPage: number;
  perPage: number;
--- a/packages/prisma/guards/is-extended-document-status.ts
+++ b/packages/prisma/guards/is-extended-document-status.ts
@ -0,0 +1,11 @@
+import { ExtendedDocumentStatus } from '../types/extended-document-status';
+
+export const isExtendedDocumentStatus = (value: unknown): value is ExtendedDocumentStatus => {
+  if (typeof value !== 'string') {
+    return false;
+  }
+
+  // We're using the assertion for a type-guard so it's safe to ignore the eslint warning
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return Object.values(ExtendedDocumentStatus).includes(value as ExtendedDocumentStatus);
+};
--- a/packages/prisma/types/document-with-recipient.ts
+++ b/packages/prisma/types/document-with-recipient.ts
@ -1,5 +1,5 @@
 import { Document, Recipient } from '@documenso/prisma/client';

-export type DocumentWithReciepient = Document & {
+export type DocumentWithRecipient = Document & {
  Recipient: Recipient[];
 };
--- a/packages/prisma/types/document.ts
+++ b/packages/prisma/types/document.ts
@ -0,0 +1,12 @@
+import { Document, Recipient } from '@documenso/prisma/client';
+
+export type DocumentWithRecipientAndSender = Omit<Document, 'document'> & {
+  recipient: Recipient;
+  sender: {
+    id: number;
+    name: string | null;
+    email: string;
+  };
+  subject: string;
+  description: string;
+};
--- a/packages/prisma/types/extended-document-status.ts
+++ b/packages/prisma/types/extended-document-status.ts
@ -0,0 +1,10 @@
+import { DocumentStatus } from '@prisma/client';
+
+export const ExtendedDocumentStatus = {
+  ...DocumentStatus,
+  INBOX: 'INBOX',
+  ALL: 'ALL',
+} as const;
+
+export type ExtendedDocumentStatus =
+  (typeof ExtendedDocumentStatus)[keyof typeof ExtendedDocumentStatus];
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@ -115,6 +115,11 @@ module.exports = {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
+      screens: {
+        '3xl': '1920px',
+        '4xl': '2560px',
+        '5xl': '3840px',
+      },
    },
  },
  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
--- a/packages/ui/icons/signature.tsx
+++ b/packages/ui/icons/signature.tsx
@ -0,0 +1,28 @@
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
+
+export const SignatureIcon: LucideIcon = ({
+  size = 24,
+  color = 'currentColor',
+  strokeWidth = 1.33,
+  absoluteStrokeWidth,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.5 11H14.5M1.5 14C1.5 14 8.72 2 4.86938 2H4.875C2.01 2 1.97437 14.0694 8 6.51188V6.5C8 6.5 9 11.3631 11.5 7.52375V7.5C11.5 7.5 11.5 9 14.5 9"
+        stroke={color}
+        strokeWidth={absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};