feat: add teams (#848)

## Description Add support for teams which will allow users to collaborate on documents. Teams features allows users to: - Create, manage and transfer teams - Manage team members - Manage team emails - Manage a shared team inbox and documents These changes do NOT include the following, which are planned for a future release: - Team templates - Team API - Search menu integration ## Testing Performed - Added E2E tests for general team management - Added E2E tests to validate document counts ## Checklist - [X] I have tested these changes locally and they work as expected. - [X] I have added/updated tests that prove the effectiveness of these changes. - [ ] I have updated the documentation to reflect these changes, if applicable. - [X] I have followed the project's coding style guidelines.
2025-11-18 18:51:37 +10:00 · 2024-02-06 16:16:10 +11:00
parent c6457e75e0
commit 0c339b78b6
200 changed files with 12916 additions and 968 deletions
--- a/apps/web/src/components/(dashboard)/common/command-menu.tsx
+++ b/apps/web/src/components/(dashboard)/common/command-menu.tsx
@ -197,20 +197,22 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
        )}
        {!currentPage && (
          <>
-            <CommandGroup heading="Documents">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Documents">
              <Commands push={push} pages={DOCUMENTS_PAGES} />
            </CommandGroup>
-            <CommandGroup heading="Templates">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Templates">
              <Commands push={push} pages={TEMPLATES_PAGES} />
            </CommandGroup>
-            <CommandGroup heading="Settings">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Settings">
              <Commands push={push} pages={SETTINGS_PAGES} />
            </CommandGroup>
-            <CommandGroup heading="Preferences">
-              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Preferences">
+              <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('theme')}>
+                Change theme
+              </CommandItem>
            </CommandGroup>
            {searchResults.length > 0 && (
-              <CommandGroup heading="Your documents">
+              <CommandGroup className="mx-2 p-0 pb-2" heading="Your documents">
                <Commands push={push} pages={searchResults} />
              </CommandGroup>
            )}
@ -231,6 +233,7 @@ const Commands = ({
 }) => {
  return pages.map((page, idx) => (
    <CommandItem
+      className="-mx-2 -my-1 rounded-lg"
      key={page.path + idx}
      value={page.value ?? page.label}
      onSelect={() => push(page.path)}
@ -255,7 +258,7 @@ const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) =>
    <CommandItem
      key={theme.theme}
      onSelect={() => setTheme(theme.theme)}
-      className="mx-2 first:mt-2 last:mb-2"
+      className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
    >
      <theme.icon className="mr-2" />
      {theme.label}
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@ -4,10 +4,11 @@ import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';

 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';

 import { Search } from 'lucide-react';

+import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';

@ -28,10 +29,13 @@ export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;

 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
  const pathname = usePathname();
+  const params = useParams();

  const [open, setOpen] = useState(false);
  const [modifierKey, setModifierKey] = useState(() => 'Ctrl');

+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
  useEffect(() => {
    const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
    const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
@ -48,20 +52,24 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
      {...props}
    >
      <div className="flex items-baseline gap-x-6">
-        {navigationLinks.map(({ href, label }) => (
-          <Link
-            key={href}
-            href={href}
-            className={cn(
-              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-              {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
-              },
-            )}
-          >
-            {label}
-          </Link>
-        ))}
+        {navigationLinks
+          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
+          .map(({ href, label }) => (
+            <Link
+              key={href}
+              href={`${rootHref}${href}`}
+              className={cn(
+                'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                {
+                  'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                    `${rootHref}${href}`,
+                  ),
+                },
+              )}
+            >
+              {label}
+            </Link>
+          ))}
      </div>

      <CommandMenu open={open} onOpenChange={setOpen} />
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@ -1,23 +1,34 @@
 '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 { MenuIcon, SearchIcon } from 'lucide-react';
+
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getRootHref } from '@documenso/lib/utils/params';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';

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

+import { CommandMenu } from '../common/command-menu';
 import { DesktopNav } from './desktop-nav';
-import { ProfileDropdown } from './profile-dropdown';
+import { MenuSwitcher } from './menu-switcher';
+import { MobileNavigation } from './mobile-navigation';

 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 [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
@ -41,8 +52,8 @@ 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="/"
-          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          href={getRootHref(params)}
+          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
        >
          <Logo className="h-6 w-auto" />
        </Link>
@ -50,11 +61,24 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
        <DesktopNav />

        <div className="flex gap-x-4 md:ml-8">
-          <ProfileDropdown user={user} />
+          <MenuSwitcher user={user} teams={teams} />
+        </div>

-          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
-            <Menu className="h-6 w-6" />
-          </Button> */}
+        <div className="flex flex-row items-center space-x-4 md:hidden">
+          <button onClick={() => setIsCommandMenuOpen(true)}>
+            <SearchIcon className="h-6 w-6" />
+          </button>
+
+          <button onClick={() => setIsHamburgerMenuOpen(true)}>
+            <MenuIcon className="h-6 w-6" />
+          </button>
+
+          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+
+          <MobileNavigation
+            isMenuOpen={isHamburgerMenuOpen}
+            onMenuOpenChange={setIsHamburgerMenuOpen}
+          />
        </div>
      </div>
    </header>
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@ -0,0 +1,214 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
+import { signOut } from 'next-auth/react';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import type { User } from '@documenso/prisma/client';
+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,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type MenuSwitcherProps = {
+  user: User;
+  teams: GetTeamsResponse;
+};
+
+export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProps) => {
+  const pathname = usePathname();
+
+  const isUserAdmin = isAdmin(user);
+
+  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
+    initialData: initialTeamsData,
+  });
+
+  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
+          data-testid="menu-switcher"
+          variant="none"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+        >
+          <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={cn('z-[60] ml-2 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        align="end"
+        forceMount
+      >
+        {teams ? (
+          <>
+            <DropdownMenuLabel>Personal</DropdownMenuLabel>
+
+            <DropdownMenuItem asChild>
+              <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 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="Create team"
+                      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 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 />
+
+        {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>
+
+        {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
+          className="text-destructive/90 hover:!text-destructive px-4 py-2"
+          onSelect={async () =>
+            signOut({
+              callbackUrl: '/',
+            })
+          }
+        >
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
--- a/apps/web/src/components/(dashboard)/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/mobile-nav.tsx
--- a/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
+++ b/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
@ -0,0 +1,96 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+
+import { signOut } from 'next-auth/react';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { getRootHref } from '@documenso/lib/utils/params';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const params = useParams();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
+  const menuNavigationLinks = [
+    {
+      href: `${rootHref}/documents`,
+      text: 'Documents',
+    },
+    {
+      href: `${rootHref}/templates`,
+      text: 'Templates',
+    },
+    {
+      href: '/settings/teams',
+      text: 'Teams',
+    },
+    {
+      href: '/settings/profile',
+      text: 'Settings',
+    },
+  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="flex w-full max-w-[400px] flex-col">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <div className="mt-8 flex w-full flex-col items-start gap-y-4">
+          {menuNavigationLinks.map(({ href, text }) => (
+            <Link
+              key={href}
+              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+              href={href}
+              onClick={() => handleMenuItemClick()}
+            >
+              {text}
+            </Link>
+          ))}
+
+          <button
+            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            onClick={async () =>
+              signOut({
+                callbackUrl: '/',
+              })
+            }
+          >
+            Sign Out
+          </button>
+        </div>
+
+        <div className="mt-auto flex w-full flex-col space-y-4 self-end">
+          <div className="w-fit">
+            <ThemeSwitcher />
+          </div>
+
+          <p className="text-muted-foreground text-sm">
+            © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@ -1,169 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import {
-  CreditCard,
-  FileSpreadsheet,
-  Lock,
-  LogOut,
-  User as LucideUser,
-  Monitor,
-  Moon,
-  Palette,
-  Sun,
-  UserCog,
-} 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 { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
-import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { User } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } 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;
-};
-
-export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { getFlag } = useFeatureFlags();
-  const { theme, setTheme } = useTheme();
-  const isUserAdmin = isAdmin(user);
-
-  const isBillingEnabled = getFlag('app_billing');
-
-  const avatarFallback = user.name
-    ? recipientInitials(user.name)
-    : user.email.slice(0, 1).toUpperCase();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          title="Profile Dropdown"
-          className="relative h-10 w-10 rounded-full"
-        >
-          <Avatar className="h-10 w-10">
-            <AvatarFallback>{avatarFallback}</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
-        <DropdownMenuLabel>Account</DropdownMenuLabel>
-
-        {isUserAdmin && (
-          <>
-            <DropdownMenuItem asChild>
-              <Link href="/admin" className="cursor-pointer">
-                <UserCog className="mr-2 h-4 w-4" />
-                Admin
-              </Link>
-            </DropdownMenuItem>
-
-            <DropdownMenuSeparator />
-          </>
-        )}
-
-        <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
-            </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 className="z-[60]">
-              <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"
-            target="_blank"
-          >
-            <LuGithub className="mr-2 h-4 w-4" />
-            Star on Github
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          onSelect={() =>
-            void signOut({
-              callbackUrl: '/',
-            })
-          }
-        >
-          <LogOut className="mr-2 h-4 w-4" />
-          Sign Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
--- a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
+++ b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
@ -21,9 +21,9 @@ export const PeriodSelector = () => {
  const router = useRouter();

  const period = useMemo(() => {
-    const p = searchParams?.get('period') ?? '';
+    const p = searchParams?.get('period') ?? 'all';

-    return isPeriodSelectorValue(p) ? p : '';
+    return isPeriodSelectorValue(p) ? p : 'all';
  }, [searchParams]);

  const onPeriodChange = (newPeriod: string) => {
@ -35,7 +35,7 @@ export const PeriodSelector = () => {

    params.set('period', newPeriod);

-    if (newPeriod === '') {
+    if (newPeriod === '' || newPeriod === 'all') {
      params.delete('period');
    }

@ -49,7 +49,7 @@ export const PeriodSelector = () => {
      </SelectTrigger>

      <SelectContent position="popper">
-        <SelectItem value="">All Time</SelectItem>
+        <SelectItem value="all">All Time</SelectItem>
        <SelectItem value="7d">Last 7 days</SelectItem>
        <SelectItem value="14d">Last 14 days</SelectItem>
        <SelectItem value="30d">Last 30 days</SelectItem>
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/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"
--- a/apps/web/src/components/(dashboard)/settings/layout/header.tsx
+++ b/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 const 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 text-sm md:mt-2">{subtitle}</p>
+        </div>
+
+        {children}
+      </div>
+
+      <hr className="my-4" />
+    </>
+  );
+};
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/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"