feat: add teams (#848)

## Description Add support for teams which will allow users to collaborate on documents. Teams features allows users to: - Create, manage and transfer teams - Manage team members - Manage team emails - Manage a shared team inbox and documents These changes do NOT include the following, which are planned for a future release: - Team templates - Team API - Search menu integration ## Testing Performed - Added E2E tests for general team management - Added E2E tests to validate document counts ## Checklist - [X] I have tested these changes locally and they work as expected. - [X] I have added/updated tests that prove the effectiveness of these changes. - [ ] I have updated the documentation to reflect these changes, if applicable. - [X] I have followed the project's coding style guidelines.
2025-11-14 00:32:43 +10:00 · 2024-02-06 16:16:10 +11:00
parent c6457e75e0
commit 0c339b78b6
200 changed files with 12916 additions and 968 deletions
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
@ -0,0 +1,131 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft, Users2 } from 'lucide-react';
+
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+export type DocumentPageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export default async function DocumentPageView({ params, team }: DocumentPageViewProps) {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(documentRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    redirect(documentRootPath);
+  }
+
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
+
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <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
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+              <span>{recipients.length} Recipient(s)</span>
+            </StackAvatarsWithTooltip>
+          </div>
+        )}
+      </div>
+
+      {document.status !== InternalDocumentStatus.COMPLETED && (
+        <EditDocumentForm
+          className="mt-8"
+          document={document}
+          user={user}
+          documentMeta={documentMeta}
+          recipients={recipients}
+          fields={fields}
+          documentData={documentData}
+          documentRootPath={documentRootPath}
+        />
+      )}
+
+      {document.status === InternalDocumentStatus.COMPLETED && (
+        <div className="mx-auto mt-12 max-w-2xl">
+          <LazyPDFViewer
+            document={document}
+            key={documentData.id}
+            documentMeta={documentMeta}
+            documentData={documentData}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -32,6 +32,7 @@ export type EditDocumentFormProps = {
  documentMeta: DocumentMeta | null;
  fields: Field[];
  documentData: DocumentData;
+  documentRootPath: string;
 };

 type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
@ -45,6 +46,7 @@ export const EditDocumentForm = ({
  documentMeta,
  user: _user,
  documentData,
+  documentRootPath,
 }: EditDocumentFormProps) => {
  const { toast } = useToast();
  const router = useRouter();
@ -168,7 +170,7 @@ export const EditDocumentForm = ({
        duration: 5000,
      });

-      router.push('/documents');
+      router.push(documentRootPath);
    } catch (err) {
      console.error(err);

--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@ -1,20 +1,4 @@
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { ChevronLeft, Users2 } from 'lucide-react';
-
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-
-import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import DocumentPageView from './document-page-view';

 export type DocumentPageProps = {
  params: {
@ -22,103 +6,6 @@ export type DocumentPageProps = {
  };
 };

-export default async function DocumentPage({ params }: DocumentPageProps) {
-  const { id } = params;
-
-  const documentId = Number(id);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    redirect('/documents');
-  }
-
-  const { user } = await getRequiredServerComponentSession();
-
-  const document = await getDocumentById({
-    id: documentId,
-    userId: user.id,
-  }).catch(() => null);
-
-  if (!document || !document.documentData) {
-    redirect('/documents');
-  }
-
-  const { documentData, documentMeta } = document;
-
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
-
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
-
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
-  }
-
-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-    getFieldsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-  ]);
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
-      </Link>
-
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-        {document.title}
-      </h1>
-
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
-
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
-
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
-              <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsWithTooltip>
-          </div>
-        )}
-      </div>
-
-      {document.status !== InternalDocumentStatus.COMPLETED && (
-        <EditDocumentForm
-          className="mt-8"
-          document={document}
-          user={user}
-          documentMeta={documentMeta}
-          recipients={recipients}
-          fields={fields}
-          documentData={documentData}
-        />
-      )}
-
-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
-        </div>
-      )}
-    </div>
-  );
+export default function DocumentPage({ params }: DocumentPageProps) {
+  return <DocumentPageView params={params} />;
 }
