chore: team url slugify and profanity filter

Signed-off-by: Adithya Krishna <adi@documenso.com>

.env.example

@@ -77,6 +77,8 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_TEAM_SEAT_PRICE_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.

apps/web/process-env.d.ts

@@ -6,6 +6,7 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_TEAM_SEAT_PRICE_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

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

@@ -7,9 +7,9 @@ import Link from 'next/link';
 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 { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import { Document, User } from '@documenso/prisma/client';
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { Document, User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -65,7 +65,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'owner',
             cell: ({ row }) => {
               const avatarFallbackText = row.original.User.name
-                ? recipientInitials(row.original.User.name)
+                ? extractInitials(row.original.User.name)
                 : row.original.User.email.slice(0, 1).toUpperCase();
 
               return (

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

@@ -9,7 +9,6 @@ import type { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -21,6 +20,8 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { RoleCombobox } from './role-combobox';
+
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
 
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
@@ -117,7 +118,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <Combobox
+                      <RoleCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Role } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+type RoleComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+export const RoleCombobox = ({ listValues, onChange }: RoleComboboxProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
+  const dbRoles = Object.values(Role);
+
+  React.useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allRoles.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {value}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,104 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft, Users2 } from 'lucide-react';
+
+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 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 DocumentPageComponentProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export default async function DocumentPageComponent({ params, team }: DocumentPageComponentProps) {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = team ? `/t/${team.url}/documents` : '/documents';
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(documentRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: user.id,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    redirect(documentRootPath);
+  }
+
+  const { documentData } = document;
+
+  const [recipients, fields] = await Promise.all([
+    await getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+    await 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}
+          recipients={recipients}
+          fields={fields}
+          documentData={documentData}
+          documentRootPath={documentRootPath}
+        />
+      )}
+
+      {document.status === InternalDocumentStatus.COMPLETED && (
+        <div className="mx-auto mt-12 max-w-2xl">
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -31,6 +31,7 @@ export type EditDocumentFormProps = {
   recipients: Recipient[];
   fields: Field[];
   documentData: DocumentData;
+  documentRootPath: string;
 };
 
 type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
@@ -43,6 +44,7 @@ export const EditDocumentForm = ({
   fields,
   user: _user,
   documentData,
+  documentRootPath,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -162,7 +164,7 @@ export const EditDocumentForm = ({
         duration: 5000,
       });
 
-      router.push('/documents');
+      router.push(documentRootPath);
     } catch (err) {
       console.error(err);
 

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

@@ -1,18 +1,4 @@
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { ChevronLeft, Users2 } from 'lucide-react';
-
-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 { 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 DocumentPageComponent from './document-page-component';
 
 export type DocumentPageProps = {
   params: {
@@ -20,80 +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 } = document;
-
-  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}
-          recipients={recipients}
-          fields={fields}
-          documentData={documentData}
-        />
-      )}
-
-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
-        </div>
-      )}
-    </div>
-  );
+export default function DocumentPage({ params }: DocumentPageProps) {
+  return <DocumentPageComponent params={params} />;
 }

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

@@ -7,6 +7,7 @@ import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
 import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -19,9 +20,10 @@ export type DataTableActionButtonProps = {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
   };
+  teamUrl?: string;
 };
 
-export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+export const DataTableActionButton = ({ row, teamUrl }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -38,6 +40,8 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const documentsPath = formatDocumentsPath(teamUrl);
+
   const onDownloadClick = async () => {
     try {
       let document: DocumentWithData | null = null;
@@ -92,7 +96,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   })
     .with({ isOwner: true, isDraft: true }, () => (
       <Button className="w-32" asChild>
-        <Link href={`/documents/${row.id}`}>
+        <Link href={`${documentsPath}/${row.id}`}>
           <Edit className="-ml-1 mr-2 h-4 w-4" />
           Edit
         </Link>

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

@@ -18,6 +18,7 @@ import {
 import { useSession } from 'next-auth/react';
 
 import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -40,9 +41,10 @@ export type DataTableActionDropdownProps = {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
   };
+  teamUrl?: string;
 };
 
-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({ row, teamUrl }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -62,6 +64,8 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isDocumentDeletable = isOwner;
 
+  const documentsPath = formatDocumentsPath(teamUrl);
+
   const onDownloadClick = async () => {
     let document: DocumentWithData | null = null;
 
@@ -117,7 +121,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
         </DropdownMenuItem>
 
         <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
-          <Link href={`/documents/${row.id}`}>
+          <Link href={`${documentsPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>
@@ -175,6 +179,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           id={row.id}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
+          teamUrl={teamUrl}
         />
       )}
     </DropdownMenu>

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 { parseToNumberArray } from '@documenso/lib/utils/params';
+import { trpc } from '@documenso/trpc/react';
+import { Combobox } from '@documenso/ui/primitives/combobox';
+
+type DataTableSenderFilterProps = {
+  teamId: number;
+};
+
+export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const isMounted = useIsMounted();
+
+  const senderIds = parseToNumberArray(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 (
+    <Combobox
+      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}
+    />
+  );
+};

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

@@ -27,9 +27,15 @@ export type DocumentsDataTableProps = {
       User: Pick<User, 'id' | 'name' | 'email'>;
     }
   >;
+  showSenderColumn?: boolean;
+  teamUrl?: string;
 };
 
-export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+export const DocumentsDataTable = ({
+  results,
+  showSenderColumn,
+  teamUrl,
+}: DocumentsDataTableProps) => {
   const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
 
@@ -61,6 +67,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 +90,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 teamUrl={teamUrl} row={row.original} />
+                  <DataTableActionDropdown teamUrl={teamUrl} row={row.original} />
                 </div>
               ),
           },
@@ -90,6 +101,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>

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

@@ -0,0 +1,154 @@
+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 { GetStatsInput } from '@documenso/lib/server-only/document/get-stats';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import { parseToNumberArray } from '@documenso/lib/utils/params';
+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 {
+  type PeriodSelectorValue,
+  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 DocumentsPageComponentProps = {
+  searchParams?: {
+    status?: ExtendedDocumentStatus;
+    period?: PeriodSelectorValue;
+    page?: string;
+    perPage?: string;
+    senderIds?: string;
+  };
+  team?: Team & { teamEmail?: TeamEmail | null };
+};
+
+export default async function DocumentsPageComponent({
+  searchParams = {},
+  team,
+}: DocumentsPageComponentProps) {
+  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 documentsPath = team ? `/t/${team.url}/documents` : '/documents';
+  const senderIds = parseToNumberArray(searchParams.senderIds ?? '');
+
+  let teamStatOptions: GetStatsInput['team'] = undefined;
+
+  if (team) {
+    teamStatOptions = {
+      teamId: team.id,
+      teamEmail: team.teamEmail?.email,
+      senderIds,
+    };
+  }
+
+  const stats = await getStats({
+    user,
+    team: teamStatOptions,
+  });
+
+  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 `${documentsPath}?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <UploadDocument team={team ? { id: team.id, url: team.url } : undefined} />
+
+      <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 defaultValue={status} className="overflow-x-auto">
+            <TabsList>
+              {[
+                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} />
+
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 hidden opacity-50 md:inline-block">
+                        {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}
+            teamUrl={team?.url}
+          />
+        )}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/navigation';
 
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -16,12 +17,14 @@ type DuplicateDocumentDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  teamUrl?: string;
 };
 
 export const DuplicateDocumentDialog = ({
   id,
   open,
   onOpenChange,
+  teamUrl,
 }: DuplicateDocumentDialogProps) => {
   const router = useRouter();
   const { toast } = useToast();
@@ -37,10 +40,12 @@ export const DuplicateDocumentDialog = ({
       }
     : undefined;
 
+  const documentsPath = formatDocumentsPath(teamUrl);
+
   const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
       onSuccess: (newId) => {
-        router.push(`/documents/${newId}`);
+        router.push(`${documentsPath}/${newId}`);
 
         toast({
           title: 'Document Duplicated',

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

@@ -1,114 +1,10 @@
-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 { 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 type { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
-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 { DocumentsPageComponentProps } from './documents-page-component';
+import DocumentsPageComponent from './documents-page-component';
 
 export type DocumentsPageProps = {
-  searchParams?: {
-    status?: ExtendedDocumentStatus;
-    period?: PeriodSelectorValue;
-    page?: string;
-    perPage?: string;
-  };
+  searchParams?: DocumentsPageComponentProps['searchParams'];
 };
 
-export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const { user } = await getRequiredServerComponentSession();
-
-  const stats = await getStats({
-    user,
-  });
-
-  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 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 defaultValue={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 hidden opacity-50 md:inline-block">
-                        {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 <DocumentsPageComponent searchParams={searchParams} />;
 }

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

@@ -20,9 +20,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();
   const { data: session } = useSession();
@@ -49,6 +53,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       const { id } = await createDocument({
         title: file.name,
         documentDataId,
+        teamId: team?.id,
       });
 
       toast({
@@ -63,7 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         timestamp: new Date().toISOString(),
       });
 
-      router.push(`/documents/${id}`);
+      router.push(team?.id !== undefined ? `/t/${team.url}/documents/${id}` : `/documents/${id}`);
     } catch (error) {
       console.error(error);
 
@@ -94,11 +99,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 && (
@@ -107,7 +114,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">

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

@@ -7,6 +7,7 @@ import { getServerSession } from 'next-auth';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
@@ -26,13 +27,17 @@ export default async function AuthenticatedDashboardLayout({
     redirect('/signin');
   }
 
-  const { user } = await getRequiredServerComponentSession();
+  const [{ user }, teams] = await Promise.all([
+    getRequiredServerComponentSession(),
+    getTeams({ userId: session.user.id }),
+  ]);
 
   return (
     <NextAuthProvider session={session}>
       <LimitsProvider>
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
-        <Header user={user} />
+
+        <Header user={user} teams={teams} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
 

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

@@ -7,7 +7,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { createBillingPortal } from './create-billing-portal.action';
 
-export const BillingPortalButton = () => {
+export type BillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+};
+
+export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
   const { toast } = useToast();
 
   const [isFetchingPortalUrl, setIsFetchingPortalUrl] = useState(false);
@@ -48,7 +52,11 @@ export const BillingPortalButton = () => {
   };
 
   return (
-    <Button onClick={async () => handleFetchPortalUrl()} loading={isFetchingPortalUrl}>
+    <Button
+      {...buttonProps}
+      onClick={async () => handleFetchPortalUrl()}
+      loading={isFetchingPortalUrl}
+    >
       Manage Subscription
     </Button>
   );

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AcceptTeamInvitationButtonProps = {
+  teamId: number;
+};
+
+export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButtonProps) => {
+  const { toast } = useToast();
+
+  const {
+    mutateAsync: acceptTeamInvitation,
+    isLoading,
+    isSuccess,
+  } = trpc.team.acceptTeamInvitation.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'Accepted team invitation',
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Something went wrong',
+        variant: 'destructive',
+        duration: 10000,
+        description: 'Unable to join this team at this time.',
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={async () => acceptTeamInvitation({ teamId })}
+      loading={isLoading}
+      disabled={isLoading || isSuccess}
+    >
+      Accept
+    </Button>
+  );
+};

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { trpc } from '@documenso/trpc/react';
+
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import CreateTeamDialog from '~/components/(teams)/dialogs/create-team-dialog';
+import UserTeamsPageDataTable from '~/components/(teams)/tables/user-teams-page-data-table';
+
+import TeamEmailUsage from './team-email-usage';
+import { TeamInvitations } from './team-invitations';
+
+export default function TeamsSettingsPage() {
+  const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
+
+  return (
+    <div>
+      <SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
+        <CreateTeamDialog />
+      </SettingsHeader>
+
+      <UserTeamsPageDataTable />
+
+      <AnimatePresence>
+        {teamEmail && (
+          <motion.section
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+            }}
+            exit={{
+              opacity: 0,
+            }}
+          >
+            <TeamEmailUsage teamEmail={teamEmail} />
+          </motion.section>
+        )}
+      </AnimatePresence>
+
+      <TeamInvitations />
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { TeamEmail } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamEmailUsageProps = {
+  teamEmail: TeamEmail & { team: { name: string; url: string } };
+};
+
+export default function TeamEmailUsage({ teamEmail }: TeamEmailUsageProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully revoked access.',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
+        });
+      },
+    });
+
+  return (
+    <div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+      <div className="text-sm">
+        <h3 className="text-base font-medium">Team email</h3>
+
+        <p className="text-muted-foreground">
+          Your email is currently being used by team{' '}
+          <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
+          ).
+        </p>
+
+        <p className="text-muted-foreground mt-1">They have permission on your behalf to:</p>
+
+        <ul className="text-muted-foreground mt-0.5 list-inside list-disc">
+          <li>Display your name and email in documents</li>
+          <li>View all documents sent to your account</li>
+        </ul>
+      </div>
+
+      <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
+        <DialogTrigger asChild>
+          <Button variant="destructive">Revoke access</Button>
+        </DialogTrigger>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you sure?</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              You are about to revoke access for team{' '}
+              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
+              use your email.
+            </DialogDescription>
+          </DialogHeader>
+
+          <fieldset disabled={isDeletingTeamEmail}>
+            <DialogFooter className="space-x-4">
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeletingTeamEmail}
+                onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
+              >
+                Revoke
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { BellIcon } from 'lucide-react';
+
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+import { AcceptTeamInvitationButton } from './accept-team-invitation-button';
+
+export const TeamInvitations = () => {
+  const { data, isInitialLoading } = trpc.team.getTeamInvitations.useQuery();
+
+  return (
+    <AnimatePresence>
+      {data && data.length > 0 && !isInitialLoading && (
+        <motion.div
+          className="mt-8 flex flex-row items-center justify-between rounded-md bg-blue-50 p-6"
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+          }}
+          exit={{
+            opacity: 0,
+          }}
+        >
+          {/* Todo: Teams - Extract into `Alerts` component? */}
+          <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
+
+          <div className="text-sm text-blue-700">
+            You have <strong>{data.length}</strong> pending team invitation
+            {data.length > 1 ? 's' : ''}.
+          </div>
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
+                View invites
+              </button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Pending invitations</DialogTitle>
+
+                <DialogDescription className="mt-4">
+                  You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
+                </DialogDescription>
+              </DialogHeader>
+
+              <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
+                {data.map((invitation) => (
+                  <li key={invitation.teamId}>
+                    <AvatarWithText
+                      className="w-full max-w-none py-4"
+                      avatarFallback={invitation.team.name.slice(0, 1)}
+                      primaryText={
+                        <span className="text-foreground/80 font-semibold">
+                          {invitation.team.name}
+                        </span>
+                      }
+                      secondaryText={formatTeamUrl(invitation.team.url)}
+                      rightSideComponent={
+                        <div className="ml-auto">
+                          <AcceptTeamInvitationButton teamId={invitation.team.id} />
+                        </div>
+                      }
+                    />
+                  </li>
+                ))}
+              </ul>
+            </DialogContent>
+          </Dialog>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/layout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { GetTeamsResponse, getTeams } from '@documenso/lib/server-only/team/get-teams';
 
 import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
 import { NextAuthProvider } from '~/providers/next-auth';
@@ -12,10 +13,16 @@ export type SigningLayoutProps = {
 export default async function SigningLayout({ children }: SigningLayoutProps) {
   const { user, session } = await getServerComponentSession();
 
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
   return (
     <NextAuthProvider session={session}>
       <div className="min-h-screen">
-        {user && <AuthenticatedHeader user={user} />}
+        {user && <AuthenticatedHeader user={user} teams={teams} />}
 
         <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
       </div>

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { getServerSession } from 'next-auth';
+
+import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
+import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { Header } from '~/components/(dashboard)/layout/header';
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+export type AuthenticatedDashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function AuthenticatedTeamsDashboardLayout({
+  children,
+}: AuthenticatedDashboardLayoutProps) {
+  const session = await getServerSession(NEXT_AUTH_OPTIONS);
+
+  if (!session) {
+    redirect('/signin');
+  }
+
+  const [{ user }, teams] = await Promise.all([
+    getRequiredServerComponentSession(),
+    getTeams({ userId: session.user.id }),
+  ]);
+
+  return (
+    <NextAuthProvider session={session}>
+      <LimitsProvider>
+        <Header user={user} teams={teams} />
+
+        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+
+        <RefreshOnFocus />
+      </LimitsProvider>
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx

@@ -0,0 +1,20 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+
+import DocumentPageComponent from '~/app/(dashboard)/documents/[id]/document-page-component';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+    teamUrl: string;
+  };
+};
+
+export default async function DocumentPage({ params }: DocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentPageComponent params={params} team={team} />;
+}

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/sent/page.tsx

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

apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx

@@ -0,0 +1,24 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+
+import type { DocumentsPageComponentProps } from '~/app/(dashboard)/documents/documents-page-component';
+import DocumentsPageComponent from '~/app/(dashboard)/documents/documents-page-component';
+
+export type TeamsDocumentPageProps = {
+  params: {
+    teamUrl: string;
+  };
+  searchParams?: DocumentsPageComponentProps['searchParams'];
+};
+
+export default async function TeamsDocumentPage({
+  params,
+  searchParams = {},
+}: TeamsDocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentsPageComponent searchParams={searchParams} team={team} />;
+}

apps/web/src/app/(teams)/t/[teamUrl]/error.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { AppErrorCode } from '@documenso/lib/errors/app-error';
+import { Button } from '@documenso/ui/primitives/button';
+
+type ErrorProps = {
+  error: Error & { digest?: string };
+};
+
+export default function ErrorPage({ error }: ErrorProps) {
+  const router = useRouter();
+
+  let errorMessage = 'Unknown error';
+  let errorDetails = '';
+
+  if (error.message === AppErrorCode.UNAUTHORIZED) {
+    errorMessage = 'Unauthorized';
+    errorDetails = 'You are not authorized to view this page.';
+  }
+
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">{errorMessage}</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">{errorDetails}</p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button
+            variant="ghost"
+            className="w-32"
+            onClick={() => {
+              void router.back();
+            }}
+          >
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Go Back
+          </Button>
+
+          <Button asChild>
+            <Link href="/settings/teams">View teams</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Team not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The team you are looking for may have been removed, renamed or may have never existed.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/settings/teams">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx

@@ -0,0 +1,85 @@
+import { DateTime } from 'luxon';
+import type Stripe from 'stripe';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { BillingPortalButton } from '~/app/(dashboard)/settings/billing/billing-portal-button';
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import TeamBillingInvoicesDataTable from '~/components/(teams)/tables/team-billing-invoices-data-table';
+
+export type TeamsSettingsBillingPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingBillingPage({ params }: TeamsSettingsBillingPageProps) {
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  const isUserOwnerOfTeam = team.ownerUserId === session.user.id;
+
+  let teamSubscription: Stripe.Subscription | null = null;
+
+  if (team.subscriptionId) {
+    teamSubscription = await stripe.subscriptions.retrieve(team.subscriptionId);
+  }
+
+  const formatTeamSubscriptionDetails = (subscription: Stripe.Subscription | null) => {
+    if (!subscription) {
+      return 'No payment required';
+    }
+
+    const numberOfSeats = subscription.items.data[0].quantity ?? 0;
+
+    const formattedTeamMemberQuanity = numberOfSeats > 1 ? `${numberOfSeats} members` : '1 member';
+
+    const formattedDate = DateTime.fromSeconds(subscription.current_period_end).toFormat(
+      'LLL dd, yyyy',
+    );
+
+    return `${formattedTeamMemberQuanity} • Monthly • Renews: ${formattedDate}`;
+  };
+
+  return (
+    <div>
+      <SettingsHeader title="Billing" subtitle="Your subscription is currently active." />
+
+      <Card gradient className="shadow-sm">
+        <CardContent className="flex flex-row items-center justify-between p-4">
+          <div className="flex flex-col text-sm">
+            <p className="text-foreground font-semibold">
+              Current plan: {teamSubscription ? 'Team' : 'Community Team'}
+            </p>
+
+            <p className="text-muted-foreground mt-0.5">
+              {formatTeamSubscriptionDetails(teamSubscription)}
+            </p>
+          </div>
+
+          {teamSubscription && (
+            <div
+              title={
+                isUserOwnerOfTeam
+                  ? 'Manage your team subscription.'
+                  : 'You must be the owner of this team to directly manage the billing.'
+              }
+            >
+              <BillingPortalButton buttonProps={{ disabled: !isUserOwnerOfTeam }} />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <section className="mt-6">
+        <TeamBillingInvoicesDataTable teamId={team.id} />
+      </section>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { notFound } from 'next/navigation';
+
+import { canExecuteTeamAction } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+
+import { DesktopNav } from '~/components/(teams)/settings/layout/desktop-nav';
+import { MobileNav } from '~/components/(teams)/settings/layout/mobile-nav';
+
+export type DashboardSettingsLayoutProps = {
+  children: React.ReactNode;
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsLayout({
+  children,
+  params: { teamUrl },
+}: DashboardSettingsLayoutProps) {
+  const session = await getRequiredServerComponentSession();
+
+  try {
+    const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+    if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
+      throw new Error(AppErrorCode.UNAUTHORIZED);
+    }
+  } catch (e) {
+    const error = AppError.parseError(e);
+
+    if (error.code === 'P2025') {
+      notFound();
+    }
+
+    throw e;
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Team Settings</h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <DesktopNav className="hidden md:col-span-3 md:flex" />
+        <MobileNav className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">{children}</div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx

@@ -0,0 +1,34 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import InviteTeamMembersDialog from '~/components/(teams)/dialogs/invite-team-member-dialog';
+import TeamsMemberPageDataTable from '~/components/(teams)/tables/teams-member-page-data-table';
+
+export type TeamsSettingsMembersPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsMembersPage({ params }: TeamsSettingsMembersPageProps) {
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  return (
+    <div>
+      <SettingsHeader title="Members" subtitle="Manage the members or invite new members.">
+        <InviteTeamMembersDialog teamId={team.id} />
+      </SettingsHeader>
+
+      <TeamsMemberPageDataTable
+        teamId={team.id}
+        teamName={team.name}
+        teamOwnerUserId={team.ownerUserId}
+      />
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx

@@ -0,0 +1,156 @@
+import { CheckCircle2, Clock } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import AddTeamEmailDialog from '~/components/(teams)/dialogs/add-team-email-dialog';
+import DeleteTeamDialog from '~/components/(teams)/dialogs/delete-team-dialog';
+import TransferTeamDialog from '~/components/(teams)/dialogs/transfer-team-dialog';
+import UpdateTeamForm from '~/components/(teams)/forms/update-team-form';
+
+import TeamEmailDropdown from './team-email-dropdown';
+import { TeamTransferStatus } from './team-transfer-status';
+
+export type TeamsSettingsPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsPage({ params }: TeamsSettingsPageProps) {
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  const isTransferVerificationExpired =
+    !team.transferVerification || isTokenExpired(team.transferVerification.expiresAt);
+
+  return (
+    <div>
+      <SettingsHeader title="Team Profile" subtitle="Here you can edit your team's details." />
+
+      <TeamTransferStatus
+        teamId={team.id}
+        transferVerification={team.transferVerification}
+        className="mb-4"
+      />
+
+      <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+
+      <section className="mt-6 space-y-6">
+        {(team.teamEmail || team.emailVerification) && (
+          <section className="rounded-lg bg-gray-50/70 p-6 pb-2">
+            <h3 className="font-medium">Team email</h3>
+
+            <p className="text-muted-foreground text-sm">
+              You can view documents associated with this email and use this identity when sending
+              documents.
+            </p>
+
+            <hr className="border-border/50 mt-2" />
+
+            <div className="flex flex-row items-center justify-between py-4">
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={extractInitials(
+                  (team.teamEmail?.name || team.emailVerification?.name) ?? '',
+                )}
+                primaryText={
+                  <span className="text-foreground/80 text-sm font-semibold">
+                    {team.teamEmail?.name || team.emailVerification?.name}
+                  </span>
+                }
+                secondaryText={
+                  <span className="text-sm">
+                    {team.teamEmail?.email || team.emailVerification?.email}
+                  </span>
+                }
+              />
+
+              <div className="flex flex-row items-center pr-2">
+                <div className="text-muted-foreground mr-4 flex flex-row items-center text-sm xl:mr-8">
+                  {team.teamEmail ? (
+                    <>
+                      <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
+                      Active
+                    </>
+                  ) : team.emailVerification && team.emailVerification.expiresAt < new Date() ? (
+                    <>
+                      <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
+                      Expired
+                    </>
+                  ) : (
+                    team.emailVerification && (
+                      <>
+                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
+                        Awaiting email confirmation
+                      </>
+                    )
+                  )}
+                </div>
+
+                <TeamEmailDropdown team={team} />
+              </div>
+            </div>
+          </section>
+        )}
+
+        {!team.teamEmail && !team.emailVerification && (
+          <div className="flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+            <div>
+              <h3 className="font-medium">Team email</h3>
+
+              <ul className="text-muted-foreground mt-0.5 list-inside list-disc text-sm">
+                <li>Display this name and email when sending documents</li>
+                <li>View documents associated with this email</li>
+              </ul>
+            </div>
+
+            <AddTeamEmailDialog teamId={team.id} />
+          </div>
+        )}
+
+        {team.ownerUserId === session.user.id && (
+          <>
+            {isTransferVerificationExpired && (
+              <div className="flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+                <div>
+                  <h3 className="font-medium">Transfer team</h3>
+
+                  <p className="text-muted-foreground text-sm">
+                    Transfer the ownership of the team to another team member.
+                  </p>
+                </div>
+
+                <TransferTeamDialog
+                  ownerUserId={team.ownerUserId}
+                  teamId={team.id}
+                  teamName={team.name}
+                />
+              </div>
+            )}
+
+            <div className="flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+              <div>
+                <h3 className="font-medium">Delete team</h3>
+
+                <p className="text-muted-foreground text-sm">
+                  This team, and any associated data excluding billing invoices will be permanently
+                  deleted.
+                </p>
+              </div>
+
+              <DeleteTeamDialog teamId={team.id} teamName={team.name} />
+            </div>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Edit, Loader, Mail, MoreHorizontal, X } from 'lucide-react';
+
+import type { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
+import { trpc } from '@documenso/trpc/react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import UpdateTeamEmailDialog from '~/components/(teams)/dialogs/update-team-email-dialog';
+
+export type TeamsSettingsPageProps = {
+  team: Awaited<ReturnType<typeof getTeamByUrl>>;
+};
+
+export default function TeamEmailDropdown({ team }: TeamsSettingsPageProps) {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { mutateAsync: resendEmailVerification, isLoading: isResendingEmailVerification } =
+    trpc.team.resendTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Email verification has been resent',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to resend verification at this time. Please try again.',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Team email has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove team email at this time. Please try again.',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmailVerification, isLoading: isDeletingTeamEmailVerification } =
+    trpc.team.deleteTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Email verification has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove email verification at this time. Please try again.',
+        });
+      },
+    });
+
+  const onRemove = async () => {
+    if (team.teamEmail) {
+      await deleteTeamEmail({ teamId: team.id });
+    }
+
+    if (team.emailVerification) {
+      await deleteTeamEmailVerification({ teamId: team.id });
+    }
+
+    router.refresh();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        {!team.teamEmail && team.emailVerification && (
+          <DropdownMenuItem
+            disabled={isResendingEmailVerification}
+            onClick={(e) => {
+              e.preventDefault();
+              void resendEmailVerification({ teamId: team.id });
+            }}
+          >
+            {isResendingEmailVerification ? (
+              <Loader className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Mail className="mr-2 h-4 w-4" />
+            )}
+            Resend verification
+          </DropdownMenuItem>
+        )}
+
+        {team.teamEmail && (
+          <UpdateTeamEmailDialog
+            teamEmail={team.teamEmail}
+            trigger={
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Edit className="mr-2 h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+            }
+          />
+        )}
+
+        <DropdownMenuItem
+          disabled={isDeletingTeamEmail || isDeletingTeamEmailVerification}
+          onClick={async () => onRemove()}
+        >
+          <X className="mr-2 h-4 w-4" />
+          Remove
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import type { TeamTransferVerification } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamTransferStatusProps = {
+  className?: string;
+  teamId: number;
+  transferVerification: TeamTransferVerification | null;
+};
+
+export const TeamTransferStatus = ({
+  className,
+  teamId,
+  transferVerification,
+}: TeamTransferStatusProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const isExpired = transferVerification && isTokenExpired(transferVerification.expiresAt);
+
+  const { mutateAsync: deleteTeamTransferRequest, isLoading } =
+    trpc.team.deleteTeamTransferRequest.useMutation({
+      onSuccess: () => {
+        if (!isExpired) {
+          toast({
+            title: 'Success',
+            description: 'The team transfer invitation has been successfully deleted.',
+            duration: 5000,
+          });
+        }
+
+        router.refresh();
+      },
+      onError: () => {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to remove this transfer. Please try again or contact support.',
+        });
+      },
+    });
+
+  return (
+    <AnimatePresence>
+      {transferVerification && (
+        <motion.div
+          className={cn(
+            'flex flex-row items-center justify-between rounded-lg border-2 border-yellow-400 bg-yellow-200 px-6 py-4 dark:border-yellow-600 dark:bg-yellow-400',
+            className,
+          )}
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+          }}
+          exit={{
+            opacity: 0,
+          }}
+        >
+          <div className="text-yellow-900">
+            <h3 className="font-medium">
+              {isExpired ? 'Team transfer request expired' : 'Team transfer in progress'}
+            </h3>
+
+            {isExpired ? (
+              <p className="text-sm">
+                The team transfer request to <strong>{transferVerification.name}</strong> has
+                expired.
+              </p>
+            ) : (
+              <section className="text-sm">
+                <p>
+                  A request to transfer the ownership of this team has been sent to{' '}
+                  <strong>{transferVerification.name}</strong>
+                </p>
+
+                <p>If they accept this request, the team will be transferred to their account.</p>
+              </section>
+            )}
+          </div>
+
+          <Button
+            onClick={async () => deleteTeamTransferRequest({ teamId })}
+            loading={isLoading}
+            variant="destructive"
+            className="ml-auto mt-2"
+          >
+            {isExpired ? 'Close' : 'Cancel'}
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -2,7 +2,15 @@ import Link from 'next/link';
 
 import { SignInForm } from '~/components/forms/signin';
 
-export default function SignInPage() {
+type SignInPageProps = {
+  searchParams: {
+    email?: string;
+  };
+};
+
+export default function SignInPage({ searchParams }: SignInPageProps) {
+  const email = typeof searchParams.email === 'string' ? searchParams.email : undefined;
+
   return (
     <div>
       <h1 className="text-4xl font-semibold">Sign in to your account</h1>
@@ -11,7 +19,7 @@ export default function SignInPage() {
         Welcome back, we are lucky to have you.
       </p>
 
-      <SignInForm className="mt-4" />
+      <SignInForm initialEmail={email} className="mt-4" />
 
       {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
         <p className="text-muted-foreground mt-6 text-center text-sm">

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -3,11 +3,19 @@ import { redirect } from 'next/navigation';
 
 import { SignUpForm } from '~/components/forms/signup';
 
-export default function SignUpPage() {
+type SignUpPageProps = {
+  searchParams: {
+    email?: string;
+  };
+};
+
+export default function SignUpPage({ searchParams }: SignUpPageProps) {
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     redirect('/signin');
   }
 
+  const email = typeof searchParams.email === 'string' ? searchParams.email : undefined;
+
   return (
     <div>
       <h1 className="text-4xl font-semibold">Create a new account</h1>
@@ -17,7 +25,7 @@ export default function SignUpPage() {
         signing is within your grasp.
       </p>
 
-      <SignUpForm className="mt-4" />
+      <SignUpForm initialEmail={email} className="mt-4" />
 
       <p className="text-muted-foreground mt-6 text-center text-sm">
         Already have an account?{' '}

apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx

@@ -0,0 +1,119 @@
+import Link from 'next/link';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { acceptTeamInvitation } from '@documenso/lib/server-only/team/accept-team-invitation';
+import { getTeamById } from '@documenso/lib/server-only/team/get-teams';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberInviteStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+type AcceptInvitationPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function AcceptInvitationPage({
+  params: { token },
+}: AcceptInvitationPageProps) {
+  const session = await getServerComponentSession();
+
+  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!teamMemberInvite) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid token</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This token is invalid or has expired. Please contact your team for a new invitation.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const team = await getTeamById({ teamId: teamMemberInvite.teamId });
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: {
+        equals: teamMemberInvite.email,
+        mode: 'insensitive',
+      },
+    },
+  });
+
+  // Directly convert the team member invite to a team member if they already have an account.
+  if (user) {
+    await acceptTeamInvitation({ userId: user.id, teamId: team.id });
+  }
+
+  // Set the team invite status to accepted, which is checked during user creation
+  // to determine if we should add the user to the team at that time.
+  if (!user && teamMemberInvite.status !== TeamMemberInviteStatus.ACCEPTED) {
+    await prisma.teamMemberInvite.update({
+      where: {
+        id: teamMemberInvite.id,
+      },
+      data: {
+        status: TeamMemberInviteStatus.ACCEPTED,
+      },
+    });
+  }
+
+  const isSessionUserTheInvitedUser = user && user.id === session.user?.id;
+
+  if (!user) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team invitation</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You have been invited by <strong>{team.name}</strong> to join their team.
+        </p>
+
+        <p className="text-muted-foreground mb-4 mt-1 text-sm">
+          To accept this invitation you must create an account.
+        </p>
+
+        <Button asChild>
+          <Link href={`/signup?email=${encodeURIComponent(teamMemberInvite.email)}`}>
+            Create account
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Invitation accepted!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        You have accepted an invitation from <strong>{team.name}</strong> to join their team.
+      </p>
+
+      {user && !isSessionUserTheInvitedUser && (
+        <Button asChild>
+          <Link href={`/signin?email=${encodeURIComponent(teamMemberInvite.email)}`}>
+            Continue to login
+          </Link>
+        </Button>
+      )}
+
+      {isSessionUserTheInvitedUser && (
+        <Button asChild>
+          <Link href="/">Continue</Link>
+        </Button>
+      )}
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx

@@ -0,0 +1,81 @@
+import Link from 'next/link';
+
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+type VerifyTeamEmailPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyTeamEmailPage({ params: { token } }: VerifyTeamEmailPageProps) {
+  const teamEmailVerification = await prisma.teamEmailVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamEmailVerification || teamEmailVerification.expiresAt < new Date()) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid link</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This link is invalid or has expired. Please contact your team to resend a verification.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { team } = teamEmailVerification;
+
+  try {
+    await prisma.$transaction([
+      prisma.teamEmailVerification.deleteMany({
+        where: {
+          teamId: team.id,
+        },
+      }),
+      prisma.teamEmail.create({
+        data: {
+          teamId: team.id,
+          email: teamEmailVerification.email,
+          name: teamEmailVerification.name,
+        },
+      }),
+    ]);
+  } catch {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team email verification</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          Something went wrong while attempting to verify your email address for{' '}
+          <strong>{team.name}</strong>. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Team email verified!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        You have verified your email address for <strong>{team.name}</strong>.
+      </p>
+
+      <Button asChild>
+        <Link href="/">Continue</Link>
+      </Button>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx

@@ -0,0 +1,74 @@
+import Link from 'next/link';
+
+import { transferTeamOwnership } from '@documenso/lib/server-only/team/transfer-team-ownership';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+type VerifyTeamTransferPage = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyTeamTransferPage({
+  params: { token },
+}: VerifyTeamTransferPage) {
+  const teamTransferVerification = await prisma.teamTransferVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamTransferVerification || teamTransferVerification.expiresAt < new Date()) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid link</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This link is invalid or has expired. Please contact your team to resend a transfer
+          request.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { team } = teamTransferVerification;
+
+  try {
+    await transferTeamOwnership({ token });
+  } catch (e) {
+    console.error(e);
+
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team ownership transfer</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          Something went wrong while attempting to transfer the ownership of team{' '}
+          <strong>{team.name}</strong> to your. Please try again later or contact support.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Team ownership transferred!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        The ownership of team <strong>{team.name}</strong> has been successfully transferred to you.
+      </p>
+
+      <Button asChild>
+        <Link href={`/t/${team.url}/settings`}>Continue</Link>
+      </Button>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
+import { useParams } from 'next/navigation';
 
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -15,9 +16,12 @@ import { ProfileDropdown } from './profile-dropdown';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
+  teams: GetTeamsResponse;
 };
 
-export const Header = ({ className, user, ...props }: HeaderProps) => {
+export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+  const params = useParams();
+
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -30,6 +34,14 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  const getRootHref = () => {
+    if (typeof params?.teamUrl === 'string') {
+      return `/t/${params.teamUrl}`;
+    }
+
+    return '/';
+  };
+
   return (
     <header
       className={cn(
@@ -41,7 +53,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          href="/"
+          href={getRootHref()}
           className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
         >
           <Logo className="h-6 w-auto" />
@@ -50,11 +62,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
         <DesktopNav />
 
         <div className="flex gap-x-4 md:ml-8">
-          <ProfileDropdown user={user} />
-
-          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
-            <Menu className="h-6 w-6" />
-          </Button> */}
+          <ProfileDropdown user={user} teams={teams} />
         </div>
       </div>
     </header>

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -1,162 +1,210 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
-import {
-  CreditCard,
-  FileSpreadsheet,
-  Lock,
-  LogOut,
-  User as LucideUser,
-  Monitor,
-  Moon,
-  Palette,
-  Sun,
-  UserCog,
-} from 'lucide-react';
+import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
-import { useTheme } from 'next-themes';
-import { LuGithub } from 'react-icons/lu';
 
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { TEAM_MEMBER_ROLE_MAP, canExecuteTeamAction } from '@documenso/lib/constants/teams';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
-import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { User } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
 export type ProfileDropdownProps = {
   user: User;
+  teams: GetTeamsResponse;
 };
 
-export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { getFlag } = useFeatureFlags();
-  const { theme, setTheme } = useTheme();
+export const ProfileDropdown = ({ user, teams: initialTeamsData }: ProfileDropdownProps) => {
+  const pathname = usePathname();
+
   const isUserAdmin = isAdmin(user);
 
-  const isBillingEnabled = getFlag('app_billing');
+  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
+    initialData: initialTeamsData,
+  });
 
-  const avatarFallback = user.name
-    ? recipientInitials(user.name)
-    : user.email.slice(0, 1).toUpperCase();
+  const teams = teamsQueryResult && teamsQueryResult.length > 0 ? teamsQueryResult : null;
+
+  const isPathTeamUrl = (teamUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/t/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === teamUrl;
+  };
+
+  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+
+  const formatAvatarFallback = (teamName?: string) => {
+    if (teamName !== undefined) {
+      return teamName.slice(0, 1).toUpperCase();
+    }
+
+    return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
+  };
+
+  const formatSecondaryAvatarText = (team?: typeof selectedTeam) => {
+    if (!team) {
+      return 'Personal Account';
+    }
+
+    if (team.ownerUserId === user.id) {
+      return 'Owner';
+    }
+
+    return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
+  };
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          title="Profile Dropdown"
-          className="relative h-10 w-10 rounded-full"
+          className="relative flex h-12 flex-row items-center px-2 py-2 focus-visible:ring-0"
         >
-          <Avatar className="h-10 w-10">
-            <AvatarFallback>{avatarFallback}</AvatarFallback>
-          </Avatar>
+          {/* Todo */}
+          <AvatarWithText
+            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
+            primaryText={selectedTeam ? selectedTeam.name : user.name}
+            secondaryText={formatSecondaryAvatarText(selectedTeam)}
+            rightSideComponent={
+              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+            }
+          />
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="w-56" align="end" forceMount>
-        <DropdownMenuLabel>Account</DropdownMenuLabel>
-
-        {isUserAdmin && (
+      <DropdownMenuContent
+        className={cn('w-full', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        align="end"
+        forceMount
+      >
+        {teams ? (
           <>
+            <DropdownMenuLabel>Personal</DropdownMenuLabel>
+
             <DropdownMenuItem asChild>
-              <Link href="/admin" className="cursor-pointer">
-                <UserCog className="mr-2 h-4 w-4" />
-                Admin
+              <Link href="/">
+                <AvatarWithText
+                  avatarFallback={formatAvatarFallback()}
+                  primaryText={user.name}
+                  secondaryText={formatSecondaryAvatarText()}
+                  rightSideComponent={
+                    !pathname?.startsWith(`/t/`) && (
+                      <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                    )
+                  }
+                />
               </Link>
             </DropdownMenuItem>
 
-            <DropdownMenuSeparator />
+            <DropdownMenuSeparator className="mt-2" />
+
+            <DropdownMenuLabel>
+              <div className="flex flex-row items-center justify-between">
+                <p>Teams</p>
+
+                <div className="flex flex-row space-x-2">
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Manage teams"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams">
+                        <Settings2 className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Manage teams"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams?action=add-team">
+                        <Plus className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            {teams.map((team) => (
+              <DropdownMenuItem asChild key={team.id}>
+                <Link href={`/t/${team.url}`}>
+                  <AvatarWithText
+                    avatarFallback={formatAvatarFallback(team.name)}
+                    primaryText={team.name}
+                    secondaryText={formatSecondaryAvatarText(team)}
+                    rightSideComponent={
+                      isPathTeamUrl(team.url) && (
+                        <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                      )
+                    }
+                  />
+                </Link>
+              </DropdownMenuItem>
+            ))}
           </>
-        )}
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/profile" className="cursor-pointer">
-            <LucideUser className="mr-2 h-4 w-4" />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/security" className="cursor-pointer">
-            <Lock className="mr-2 h-4 w-4" />
-            Security
-          </Link>
-        </DropdownMenuItem>
-
-        {isBillingEnabled && (
-          <DropdownMenuItem asChild>
-            <Link href="/settings/billing" className="cursor-pointer">
-              <CreditCard className="mr-2 h-4 w-4" />
-              Billing
+        ) : (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link
+              href="/settings/teams?action=add-team"
+              className="flex items-center justify-between"
+            >
+              Create team
+              <Plus className="ml-2 h-4 w-4" />
             </Link>
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href="/templates" className="cursor-pointer">
-            <FileSpreadsheet className="mr-2 h-4 w-4" />
-            Templates
-          </Link>
-        </DropdownMenuItem>
         <DropdownMenuSeparator />
 
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <Palette className="mr-2 h-4 w-4" />
-            Themes
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent>
-              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-                <DropdownMenuRadioItem value="light">
-                  <Sun className="mr-2 h-4 w-4" /> Light
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="dark">
-                  <Moon className="mr-2 h-4 w-4" />
-                  Dark
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="system">
-                  <Monitor className="mr-2 h-4 w-4" />
-                  System
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
-            <LuGithub className="mr-2 h-4 w-4" />
-            Star on Github
-          </Link>
+        {isUserAdmin && (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link href="/admin">Admin panel</Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <Link href="/settings/profile">User settings</Link>
         </DropdownMenuItem>
 
-        <DropdownMenuSeparator />
+        {selectedTeam &&
+          canExecuteTeamAction('MANAGE_TEAM', selectedTeam.currentTeamMember.role) && (
+            <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+              <Link href={`/t/${selectedTeam.url}/settings/`}>Team settings</Link>
+            </DropdownMenuItem>
+          )}
 
         <DropdownMenuItem
-          onSelect={() =>
-            void signOut({
+          className="text-destructive/90 hover:!text-destructive px-4 py-2"
+          onSelect={async () =>
+            signOut({
               callbackUrl: '/',
             })
           }
         >
-          <LogOut className="mr-2 h-4 w-4" />
           Sign Out
         </DropdownMenuItem>
       </DropdownMenuContent>

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,6 +35,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"

apps/web/src/components/(dashboard)/settings/layout/header.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export type SettingsHeaderProps = {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+};
+
+export default function SettingsHeader({ children, title, subtitle }: SettingsHeaderProps) {
+  return (
+    <>
+      <div className="flex flex-row items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">{title}</h3>
+
+          <p className="text-muted-foreground mt-2 text-sm">{subtitle}</p>
+        </div>
+
+        {children}
+      </div>
+
+      <hr className="my-4" />
+    </>
+  );
+}

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,6 +38,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"

apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZAddTeamEmailVerificationMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AddTeamEmailDialogProps = {
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZAddTeamEmailFormSchema = ZAddTeamEmailVerificationMutationSchema.pick({
+  name: true,
+  email: true,
+});
+
+export type TAddTeamEmailFormSchema = z.infer<typeof ZAddTeamEmailFormSchema>;
+
+export default function AddTeamEmailDialog({ teamId, trigger, ...props }: AddTeamEmailDialogProps) {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TAddTeamEmailFormSchema>({
+    resolver: zodResolver(ZAddTeamEmailFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+    },
+  });
+
+  const { mutateAsync: addTeamEmailVerification, isLoading } =
+    trpc.team.addTeamEmailVerification.useMutation();
+
+  const onFormSubmit = async ({ name, email }: TAddTeamEmailFormSchema) => {
+    try {
+      await addTeamEmailVerification({
+        teamId,
+        name,
+        email,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'We have sent a confirmation email for verification.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('email', {
+          type: 'manual',
+          message: 'This email is already being used by another team.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to add this email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="outline" loading={isLoading} className="bg-background">
+            <Plus className="-ml-1 mr-1 h-5 w-5" />
+            Add email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            A verification email will be sent to the provided email.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="example@example.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="space-x-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Add
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { CreditCard } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreateTeamDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
+  name: true,
+  url: true,
+});
+
+export type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
+
+export default function CreateTeamDialog({ trigger, ...props }: CreateTeamDialogProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [open, setOpen] = useState(false);
+  const [checkoutUrl, setCheckoutUrl] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateTeamFormSchema),
+    defaultValues: {
+      name: '',
+      url: '',
+    },
+  });
+
+  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TCreateTeamFormSchema) => {
+    try {
+      const response = await createTeam({
+        name,
+        url,
+      });
+
+      if (!response.paymentRequired) {
+        toast({
+          title: 'Success',
+          description: 'Your team has been successfully created.',
+          duration: 5000,
+        });
+
+        setOpen(false);
+
+        return;
+      }
+
+      setCheckoutUrl(response.checkoutUrl);
+      router.push(`/settings/teams?tab=pending`);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to create a team. Please try again later.',
+      });
+    }
+  };
+
+  const mapTextToUrl = (text: string) => {
+    return text.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open, setOpen, updateSearchParams]);
+
+  useEffect(() => {
+    setCheckoutUrl(null);
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? <Button variant="secondary">Create team</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Create a team to collaborate with your team members.
+          </DialogDescription>
+        </DialogHeader>
+
+        {checkoutUrl ? (
+          <>
+            <div className="flex h-44 flex-col items-center justify-center rounded-lg bg-gray-50/70">
+              <CreditCard className="h-8 w-8 text-gray-600" />
+              <span className="text-muted-foreground text-sm font-medium">
+                Payment is required to finalise the creation of your team.
+              </span>
+            </div>
+
+            <DialogFooter className="space-x-4">
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                Close
+              </Button>
+
+              <Button type="submit" asChild>
+                <Link href={checkoutUrl} onClick={() => setOpen(false)} target="_blank">
+                  Checkout
+                </Link>
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>Team Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(event) => {
+                            const oldGenericUrl = mapTextToUrl(field.value);
+                            const newGenericUrl = mapTextToUrl(event.target.value);
+
+                            const urlField = form.getValues('url');
+                            if (urlField === oldGenericUrl) {
+                              form.setValue('url', newGenericUrl);
+                            }
+
+                            field.onChange(event);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>Team URL</FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      {!form.formState.errors.url && (
+                        <span className="text-foreground/50 text-xs font-normal">
+                          {field.value
+                            ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                            : 'A unique URL to identify your team'}
+                        </span>
+                      )}
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter className="space-x-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    Create Team
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  trigger?: React.ReactNode;
+};
+
+export default function DeleteTeamDialog({ trigger, teamId, teamName }: DeleteTeamDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const deleteMessage = `delete ${teamName}`;
+
+  const ZDeleteTeamFormSchema = z.object({
+    teamName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZDeleteTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+    },
+  });
+
+  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+
+  const onFormSubmit = async () => {
+    try {
+      await deleteTeam({ teamId });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully deleted.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+
+      router.push('/settings/teams');
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      let toastError: Toast = {
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to delete this team. Please try again later.',
+      };
+
+      if (error.code === 'resource_missing') {
+        toastError = {
+          title: 'Unable to delete team',
+          variant: 'destructive',
+          duration: 15000,
+          description:
+            'Something went wrong while updating the team billing subscription, please contact support.',
+        };
+      }
+
+      toast(toastError);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Delete team</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Are you sure? This is irreversable.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="space-x-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  Delete
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/delete-team-member-dialog.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTeamMemberDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export default function DeleteTeamMemberDialog({
+  trigger,
+  teamId,
+  teamName,
+  teamMemberId,
+  teamMemberName,
+  teamMemberEmail,
+}: DeleteTeamMemberDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamMembers, isLoading: isDeletingTeamMember } =
+    trpc.team.deleteTeamMembers.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully removed this user from the team.',
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to remove this user. Please try again later.',
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeletingTeamMember && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="secondary">Delete team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to remove the following user from{' '}
+            <span className="font-semibold">{teamName}</span>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="bg-accent/50 rounded-lg px-4 py-2">
+          <div className="flex max-w-xs items-center gap-2">
+            <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {teamMemberName.slice(0, 1).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex flex-col text-sm">
+              <span className="text-foreground/80 font-semibold">{teamMemberName}</span>
+              <span className="text-muted-foreground">{teamMemberEmail}</span>
+            </div>
+          </div>
+        </div>
+
+        <fieldset disabled={isDeletingTeamMember}>
+          <DialogFooter className="space-x-4">
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamMember}
+              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Mail, PlusCircle, Trash } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZInviteTeamMembersFormSchema = z
+  .object({
+    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
+  })
+  .refine(
+    (schema) => {
+      const emails = schema.invitations.map((invitation) => invitation.email.toLowerCase());
+
+      return new Set(emails).size === emails.length;
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Members must have unique emails', path: ['members__root'] },
+  );
+
+export type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
+
+export type InviteTeamMembersDialogProps = {
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export default function InviteTeamMembersDialog({
+  teamId,
+  trigger,
+  ...props
+}: InviteTeamMembersDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TInviteTeamMembersFormSchema>({
+    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+    defaultValues: {
+      invitations: [
+        {
+          email: '',
+          role: TeamMemberRole.MEMBER,
+        },
+      ],
+    },
+  });
+
+  const {
+    append: appendTeamMemberInvite,
+    fields: teamMemberInvites,
+    remove: removeTeamMemberInvite,
+  } = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
+
+  const onAddTeamMemberInvite = () => {
+    appendTeamMemberInvite({
+      email: '',
+      role: TeamMemberRole.MEMBER,
+    });
+  };
+
+  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
+    try {
+      await createTeamMemberInvites({
+        teamId,
+        invitations,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team invitations have been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to invite team members. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Invite member</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite team members</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            An email containing an invitation will be sent to each member.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="space-y-4">
+                {teamMemberInvites.map((teamMemberInvite, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                    <FormField
+                      control={form.control}
+                      name={`invitations.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel required>Email address</FormLabel>}
+                          <FormControl>
+                            <Input className="bg-background" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name={`invitations.${index}.role`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel required>Role</FormLabel>}
+                          <FormControl>
+                            <Select {...field} onValueChange={field.onChange}>
+                              <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                <SelectValue />
+                              </SelectTrigger>
+
+                              <SelectContent position="popper">
+                                {Object.values(TeamMemberRole).map((role) => (
+                                  <SelectItem key={role} value={role}>
+                                    {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <button
+                      type="button"
+                      className={cn(
+                        'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                        index === 0 ? 'mt-8' : 'mt-0',
+                      )}
+                      disabled={teamMemberInvites.length === 1}
+                      onClick={() => removeTeamMemberInvite(index)}
+                    >
+                      <Trash className="h-5 w-5" />
+                    </button>
+                  </div>
+                ))}
+
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => onAddTeamMemberInvite()}
+                >
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Add more members
+                </Button>
+
+                <DialogFooter className="space-x-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                    Invite
+                  </Button>
+                </DialogFooter>
+              </div>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type LeaveTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  role: TeamMemberRole;
+  trigger?: React.ReactNode;
+};
+
+export default function LeaveTeamDialog({ trigger, teamId, teamName, role }: LeaveTeamDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: leaveTeam, isLoading: isLeavingTeam } = trpc.team.leaveTeam.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'You have successfully left this team.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to leave this team. Please try again later.',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLeavingTeam && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Leave team</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to leave the following team.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="bg-accent/50 rounded-lg px-4 py-2">
+          <div className="flex max-w-xs items-center gap-2">
+            <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {teamName.slice(0, 1).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex flex-col text-sm">
+              <span className="text-foreground/80 font-semibold">{teamName}</span>
+              <span className="text-muted-foreground">{TEAM_MEMBER_ROLE_MAP[role]}</span>
+            </div>
+          </div>
+        </div>
+
+        <fieldset disabled={isLeavingTeam}>
+          <DialogFooter className="space-x-4">
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isLeavingTeam}
+              onClick={async () => leaveTeam({ teamId })}
+            >
+              Leave
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TransferTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  ownerUserId: number;
+  trigger?: React.ReactNode;
+};
+
+export default function TransferTeamDialog({
+  trigger,
+  teamId,
+  teamName,
+  ownerUserId,
+}: TransferTeamDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: requestTeamOwnershipTransfer } =
+    trpc.team.requestTeamOwnershipTransfer.useMutation();
+
+  const {
+    data,
+    refetch: refetchTeamMembers,
+    isLoading: loadingTeamMembers,
+    isLoadingError: loadingTeamMembersError,
+  } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const confirmTransferMessage = `transfer ${teamName}`;
+
+  const ZDeleteTeamFormSchema = z.object({
+    teamName: z.literal(confirmTransferMessage, {
+      errorMap: () => ({ message: `You must enter '${confirmTransferMessage}' to proceed` }),
+    }),
+    newOwnerUserId: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof ZDeleteTeamFormSchema>>({
+    resolver: zodResolver(ZDeleteTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+    },
+  });
+
+  const onFormSubmit = async ({ newOwnerUserId }: z.infer<typeof ZDeleteTeamFormSchema>) => {
+    try {
+      await requestTeamOwnershipTransfer({
+        teamId,
+        newOwnerUserId: Number.parseInt(newOwnerUserId),
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Success',
+        description: 'An email requesting the transfer of this team has been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to request a transfer of this team. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  useEffect(() => {
+    if (open && loadingTeamMembersError) {
+      void refetchTeamMembers();
+    }
+  }, [open, loadingTeamMembersError, refetchTeamMembers]);
+
+  const teamMembers = data
+    ? data.filter((teamMember) => teamMember.userId !== ownerUserId)
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Transfer team
+          </Button>
+        )}
+      </DialogTrigger>
+
+      {teamMembers && teamMembers.length > 0 ? (
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Transfer team</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              Transfer ownership of this team to a selected team member.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="newOwnerUserId"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>New team owner</FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="text-muted-foreground">
+                            <SelectValue />
+                          </SelectTrigger>
+
+                          <SelectContent position="popper">
+                            {teamMembers.map((teamMember) => (
+                              <SelectItem
+                                key={teamMember.userId}
+                                value={teamMember.userId.toString()}
+                              >
+                                {teamMember.user.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        Confirm by typing{' '}
+                        <span className="text-destructive">{confirmTransferMessage}</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="rounded-lg bg-gray-50/70 p-4">
+                  <p className="text-muted-foreground text-sm">
+                    The selected team member will receive an email which they must accept before the
+                    team is transferred.
+                  </p>
+                </div>
+
+                <DialogFooter className="space-x-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                    Transfer
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      ) : (
+        <DialogContent className="text-muted-foreground flex items-center justify-center py-16 text-sm">
+          {loadingTeamMembers ? (
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          ) : (
+            <p className="text-center text-sm">
+              {loadingTeamMembersError
+                ? 'An error occurred while loading team members. Please try again later.'
+                : 'You must have at least one other team member to transfer ownership.'}
+            </p>
+          )}
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TeamEmail } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AddTeamEmailDialogProps = {
+  teamEmail: TeamEmail;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZUpdateTeamEmailFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+});
+
+export type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
+
+export default function UpdateTeamEmailDialog({
+  teamEmail,
+  trigger,
+  ...props
+}: AddTeamEmailDialogProps) {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TUpdateTeamEmailFormSchema>({
+    resolver: zodResolver(ZUpdateTeamEmailFormSchema),
+    defaultValues: {
+      name: teamEmail.name,
+    },
+  });
+
+  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+
+  const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
+    try {
+      await updateTeamEmail({
+        teamId: teamEmail.teamId,
+        data: {
+          name,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team email was updated.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting update the team email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Update team email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Update team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            To change the email you must remove and add a new email address.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormItem>
+                <FormLabel required>Email</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" value={teamEmail.email} disabled={true} />
+                </FormControl>
+              </FormItem>
+
+              <DialogFooter className="space-x-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/dialogs/update-team-member-dialog.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamMemberDialogProps = {
+  trigger?: React.ReactNode;
+  teamId: number;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberRole: TeamMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZUpdateTeamMemberFormSchema = z.object({
+  role: z.nativeEnum(TeamMemberRole),
+});
+
+export type ZUpdateTeamMemberSchema = z.infer<typeof ZUpdateTeamMemberFormSchema>;
+
+export default function UpdateTeamMemberDialog({
+  trigger,
+  teamId,
+  teamMemberId,
+  teamMemberName,
+  teamMemberRole,
+  ...props
+}: UpdateTeamMemberDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateTeamMemberSchema>({
+    resolver: zodResolver(ZUpdateTeamMemberFormSchema),
+    defaultValues: {
+      role: teamMemberRole,
+    },
+  });
+
+  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
+    try {
+      await updateTeamMember({
+        teamId,
+        teamMemberId,
+        data: {
+          role,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: `You have updated ${teamMemberName}.`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update this team member. Please try again later.',
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Update team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Update team member</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are currently updating <span className="font-bold">{teamMemberName}.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel required>Role</FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent className="w-full" position="popper">
+                          {Object.values(TeamMemberRole).map((role) => (
+                            <SelectItem key={role} value={role}>
+                              {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="mt-4 space-x-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(teams)/forms/update-team-form.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamUrl: string;
+};
+
+export const ZUpdateTeamFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  url: z.string().min(1, 'Please enter a value.'), // Todo: Teams - Restrict certain symbols.
+});
+
+export type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
+
+export default function UpdateTeamForm({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const form = useForm({
+    resolver: zodResolver(ZUpdateTeamFormSchema),
+    defaultValues: {
+      name: teamName,
+      url: teamUrl,
+    },
+  });
+
+  const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+    try {
+      await updateTeam({
+        data: {
+          name,
+          url,
+        },
+        teamId,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully updated.',
+        duration: 5000,
+      });
+
+      form.reset({
+        name,
+        url,
+      });
+
+      if (url !== teamUrl) {
+        router.push(`${WEBAPP_BASE_URL}/t/${url}/settings`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update your team. Please try again later.',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>Team Name</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel required>Team URL</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                {!form.formState.errors.url && (
+                  <span className="text-foreground/50 text-xs font-normal">
+                    {field.value
+                      ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                      : 'A unique URL to identify your team'}
+                  </span>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    Reset
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Update team
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+}

apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { useParams, usePathname } from 'next/navigation';
+
+import { CreditCard, Key, User } from 'lucide-react';
+
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const { getFlag } = useFeatureFlags();
+
+  const isBillingEnabled = getFlag('app_billing');
+
+  const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
+
+  return (
+    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
+      <Link href={`/t/${teamUrl}/settings`}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname === `/t/${teamUrl}/settings` && 'bg-secondary',
+          )}
+        >
+          <User className="mr-2 h-5 w-5" />
+          General
+        </Button>
+      </Link>
+
+      <Link href={`/t/${teamUrl}/settings/members`}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(`/t/${teamUrl}/settings/members`) && 'bg-secondary',
+          )}
+        >
+          <CreditCard className="mr-2 h-5 w-5" />
+          Members
+        </Button>
+      </Link>
+
+      {isBillingEnabled && (
+        <Link href={`/t/${teamUrl}/settings/billing`}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(`/t/${teamUrl}/settings/billing`) && 'bg-secondary',
+            )}
+          >
+            <Key className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};

apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+
+// Todo: Teams
+export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+  // const pathname = usePathname();
+
+  // const { getFlag } = useFeatureFlags();
+
+  // const isBillingEnabled = getFlag('app_billing');
+
+  return (
+    <div
+      className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
+      {...props}
+    >
+      todo
+      {/* <Link href="/settings/profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/profile') && 'bg-secondary',
+          )}
+        >
+          <User className="mr-2 h-5 w-5" />
+          Profile
+        </Button>
+      </Link>
+
+      <Link href="/settings/password">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/password') && 'bg-secondary',
+          )}
+        >
+          <Key className="mr-2 h-5 w-5" />
+          Password
+        </Button>
+      </Link>
+
+      {isBillingEnabled && (
+        <Link href="/settings/billing">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/billing') && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )} */}
+    </div>
+  );
+};

apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import Link from 'next/link';
+
+import { File } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+export type TeamBillingInvoicesDataTableProps = {
+  teamId: number;
+};
+
+export default function TeamBillingInvoicesDataTable({
+  teamId,
+}: TeamBillingInvoicesDataTableProps) {
+  const {
+    data: result,
+    isLoading,
+    isInitialLoading,
+    isLoadingError,
+  } = trpc.team.findTeamInvoices.useQuery(
+    {
+      teamId,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const formatCurrency = (currency: string, amount: number) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currency,
+    });
+
+    return formatter.format(amount);
+  };
+
+  const results = {
+    data: result?.data ?? [],
+    perPage: 100,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Invoice',
+          accessorKey: 'created',
+          cell: ({ row }) => (
+            <div className="flex max-w-xs items-center gap-2">
+              <File className="h-6 w-6" />
+
+              <div className="flex flex-col text-sm">
+                <span className="text-foreground/80 font-semibold">
+                  {DateTime.fromSeconds(row.original.created).toFormat('MMMM yyyy')}
+                </span>
+                <span className="text-muted-foreground">
+                  {row.original.quantity} {row.original.quantity > 1 ? 'Seats' : 'Seat'}
+                </span>
+              </div>
+            </div>
+          ),
+        },
+        {
+          header: 'Status',
+          accessorKey: 'status',
+          cell: ({ row }) => {
+            const { status, paid } = row.original;
+            if (!status) {
+              return paid ? 'Paid' : 'Unpaid';
+            }
+
+            return status.charAt(0).toUpperCase() + status.slice(1);
+          },
+        },
+        {
+          header: 'Amount',
+          accessorKey: 'total',
+          cell: ({ row }) => formatCurrency(row.original.currency, row.original.total / 100),
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.hostedInvoicePdf ?? ''} target="_blank">
+                  View
+                </Link>
+              </Button>
+
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.invoicePdf ?? ''} target="_blank">
+                  Download
+                </Link>
+              </Button>
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-7 w-7 flex-shrink-0 rounded" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+}

apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { History, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type TeamMemberInvitesDataTableProps = {
+  teamId: number;
+};
+
+export default function TeamMemberInvitesDataTable({ teamId }: TeamMemberInvitesDataTableProps) {
+  const searchParams = useSearchParams()!;
+  const updateSearchParams = useUpdateSearchParams();
+
+  const { toast } = useToast();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.team.findTeamMemberInvites.useQuery(
+      {
+        teamId,
+        term: parsedSearchParams.query,
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const { mutateAsync: resendTeamMemberInvitation } =
+    trpc.team.resendTeamMemberInvitation.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been resent',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to resend invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamMemberInvitations } =
+    trpc.team.deleteTeamMemberInvitations.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been deleted',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to delete invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.email.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.email}</span>
+                }
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) => TEAM_MEMBER_ROLE_MAP[row.original.role] ?? row.original.role,
+        },
+        {
+          header: 'Invited At',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    resendTeamMemberInvitation({
+                      teamId,
+                      invitationId: row.original.id,
+                    })
+                  }
+                >
+                  <History className="mr-2 h-4 w-4" />
+                  Resend
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    deleteTeamMemberInvitations({
+                      teamId,
+                      invitationIds: [row.original.id],
+                    })
+                  }
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Remove
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+                <Skeleton className="ml-2 h-4 w-1/3 max-w-[10rem]" />
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+}

apps/web/src/components/(teams)/tables/team-members-data-table.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import DeleteTeamMemberDialog from '../dialogs/delete-team-member-dialog';
+import UpdateTeamMemberDialog from '../dialogs/update-team-member-dialog';
+
+export type TeamMembersDataTableProps = {
+  teamOwnerUserId: number;
+  teamId: number;
+  teamName: string;
+};
+
+export default function TeamMembersDataTable({
+  teamOwnerUserId,
+  teamId,
+  teamName,
+}: TeamMembersDataTableProps) {
+  const searchParams = useSearchParams()!;
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamMembers.useQuery(
+    {
+      teamId,
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            const avatarFallbackText = row.original.user.name
+              ? extractInitials(row.original.user.name)
+              : row.original.user.email.slice(0, 1).toUpperCase();
+
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={avatarFallbackText}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.user.name}</span>
+                }
+                secondaryText={row.original.user.email}
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            teamOwnerUserId === row.original.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <UpdateTeamMemberDialog
+                  teamId={row.original.teamId}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberRole={row.original.role}
+                  trigger={
+                    <DropdownMenuItem
+                      disabled={teamOwnerUserId === row.original.userId}
+                      onSelect={(e) => e.preventDefault()}
+                      title={
+                        teamOwnerUserId === row.original.userId
+                          ? 'You cannot update the team owner role'
+                          : 'Update team member role'
+                      }
+                    >
+                      <Edit className="mr-2 h-4 w-4" />
+                      Update role
+                    </DropdownMenuItem>
+                  }
+                />
+
+                <DeleteTeamMemberDialog
+                  teamId={teamId}
+                  teamName={teamName}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberEmail={row.original.user.email}
+                  trigger={
+                    <DropdownMenuItem
+                      onSelect={(e) => e.preventDefault()}
+                      disabled={teamOwnerUserId === row.original.userId}
+                      title={
+                        teamOwnerUserId === row.original.userId
+                          ? 'You cannot remove the team owner'
+                          : 'Remove team member'
+                      }
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Remove
+                    </DropdownMenuItem>
+                  }
+                />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+}

apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import TeamMemberInvitesDataTable from '~/components/(teams)/tables/team-member-invites-data-table';
+import TeamMembersDataTable from '~/components/(teams)/tables/team-members-data-table';
+
+export type TeamsMemberPageDataTableProps = {
+  teamId: number;
+  teamName: string;
+  teamOwnerUserId: number;
+};
+
+export default function TeamsMemberPageDataTable({
+  teamId,
+  teamName,
+  teamOwnerUserId,
+}: TeamsMemberPageDataTableProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="members" asChild>
+              <Link href={pathname ?? '/'}>All</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="invites" asChild>
+              <Link href={`${pathname}?tab=invites`}>Pending</Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'invites' ? (
+        <TeamMemberInvitesDataTable key="invites" teamId={teamId} />
+      ) : (
+        <TeamMembersDataTable
+          key="members"
+          teamId={teamId}
+          teamName={teamName}
+          teamOwnerUserId={teamOwnerUserId}
+        />
+      )}
+    </div>
+  );
+}

apps/web/src/components/(teams)/tables/user-teams-data-table.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { TEAM_MEMBER_ROLE_MAP, canExecuteTeamAction } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import LeaveTeamDialog from '../dialogs/leave-team-dialog';
+
+export default function UserTeamsDataTable() {
+  const searchParams = useSearchParams()!;
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeams.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team',
+          accessorKey: 'name',
+          cell: ({ row }) => (
+            <Link href={`/t/${row.original.url}`} scroll={false}>
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                }
+                secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              />
+            </Link>
+          ),
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            row.original.ownerUserId === row.original.currentTeamMember.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              {canExecuteTeamAction('MANAGE_TEAM', row.original.currentTeamMember.role) && (
+                <Button variant="outline" asChild>
+                  <Link href={`/t/${row.original.url}/settings`}>Manage</Link>
+                </Button>
+              )}
+
+              <LeaveTeamDialog
+                teamId={row.original.id}
+                teamName={row.original.name}
+                role={row.original.currentTeamMember.role}
+                trigger={
+                  <Button
+                    variant="destructive"
+                    disabled={row.original.ownerUserId === row.original.currentTeamMember.userId}
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    Leave
+                  </Button>
+                }
+              />
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+}

apps/web/src/components/(teams)/tables/user-teams-page-data-table.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { trpc } from '@documenso/trpc/react';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import UserTeamsDataTable from './user-teams-data-table';
+import UserTeamsPendingDataTable from './user-teams-pending-data-table';
+
+export default function UserTeamsPageDataTable() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'pending' ? 'pending' : 'active';
+
+  const { data } = trpc.team.findTeamsPending.useQuery(
+    {},
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="active" asChild>
+              <Link href={pathname ?? '/'}>Active</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="pending" asChild>
+              <Link href={`${pathname}?tab=pending`}>
+                Pending
+                {data && data.count > 0 && (
+                  <span className="ml-1 hidden opacity-50 md:inline-block">{data.count}</span>
+                )}
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'pending' ? <UserTeamsPendingDataTable /> : <UserTeamsDataTable />}
+    </div>
+  );
+}

apps/web/src/components/(teams)/tables/user-teams-pending-data-table.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export default function UserTeamsPendingDataTable() {
+  const searchParams = useSearchParams()!;
+  const updateSearchParams = useUpdateSearchParams();
+
+  const { toast } = useToast();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const [mutatingTeamIds, setMutatingTeamIds] = useState<{ [id: number]: 'checkout' | 'delete' }>(
+    {},
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamsPending.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const { mutateAsync: createTeamPendingCheckout } =
+    trpc.team.createTeamPendingCheckout.useMutation({
+      onSettled: (_data, _error, { pendingTeamId }) => removeIdFromMutatingTeamIds(pendingTeamId),
+      onMutate: ({ pendingTeamId }) => addIdToMutatingTeamIds(pendingTeamId, 'checkout'),
+      onSuccess: (checkoutUrl) => window.open(checkoutUrl, '_blank'),
+    });
+
+  const { mutateAsync: deleteTeamPending } = trpc.team.deleteTeamPending.useMutation({
+    onSettled: (_data, _error, { pendingTeamId }) => removeIdFromMutatingTeamIds(pendingTeamId),
+    onMutate: ({ pendingTeamId }) => addIdToMutatingTeamIds(pendingTeamId, 'delete'),
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'Pending team deleted.',
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Something went wrong',
+        description:
+          'We encountered an unknown error while attempting to delete the pending team. Please try again later.',
+        duration: 10000,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const addIdToMutatingTeamIds = (pendingTeamId: number, type: 'checkout' | 'delete') => {
+    setMutatingTeamIds((prev) => ({
+      ...prev,
+      [pendingTeamId]: type,
+    }));
+  };
+
+  const removeIdFromMutatingTeamIds = (pendingTeamId: number) => {
+    setMutatingTeamIds((prev) => {
+      const ids = { ...prev };
+      delete ids[pendingTeamId];
+      return ids;
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team',
+          accessorKey: 'name',
+          cell: ({ row }) => (
+            <AvatarWithText
+              avatarClass="h-12 w-12"
+              avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+              primaryText={
+                <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+              }
+              secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+            />
+          ),
+        },
+        {
+          header: 'Created on',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="outline"
+                disabled={Boolean(mutatingTeamIds[row.original.id])}
+                loading={mutatingTeamIds[row.original.id] === 'checkout'}
+                onClick={async () => createTeamPendingCheckout({ pendingTeamId: row.original.id })}
+              >
+                Pay
+              </Button>
+
+              <Button
+                variant="destructive"
+                disabled={Boolean(mutatingTeamIds[row.original.id])}
+                loading={mutatingTeamIds[row.original.id] === 'delete'}
+                onClick={async () => deleteTeamPending({ pendingTeamId: row.original.id })}
+              >
+                Remove
+              </Button>
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-16 rounded" />
+                <Skeleton className="h-10 w-20 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+}

apps/web/src/components/forms/signin.tsx

@@ -48,9 +48,10 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
 
 export type SignInFormProps = {
   className?: string;
+  initialEmail?: string;
 };
 
-export const SignInForm = ({ className }: SignInFormProps) => {
+export const SignInForm = ({ className, initialEmail }: SignInFormProps) => {
   const { toast } = useToast();
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
@@ -61,7 +62,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
 
   const form = useForm<TSignInFormSchema>({
     values: {
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       totpCode: '',
       backupCode: '',

apps/web/src/components/forms/signup.tsx

@@ -37,16 +37,17 @@ export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
 export type SignUpFormProps = {
   className?: string;
+  initialEmail?: string;
 };
 
-export const SignUpForm = ({ className }: SignUpFormProps) => {
+export const SignUpForm = ({ className, initialEmail }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
 
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       signature: '',
     },

apps/web/src/middleware.ts

@@ -1,8 +1,40 @@
+import { cookies } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 
 import { getToken } from 'next-auth/jwt';
 
+const todoRegex = new RegExp('^/t/[^/]+$');
+
 export default async function middleware(req: NextRequest) {
+  const preferredTeamUrl = cookies().get('preferred-team-url');
+
+  // Redirect to preferred team if user has selected one.
+  if (
+    !req.url &&
+    (req.nextUrl.pathname === '/' || req.nextUrl.pathname === '/documents') &&
+    preferredTeamUrl?.value
+  ) {
+    const redirectUrl = new URL(`/t/${preferredTeamUrl.value}`, req.url);
+
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  // Redirect `/t/<team_url>` to `/t/<team_url>/documents`
+  if (todoRegex.test(req.nextUrl.pathname)) {
+    const redirectUrl = new URL(`${req.nextUrl.pathname}/documents`, req.url);
+
+    const response = NextResponse.redirect(redirectUrl);
+    response.cookies.set('preferred-team-url', req.nextUrl.pathname.replace('/t/', ''));
+
+    return response;
+  }
+
+  if (req.nextUrl.pathname === '/t') {
+    const redirectUrl = new URL('/settings/teams', req.url);
+
+    return NextResponse.redirect(redirectUrl);
+  }
+
   if (req.nextUrl.pathname === '/') {
     const redirectUrl = new URL('/documents', req.url);
 

package-lock.json

@@ -6008,6 +6008,12 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/bad-words": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/bad-words/-/bad-words-3.0.3.tgz",
+      "integrity": "sha512-jYdpTxDOJ+EENnsCwt8cOZhV/+4+qcwhks1igrOSg4zwwA17rsPqLsZpTo1l+OwViNu+5SPus0v5g7iGx+ofzA==",
+      "dev": true
+    },
     "node_modules/@types/bcrypt": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.2.tgz",
@@ -6906,6 +6912,22 @@
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
       "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw=="
     },
+    "node_modules/bad-words": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/bad-words/-/bad-words-3.0.4.tgz",
+      "integrity": "sha512-v/Q9uRPH4+yzDVLL4vR1+S9KoFgOEUl5s4axd6NIAq8SV2mradgi4E8lma/Y0cw1ltVdvyegCQQKffCPRCp8fg==",
+      "dependencies": {
+        "badwords-list": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/badwords-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/badwords-list/-/badwords-list-1.0.0.tgz",
+      "integrity": "sha512-oWhaSG67e+HQj3OGHQt2ucP+vAPm1wTbdp2aDHeuh4xlGXBdWwzZ//pfu6swf5gZ8iX0b7JgmSo8BhgybbqszA=="
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -19475,12 +19497,15 @@
         "@trpc/next": "^10.36.0",
         "@trpc/react-query": "^10.36.0",
         "@trpc/server": "^10.36.0",
+        "bad-words": "^3.0.4",
         "luxon": "^3.4.0",
         "superjson": "^1.13.1",
         "ts-pattern": "^5.0.5",
         "zod": "^3.22.4"
       },
-      "devDependencies": {}
+      "devDependencies": {
+        "@types/bad-words": "^3.0.3"
+      }
     },
     "packages/tsconfig": {
       "name": "@documenso/tsconfig",

packages/ee/server-only/limits/server.ts

@@ -71,6 +71,7 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
   const documents = await prisma.document.count({
     where: {
       userId: user.id,
+      teamId: null,
       createdAt: {
         gte: DateTime.utc().startOf('month').toJSDate(),
       },

packages/ee/server-only/stripe/get-checkout-session.ts

@@ -1,17 +1,21 @@
 'use server';
 
+import type Stripe from 'stripe';
+
 import { stripe } from '@documenso/lib/server-only/stripe';
 
 export type GetCheckoutSessionOptions = {
   customerId: string;
   priceId: string;
   returnUrl: string;
+  subscriptionMetadata?: Stripe.Metadata;
 };
 
 export const getCheckoutSession = async ({
   customerId,
   priceId,
   returnUrl,
+  subscriptionMetadata,
 }: GetCheckoutSessionOptions) => {
   'use server';
 
@@ -26,6 +30,9 @@ export const getCheckoutSession = async ({
     ],
     success_url: `${returnUrl}?success=true`,
     cancel_url: `${returnUrl}?canceled=true`,
+    subscription_data: {
+      metadata: subscriptionMetadata,
+    },
   });
 
   return session.url;

packages/ee/server-only/stripe/get-customer.ts

@@ -78,6 +78,14 @@ export const getStripeCustomerByUser = async (user: User) => {
   };
 };
 
+export const getStripeCustomerIdByUser = async (user: User) => {
+  if (user.customerId !== null) {
+    return user.customerId;
+  }
+
+  return await getStripeCustomerByUser(user).then((session) => session.stripeCustomer.id);
+};
+
 const syncStripeCustomerSubscriptions = async (userId: number, stripeCustomerId: string) => {
   const stripeSubscriptions = await stripe.subscriptions.list({
     customer: stripeCustomerId,

packages/ee/server-only/stripe/get-team-invoices.ts

@@ -0,0 +1,23 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export type GetTeamInvoicesOptions = {
+  teamId: number;
+};
+
+export const getTeamInvoices = async ({ teamId }: GetTeamInvoicesOptions) => {
+  const teamSubscriptions = await stripe.subscriptions.search({
+    limit: 100,
+    query: `metadata["teamId"]:"${teamId}"`,
+  });
+
+  const subscriptionIds = teamSubscriptions.data.map((subscription) => subscription.id);
+
+  if (subscriptionIds.length === 0) {
+    return null;
+  }
+
+  return await stripe.invoices.search({
+    query: subscriptionIds.map((id) => `subscription:"${id}"`).join(' OR '),
+    limit: 100,
+  });
+};

packages/ee/server-only/stripe/transfer-team-subscription.ts

@@ -0,0 +1,96 @@
+import type Stripe from 'stripe';
+
+import { stripe } from '@documenso/lib/server-only/stripe';
+import {
+  getTeamSeatPriceId,
+  isSomeSubscriptionsActiveAndCommunityPlan,
+} from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import type { Subscription, Team, User } from '@documenso/prisma/client';
+
+import { getStripeCustomerByUser } from './get-customer';
+
+type TransferStripeSubscriptionOptions = {
+  user: User & { Subscription: Subscription[] };
+  team: Team;
+};
+
+/**
+ * Transfer the Stripe Team seats subscription from one user to another.
+ *
+ * Will create a new subscription for the new owner and cancel the old one.
+ *
+ * Returns the new subscription, null if no subscription is needed (for community plan).
+ */
+export const transferTeamSubscription = async ({
+  user,
+  team,
+}: TransferStripeSubscriptionOptions) => {
+  const teamSeatPriceId = getTeamSeatPriceId();
+  const { stripeCustomer } = await getStripeCustomerByUser(user);
+
+  const newOwnerHasCommunityPlan = isSomeSubscriptionsActiveAndCommunityPlan(user.Subscription);
+  const currentTeamSubscriptionId = team.subscriptionId;
+
+  let oldSubscription: Stripe.Subscription | null = null;
+  let newSubscription: Stripe.Subscription | null = null;
+
+  if (currentTeamSubscriptionId) {
+    oldSubscription = await stripe.subscriptions.retrieve(currentTeamSubscriptionId);
+  }
+
+  const numberOfSeats = await prisma.teamMember.count({
+    where: {
+      teamId: team.id,
+    },
+  });
+
+  if (!newOwnerHasCommunityPlan) {
+    let stripeCreateSubscriptionPayload: Stripe.SubscriptionCreateParams = {
+      customer: stripeCustomer.id,
+      items: [
+        {
+          price: teamSeatPriceId,
+          quantity: numberOfSeats,
+        },
+      ],
+      metadata: {
+        teamId: team.id.toString(),
+      },
+    };
+
+    // If no payment method is attached to the new owner Stripe customer account, send an
+    // invoice instead.
+    if (!stripeCustomer.invoice_settings.default_payment_method) {
+      stripeCreateSubscriptionPayload = {
+        ...stripeCreateSubscriptionPayload,
+        collection_method: 'send_invoice',
+        days_until_due: 7,
+      };
+    }
+
+    newSubscription = await stripe.subscriptions.create(stripeCreateSubscriptionPayload);
+  }
+
+  if (oldSubscription) {
+    try {
+      // Set the quantity to 0 so we can refund/charge the old Stripe customer the prorated amount.
+      await stripe.subscriptions.update(oldSubscription.id, {
+        items: oldSubscription.items.data.map((item) => ({
+          id: item.id,
+          quantity: 0,
+        })),
+      });
+
+      await stripe.subscriptions.cancel(oldSubscription.id, {
+        invoice_now: true,
+        prorate: false,
+      });
+    } catch (e) {
+      // Do not error out since we can't easily undo the transfer.
+      // Todo: Teams - Alert us.
+    }
+  }
+
+  return newSubscription;
+};

packages/ee/server-only/stripe/update-subscription-item-quantity.ts

@@ -0,0 +1,28 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export type UpdateSubscriptionItemQuantityOptions = {
+  subscriptionId: string;
+  quantity?: number;
+  priceId: string;
+};
+
+export const updateSubscriptionItemQuantity = async ({
+  subscriptionId,
+  quantity,
+  priceId,
+}: UpdateSubscriptionItemQuantityOptions) => {
+  const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+
+  const items = subscription.items.data.filter((item) => item.price.id === priceId);
+
+  if (items.length === 0) {
+    return;
+  }
+
+  await stripe.subscriptions.update(subscriptionId, {
+    items: items.map((item) => ({
+      id: item.id,
+      quantity,
+    })),
+  });
+};

packages/ee/server-only/stripe/webhook/handler.ts

@@ -5,6 +5,7 @@ import { match } from 'ts-pattern';
 
 import type { Stripe } from '@documenso/lib/server-only/stripe';
 import { stripe } from '@documenso/lib/server-only/stripe';
+import { createTeamFromPendingTeam } from '@documenso/lib/server-only/team/create-team';
 import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { prisma } from '@documenso/prisma';
 
@@ -110,6 +111,12 @@ export const stripeWebhookHandler = async (
 
         await onSubscriptionUpdated({ userId, subscription });
 
+        if (
+          subscription.items.data[0].price.id === process.env.NEXT_PUBLIC_STRIPE_TEAM_SEAT_PRICE_ID
+        ) {
+          await handleTeamSeatCheckout({ subscription });
+        }
+
         return res.status(200).json({
           success: true,
           message: 'Webhook received',
@@ -282,3 +289,21 @@ export const stripeWebhookHandler = async (
     });
   }
 };
+
+export type HandleTeamSeatCheckoutOptions = {
+  subscription: Stripe.Subscription;
+};
+
+const handleTeamSeatCheckout = async ({ subscription }: HandleTeamSeatCheckoutOptions) => {
+  if (subscription.metadata?.pendingTeamId === undefined) {
+    return;
+  }
+
+  const pendingTeamId = Number(subscription.metadata.pendingTeamId);
+
+  if (Number.isNaN(pendingTeamId)) {
+    throw new Error('Invalid pending team ID');
+  }
+
+  await createTeamFromPendingTeam({ pendingTeamId, subscriptionId: subscription.id });
+};

packages/ee/server-only/stripe/webhook/on-subscription-updated.ts

@@ -13,12 +13,19 @@ export const onSubscriptionUpdated = async ({
   userId,
   subscription,
 }: OnSubscriptionUpdatedOptions) => {
+  await prisma.subscription.upsert(mapStripeSubscriptionToPrismaUpsertAction(userId, subscription));
+};
+
+export const mapStripeSubscriptionToPrismaUpsertAction = (
+  userId: number,
+  subscription: Stripe.Subscription,
+) => {
   const status = match(subscription.status)
     .with('active', () => SubscriptionStatus.ACTIVE)
     .with('past_due', () => SubscriptionStatus.PAST_DUE)
     .otherwise(() => SubscriptionStatus.INACTIVE);
 
-  await prisma.subscription.upsert({
+  return {
     where: {
       planId: subscription.id,
     },
@@ -37,5 +44,5 @@ export const onSubscriptionUpdated = async ({
       periodEnd: new Date(subscription.current_period_end * 1000),
       cancelAtPeriodEnd: subscription.cancel_at_period_end,
     },
-  });
+  };
 };

packages/email/template-components/template-image.tsx

@@ -0,0 +1,17 @@
+import { Img } from '../components';
+
+export interface TemplateImageProps {
+  assetBaseUrl: string;
+  className?: string;
+  staticAsset: string;
+}
+
+export const TemplateImage = ({ assetBaseUrl, className, staticAsset }: TemplateImageProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return <Img className={className} src={getAssetUrl(`/static/${staticAsset}`)} />;
+};
+
+export default TemplateImage;

packages/email/templates/confirm-email.tsx

@@ -7,7 +7,7 @@ import { TemplateFooter } from '../template-components/template-footer';
 
 export const ConfirmEmailTemplate = ({
   confirmationLink,
-  assetBaseUrl,
+  assetBaseUrl = 'http://localhost:3002',
 }: TemplateConfirmationEmailProps) => {
   const previewText = `Please confirm your email address`;
 
@@ -55,3 +55,5 @@ export const ConfirmEmailTemplate = ({
     </Html>
   );
 };
+
+export default ConfirmEmailTemplate;

packages/email/templates/confirm-team-email.tsx

@@ -0,0 +1,126 @@
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type ConfirmTeamEmailProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const ConfirmTeamEmailTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: ConfirmTeamEmailProps) => {
+  const previewText = `Accept team email request for ${teamName} on Documenso`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <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 px-2 pt-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="mail-open.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  Verify your team email address
+                </Text>
+
+                <Text className="text-center text-base">
+                  <span className="font-bold">{teamName}</span> has requested to use your email
+                  address for their team on Documenso.
+                </Text>
+
+                <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {baseUrl.replace('https://', '')}/t/{teamUrl}
+                </div>
+
+                <Section className="mt-6">
+                  <Text className="my-0 text-sm">
+                    By accepting this request, you will be granting <strong>{teamName}</strong>{' '}
+                    access to:
+                  </Text>
+
+                  <ul className="mb-0 mt-2">
+                    <li className="text-sm">
+                      View all documents sent to and from this email address
+                    </li>
+                    <li className="mt-1 text-sm">
+                      Allow document recipients to reply directly to this email address
+                    </li>
+                  </ul>
+
+                  <Text className="mt-2 text-sm">
+                    You can revoke access at any time in your team settings on Documenso{' '}
+                    <Link href={`${baseUrl}/settings/teams`}>here.</Link>
+                  </Text>
+                </Section>
+
+                <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={`${baseUrl}/team/verify/email/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+
+              <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default ConfirmTeamEmailTemplate;

packages/email/templates/team-invite.tsx

@@ -0,0 +1,107 @@
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type TeamInviteEmailProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  senderName: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const TeamInviteEmailTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  senderName = 'John Doe',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: TeamInviteEmailProps) => {
+  const previewText = `Accept invitation to join a team on Documenso`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white text-slate-500">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="add-user.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  Join {teamName} on Documenso
+                </Text>
+
+                <Text className="my-1 text-center text-base">
+                  You have been invited to join the following team
+                </Text>
+
+                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {baseUrl.replace('https://', '')}/t/{teamUrl}
+                </div>
+
+                <Text className="my-1 text-center text-base">
+                  by <span className="text-slate-900">{senderName}</span>
+                </Text>
+
+                <Section className="mb-6 mt-6 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={`${baseUrl}/team/invite/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default TeamInviteEmailTemplate;

packages/email/templates/team-transfer-request.tsx

@@ -0,0 +1,111 @@
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type TeamTransferRequestTemplateProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  senderName: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const TeamTransferRequestTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  senderName = 'John Doe',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: TeamTransferRequestTemplateProps) => {
+  const previewText = 'Accept team transfer request on Documenso';
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white text-slate-500">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="add-user.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  {teamName} ownership transfer request
+                </Text>
+
+                <Text className="my-1 text-center text-base">
+                  <span className="font-bold">{senderName}</span> has requested that you take
+                  ownership of the following team
+                </Text>
+
+                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {baseUrl.replace('https://', '')}/t/{teamUrl}
+                </div>
+
+                <Text className="text-center text-sm">
+                  By accepting this request, you will take responsibility for any billing items
+                  associated with this team.
+                </Text>
+
+                <Section className="mb-6 mt-6 text-center">
+                  <Button
+                    className="bg-documenso-500 ml-2 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                    href={`${baseUrl}/team/verify/transfer/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+
+              <Text className="text-center text-xs">Link expires in 1 hour.</Text>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default TeamTransferRequestTemplate;

packages/lib/constants/app.ts

@@ -1,8 +1,13 @@
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
+export const IS_BILLING_ENABLED = process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true';
 
 export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
 
 export const APP_BASE_URL = IS_APP_WEB
   ? process.env.NEXT_PUBLIC_WEBAPP_URL
   : process.env.NEXT_PUBLIC_MARKETING_URL;
+
+export const WEBAPP_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000';
+
+export const MARKETING_BASE_URL = process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001';

packages/lib/constants/teams.ts

@@ -0,0 +1,31 @@
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+export const TEAM_MEMBER_ROLE_MAP: Record<keyof typeof TeamMemberRole, string> = {
+  ADMIN: 'Admin',
+  MANAGER: 'Manager',
+  MEMBER: 'Member',
+};
+
+export const TEAM_MEMBER_ROLE_PERMISSIONS_MAP = {
+  /**
+   * Includes permissions to:
+   * - Manage team members
+   * - Manage team settings, changing name, url, etc.
+   */
+  MANAGE_TEAM: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
+  DELETE_TEAM_TRANSFER_REQUEST: [TeamMemberRole.ADMIN],
+} satisfies Record<string, TeamMemberRole[]>;
+
+/**
+ * Determines whether a team member can execute a given action.
+ *
+ * @param action The action the user is trying to execute.
+ * @param role The current role of the user.
+ * @returns Whether the user can execute the action.
+ */
+export const canExecuteTeamAction = (
+  action: keyof typeof TEAM_MEMBER_ROLE_PERMISSIONS_MAP,
+  role: keyof typeof TEAM_MEMBER_ROLE_MAP,
+) => {
+  return TEAM_MEMBER_ROLE_PERMISSIONS_MAP[action].some((i) => i === role);
+};

packages/lib/errors/app-error.ts

@@ -0,0 +1,144 @@
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+
+import { TRPCClientError } from '@documenso/trpc/client';
+
+/**
+ * Generic application error codes.
+ */
+export enum AppErrorCode {
+  'ALREADY_EXISTS' = 'AlreadyExists',
+  'EXPIRED_CODE' = 'ExpiredCode',
+  'INVALID_BODY' = 'InvalidBody',
+  'INVALID_REQUEST' = 'InvalidRequest',
+  'NOT_FOUND' = 'NotFound',
+  'NOT_SETUP' = 'NotSetup',
+  'UNAUTHORIZED' = 'Unauthorized',
+  'UNKNOWN_ERROR' = 'UnknownError',
+  'RETRY_EXCEPTION' = 'RetryException',
+  'SCHEMA_FAILED' = 'SchemaFailed',
+  'TOO_MANY_REQUESTS' = 'TooManyRequests',
+}
+
+const genericErrorCodeToTrpcErrorCodeMap: Record<string, TRPCError['code']> = {
+  [AppErrorCode.ALREADY_EXISTS]: 'BAD_REQUEST',
+  [AppErrorCode.EXPIRED_CODE]: 'BAD_REQUEST',
+  [AppErrorCode.INVALID_BODY]: 'BAD_REQUEST',
+  [AppErrorCode.INVALID_REQUEST]: 'BAD_REQUEST',
+  [AppErrorCode.NOT_FOUND]: 'NOT_FOUND',
+  [AppErrorCode.NOT_SETUP]: 'BAD_REQUEST',
+  [AppErrorCode.UNAUTHORIZED]: 'UNAUTHORIZED',
+  [AppErrorCode.UNKNOWN_ERROR]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.RETRY_EXCEPTION]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.SCHEMA_FAILED]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.TOO_MANY_REQUESTS]: 'TOO_MANY_REQUESTS',
+};
+
+export const ZAppErrorJsonSchema = z.object({
+  code: z.string(),
+  message: z.string().optional(),
+  userMessage: z.string().optional(),
+});
+
+export type TAppErrorJsonSchema = z.infer<typeof ZAppErrorJsonSchema>;
+
+export class AppError extends Error {
+  /**
+   * The error code.
+   */
+  code: string;
+
+  /**
+   * An error message which can be displayed to the user.
+   */
+  userMessage?: string;
+
+  /**
+   * Create a new AppError.
+   *
+   * @param errorCode A string representing the error code.
+   * @param message An internal error message.
+   * @param userMessage A error message which can be displayed to the user.
+   */
+  public constructor(errorCode: string, message?: string, userMessage?: string) {
+    super(message || errorCode);
+    this.code = errorCode;
+    this.userMessage = userMessage;
+  }
+
+  /**
+   * Parse an unknown value into an AppError.
+   *
+   * @param error An unknown type.
+   */
+  static parseError(error: unknown): AppError {
+    if (error instanceof AppError) {
+      return error;
+    }
+
+    // Handle TRPC errors.
+    if (error instanceof TRPCClientError) {
+      const parsedJsonError = AppError.parseFromJSONString(error.message);
+      return parsedJsonError || new AppError('UnknownError', error.message);
+    }
+
+    // Handle completely unknown errors.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const { code, message, userMessage } = error as {
+      code: unknown;
+      message: unknown;
+      status: unknown;
+      userMessage: unknown;
+    };
+
+    const validCode: string | null = typeof code === 'string' ? code : AppErrorCode.UNKNOWN_ERROR;
+    const validMessage: string | undefined = typeof message === 'string' ? message : undefined;
+    const validUserMessage: string | undefined =
+      typeof userMessage === 'string' ? userMessage : undefined;
+
+    return new AppError(validCode, validMessage, validUserMessage);
+  }
+
+  static parseErrorToTRPCError(error: unknown): TRPCError {
+    const appError = AppError.parseError(error);
+
+    return new TRPCError({
+      code: genericErrorCodeToTrpcErrorCodeMap[appError.code] || 'BAD_REQUEST',
+      message: AppError.toJSONString(appError),
+    });
+  }
+
+  /**
+   * Convert an AppError into a JSON object which represents the error.
+   *
+   * @param appError The AppError to convert to JSON.
+   * @returns A JSON object representing the AppError.
+   */
+  static toJSON({ code, message, userMessage }: AppError): TAppErrorJsonSchema {
+    return {
+      code,
+      message,
+      userMessage,
+    };
+  }
+
+  /**
+   * Convert an AppError into a JSON string containing the relevant information.
+   *
+   * @param appError The AppError to stringify.
+   * @returns A JSON string representing the AppError.
+   */
+  static toJSONString(appError: AppError): string {
+    return JSON.stringify(AppError.toJSON(appError));
+  }
+
+  static parseFromJSONString(jsonString: string): AppError | null {
+    const parsed = ZAppErrorJsonSchema.safeParse(JSON.parse(jsonString));
+
+    if (!parsed.success) {
+      return null;
+    }
+
+    return new AppError(parsed.data.code, parsed.data.message, parsed.data.userMessage);
+  }
+}

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

@@ -5,15 +5,37 @@ import { prisma } from '@documenso/prisma';
 export type CreateDocumentOptions = {
   title: string;
   userId: number;
+  teamId?: number;
   documentDataId: string;
 };
 
-export const createDocument = async ({ userId, title, documentDataId }: CreateDocumentOptions) => {
-  return await prisma.document.create({
-    data: {
-      title,
-      documentDataId,
-      userId,
-    },
+export const createDocument = async ({
+  userId,
+  title,
+  documentDataId,
+  teamId,
+}: CreateDocumentOptions) => {
+  return await prisma.$transaction(async (tx) => {
+    if (teamId !== undefined) {
+      await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      });
+    }
+
+    return await tx.document.create({
+      data: {
+        title,
+        documentDataId,
+        userId,
+        teamId,
+      },
+    });
   });
 };

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

@@ -2,7 +2,7 @@ import { DateTime } from 'luxon';
 import { P, match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
-import type { Document, Prisma } from '@documenso/prisma/client';
+import type { Document, Prisma, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { SigningStatus } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
@@ -10,6 +10,7 @@ import type { FindResultSet } from '../../types/find-result-set';
 
 export type FindDocumentsOptions = {
   userId: number;
+  teamId?: number;
   term?: string;
   status?: ExtendedDocumentStatus;
   page?: number;
@@ -19,21 +20,51 @@ export type FindDocumentsOptions = {
     direction: 'asc' | 'desc';
   };
   period?: '' | '7d' | '14d' | '30d';
+  senderIds?: number[];
 };
 
 export const findDocuments = async ({
   userId,
+  teamId,
   term,
   status = ExtendedDocumentStatus.ALL,
   page = 1,
   perPage = 10,
   orderBy,
   period,
+  senderIds,
 }: FindDocumentsOptions) => {
-  const user = await prisma.user.findFirstOrThrow({
-    where: {
-      id: userId,
-    },
+  // Todo: Teams - deletedAt
+
+  const { user, team } = await prisma.$transaction(async (tx) => {
+    const user = await tx.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+    });
+
+    let team = null;
+
+    if (teamId !== undefined) {
+      team = await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+        include: {
+          teamEmail: true,
+        },
+      });
+    }
+
+    return {
+      user,
+      team,
+    };
   });
 
   const orderByColumn = orderBy?.column ?? 'createdAt';
@@ -50,11 +81,79 @@ export const findDocuments = async ({
     })
     .otherwise(() => undefined);
 
-  const filters = match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
+  const filters = team ? findTeamDocumentsFilter(status, team) : findDocumentsFilter(status, user);
+
+  if (filters === null) {
+    return {
+      data: [],
+      count: 0,
+      currentPage: 1,
+      perPage,
+      totalPages: 0,
+    };
+  }
+
+  const whereClause: Prisma.DocumentWhereInput = {
+    ...termFilters,
+    ...filters,
+  };
+
+  if (period) {
+    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
+
+    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
+
+    whereClause.createdAt = {
+      gte: startOfPeriod.toJSDate(),
+    };
+  }
+
+  if (senderIds && senderIds.length > 0) {
+    whereClause.userId = {
+      in: senderIds,
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.document.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      include: {
+        User: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+        Recipient: true,
+      },
+    }),
+    prisma.document.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};
+
+const findDocumentsFilter = (status: ExtendedDocumentStatus, user: User) => {
+  return match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
     .with(ExtendedDocumentStatus.ALL, () => ({
       OR: [
         {
-          userId,
+          userId: user.id,
+          teamId: null,
           deletedAt: null,
         },
         {
@@ -89,14 +188,16 @@ export const findDocuments = async ({
       deletedAt: null,
     }))
     .with(ExtendedDocumentStatus.DRAFT, () => ({
-      userId,
+      userId: user.id,
+      teamId: null,
       status: ExtendedDocumentStatus.DRAFT,
       deletedAt: null,
     }))
     .with(ExtendedDocumentStatus.PENDING, () => ({
       OR: [
         {
-          userId,
+          userId: user.id,
+          teamId: null,
           status: ExtendedDocumentStatus.PENDING,
           deletedAt: null,
         },
@@ -115,7 +216,8 @@ export const findDocuments = async ({
     .with(ExtendedDocumentStatus.COMPLETED, () => ({
       OR: [
         {
-          userId,
+          userId: user.id,
+          teamId: null,
           status: ExtendedDocumentStatus.COMPLETED,
           deletedAt: null,
         },
@@ -130,54 +232,153 @@ export const findDocuments = async ({
       ],
     }))
     .exhaustive();
+};
 
-  const whereClause = {
-    ...termFilters,
-    ...filters,
-  };
+/**
+ * Create a Prisma filter for the Document schema to find documents for a team.
+ *
+ * Status All:
+ *  - Documents that belong to the team
+ *  - Documents that have been sent by the team email
+ *  - Non draft documents that have been sent to the team email
+ *
+ * Status Inbox:
+ *  - Non draft documents that have been sent to the team email that have not been signed
+ *
+ * Status Draft:
+ * - Documents that belong to the team that are draft
+ *
+ * Status Pending:
+ * - Documents that belong to the team that are pending
+ * - Documents that have been sent to the team email that is pending to be signed
+ * - Documents that have been sent by the team email that is pending to be signed
+ *
+ * Status Completed:
+ * - Documents that belong to the team that are completed
+ * - Documents that have been sent to the team email that have been signed
+ * - Documents that have been sent by the team email that have been signed
+ *
+ * @param status The status of the documents to find.
+ * @param team The team to find the documents for.
+ * @returns A filter which can be applied to the Prisma Document schema.
+ */
+const findTeamDocumentsFilter = (
+  status: ExtendedDocumentStatus,
+  team: Team & { teamEmail: TeamEmail | null },
+) => {
+  const teamEmail = team.teamEmail?.email ?? null;
 
-  if (period) {
-    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
+  return match<ExtendedDocumentStatus, Prisma.DocumentWhereInput | null>(status)
+    .with(ExtendedDocumentStatus.ALL, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        // Filter to display all documents that belong to the team.
+        OR: [
+          {
+            teamId: team.id,
+          },
+        ],
+      };
 
-    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
+      if (teamEmail && filter.OR) {
+        // Filter to display all documents received by the team email that are not draft.
+        filter.OR.push({
+          status: {
+            not: ExtendedDocumentStatus.DRAFT,
+          },
+          Recipient: {
+            some: {
+              email: teamEmail,
+            },
+          },
+        });
 
-    whereClause.createdAt = {
-      gte: startOfPeriod.toJSDate(),
-    };
-  }
+        // Filter to display all documents that have been sent by the team email.
+        filter.OR.push({
+          User: {
+            email: teamEmail,
+          },
+        });
+      }
 
-  const [data, count] = await Promise.all([
-    prisma.document.findMany({
-      where: whereClause,
-      skip: Math.max(page - 1, 0) * perPage,
-      take: perPage,
-      orderBy: {
-        [orderByColumn]: orderByDirection,
-      },
-      include: {
-        User: {
-          select: {
-            id: true,
-            name: true,
-            email: true,
+      return filter;
+    })
+    .with(ExtendedDocumentStatus.INBOX, () => {
+      // Return a filter that will return nothing.
+      if (!teamEmail) {
+        return null;
+      }
+
+      return {
+        status: {
+          not: ExtendedDocumentStatus.DRAFT,
+        },
+        Recipient: {
+          some: {
+            email: teamEmail,
+            signingStatus: SigningStatus.NOT_SIGNED,
           },
         },
-        Recipient: true,
-      },
-    }),
-    prisma.document.count({
-      where: {
-        ...termFilters,
-        ...filters,
-      },
-    }),
-  ]);
+      };
+    })
+    .with(ExtendedDocumentStatus.DRAFT, () => ({
+      teamId: team.id,
+      status: ExtendedDocumentStatus.DRAFT,
+    }))
+    .with(ExtendedDocumentStatus.PENDING, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        OR: [
+          {
+            teamId: team.id,
+            status: ExtendedDocumentStatus.PENDING,
+          },
+        ],
+      };
 
-  return {
-    data,
-    count,
-    currentPage: Math.max(page, 1),
-    perPage,
-    totalPages: Math.ceil(count / perPage),
-  } satisfies FindResultSet<typeof data>;
+      if (teamEmail && filter.OR) {
+        // Filter to display all documents received by the team email that are pending.
+        filter.OR.push({
+          status: ExtendedDocumentStatus.PENDING,
+          Recipient: {
+            some: {
+              email: teamEmail,
+              signingStatus: SigningStatus.SIGNED,
+            },
+          },
+        });
+
+        // Filter to display all documents that have been sent by the team email that are pending.
+        filter.OR.push({
+          status: ExtendedDocumentStatus.PENDING,
+          User: {
+            email: teamEmail,
+          },
+        });
+      }
+
+      return filter;
+    })
+    .with(ExtendedDocumentStatus.COMPLETED, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        OR: [
+          {
+            teamId: team.id,
+            status: ExtendedDocumentStatus.COMPLETED,
+          },
+        ],
+      };
+
+      if (teamEmail && filter.OR) {
+        filter.OR.push({
+          status: ExtendedDocumentStatus.COMPLETED,
+          Recipient: {
+            some: {
+              email: teamEmail,
+            },
+          },
+        });
+      }
+
+      return filter;
+    })
+    .exhaustive();
 };

packages/lib/server-only/document/get-document-by-id.ts

@@ -10,6 +10,24 @@ export const getDocumentById = async ({ id, userId }: GetDocumentByIdOptions) =>
     where: {
       id,
       userId,
+      OR: [
+        {
+          team: {
+            is: null,
+          },
+        },
+        {
+          team: {
+            is: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        },
+      ],
     },
     include: {
       documentData: true,

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

@@ -1,15 +1,63 @@
 import { prisma } from '@documenso/prisma';
 import type { User } from '@documenso/prisma/client';
+import type { Prisma } from '@documenso/prisma/client';
 import { SigningStatus } 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 = {
-  user: User;
+type TeamStatsOptions = {
+  teamId: number;
+  teamEmail?: string;
+  senderIds?: number[];
 };
 
-export const getStats = async ({ user }: GetStatsInput) => {
-  const [ownerCounts, notSignedCounts, hasSignedCounts] = await Promise.all([
+export type GetStatsInput = {
+  user: User;
+  team?: TeamStatsOptions;
+};
+
+export const getStats = async ({ user, ...options }: GetStatsInput) => {
+  const [ownerCounts, notSignedCounts, hasSignedCounts] = await (options.team
+    ? getTeamCounts({ team: options.team })
+    : getCounts(user));
+
+  const stats: Record<ExtendedDocumentStatus, number> = {
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  };
+
+  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;
+};
+
+const getCounts = async (user: User) => {
+  return Promise.all([
     prisma.document.groupBy({
       by: ['status'],
       _count: {
@@ -17,6 +65,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
       },
       where: {
         userId: user.id,
+        teamId: null,
         deletedAt: null,
       },
     }),
@@ -66,38 +115,110 @@ export const getStats = async ({ user }: GetStatsInput) => {
       },
     }),
   ]);
+};
 
-  const stats: Record<ExtendedDocumentStatus, number> = {
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
+const getTeamCounts = async ({ team }: { team: TeamStatsOptions }) => {
+  const { teamId, teamEmail } = team;
+
+  const senderIds = team.senderIds ?? [];
+
+  const userIdWhereClause: Prisma.DocumentWhereInput['userId'] =
+    senderIds.length > 0
+      ? {
+          in: senderIds,
+        }
+      : undefined;
+
+  let ownerCountsWhereInput: Prisma.DocumentWhereInput = {
+    userId: userIdWhereClause,
+    teamId,
+    deletedAt: null,
   };
 
-  ownerCounts.forEach((stat) => {
-    stats[stat.status] = stat._count._all;
-  });
+  if (teamEmail && senderIds.length === 0) {
+    ownerCountsWhereInput = {
+      OR: [
+        {
+          teamId,
+        },
+        {
+          User: {
+            email: teamEmail,
+          },
+        },
+      ],
+    };
+  }
 
-  notSignedCounts.forEach((stat) => {
-    stats[ExtendedDocumentStatus.INBOX] += stat._count._all;
-  });
+  if (teamEmail && senderIds.length > 0) {
+    ownerCountsWhereInput = {
+      userId: userIdWhereClause,
+      OR: [
+        {
+          teamId,
+        },
+        {
+          User: {
+            email: teamEmail,
+          },
+        },
+      ],
+      deletedAt: null,
+    };
+  }
 
-  hasSignedCounts.forEach((stat) => {
-    if (stat.status === ExtendedDocumentStatus.COMPLETED) {
-      stats[ExtendedDocumentStatus.COMPLETED] += stat._count._all;
-    }
+  let notSignedCountsGroupByArgs = null;
 
-    if (stat.status === ExtendedDocumentStatus.PENDING) {
-      stats[ExtendedDocumentStatus.PENDING] += stat._count._all;
-    }
-  });
+  if (teamEmail) {
+    notSignedCountsGroupByArgs = {
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        userId: userIdWhereClause,
+        status: ExtendedDocumentStatus.PENDING,
+        Recipient: {
+          some: {
+            email: teamEmail,
+            signingStatus: SigningStatus.NOT_SIGNED,
+          },
+        },
+        deletedAt: null,
+      },
+    } satisfies Prisma.DocumentGroupByArgs;
+  }
 
-  Object.keys(stats).forEach((key) => {
-    if (key !== ExtendedDocumentStatus.ALL && isExtendedDocumentStatus(key)) {
-      stats[ExtendedDocumentStatus.ALL] += stats[key];
-    }
-  });
+  let hasSignedCountsGroupByArgs = null;
 
-  return stats;
+  if (teamEmail) {
+    hasSignedCountsGroupByArgs = {
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        status: ExtendedDocumentStatus.PENDING,
+        Recipient: {
+          some: {
+            email: teamEmail,
+            signingStatus: SigningStatus.SIGNED,
+          },
+        },
+        deletedAt: null,
+      },
+    } satisfies Prisma.DocumentGroupByArgs;
+  }
+
+  return Promise.all([
+    prisma.document.groupBy({
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: ownerCountsWhereInput,
+    }),
+    notSignedCountsGroupByArgs ? prisma.document.groupBy(notSignedCountsGroupByArgs) : [],
+    hasSignedCountsGroupByArgs ? prisma.document.groupBy(hasSignedCountsGroupByArgs) : [],
+  ]);
 };

packages/lib/server-only/field/set-fields-for-document.ts

@@ -26,6 +26,24 @@ export const setFieldsForDocument = async ({
     where: {
       id: documentId,
       userId,
+      OR: [
+        {
+          team: {
+            is: null,
+          },
+        },
+        {
+          team: {
+            is: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -22,6 +22,24 @@ export const setRecipientsForDocument = async ({
     where: {
       id: documentId,
       userId,
+      OR: [
+        {
+          team: {
+            is: null,
+          },
+        },
+        {
+          team: {
+            is: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/team/accept-team-invitation.ts

@@ -0,0 +1,60 @@
+import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
+import { prisma } from '@documenso/prisma';
+
+import { IS_BILLING_ENABLED } from '../../constants/app';
+import { getTeamSeatPriceId } from '../../utils/billing';
+
+export type AcceptTeamInvitationOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const acceptTeamInvitation = async ({ userId, teamId }: AcceptTeamInvitationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const user = await tx.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+    });
+
+    const teamMemberInvite = await tx.teamMemberInvite.findFirstOrThrow({
+      where: {
+        teamId,
+        email: user.email,
+      },
+      include: {
+        team: true,
+      },
+    });
+
+    const { team } = teamMemberInvite;
+
+    await tx.teamMember.create({
+      data: {
+        teamId: teamMemberInvite.teamId,
+        userId: user.id,
+        role: teamMemberInvite.role,
+      },
+    });
+
+    await tx.teamMemberInvite.delete({
+      where: {
+        id: teamMemberInvite.id,
+      },
+    });
+
+    if (IS_BILLING_ENABLED && team.subscriptionId) {
+      const numberOfSeats = await tx.teamMember.count({
+        where: {
+          teamId: teamMemberInvite.teamId,
+        },
+      });
+
+      await updateSubscriptionItemQuantity({
+        priceId: getTeamSeatPriceId(),
+        subscriptionId: team.subscriptionId,
+        quantity: numberOfSeats,
+      });
+    }
+  });
+};

packages/lib/server-only/team/add-team-email-verification.ts

@@ -0,0 +1,133 @@
+import { createElement } from 'react';
+
+import { z } from 'zod';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { ConfirmTeamEmailTemplate } from '@documenso/email/templates/confirm-team-email';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { prisma } from '@documenso/prisma';
+import { Prisma } from '@documenso/prisma/client';
+
+import { WEBAPP_BASE_URL } from '../../constants/app';
+import { FROM_ADDRESS, FROM_NAME } from '../../constants/email';
+import { createTokenVerification } from '../../utils/token-verification';
+
+export type AddTeamEmailVerificationOptions = {
+  userId: number;
+  teamId: number;
+  data: {
+    email: string;
+    name: string;
+  };
+};
+
+export const addTeamEmailVerification = async ({
+  userId,
+  teamId,
+  data,
+}: AddTeamEmailVerificationOptions) => {
+  try {
+    await prisma.$transaction(async (tx) => {
+      const team = await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+              role: {
+                in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+              },
+            },
+          },
+        },
+        include: {
+          teamEmail: true,
+          emailVerification: true,
+        },
+      });
+
+      if (team.teamEmail || team.emailVerification) {
+        throw new AppError(
+          AppErrorCode.INVALID_REQUEST,
+          'Team already has an email or existing email verification.',
+        );
+      }
+
+      const existingTeamEmail = await tx.teamEmail.findFirst({
+        where: {
+          email: data.email,
+        },
+      });
+
+      if (existingTeamEmail) {
+        throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Email already taken by another team.');
+      }
+
+      const { token, expiresAt } = createTokenVerification({ hours: 1 });
+
+      await tx.teamEmailVerification.create({
+        data: {
+          token,
+          expiresAt,
+          email: data.email,
+          name: data.name,
+          teamId,
+        },
+      });
+
+      await sendTeamEmailVerificationEmail(data.email, token, team.name, team.url);
+    });
+  } catch (err) {
+    console.error(err);
+
+    if (!(err instanceof Prisma.PrismaClientKnownRequestError)) {
+      throw err;
+    }
+
+    const target = z.array(z.string()).safeParse(err.meta?.target);
+
+    if (err.code === 'P2002' && target.success && target.data.includes('email')) {
+      throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Email already taken by another team.');
+    }
+
+    throw err;
+  }
+};
+
+/**
+ * Send an email to a user asking them to accept a team email request.
+ *
+ * @param email The email address to use for the team.
+ * @param token The token used to authenticate that the user has granted access.
+ * @param teamName The name of the team the user is being invited to.
+ * @param teamUrl The url of the team the user is being invited to.
+ */
+export const sendTeamEmailVerificationEmail = async (
+  email: string,
+  token: string,
+  teamName: string,
+  teamUrl: string,
+) => {
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+  const template = createElement(ConfirmTeamEmailTemplate, {
+    assetBaseUrl,
+    baseUrl: WEBAPP_BASE_URL,
+    teamName,
+    teamUrl,
+    token,
+  });
+
+  await mailer.sendMail({
+    to: email,
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: `A request to use your email has been initiated by ${teamName} on Documenso`,
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};

packages/lib/server-only/team/create-team-checkout-session.ts

@@ -0,0 +1,51 @@
+import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
+import { getStripeCustomerIdByUser } from '@documenso/ee/server-only/stripe/get-customer';
+import { prisma } from '@documenso/prisma';
+
+import { WEBAPP_BASE_URL } from '../../constants/app';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { getTeamSeatPriceId } from '../../utils/billing';
+
+export type CreateTeamPendingCheckoutSession = {
+  userId: number;
+  pendingTeamId: number;
+};
+
+export const createTeamPendingCheckoutSession = async ({
+  userId,
+  pendingTeamId,
+}: CreateTeamPendingCheckoutSession) => {
+  const teamPendingCreation = await prisma.teamPending.findFirstOrThrow({
+    where: {
+      id: pendingTeamId,
+      ownerUserId: userId,
+    },
+    include: {
+      owner: true,
+    },
+  });
+
+  const stripeCustomerId = await getStripeCustomerIdByUser(teamPendingCreation.owner);
+
+  try {
+    const stripeCheckoutSession = await getCheckoutSession({
+      customerId: stripeCustomerId,
+      priceId: getTeamSeatPriceId(),
+      returnUrl: `${WEBAPP_BASE_URL}/settings/teams`,
+      subscriptionMetadata: {
+        pendingTeamId: pendingTeamId.toString(),
+      },
+    });
+
+    if (!stripeCheckoutSession) {
+      throw new AppError(AppErrorCode.UNKNOWN_ERROR);
+    }
+
+    return stripeCheckoutSession;
+  } catch (e) {
+    console.error(e);
+
+    // Absorb all the errors incase stripe throws something sensitive.
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, 'Something went wrong.');
+  }
+};

packages/lib/server-only/team/create-team-member-invites.ts

@@ -0,0 +1,157 @@
+import { createElement } from 'react';
+
+import { nanoid } from 'nanoid';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import type { TeamInviteEmailProps } from '@documenso/email/templates/team-invite';
+import { TeamInviteEmailTemplate } from '@documenso/email/templates/team-invite';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberInviteStatus } from '@documenso/prisma/client';
+import type { TCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+
+import { WEBAPP_BASE_URL } from '../../constants/app';
+import { AppError } from '../../errors/app-error';
+import { getTeamById } from './get-teams';
+
+export type CreateTeamMemberInvitesOptions = {
+  userId: number;
+  userName: string;
+  teamId: number;
+  invitations: TCreateTeamMemberInvitesMutationSchema['invitations'];
+};
+
+/**
+ * Invite team members via email to join a team.
+ */
+export const createTeamMemberInvites = async ({
+  userId,
+  userName,
+  teamId,
+  invitations,
+}: CreateTeamMemberInvitesOptions) => {
+  const [team, currentTeamMemberEmails, currentTeamMemberInviteEmails] = await Promise.all([
+    getTeamById({ userId, teamId }),
+    getTeamMemberEmails(teamId),
+    getTeamInvites(teamId),
+  ]);
+
+  const usersToInvite = invitations.filter((invitation) => {
+    // Filter out users that are already members of the team.
+    if (currentTeamMemberEmails.includes(invitation.email)) {
+      return false;
+    }
+
+    // Filter out users that have already been invited to the team.
+    if (currentTeamMemberInviteEmails.includes(invitation.email)) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const teamMemberInvites = usersToInvite.map(({ email, role }) => ({
+    email,
+    teamId,
+    role,
+    status: TeamMemberInviteStatus.PENDING,
+    token: nanoid(32),
+  }));
+
+  await prisma.teamMemberInvite.createMany({
+    data: teamMemberInvites,
+  });
+
+  const sendEmailResult = await Promise.allSettled(
+    teamMemberInvites.map(async ({ email, token }) =>
+      sendTeamMemberInviteEmail({
+        email,
+        token,
+        teamName: team.name,
+        teamUrl: team.url,
+        senderName: userName,
+      }),
+    ),
+  );
+
+  const sendEmailResultErrorList = sendEmailResult.filter(
+    (result): result is PromiseRejectedResult => result.status === 'rejected',
+  );
+
+  if (sendEmailResultErrorList.length > 0) {
+    console.error(JSON.stringify(sendEmailResultErrorList));
+
+    throw new AppError(
+      'EmailDeliveryFailed',
+      'Failed to send invite emails to one or more users.',
+      `Failed to send invites to ${sendEmailResultErrorList.length}/${teamMemberInvites.length} users.`,
+    );
+  }
+};
+
+type SendTeamMemberInviteEmailOptions = Omit<TeamInviteEmailProps, 'baseUrl' | 'assetBaseUrl'> & {
+  email: string;
+};
+
+/**
+ * Send an email to a user inviting them to join a team.
+ */
+export const sendTeamMemberInviteEmail = async ({
+  email,
+  ...emailTemplateOptions
+}: SendTeamMemberInviteEmailOptions) => {
+  const template = createElement(TeamInviteEmailTemplate, {
+    assetBaseUrl: WEBAPP_BASE_URL,
+    baseUrl: WEBAPP_BASE_URL,
+    ...emailTemplateOptions,
+  });
+
+  await mailer.sendMail({
+    to: email,
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: `You have been invited to join ${emailTemplateOptions.teamName} on Documenso`,
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};
+
+/**
+ * Returns a list of emails of the team members for a given team.
+ *
+ * @param teamId The ID of the team.
+ * @returns All team member emails for a given team.
+ */
+const getTeamMemberEmails = async (teamId: number) => {
+  const teamMembers = await prisma.teamMember.findMany({
+    where: {
+      teamId,
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  return teamMembers.map((teamMember) => teamMember.user.email);
+};
+
+/**
+ * Returns a list of emails that have been invited to join a team.
+ *
+ * This list will not include users who have accepted and created an account.
+ *
+ * @param teamId The ID of the team.
+ * @returns All the emails of users that have been invited to join a team.
+ */
+const getTeamInvites = async (teamId: number) => {
+  const teamMemberInvites = await prisma.teamMemberInvite.findMany({
+    where: {
+      teamId,
+    },
+  });
+
+  return teamMemberInvites.map((teamMemberInvite) => teamMemberInvite.email);
+};

packages/lib/server-only/team/create-team.ts

@@ -0,0 +1,200 @@
+import { z } from 'zod';
+
+import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
+import { getStripeCustomerIdByUser } from '@documenso/ee/server-only/stripe/get-customer';
+import {
+  getTeamSeatPriceId,
+  isSomeSubscriptionsActiveAndCommunityPlan,
+} from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import { Prisma, TeamMemberRole } from '@documenso/prisma/client';
+
+import { IS_BILLING_ENABLED, WEBAPP_BASE_URL } from '../../constants/app';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { stripe } from '../stripe';
+
+export type CreateTeamOptions = {
+  /**
+   * ID of the user creating the Team.
+   */
+  userId: number;
+
+  /**
+   * Name of the team to display.
+   */
+  name: string;
+
+  /**
+   * Unique URL of the team.
+   *
+   * Used as the URL path, example: https://documenso.com/t/{teamUrl}/settings
+   */
+  teamUrl: string;
+};
+
+export type CreateTeamResponse =
+  | {
+      paymentRequired: false;
+    }
+  | {
+      paymentRequired: true;
+      checkoutUrl: string;
+    };
+
+/**
+ * Create a team or pending team depending on the user's subscription or application's billing settings.
+ */
+export const createTeam = async ({
+  name,
+  userId,
+  teamUrl,
+}: CreateTeamOptions): Promise<CreateTeamResponse> => {
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      Subscription: true,
+    },
+  });
+
+  const isUserSubscriptionValidForTeams = isSomeSubscriptionsActiveAndCommunityPlan(
+    user.Subscription,
+  );
+
+  const isPaymentRequired = IS_BILLING_ENABLED && !isUserSubscriptionValidForTeams;
+
+  try {
+    // Create the team directly if no payment is required.
+    if (!isPaymentRequired) {
+      await prisma.team.create({
+        data: {
+          name,
+          url: teamUrl,
+          ownerUserId: user.id,
+          members: {
+            create: [
+              {
+                userId,
+                role: TeamMemberRole.ADMIN,
+              },
+            ],
+          },
+        },
+      });
+
+      return {
+        paymentRequired: false,
+      };
+    }
+
+    // Create a pending team if payment is required.
+    return await prisma.$transaction(async (tx) => {
+      const existingTeamWithUrl = await tx.team.findUnique({
+        where: {
+          url: teamUrl,
+        },
+      });
+
+      if (existingTeamWithUrl) {
+        throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+      }
+
+      const pendingTeam = await tx.teamPending.create({
+        data: {
+          name,
+          url: teamUrl,
+          ownerUserId: user.id,
+        },
+      });
+
+      const stripeCustomerId = await getStripeCustomerIdByUser(user);
+
+      const stripeCheckoutSession = await getCheckoutSession({
+        customerId: stripeCustomerId,
+        priceId: getTeamSeatPriceId(),
+        returnUrl: `${WEBAPP_BASE_URL}/settings/teams`,
+        subscriptionMetadata: {
+          pendingTeamId: pendingTeam.id.toString(),
+        },
+      });
+
+      if (!stripeCheckoutSession) {
+        throw new AppError('Unable to create checkout session');
+      }
+
+      return {
+        paymentRequired: true,
+        checkoutUrl: stripeCheckoutSession,
+      };
+    });
+  } catch (err) {
+    console.error(err);
+
+    if (!(err instanceof Prisma.PrismaClientKnownRequestError)) {
+      throw err;
+    }
+
+    const target = z.array(z.string()).safeParse(err.meta?.target);
+
+    if (err.code === 'P2002' && target.success && target.data.includes('url')) {
+      throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+    }
+
+    throw err;
+  }
+};
+
+export type CreateTeamFromPendingTeamOptions = {
+  pendingTeamId: number;
+  subscriptionId: string;
+};
+
+export const createTeamFromPendingTeam = async ({
+  pendingTeamId,
+  subscriptionId,
+}: CreateTeamFromPendingTeamOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const pendingTeam = await tx.teamPending.findUniqueOrThrow({
+      where: {
+        id: pendingTeamId,
+      },
+    });
+
+    await tx.teamPending.delete({
+      where: {
+        id: pendingTeamId,
+      },
+    });
+
+    const team = await tx.team.create({
+      data: {
+        name: pendingTeam.name,
+        url: pendingTeam.url,
+        ownerUserId: pendingTeam.ownerUserId,
+        subscriptionId,
+        members: {
+          create: [
+            {
+              userId: pendingTeam.ownerUserId,
+              role: TeamMemberRole.ADMIN,
+            },
+          ],
+        },
+      },
+    });
+
+    // Attach the team ID to the subscription metadata so we can keep track of it if the team changes ownership.
+    await stripe.subscriptions
+      .update(subscriptionId, {
+        metadata: {
+          teamId: team.id.toString(),
+        },
+      })
+      .catch((e) => {
+        console.error(e);
+        // Non-critical error, but we want to log it so we can rectify it.
+        // Todo: Teams - Alert us.
+      });
+  });
+};

packages/lib/server-only/team/delete-team-email-verification.ts

@@ -0,0 +1,34 @@
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { prisma } from '@documenso/prisma';
+
+export type DeleteTeamEmailVerificationOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const deleteTeamEmailVerification = async ({
+  userId,
+  teamId,
+}: DeleteTeamEmailVerificationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+    });
+
+    await tx.teamEmailVerification.delete({
+      where: {
+        teamId,
+      },
+    });
+  });
+};