--- a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
@ -10,6 +10,7 @@ import * as z from 'zod';

 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import type { Team } from '@documenso/prisma/client';
 import { type Document, type Recipient, SigningStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@ -39,8 +40,11 @@ import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
 const FORM_ID = 'resend-email';

 export type ResendDocumentActionItemProps = {
-  document: Document;
+  document: Document & {
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
  recipients: Recipient[];
+  team?: Pick<Team, 'id' | 'url'>;
 };

 export const ZResendDocumentFormSchema = z.object({
@ -54,15 +58,17 @@ export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema
 export const ResendDocumentActionItem = ({
  document,
  recipients,
+  team,
 }: ResendDocumentActionItemProps) => {
  const { data: session } = useSession();
  const { toast } = useToast();

  const [isOpen, setIsOpen] = useState(false);
  const isOwner = document.userId === session?.user?.id;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;

  const isDisabled =
-    !isOwner ||
+    (!isOwner && !isCurrentTeamDocument) ||
    document.status !== 'PENDING' ||
    !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);

@ -82,7 +88,7 @@ export const ResendDocumentActionItem = ({

  const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
    try {
-      await resendDocument({ documentId: document.id, recipients });
+      await resendDocument({ documentId: document.id, recipients, teamId: team?.id });

      toast({
        title: 'Document re-sent',
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@ -7,7 +7,8 @@ import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';

 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
@ -18,10 +19,12 @@ export type DataTableActionButtonProps = {
  row: Document & {
    User: Pick<User, 'id' | 'name' | 'email'>;
    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
  };
+  team?: Pick<Team, 'id' | 'url'>;
 };

-export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps) => {
  const { data: session } = useSession();
  const { toast } = useToast();

@ -38,6 +41,9 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
  const isComplete = row.status === DocumentStatus.COMPLETED;
  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
  const role = recipient?.role;
+  const isCurrentTeamDocument = team && row.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);

  const onDownloadClick = async () => {
    try {
@ -46,6 +52,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
      if (!recipient) {
        document = await trpcClient.document.getDocumentById.query({
          id: row.id,
+          teamId: team?.id,
        });
      } else {
        document = await trpcClient.document.getDocumentByToken.query({
@ -81,15 +88,19 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
    isPending,
    isComplete,
    isSigned,
+    isCurrentTeamDocument,
  })
-    .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-32" asChild>
-        <Link href={`/documents/${row.id}`}>
-          <Edit className="-ml-1 mr-2 h-4 w-4" />
-          Edit
-        </Link>
-      </Button>
-    ))
+    .with(
+      isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
+      () => (
+        <Button className="w-32" asChild>
+          <Link href={`${documentsPath}/${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-32" asChild>
        <Link href={`/sign/${recipient?.token}`}>
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -20,8 +20,9 @@ import {
 import { useSession } from 'next-auth/react';

 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@ -42,10 +43,12 @@ export type DataTableActionDropdownProps = {
  row: Document & {
    User: Pick<User, 'id' | 'name' | 'email'>;
    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
  };
+  team?: Pick<Team, 'id' | 'url'>;
 };

-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
  const { data: session } = useSession();
  const { toast } = useToast();

@ -65,6 +68,9 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
  const isComplete = row.status === DocumentStatus.COMPLETED;
  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
  const isDocumentDeletable = isOwner;
+  const isCurrentTeamDocument = team && row.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);

  const onDownloadClick = async () => {
    try {
@ -73,6 +79,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
      if (!recipient) {
        document = await trpcClient.document.getDocumentById.query({
          id: row.id,
+          teamId: team?.id,
        });
      } else {
        document = await trpcClient.document.getDocumentByToken.query({
@ -134,8 +141,8 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
          </DropdownMenuItem>
        )}

-        <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
-          <Link href={`/documents/${row.id}`}>
+        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+          <Link href={`${documentsPath}/${row.id}`}>
            <Edit className="mr-2 h-4 w-4" />
            Edit
          </Link>
@ -163,7 +170,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =

        <DropdownMenuLabel>Share</DropdownMenuLabel>

-        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} />
+        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} team={team} />

        <DocumentShareButton
          documentId={row.id}
@ -193,6 +200,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
          id={row.id}
          open={isDuplicateDialogOpen}
          onOpenChange={setDuplicateDialogOpen}
+          team={team}
        />
      )}
    </DropdownMenu>
--- a/apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx
@ -0,0 +1,63 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { trpc } from '@documenso/trpc/react';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+
+type DataTableSenderFilterProps = {
+  teamId: number;
+};
+
+export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const isMounted = useIsMounted();
+
+  const senderIds = parseToIntegerArray(searchParams?.get('senderIds') ?? '');
+
+  const { data, isInitialLoading } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const comboBoxOptions = (data ?? []).map((member) => ({
+    label: member.user.name ?? member.user.email,
+    value: member.user.id,
+  }));
+
+  const onChange = (newSenderIds: number[]) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('senderIds', newSenderIds.join(','));
+
+    if (newSenderIds.length === 0) {
+      params.delete('senderIds');
+    }
+
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <MultiSelectCombobox
+      emptySelectionPlaceholder={
+        <p className="text-muted-foreground font-normal">
+          <span className="text-muted-foreground/70">Sender:</span> All
+        </p>
+      }
+      enableClearAllButton={true}
+      inputPlaceholder="Search"
+      loading={!isMounted || isInitialLoading}
+      options={comboBoxOptions}
+      selectedValues={senderIds}
+      onChange={onChange}
+    />
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -7,7 +7,7 @@ import { useSession } from 'next-auth/react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@ -25,11 +25,18 @@ export type DocumentsDataTableProps = {
    Document & {
      Recipient: Recipient[];
      User: Pick<User, 'id' | 'name' | 'email'>;
+      team: Pick<Team, 'id' | 'url'> | null;
    }
  >;
+  showSenderColumn?: boolean;
+  team?: Pick<Team, 'id' | 'url'>;
 };

-export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+export const DocumentsDataTable = ({
+  results,
+  showSenderColumn,
+  team,
+}: DocumentsDataTableProps) => {
  const { data: session } = useSession();
  const [isPending, startTransition] = useTransition();

@ -61,6 +68,11 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
            header: 'Title',
            cell: ({ row }) => <DataTableTitle row={row.original} />,
          },
+          {
+            id: 'sender',
+            header: 'Sender',
+            cell: ({ row }) => row.original.User.name ?? row.original.User.email,
+          },
          {
            header: 'Recipient',
            accessorKey: 'recipient',
@ -79,8 +91,8 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
              (!row.original.deletedAt ||
                row.original.status === ExtendedDocumentStatus.COMPLETED) && (
                <div className="flex items-center gap-x-4">
-                  <DataTableActionButton row={row.original} />
-                  <DataTableActionDropdown row={row.original} />
+                  <DataTableActionButton team={team} row={row.original} />
+                  <DataTableActionDropdown team={team} row={row.original} />
                </div>
              ),
          },
@ -90,6 +102,9 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
        currentPage={results.currentPage}
        totalPages={results.totalPages}
        onPaginationChange={onPaginationChange}
+        columnVisibility={{
+          sender: Boolean(showSenderColumn),
+        }}
      >
        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
      </DataTable>
--- a/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
@ -0,0 +1,158 @@
+import Link from 'next/link';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
+import type { GetStatsInput } from '@documenso/lib/server-only/document/get-stats';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team, TeamEmail } from '@documenso/prisma/client';
+import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
+import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+import { DocumentsDataTable } from './data-table';
+import { DataTableSenderFilter } from './data-table-sender-filter';
+import { EmptyDocumentState } from './empty-state';
+import { UploadDocument } from './upload-document';
+
+export type DocumentsPageViewProps = {
+  searchParams?: {
+    status?: ExtendedDocumentStatus;
+    period?: PeriodSelectorValue;
+    page?: string;
+    perPage?: string;
+    senderIds?: string;
+  };
+  team?: Team & { teamEmail?: TeamEmail | null };
+};
+
+export default async function DocumentsPageView({
+  searchParams = {},
+  team,
+}: DocumentsPageViewProps) {
+  const { user } = await getRequiredServerComponentSession();
+
+  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 senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
+  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+
+  const getStatOptions: GetStatsInput = {
+    user,
+    period,
+  };
+
+  if (team) {
+    getStatOptions.team = {
+      teamId: team.id,
+      teamEmail: team.teamEmail?.email,
+      senderIds,
+    };
+  }
+
+  const stats = await getStats(getStatOptions);
+
+  const results = await findDocuments({
+    userId: user.id,
+    teamId: team?.id,
+    status,
+    orderBy: {
+      column: 'createdAt',
+      direction: 'desc',
+    },
+    page,
+    perPage,
+    period,
+    senderIds,
+  });
+
+  const getTabHref = (value: typeof status) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team?.url)}?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <UploadDocument team={currentTeam} />
+
+      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="text-4xl font-semibold">Documents</h1>
+        </div>
+
+        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+          <Tabs value={status} className="overflow-x-auto">
+            <TabsList>
+              {[
+                ExtendedDocumentStatus.INBOX,
+                ExtendedDocumentStatus.PENDING,
+                ExtendedDocumentStatus.COMPLETED,
+                ExtendedDocumentStatus.DRAFT,
+                ExtendedDocumentStatus.ALL,
+              ].map((value) => (
+                <TabsTrigger
+                  key={value}
+                  className="hover:text-foreground min-w-[60px]"
+                  value={value}
+                  asChild
+                >
+                  <Link href={getTabHref(value)} scroll={false}>
+                    <DocumentStatus status={value} />
+
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 inline-block opacity-50">
+                        {Math.min(stats[value], 99)}
+                        {stats[value] > 99 && '+'}
+                      </span>
+                    )}
+                  </Link>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {team && <DataTableSenderFilter teamId={team.id} />}
+
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <PeriodSelector />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        {results.count > 0 && (
+          <DocumentsDataTable
+            results={results}
+            showSenderColumn={team !== undefined}
+            team={currentTeam}
+          />
+        )}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
@ -1,5 +1,7 @@
 import { useRouter } from 'next/navigation';

+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -16,18 +18,21 @@ type DuplicateDocumentDialogProps = {
  id: number;
  open: boolean;
  onOpenChange: (_open: boolean) => void;
+  team?: Pick<Team, 'id' | 'url'>;
 };

 export const DuplicateDocumentDialog = ({
  id,
  open,
  onOpenChange,
+  team,
 }: DuplicateDocumentDialogProps) => {
  const router = useRouter();
  const { toast } = useToast();

  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
    id,
+    teamId: team?.id,
  });

  const documentData = document?.documentData
@ -37,10 +42,12 @@ export const DuplicateDocumentDialog = ({
      }
    : undefined;

+  const documentsPath = formatDocumentsPath(team?.url);
+
  const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
    trpcReact.document.duplicateDocument.useMutation({
      onSuccess: (newId) => {
-        router.push(`/documents/${newId}`);
+        router.push(`${documentsPath}/${newId}`);

        toast({
          title: 'Document Duplicated',
@ -54,7 +61,7 @@ export const DuplicateDocumentDialog = ({

  const onDuplicate = async () => {
    try {
-      await duplicateDocument({ id });
+      await duplicateDocument({ id, teamId: team?.id });
    } catch {
      toast({
        title: 'Something went wrong',
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@ -1,119 +1,16 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';

-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
-import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
-import { getStats } from '@documenso/lib/server-only/document/get-stats';
-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';
-import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
-import { DocumentStatus } from '~/components/formatter/document-status';
-
-import { DocumentsDataTable } from './data-table';
-import { EmptyDocumentState } from './empty-state';
-import { UploadDocument } from './upload-document';
+import type { DocumentsPageViewProps } from './documents-page-view';
+import DocumentsPageView from './documents-page-view';

 export type DocumentsPageProps = {
-  searchParams?: {
-    status?: ExtendedDocumentStatus;
-    period?: PeriodSelectorValue;
-    page?: string;
-    perPage?: string;
-  };
+  searchParams?: DocumentsPageViewProps['searchParams'];
 };

 export const metadata: Metadata = {
  title: 'Documents',
 };
-export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const { user } = await getRequiredServerComponentSession();

-  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 stats = await getStats({
-    user,
-    period,
-  });
-
-  const results = await findDocuments({
-    userId: user.id,
-    status,
-    orderBy: {
-      column: 'createdAt',
-      direction: 'desc',
-    },
-    page,
-    perPage,
-    period,
-  });
-
-  const getTabHref = (value: typeof status) => {
-    const params = new URLSearchParams(searchParams);
-
-    params.set('status', value);
-
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    return `/documents?${params.toString()}`;
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <UploadDocument />
-
-      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
-        <h1 className="text-4xl font-semibold">Documents</h1>
-
-        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={status} className="overflow-x-auto">
-            <TabsList>
-              {[
-                ExtendedDocumentStatus.INBOX,
-                ExtendedDocumentStatus.PENDING,
-                ExtendedDocumentStatus.COMPLETED,
-                ExtendedDocumentStatus.DRAFT,
-                ExtendedDocumentStatus.ALL,
-              ].map((value) => (
-                <TabsTrigger
-                  key={value}
-                  className="hover:text-foreground min-w-[60px]"
-                  value={value}
-                  asChild
-                >
-                  <Link href={getTabHref(value)} scroll={false}>
-                    <DocumentStatus status={value} />
-
-                    {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 inline-block opacity-50">
-                        {Math.min(stats[value], 99)}
-                        {stats[value] > 99 && '+'}
-                      </span>
-                    )}
-                  </Link>
-                </TabsTrigger>
-              ))}
-            </TabsList>
-          </Tabs>
-
-          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-            <PeriodSelector />
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-8">
-        {results.count > 0 && <DocumentsDataTable results={results} />}
-        {results.count === 0 && <EmptyDocumentState status={status} />}
-      </div>
-    </div>
-  );
+export default function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  return <DocumentsPageView searchParams={searchParams} />;
 }
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@ -13,6 +13,7 @@ import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@ -21,9 +22,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 export type UploadDocumentProps = {
  className?: string;
+  team?: {
+    id: number;
+    url: string;
+  };
 };

-export const UploadDocument = ({ className }: UploadDocumentProps) => {
+export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
  const router = useRouter();
  const analytics = useAnalytics();

@ -39,13 +44,15 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {

  const disabledMessage = useMemo(() => {
    if (remaining.documents === 0) {
-      return 'You have reached your document limit.';
+      return team
+        ? 'Document upload disabled due to unpaid invoices'
+        : 'You have reached your document limit.';
    }

    if (!session?.user.emailVerified) {
      return 'Verify your email to upload documents.';
    }
-  }, [remaining.documents, session?.user.emailVerified]);
+  }, [remaining.documents, session?.user.emailVerified, team]);

  const onFileDrop = async (file: File) => {
    try {
@ -61,6 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
      const { id } = await createDocument({
        title: file.name,
        documentDataId,
+        teamId: team?.id,
      });

      toast({
@ -75,7 +83,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
        timestamp: new Date().toISOString(),
      });

-      router.push(`/documents/${id}`);
+      router.push(`${formatDocumentsPath(team?.url)}/${id}`);
    } catch (error) {
      console.error(error);

@ -117,11 +125,13 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
      />

      <div className="absolute -bottom-6 right-0">
-        {remaining.documents > 0 && Number.isFinite(remaining.documents) && (
-          <p className="text-muted-foreground/60 text-xs">
-            {remaining.documents} of {quota.documents} documents remaining this month.
-          </p>
-        )}
+        {team?.id === undefined &&
+          remaining.documents > 0 &&
+          Number.isFinite(remaining.documents) && (
+            <p className="text-muted-foreground/60 text-xs">
+              {remaining.documents} of {quota.documents} documents remaining this month.
+            </p>
+          )}
      </div>

      {isLoading && (
@ -130,7 +140,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
        </div>
      )}

-      {remaining.documents === 0 && (
+      {team?.id === undefined && remaining.documents === 0 && (
        <div className="bg-background/60 absolute inset-0 flex items-center justify-center rounded-lg backdrop-blur-sm">
          <div className="text-center">
            <h2 className="text-muted-foreground/80 text-xl font-semibold">