feat: migrate nextjs to rr7

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -0,0 +1,64 @@
+import { SubscriptionStatus } from '@prisma/client';
+import { Outlet } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { getLimits } from '@documenso/ee/server-only/limits/client';
+import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+import { AppBanner } from '~/components/general/app-banner';
+import { Header } from '~/components/general/app-header';
+import { TeamLayoutBillingBanner } from '~/components/general/teams/team-layout-billing-banner';
+import { VerifyEmailBanner } from '~/components/general/verify-email-banner';
+
+import type { Route } from './+types/_layout';
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { user, teams, currentTeam } = getLoaderSession();
+
+  const requestHeaders = Object.fromEntries(request.headers.entries());
+
+  // Todo: Should only load this on first render.
+  const [limits, banner] = await Promise.all([
+    getLimits({ headers: requestHeaders, teamId: currentTeam?.id }),
+    getSiteSettings().then((settings) =>
+      settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+    ),
+  ]);
+
+  return {
+    user,
+    teams,
+    banner,
+    limits,
+    currentTeam,
+  };
+};
+
+export default function Layout({ loaderData }: Route.ComponentProps) {
+  const { user, teams, banner, limits, currentTeam } = loaderData;
+
+  return (
+    <LimitsProvider initialValue={limits} teamId={currentTeam?.id}>
+      {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
+
+      {currentTeam?.subscription &&
+        currentTeam.subscription.status !== SubscriptionStatus.ACTIVE && (
+          <TeamLayoutBillingBanner
+            subscription={currentTeam.subscription}
+            teamId={currentTeam.id}
+            userRole={currentTeam.currentTeamMember.role}
+          />
+        )}
+
+      {banner && <AppBanner banner={banner} />}
+
+      <Header user={user} teams={teams} />
+
+      <main className="mt-8 pb-8 md:mt-12 md:pb-12">
+        <Outlet />
+      </main>
+    </LimitsProvider>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/_index.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'react-router';
+
+export function loader() {
+  throw redirect('/admin/stats');
+}
+
+export default function AdminPage() {
+  // Redirect page.
+}

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -0,0 +1,120 @@
+import { Trans } from '@lingui/react/macro';
+import { BarChart3, FileStack, Settings, Trophy, Users, Wallet2 } from 'lucide-react';
+import { Link, Outlet, redirect, useLocation } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export function loader() {
+  const { user } = getLoaderSession();
+
+  if (!user || !isAdmin(user)) {
+    throw redirect('/documents');
+  }
+}
+
+export default function AdminLayout() {
+  const { pathname } = useLocation();
+
+  return (
+    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
+      <div className="grid grid-cols-12 md:mt-8 md:gap-8">
+        <div
+          className={cn(
+            'col-span-12 flex gap-x-2.5 gap-y-2 overflow-hidden overflow-x-auto md:col-span-3 md:flex md:flex-col',
+          )}
+        >
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/stats') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/stats">
+              <BarChart3 className="mr-2 h-5 w-5" />
+              <Trans>Stats</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/users') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/users">
+              <Users className="mr-2 h-5 w-5" />
+              <Trans>Users</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/documents') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/documents">
+              <FileStack className="mr-2 h-5 w-5" />
+              <Trans>Documents</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/subscriptions') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/subscriptions">
+              <Wallet2 className="mr-2 h-5 w-5" />
+              <Trans>Subscriptions</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/leaderboard') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/leaderboard">
+              <Trophy className="mr-2 h-5 w-5" />
+              <Trans>Leaderboard</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/banner') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/site-settings">
+              <Settings className="mr-2 h-5 w-5" />
+              <Trans>Site Settings</Trans>
+            </Link>
+          </Button>
+        </div>
+
+        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -0,0 +1,165 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { SigningStatus } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { trpc } from '@documenso/trpc/react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { AdminDocumentDeleteDialog } from '~/components/dialogs/admin-document-delete-dialog';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { AdminDocumentRecipientItemTable } from '~/components/tables/admin-document-recipient-item-table';
+
+import type { Route } from './+types/documents.$id';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const id = Number(params.id);
+
+  if (isNaN(id)) {
+    throw redirect('/admin/documents');
+  }
+
+  const document = await getEntireDocument({ id });
+
+  return { document };
+}
+
+export default function AdminDocumentDetailsPage({ loaderData }: Route.ComponentProps) {
+  const { document } = loaderData;
+
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { mutate: resealDocument, isPending: isResealDocumentLoading } =
+    trpc.admin.resealDocument.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`Document resealed`),
+        });
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`Failed to reseal document`),
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <div>
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-x-4">
+          <h1 className="text-2xl font-semibold">{document.title}</h1>
+          <DocumentStatus status={document.status} />
+        </div>
+
+        {document.deletedAt && (
+          <Badge size="large" variant="destructive">
+            <Trans>Deleted</Trans>
+          </Badge>
+        )}
+      </div>
+
+      <div className="text-muted-foreground mt-4 text-sm">
+        <div>
+          <Trans>Created on</Trans>: {i18n.date(document.createdAt, DateTime.DATETIME_MED)}
+        </div>
+
+        <div>
+          <Trans>Last updated at</Trans>: {i18n.date(document.updatedAt, DateTime.DATETIME_MED)}
+        </div>
+      </div>
+
+      <hr className="my-4" />
+
+      <h2 className="text-lg font-semibold">
+        <Trans>Admin Actions</Trans>
+      </h2>
+
+      <div className="mt-2 flex gap-x-4">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                loading={isResealDocumentLoading}
+                disabled={document.recipients.some(
+                  (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
+                )}
+                onClick={() => resealDocument({ id: document.id })}
+              >
+                <Trans>Reseal document</Trans>
+              </Button>
+            </TooltipTrigger>
+
+            <TooltipContent className="max-w-[40ch]">
+              <Trans>
+                Attempts sealing the document again, useful for after a code change has occurred to
+                resolve an erroneous document.
+              </Trans>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <Button variant="outline" asChild>
+          <Link to={`/admin/users/${document.userId}`}>
+            <Trans>Go to owner</Trans>
+          </Link>
+        </Button>
+      </div>
+
+      <hr className="my-4" />
+      <h2 className="text-lg font-semibold">
+        <Trans>Recipients</Trans>
+      </h2>
+
+      <div className="mt-4">
+        <Accordion type="multiple" className="space-y-4">
+          {document.recipients.map((recipient) => (
+            <AccordionItem
+              key={recipient.id}
+              value={recipient.id.toString()}
+              className="rounded-lg border"
+            >
+              <AccordionTrigger className="px-4">
+                <div className="flex items-center gap-x-4">
+                  <h4 className="font-semibold">{recipient.name}</h4>
+                  <Badge size="small" variant="neutral">
+                    {recipient.email}
+                  </Badge>
+                </div>
+              </AccordionTrigger>
+
+              <AccordionContent className="border-t px-4 pt-4">
+                <AdminDocumentRecipientItemTable recipient={recipient} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+
+      <hr className="my-4" />
+
+      {document && <AdminDocumentDeleteDialog document={document} />}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -0,0 +1,170 @@
+import { useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { Link, useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { DocumentStatus } from '~/components/general/document/document-status';
+
+export default function AdminDocumentsPage() {
+  const { _, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [term, setTerm] = useState(() => searchParams?.get?.('term') ?? '');
+  const debouncedTerm = useDebouncedValue(term, 500);
+
+  const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
+  const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
+
+  const { data: findDocumentsData, isPending: isFindDocumentsLoading } =
+    trpc.admin.findDocuments.useQuery(
+      {
+        query: debouncedTerm,
+        page: page || 1,
+        perPage: perPage || 20,
+      },
+      {
+        placeholderData: (previousData) => previousData,
+      },
+    );
+
+  const results = findDocumentsData ?? {
+    data: [],
+    perPage: 20,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Created`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: _(msg`Title`),
+        accessorKey: 'title',
+        cell: ({ row }) => {
+          return (
+            <Link
+              to={`/admin/documents/${row.original.id}`}
+              className="block max-w-[5rem] truncate font-medium hover:underline md:max-w-[10rem]"
+            >
+              {row.original.title}
+            </Link>
+          );
+        },
+      },
+      {
+        header: _(msg`Status`),
+        accessorKey: 'status',
+        cell: ({ row }) => <DocumentStatus status={row.original.status} />,
+      },
+      {
+        header: _(msg`Owner`),
+        accessorKey: 'owner',
+        cell: ({ row }) => {
+          const avatarFallbackText = row.original.user.name
+            ? extractInitials(row.original.user.name)
+            : row.original.user.email.slice(0, 1).toUpperCase();
+
+          return (
+            <Tooltip delayDuration={200}>
+              <TooltipTrigger>
+                <Link to={`/admin/users/${row.original.user.id}`}>
+                  <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                    <AvatarFallback className="text-xs text-gray-400">
+                      {avatarFallbackText}
+                    </AvatarFallback>
+                  </Avatar>
+                </Link>
+              </TooltipTrigger>
+
+              <TooltipContent 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">
+                    {avatarFallbackText}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="text-muted-foreground flex flex-col text-sm">
+                  <span>{row.original.user.name}</span>
+                  <span>{row.original.user.email}</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          );
+        },
+      },
+      {
+        header: 'Last updated',
+        accessorKey: 'updatedAt',
+        cell: ({ row }) => i18n.date(row.original.updatedAt),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  const onPaginationChange = (newPage: number, newPerPage: number) => {
+    updateSearchParams({
+      page: newPage,
+      perPage: newPerPage,
+    });
+  };
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage documents</Trans>
+      </h2>
+
+      <div className="mt-8">
+        <div>
+          <Input
+            type="search"
+            placeholder={_(msg`Search by document title`)}
+            value={term}
+            onChange={(e) => setTerm(e.target.value)}
+          />
+
+          <div className="relative mt-4">
+            <DataTable
+              columns={columns}
+              data={results.data}
+              perPage={results.perPage ?? 20}
+              currentPage={results.currentPage ?? 1}
+              totalPages={results.totalPages ?? 1}
+              onPaginationChange={onPaginationChange}
+            >
+              {(table) => (
+                <DataTablePagination additionalInformation="VisibleCount" table={table} />
+              )}
+            </DataTable>
+
+            {isFindDocumentsLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+                <Loader className="h-8 w-8 animate-spin text-gray-500" />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx

@@ -0,0 +1,66 @@
+import { Trans } from '@lingui/react/macro';
+
+import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
+
+import { AdminLeaderboardTable } from '~/components/tables/admin-leaderboard-table';
+
+import type { Route } from './+types/leaderboard';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+
+  const rawSortBy = url.searchParams.get('sortBy') || 'signingVolume';
+  const rawSortOrder = url.searchParams.get('sortOrder') || 'desc';
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const sortOrder = (['asc', 'desc'].includes(rawSortOrder) ? rawSortOrder : 'desc') as
+    | 'asc'
+    | 'desc';
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const sortBy = (
+    ['name', 'createdAt', 'signingVolume'].includes(rawSortBy) ? rawSortBy : 'signingVolume'
+  ) as 'name' | 'createdAt' | 'signingVolume';
+
+  const page = Number(url.searchParams.get('page')) || 1;
+  const perPage = Number(url.searchParams.get('perPage')) || 10;
+  const search = url.searchParams.get('search') || '';
+
+  const { leaderboard: signingVolume, totalPages } = await getSigningVolume({
+    search,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  });
+
+  return {
+    signingVolume,
+    totalPages,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  };
+}
+
+export default function Leaderboard({ loaderData }: Route.ComponentProps) {
+  const { signingVolume, totalPages, page, perPage, sortBy, sortOrder } = loaderData;
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Signing Volume</Trans>
+      </h2>
+      <div className="mt-8">
+        <AdminLeaderboardTable
+          signingVolume={signingVolume}
+          totalPages={totalPages}
+          page={page}
+          perPage={perPage}
+          sortBy={sortBy}
+          sortOrder={sortOrder}
+        />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -0,0 +1,224 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import {
+  SITE_SETTINGS_BANNER_ID,
+  ZSiteSettingsBannerSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+
+import type { Route } from './+types/site-settings';
+
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
+export async function loader() {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return { banner };
+}
+
+export default function AdminBannerPage({ loaderData }: Route.ComponentProps) {
+  const { banner } = loaderData;
+
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TBannerFormSchema>({
+    resolver: zodResolver(ZBannerFormSchema),
+    defaultValues: {
+      id: SITE_SETTINGS_BANNER_ID,
+      enabled: banner?.enabled ?? false,
+      data: {
+        content: banner?.data?.content ?? '',
+        bgColor: banner?.data?.bgColor ?? '#000000',
+        textColor: banner?.data?.textColor ?? '#FFFFFF',
+      },
+    },
+  });
+
+  const enabled = form.watch('enabled');
+
+  const { mutateAsync: updateSiteSetting, isPending: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
+    try {
+      await updateSiteSetting({
+        id,
+        enabled,
+        data,
+      });
+
+      toast({
+        title: _(msg`Banner Updated`),
+        description: _(msg`Your banner has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(
+          msg`We encountered an unknown error while attempting to update the banner. Please try again later.`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Site Settings`)}
+        subtitle={_(msg`Manage your site settings here`)}
+      />
+
+      <div className="mt-8">
+        <div>
+          <h2 className="font-semibold">
+            <Trans>Site Banner</Trans>
+          </h2>
+          <p className="text-muted-foreground mt-2 text-sm">
+            <Trans>
+              The site banner is a message that is shown at the top of the site. It can be used to
+              display important information to your users.
+            </Trans>
+          </p>
+
+          <Form {...form}>
+            <form
+              className="mt-4 flex flex-col rounded-md"
+              onSubmit={form.handleSubmit(onBannerUpdate)}
+            >
+              <div className="mt-4 flex flex-col gap-4 md:flex-row">
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel>
+                        <Trans>Enabled</Trans>
+                      </FormLabel>
+
+                      <FormControl>
+                        <div>
+                          <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                <fieldset
+                  className="flex flex-col gap-4 md:flex-row"
+                  disabled={!enabled}
+                  aria-disabled={!enabled}
+                >
+                  <FormField
+                    control={form.control}
+                    name="data.bgColor"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Background Color</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <div>
+                            <ColorPicker {...field} />
+                          </div>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="data.textColor"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Text Color</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <div>
+                            <ColorPicker {...field} />
+                          </div>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </fieldset>
+              </div>
+
+              <fieldset disabled={!enabled} aria-disabled={!enabled}>
+                <FormField
+                  control={form.control}
+                  name="data.content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Content</Trans>
+                      </FormLabel>
+
+                      <FormControl>
+                        <Textarea className="h-32 resize-none" {...field} />
+                      </FormControl>
+
+                      <FormDescription>
+                        <Trans>The content to show in the banner, HTML is allowed</Trans>
+                      </FormDescription>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+
+              <Button
+                type="submit"
+                loading={isUpdateSiteSettingLoading}
+                className="mt-4 justify-end self-end"
+              >
+                <Trans>Update Banner</Trans>
+              </Button>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -0,0 +1,177 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import {
+  File,
+  FileCheck,
+  FileClock,
+  FileCog,
+  FileEdit,
+  Mail,
+  MailOpen,
+  PenTool,
+  UserPlus,
+  UserSquare2,
+  Users,
+} from 'lucide-react';
+
+import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
+import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
+import {
+  getUserWithSignedDocumentMonthlyGrowth,
+  getUsersCount,
+  getUsersWithSubscriptionsCount,
+} from '@documenso/lib/server-only/admin/get-users-stats';
+import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
+import { env } from '@documenso/lib/utils/env';
+
+import { AdminStatsSignerConversionChart } from '~/components/general/admin-stats-signer-conversion-chart';
+import { AdminStatsUsersWithDocumentsChart } from '~/components/general/admin-stats-users-with-documents';
+import { CardMetric } from '~/components/general/metric-card';
+
+import type { Route } from './+types/stats';
+
+export async function loader() {
+  const [
+    usersCount,
+    usersWithSubscriptionsCount,
+    docStats,
+    recipientStats,
+    signerConversionMonthly,
+    // userWithAtLeastOneDocumentPerMonth,
+    // userWithAtLeastOneDocumentSignedPerMonth,
+    MONTHLY_USERS_SIGNED,
+  ] = await Promise.all([
+    getUsersCount(),
+    getUsersWithSubscriptionsCount(),
+    getDocumentStats(),
+    getRecipientsStats(),
+    getSignerConversionMonthly(),
+    // getUserWithAtLeastOneDocumentPerMonth(),
+    // getUserWithAtLeastOneDocumentSignedPerMonth(),
+    getUserWithSignedDocumentMonthlyGrowth(),
+  ]);
+
+  return {
+    usersCount,
+    usersWithSubscriptionsCount,
+    docStats,
+    recipientStats,
+    signerConversionMonthly,
+    MONTHLY_USERS_SIGNED,
+  };
+}
+
+export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
+  const { _ } = useLingui();
+
+  const {
+    usersCount,
+    usersWithSubscriptionsCount,
+    docStats,
+    recipientStats,
+    signerConversionMonthly,
+    MONTHLY_USERS_SIGNED,
+  } = loaderData;
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Instance Stats</Trans>
+      </h2>
+
+      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <CardMetric icon={Users} title={_(msg`Total Users`)} value={usersCount} />
+        <CardMetric icon={File} title={_(msg`Total Documents`)} value={docStats.ALL} />
+        <CardMetric
+          icon={UserPlus}
+          title={_(msg`Active Subscriptions`)}
+          value={usersWithSubscriptionsCount}
+        />
+
+        <CardMetric icon={FileCog} title={_(msg`App Version`)} value={`v${env('APP_VERSION')}`} />
+      </div>
+
+      <div className="mt-16 gap-8">
+        <div>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Document metrics</Trans>
+          </h3>
+
+          <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
+            <CardMetric icon={FileEdit} title={_(msg`Drafted Documents`)} value={docStats.DRAFT} />
+            <CardMetric
+              icon={FileClock}
+              title={_(msg`Pending Documents`)}
+              value={docStats.PENDING}
+            />
+            <CardMetric
+              icon={FileCheck}
+              title={_(msg`Completed Documents`)}
+              value={docStats.COMPLETED}
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Recipients metrics</Trans>
+          </h3>
+
+          <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
+            <CardMetric
+              icon={UserSquare2}
+              title={_(msg`Total Recipients`)}
+              value={recipientStats.TOTAL_RECIPIENTS}
+            />
+            <CardMetric
+              icon={Mail}
+              title={_(msg`Documents Received`)}
+              value={recipientStats.SENT}
+            />
+            <CardMetric
+              icon={MailOpen}
+              title={_(msg`Documents Viewed`)}
+              value={recipientStats.OPENED}
+            />
+            <CardMetric
+              icon={PenTool}
+              title={_(msg`Signatures Collected`)}
+              value={recipientStats.SIGNED}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16">
+        <h3 className="text-3xl font-semibold">
+          <Trans>Charts</Trans>
+        </h3>
+        <div className="mt-5 grid grid-cols-2 gap-8">
+          <AdminStatsUsersWithDocumentsChart
+            data={MONTHLY_USERS_SIGNED}
+            title={_(msg`MAU (created document)`)}
+            tooltip={_(msg`Monthly Active Users: Users that created at least one Document`)}
+          />
+          <AdminStatsUsersWithDocumentsChart
+            data={MONTHLY_USERS_SIGNED}
+            completed
+            title={_(msg`MAU (had document completed)`)}
+            tooltip={_(
+              msg`Monthly Active Users: Users that had at least one of their documents completed`,
+            )}
+          />
+          <AdminStatsSignerConversionChart
+            title="Signers that Signed Up"
+            data={signerConversionMonthly}
+          />
+          <AdminStatsSignerConversionChart
+            title={_(msg`Total Signers that Signed Up`)}
+            data={signerConversionMonthly}
+            cummulative
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/subscriptions.tsx

@@ -0,0 +1,84 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { findSubscriptions } from '@documenso/lib/server-only/admin/get-all-subscriptions';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import type { Route } from './+types/subscriptions';
+
+export async function loader() {
+  const subscriptions = await findSubscriptions();
+
+  return { subscriptions };
+}
+
+export default function Subscriptions({ loaderData }: Route.ComponentProps) {
+  const { subscriptions } = loaderData;
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage subscriptions</Trans>
+      </h2>
+      <div className="mt-8">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>
+                <Trans>Status</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>Created At</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>Ends On</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>User ID</Trans>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {subscriptions.map((subscription, index) => (
+              <TableRow key={index}>
+                <TableCell>{subscription.id}</TableCell>
+                <TableCell>{subscription.status}</TableCell>
+                <TableCell>
+                  {subscription.createdAt
+                    ? new Date(subscription.createdAt).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })
+                    : 'N/A'}
+                </TableCell>
+                <TableCell>
+                  {subscription.periodEnd
+                    ? new Date(subscription.periodEnd).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })
+                    : 'N/A'}
+                </TableCell>
+                <TableCell>
+                  <Link to={`/admin/users/${subscription.userId}`}>{subscription.userId}</Link>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/users.$id.tsx

@@ -0,0 +1,163 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZAdminUpdateProfileMutationSchema } from '@documenso/trpc/server/admin-router/schema';
+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';
+
+import { AdminUserDeleteDialog } from '~/components/dialogs/admin-user-delete-dialog';
+import { AdminUserDisableDialog } from '~/components/dialogs/admin-user-disable-dialog';
+import { AdminUserEnableDialog } from '~/components/dialogs/admin-user-enable-dialog';
+
+import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';
+
+const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
+
+type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
+
+export default function UserPage({ params }: { params: { id: number } }) {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { data: user } = trpc.profile.getUser.useQuery(
+    {
+      id: Number(params.id),
+    },
+    {
+      enabled: !!params.id,
+    },
+  );
+
+  const roles = user?.roles ?? [];
+
+  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
+
+  const form = useForm<TUserFormSchema>({
+    resolver: zodResolver(ZUserFormSchema),
+    values: {
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      roles: user?.roles ?? [],
+    },
+  });
+
+  const onSubmit = async ({ name, email, roles }: TUserFormSchema) => {
+    try {
+      await updateUserMutation({
+        id: Number(user?.id),
+        name,
+        email,
+        roles,
+      });
+
+      await revalidate();
+
+      toast({
+        title: _(msg`Profile updated`),
+        description: _(msg`Your profile has been updated.`),
+        duration: 5000,
+      });
+    } catch (e) {
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while updating your profile.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage {user?.name}'s profile</Trans>
+      </h2>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Email</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="roles"
+              render={({ field: { onChange } }) => (
+                <FormItem>
+                  <fieldset className="flex flex-col gap-2">
+                    <FormLabel className="text-muted-foreground">
+                      <Trans>Roles</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelectRoleCombobox
+                        listValues={roles}
+                        onChange={(values: string[]) => onChange(values)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </fieldset>
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                <Trans>Update user</Trans>
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      <hr className="my-4" />
+
+      <div className="flex flex-col items-center gap-4">
+        {user && <AdminUserDeleteDialog user={user} />}
+        {user && user.disabled && <AdminUserEnableDialog userToEnable={user} />}
+        {user && !user.disabled && <AdminUserDisableDialog userToDisable={user} />}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/users._index.tsx

@@ -0,0 +1,52 @@
+import { Trans } from '@lingui/react/macro';
+
+import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
+
+import { AdminDashboardUsersTable } from '~/components/tables/admin-dashboard-users-table';
+
+import type { Route } from './+types/users._index';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+
+  const page = Number(url.searchParams.get('page')) || 1;
+  const perPage = Number(url.searchParams.get('perPage')) || 10;
+  const search = url.searchParams.get('search') || '';
+
+  const [{ users, totalPages }, individualPrices] = await Promise.all([
+    findUsers({ username: search, email: search, page, perPage }),
+    getPricesByPlan([STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.COMMUNITY]).catch(() => []),
+  ]);
+
+  const individualPriceIds = individualPrices.map((price) => price.id);
+
+  return {
+    users,
+    totalPages,
+    individualPriceIds,
+    page,
+    perPage,
+  };
+}
+
+export default function AdminManageUsersPage({ loaderData }: Route.ComponentProps) {
+  const { users, totalPages, individualPriceIds, page, perPage } = loaderData;
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage users</Trans>
+      </h2>
+
+      <AdminDashboardUsersTable
+        users={users}
+        individualPriceIds={individualPriceIds}
+        totalPages={totalPages}
+        page={page}
+        perPage={perPage}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents+/$id._index.tsx

@@ -0,0 +1,273 @@
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { DocumentStatus, TeamMemberRole } from '@prisma/client';
+import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { useSession } from '@documenso/lib/client-only/providers/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 { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
+import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
+import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
+import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
+import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
+import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/$id._index';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getLoaderSession();
+
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    throw redirect(documentRootPath);
+  }
+
+  const document = await getDocumentById({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (document?.teamId && !team?.url) {
+    throw redirect(documentRootPath);
+  }
+
+  const documentVisibility = document?.visibility;
+  const currentTeamMemberRole = team?.currentTeamMember?.role;
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
+  let canAccessDocument = true;
+
+  if (team && !isRecipient && document?.userId !== user.id) {
+    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
+      .otherwise(() => false);
+  }
+
+  if (!document || !document.documentData || (team && !canAccessDocument)) {
+    throw redirect(documentRootPath);
+  }
+
+  if (team && !canAccessDocument) {
+    throw redirect(documentRootPath);
+  }
+
+  const { documentMeta } = document;
+
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
+
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
+
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
+
+  //   documentMeta.password = securePassword;
+  // }
+
+  // Todo: Get full document instead???
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+  ]);
+
+  const documentWithRecipients = {
+    ...document,
+    recipients,
+  };
+
+  return superLoaderJson({
+    document: documentWithRecipients,
+    documentRootPath,
+    fields,
+  });
+}
+
+export default function DocumentPage() {
+  const loaderData = useSuperLoaderData<typeof loader>();
+
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const { document, documentRootPath, fields } = loaderData;
+
+  const { recipients, documentData, documentMeta } = document;
+
+  // This was a feature flag. Leave to false since it's not ready.
+  const isDocumentHistoryEnabled = false;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      {document.status === DocumentStatus.PENDING && (
+        <DocumentRecipientLinkCopyDialog recipients={recipients} />
+      )}
+
+      <Link to={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Documents</Trans>
+      </Link>
+
+      <div className="flex flex-row justify-between truncate">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              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}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
+                  <span>
+                    <Trans>{recipients.length} Recipient(s)</Trans>
+                  </span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+
+            {document.deletedAt && (
+              <Badge variant="destructive">
+                <Trans>Document deleted</Trans>
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {isDocumentHistoryEnabled && (
+          <div className="self-end">
+            <DocumentHistorySheet documentId={document.id} userId={user.id}>
+              <Button variant="outline">
+                <Clock9 className="mr-1.5 h-4 w-4" />
+                <Trans>Document history</Trans>
+              </Button>
+            </DocumentHistorySheet>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer document={document} key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
+
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
+        )}
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  {_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
+                </h3>
+
+                <DocumentPageViewDropdown document={document} />
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm">
+                {match(document.status)
+                  .with(DocumentStatus.COMPLETED, () => (
+                    <Trans>This document has been signed by all recipients</Trans>
+                  ))
+                  .with(DocumentStatus.DRAFT, () => (
+                    <Trans>This document is currently a draft and has not been sent</Trans>
+                  ))
+                  .with(DocumentStatus.PENDING, () => {
+                    const pendingRecipients = recipients.filter(
+                      (recipient) => recipient.signingStatus === 'NOT_SIGNED',
+                    );
+
+                    return (
+                      <Plural
+                        value={pendingRecipients.length}
+                        one="Waiting on 1 recipient"
+                        other="Waiting on # recipients"
+                      />
+                    );
+                  })
+                  .exhaustive()}
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <DocumentPageViewButton document={document} />
+              </div>
+            </section>
+
+            {/* Document information section. */}
+            <DocumentPageViewInformation document={document} userId={user.id} />
+
+            {/* Recipients section. */}
+            <DocumentPageViewRecipients document={document} documentRootPath={documentRootPath} />
+
+            {/* Recent activity section. */}
+            <DocumentPageViewRecentActivity documentId={document.id} userId={user.id} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents+/$id.edit.tsx

@@ -0,0 +1,148 @@
+import { Plural, Trans } from '@lingui/react/macro';
+import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
+import { ChevronLeft, Users2 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+
+import { DocumentEditForm } from '~/components/general/document/document-edit-form';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/$id.edit';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getLoaderSession();
+
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    throw redirect(documentRootPath);
+  }
+
+  const document = await getDocumentWithDetailsById({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (document?.teamId && !team?.url) {
+    throw redirect(documentRootPath);
+  }
+
+  const documentVisibility = document?.visibility;
+  const currentTeamMemberRole = team?.currentTeamMember?.role;
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
+  let canAccessDocument = true;
+
+  if (!isRecipient && document?.userId !== user.id) {
+    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
+      .otherwise(() => false);
+  }
+
+  if (!document) {
+    throw redirect(documentRootPath);
+  }
+
+  if (team && !canAccessDocument) {
+    throw redirect(documentRootPath);
+  }
+
+  if (document.status === InternalDocumentStatus.COMPLETED) {
+    throw redirect(`${documentRootPath}/${documentId}`);
+  }
+
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
+
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
+
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
+
+  //   documentMeta.password = securePassword;
+  // }
+
+  const isDocumentEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  return superLoaderJson({
+    document,
+    documentRootPath,
+    isDocumentEnterprise,
+  });
+}
+
+export default function DocumentEditPage() {
+  const { document, documentRootPath, isDocumentEnterprise } = useSuperLoaderData<typeof loader>();
+
+  const { recipients } = document;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link to={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Documents</Trans>
+      </Link>
+
+      <h1
+        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] 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}
+              documentStatus={document.status}
+              position="bottom"
+            >
+              <span>
+                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+              </span>
+            </StackAvatarsWithTooltip>
+          </div>
+        )}
+      </div>
+
+      <DocumentEditForm
+        className="mt-6"
+        initialDocument={document}
+        documentRootPath={documentRootPath}
+        isDocumentEnterprise={isDocumentEnterprise}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents+/$id.logs.tsx

@@ -0,0 +1,181 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { ChevronLeft } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
+import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/general/document/document-status';
+import { DocumentLogsTable } from '~/components/tables/document-logs-table';
+
+import type { Route } from './+types/$id.logs';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { id } = params;
+
+  const { user, currentTeam: team } = getLoaderSession();
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    throw redirect(documentRootPath);
+  }
+
+  // Todo:  Get detailed?
+  const [document, recipients] = await Promise.all([
+    getDocumentById({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }).catch(() => null),
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+  ]);
+
+  if (!document || !document.documentData) {
+    throw redirect(documentRootPath);
+  }
+
+  return {
+    document,
+    documentRootPath,
+    recipients,
+  };
+}
+
+export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
+  const { document, documentRootPath, recipients } = loaderData;
+
+  const { _, i18n } = useLingui();
+
+  const documentInformation: { description: MessageDescriptor; value: string }[] = [
+    {
+      description: msg`Document title`,
+      value: document.title,
+    },
+    {
+      description: msg`Document ID`,
+      value: document.id.toString(),
+    },
+    {
+      description: msg`Document status`,
+      value: _(FRIENDLY_STATUS_MAP[document.status].label),
+    },
+    {
+      description: msg`Created by`,
+      value: document.user.name
+        ? `${document.user.name} (${document.user.email})`
+        : document.user.email,
+    },
+    {
+      description: msg`Date created`,
+      value: DateTime.fromJSDate(document.createdAt)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+    },
+    {
+      description: msg`Last updated`,
+      value: DateTime.fromJSDate(document.updatedAt)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+    },
+    {
+      description: msg`Time zone`,
+      value: document.documentMeta?.timezone ?? 'N/A',
+    },
+  ];
+
+  const formatRecipientText = (recipient: Recipient) => {
+    let text = recipient.email;
+
+    if (recipient.name) {
+      text = `${recipient.name} (${recipient.email})`;
+    }
+
+    return `[${recipient.role}] ${text}`;
+  };
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link
+        to={`${documentRootPath}/${document.id}`}
+        className="flex items-center text-[#7AC455] hover:opacity-80"
+      >
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Document</Trans>
+      </Link>
+
+      <div className="flex flex-col justify-between truncate sm:flex-row">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
+          </div>
+        </div>
+
+        <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+          <DocumentCertificateDownloadButton
+            className="mr-2"
+            documentId={document.id}
+            documentStatus={document.status}
+          />
+
+          <DocumentAuditLogDownloadButton documentId={document.id} />
+        </div>
+      </div>
+
+      <section className="mt-6">
+        <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
+          {documentInformation.map((info, i) => (
+            <div className="text-foreground text-sm" key={i}>
+              <h3 className="font-semibold">{_(info.description)}</h3>
+              <p className="text-muted-foreground">{info.value}</p>
+            </div>
+          ))}
+
+          <div className="text-foreground text-sm">
+            <h3 className="font-semibold">Recipients</h3>
+            <ul className="text-muted-foreground list-inside list-disc">
+              {recipients.map((recipient) => (
+                <li key={`recipient-${recipient.id}`}>
+                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Card>
+      </section>
+
+      <section className="mt-6">
+        <DocumentLogsTable documentId={document.id} />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents+/_index.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { trpc } from '@documenso/trpc/react';
+import {
+  type TFindDocumentsInternalResponse,
+  ZFindDocumentsInternalRequestSchema,
+} from '@documenso/trpc/server/document-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
+import { PeriodSelector } from '~/components/general/period-selector';
+import { DocumentsTable } from '~/components/tables/documents-table';
+import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
+import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Documents');
+}
+
+const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
+  status: true,
+  period: true,
+  page: true,
+  perPage: true,
+  query: true,
+}).extend({
+  senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
+});
+
+export default function DocumentsPage() {
+  const [searchParams] = useSearchParams();
+
+  const team = useOptionalCurrentTeam();
+
+  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  });
+
+  const findDocumentSearchParams = useMemo(
+    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery({
+    ...findDocumentSearchParams,
+  });
+
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team?.url)}?${params.toString()}`;
+  };
+
+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <DocumentUploadDropzone />
+
+      <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">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="text-4xl font-semibold">
+            <Trans>Documents</Trans>
+          </h1>
+        </div>
+
+        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+          <Tabs value={findDocumentSearchParams.status || 'ALL'} 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 to={getTabHref(value)} preventScrollReset>
+                    <DocumentStatus status={value} />
+
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                    )}
+                  </Link>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <PeriodSelector />
+          </div>
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <DocumentSearch initialValue={findDocumentSearchParams.query} />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <div>
+          {data && data.count === 0 ? (
+            <DocumentsTableEmptyState
+              status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+            />
+          ) : (
+            <DocumentsTable data={data} isLoading={isLoading} isLoadingError={isLoadingError} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents+/todo-loading.tsx

@@ -0,0 +1,38 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft, Loader } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+      <Link to="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Documents</Trans>
+      </Link>
+
+      <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
+        <Trans>Loading Document...</Trans>
+      </h1>
+
+      <div className="flex h-10 items-center">
+        <Skeleton className="my-6 h-4 w-24 rounded-2xl" />
+      </div>
+
+      <div className="mt-4 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
+        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
+          <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
+            <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+            <p className="text-muted-foreground mt-4">
+              <Trans>Loading document...</Trans>
+            </p>
+          </div>
+        </div>
+
+        <div className="bg-background border-border col-span-12 rounded-xl border-2 before:rounded-xl lg:col-span-6 xl:col-span-5" />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/_index.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'react-router';
+
+export function loader() {
+  throw redirect('/settings/profile');
+}

apps/remix/app/routes/_authenticated+/settings+/_layout.tsx

@@ -0,0 +1,29 @@
+import { Trans } from '@lingui/react/macro';
+import { Outlet } from 'react-router';
+
+import { SettingsDesktopNav } from '~/components/general/settings-nav-desktop';
+import { SettingsMobileNav } from '~/components/general/settings-nav-mobile';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Settings');
+}
+
+export default function SettingsLayout() {
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">
+        <Trans>Settings</Trans>
+      </h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <SettingsDesktopNav className="hidden md:col-span-3 md:flex" />
+        <SettingsMobileNav className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -0,0 +1,32 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { AccountDeleteDialog } from '~/components/dialogs/account-delete-dialog';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { ProfileForm } from '~/components/forms/profile';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Profile');
+}
+
+export default function SettingsProfile() {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Profile`)}
+        subtitle={_(msg`Here you can edit your personal details.`)}
+      />
+
+      <AvatarImageForm className="mb-8 max-w-xl" />
+      <ProfileForm className="mb-8 max-w-xl" />
+
+      <hr className="my-4 max-w-xl" />
+
+      <AccountDeleteDialog className="max-w-xl" />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/public-profile+/index.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TemplateDirectLink } from '@prisma/client';
+import { TemplateType } from '@prisma/client';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
+import { trpc } from '@documenso/trpc/react';
+import type { FindTemplateRow } from '@documenso/trpc/server/template-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ManagePublicTemplateDialog } from '~/components/dialogs/public-profile-template-manage-dialog';
+import type { TPublicProfileFormSchema } from '~/components/forms/public-profile-form';
+import { PublicProfileForm } from '~/components/forms/public-profile-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { SettingsPublicProfileTemplatesTable } from '../../../../components/tables/settings-public-profile-templates-table';
+import type { Route } from './+types/index';
+
+type DirectTemplate = FindTemplateRow & {
+  directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+};
+
+const userProfileText = {
+  settingsTitle: msg`Public Profile`,
+  settingsSubtitle: msg`You can choose to enable or disable your profile for public view.`,
+  templatesTitle: msg`My templates`,
+  templatesSubtitle: msg`Show templates in your public profile for your audience to sign and get started quickly`,
+};
+
+const teamProfileText = {
+  settingsTitle: msg`Team Public Profile`,
+  settingsSubtitle: msg`You can choose to enable or disable your team profile for public view.`,
+  templatesTitle: msg`Team templates`,
+  templatesSubtitle: msg`Show templates in your team public profile for your audience to sign and get started quickly`,
+};
+
+export async function loader() {
+  const { user } = getLoaderSession();
+
+  const { profile } = await getUserPublicProfile({
+    userId: user.id,
+  });
+
+  return { profile };
+}
+
+export default function PublicProfilePage({ loaderData }: Route.ComponentProps) {
+  const { profile } = loaderData;
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { user } = useSession();
+  const team = useOptionalCurrentTeam();
+
+  const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  const { data } = trpc.template.findTemplates.useQuery({
+    perPage: 100,
+  });
+
+  const { mutateAsync: updateUserProfile, isPending: isUpdatingUserProfile } =
+    trpc.profile.updatePublicProfile.useMutation();
+
+  const { mutateAsync: updateTeamProfile, isPending: isUpdatingTeamProfile } =
+    trpc.team.updateTeamPublicProfile.useMutation();
+
+  const isUpdating = isUpdatingUserProfile || isUpdatingTeamProfile;
+  const profileText = team ? teamProfileText : userProfileText;
+
+  const enabledPrivateDirectTemplates = useMemo(
+    () =>
+      (data?.data ?? []).filter(
+        (template): template is DirectTemplate =>
+          template.directLink?.enabled === true && template.type !== TemplateType.PUBLIC,
+      ),
+    [data],
+  );
+
+  const onProfileUpdate = async (data: TPublicProfileFormSchema) => {
+    if (team) {
+      await updateTeamProfile({
+        teamId: team.id,
+        ...data,
+      });
+    } else {
+      await updateUserProfile(data);
+    }
+
+    if (data.enabled === undefined && !isPublicProfileVisible) {
+      setIsTooltipOpen(true);
+    }
+  };
+
+  const togglePublicProfileVisibility = async (isVisible: boolean) => {
+    setIsTooltipOpen(false);
+
+    if (isUpdating) {
+      return;
+    }
+
+    if (isVisible && !user.url) {
+      toast({
+        title: _(msg`You must set a profile URL before enabling your public profile.`),
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    setIsPublicProfileVisible(isVisible);
+
+    try {
+      await onProfileUpdate({
+        enabled: isVisible,
+      });
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to set your public profile to public. Please try again.`),
+        variant: 'destructive',
+      });
+
+      setIsPublicProfileVisible(!isVisible);
+    }
+  };
+
+  useEffect(() => {
+    setIsPublicProfileVisible(profile.enabled);
+  }, [profile.enabled]);
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={_(profileText.settingsTitle)}
+        subtitle={_(profileText.settingsSubtitle)}
+      >
+        <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'text-muted-foreground/50 flex flex-row items-center justify-center space-x-2 text-xs',
+                {
+                  '[&>*:first-child]:text-muted-foreground': !isPublicProfileVisible,
+                  '[&>*:last-child]:text-muted-foreground': isPublicProfileVisible,
+                },
+              )}
+            >
+              <span>
+                <Trans>Hide</Trans>
+              </span>
+              <Switch
+                disabled={isUpdating}
+                checked={isPublicProfileVisible}
+                onCheckedChange={togglePublicProfileVisibility}
+              />
+              <span>
+                <Trans>Show</Trans>
+              </span>
+            </div>
+          </TooltipTrigger>
+
+          <TooltipContent className="text-muted-foreground max-w-[40ch] space-y-2 py-2">
+            {isPublicProfileVisible ? (
+              <>
+                <p>
+                  <Trans>
+                    Profile is currently <strong>visible</strong>.
+                  </Trans>
+                </p>
+
+                <p>
+                  <Trans>Toggle the switch to hide your profile from the public.</Trans>
+                </p>
+              </>
+            ) : (
+              <>
+                <p>
+                  <Trans>
+                    Profile is currently <strong>hidden</strong>.
+                  </Trans>
+                </p>
+
+                <p>
+                  <Trans>Toggle the switch to show your profile to the public.</Trans>
+                </p>
+              </>
+            )}
+          </TooltipContent>
+        </Tooltip>
+      </SettingsHeader>
+
+      <PublicProfileForm
+        profileUrl={team ? team.url : user.url}
+        teamUrl={team?.url}
+        profile={profile}
+        onProfileUpdate={onProfileUpdate}
+      />
+
+      <div className="mt-4">
+        <SettingsHeader
+          title={_(profileText.templatesTitle)}
+          subtitle={_(profileText.templatesSubtitle)}
+          hideDivider={true}
+          className="mt-8 [&>*>h3]:text-base"
+        >
+          <ManagePublicTemplateDialog
+            directTemplates={enabledPrivateDirectTemplates}
+            trigger={
+              <Button variant="outline">
+                <Trans>Link template</Trans>
+              </Button>
+            }
+          />
+        </SettingsHeader>
+
+        <div className="mt-6">
+          <SettingsPublicProfileTemplatesTable />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/security+/activity+/index.tsx

@@ -0,0 +1,28 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+import { SettingsSecurityActivityTable } from '~/components/tables/settings-security-activity-table';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Security activity');
+}
+
+export default function SettingsSecurityActivity() {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Security activity`)}
+        subtitle={_(msg`View all security activity related to your account.`)}
+        hideDivider={true}
+      />
+
+      <div className="mt-4">
+        <SettingsSecurityActivityTable />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/security+/index.tsx

@@ -0,0 +1,164 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { prisma } from '@documenso/prisma';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-authenticator-app-dialog';
+import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
+import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
+import { PasswordForm } from '~/components/forms/password';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types';
+
+export function meta() {
+  return appMetaTags('Security');
+}
+
+export async function loader() {
+  const { user } = getLoaderSession();
+
+  const accounts = await prisma.account.findMany({
+    where: {
+      userId: user.id,
+    },
+    select: {
+      provider: true,
+    },
+  });
+
+  const providers = accounts.map((account) => account.provider);
+
+  return {
+    providers,
+  };
+}
+
+export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
+  const { providers } = loaderData;
+
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const hasEmailPasswordAccount = providers.includes('DOCUMENSO');
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Security`)}
+        subtitle={_(msg`Here you can manage your password and security settings.`)}
+      />
+      {hasEmailPasswordAccount && (
+        <>
+          <PasswordForm user={user} />
+
+          <hr className="border-border/50 mt-6" />
+        </>
+      )}
+
+      <Alert
+        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+        variant="neutral"
+      >
+        <div className="mb-4 sm:mb-0">
+          <AlertTitle>
+            <Trans>Two factor authentication</Trans>
+          </AlertTitle>
+
+          <AlertDescription className="mr-4">
+            {hasEmailPasswordAccount ? (
+              <Trans>
+                Add an authenticator to serve as a secondary authentication method when signing in,
+                or when signing documents.
+              </Trans>
+            ) : (
+              <Trans>
+                Add an authenticator to serve as a secondary authentication method for signing
+                documents.
+              </Trans>
+            )}
+          </AlertDescription>
+        </div>
+
+        {user.twoFactorEnabled ? (
+          <DisableAuthenticatorAppDialog />
+        ) : (
+          <EnableAuthenticatorAppDialog />
+        )}
+      </Alert>
+
+      {user.twoFactorEnabled && (
+        <Alert
+          className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+          variant="neutral"
+        >
+          <div className="mb-4 sm:mb-0">
+            <AlertTitle>
+              <Trans>Recovery codes</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-4">
+              <Trans>
+                Two factor authentication recovery codes are used to access your account in the
+                event that you lose access to your authenticator app.
+              </Trans>
+            </AlertDescription>
+          </div>
+
+          <ViewRecoveryCodesDialog />
+        </Alert>
+      )}
+
+      <Alert
+        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+        variant="neutral"
+      >
+        <div className="mb-4 sm:mb-0">
+          <AlertTitle>
+            <Trans>Passkeys</Trans>
+          </AlertTitle>
+
+          <AlertDescription className="mr-4">
+            <Trans>
+              Allows authenticating using biometrics, password managers, hardware keys, etc.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <Button asChild variant="outline" className="bg-background">
+          <Link to="/settings/security/passkeys">
+            <Trans>Manage passkeys</Trans>
+          </Link>
+        </Button>
+      </Alert>
+
+      <Alert
+        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+        variant="neutral"
+      >
+        <div className="mb-4 mr-4 sm:mb-0">
+          <AlertTitle>
+            <Trans>Recent activity</Trans>
+          </AlertTitle>
+
+          <AlertDescription className="mr-2">
+            <Trans>View all recent security activity related to your account.</Trans>
+          </AlertDescription>
+        </div>
+
+        <Button asChild variant="outline" className="bg-background">
+          <Link to="/settings/security/activity">
+            <Trans>View activity</Trans>
+          </Link>
+        </Button>
+      </Alert>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/security+/passkeys+/index.tsx

@@ -0,0 +1,31 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { PasskeyCreateDialog } from '~/components/dialogs/passkey-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { SettingsSecurityPasskeyTable } from '~/components/tables/settings-security-passkey-table';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Manage passkeys');
+}
+
+export default function SettingsPasskeys() {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Passkeys`)}
+        subtitle={_(msg`Manage your passkeys.`)}
+        hideDivider={true}
+      >
+        <PasskeyCreateDialog />
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <SettingsSecurityPasskeyTable />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/teams+/index.tsx

@@ -0,0 +1,44 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { AnimatePresence } from 'framer-motion';
+
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+
+import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { UserSettingsTeamsPageDataTable } from '~/components/tables/user-settings-teams-page-table';
+
+import { TeamEmailUsage } from './team-email-usage';
+import { TeamInvitations } from './team-invitations';
+
+export default function TeamsSettingsPage() {
+  const { _ } = useLingui();
+
+  const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Teams`)}
+        subtitle={_(msg`Manage all teams you are currently associated with.`)}
+      >
+        <TeamCreateDialog />
+      </SettingsHeader>
+
+      <UserSettingsTeamsPageDataTable />
+
+      <div className="mt-8 space-y-8">
+        <AnimatePresence>
+          {teamEmail && (
+            <AnimateGenericFadeInOut>
+              <TeamEmailUsage teamEmail={teamEmail} />
+            </AnimateGenericFadeInOut>
+          )}
+        </AnimatePresence>
+
+        <TeamInvitations />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/teams+/team-email-usage.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamEmail } from '@prisma/client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+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 const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`You have successfully revoked access.`),
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(
+            msg`We encountered an unknown error while attempting to revoke access. Please try again or contact support.`,
+          ),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Alert variant="neutral" className="flex flex-row items-center justify-between p-6">
+      <div>
+        <AlertTitle className="mb-0">
+          <Trans>Team Email</Trans>
+        </AlertTitle>
+        <AlertDescription>
+          <p>
+            <Trans>
+              Your email is currently being used by team{' '}
+              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
+              ).
+            </Trans>
+          </p>
+
+          <p className="mt-1">
+            <Trans>They have permission on your behalf to:</Trans>
+          </p>
+
+          <ul className="mt-0.5 list-inside list-disc">
+            <li>
+              <Trans>Display your name and email in documents</Trans>
+            </li>
+            <li>
+              <Trans>View all documents sent to your account</Trans>
+            </li>
+          </ul>
+        </AlertDescription>
+      </div>
+
+      <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
+        <DialogTrigger asChild>
+          <Button variant="destructive">
+            <Trans>Revoke access</Trans>
+          </Button>
+        </DialogTrigger>
+
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Are you sure?</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>
+                You are about to revoke access for team{' '}
+                <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url})
+                to use your email.
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <fieldset disabled={isDeletingTeamEmail}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeletingTeamEmail}
+                onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
+              >
+                <Trans>Revoke</Trans>
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      </Dialog>
+    </Alert>
+  );
+};

apps/remix/app/routes/_authenticated+/settings+/teams+/team-invitations.tsx

@@ -0,0 +1,187 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { AnimatePresence } from 'framer-motion';
+import { BellIcon } from 'lucide-react';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const TeamInvitations = () => {
+  const { data, isLoading } = trpc.team.getTeamInvitations.useQuery();
+
+  return (
+    <AnimatePresence>
+      {data && data.length > 0 && !isLoading && (
+        <AnimateGenericFadeInOut>
+          <Alert variant="secondary">
+            <div className="flex h-full flex-row items-center p-2">
+              <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
+
+              <AlertDescription className="mr-2">
+                <Plural
+                  value={data.length}
+                  one={
+                    <span>
+                      You have <strong>1</strong> pending team invitation
+                    </span>
+                  }
+                  other={
+                    <span>
+                      You have <strong>#</strong> pending team invitations
+                    </span>
+                  }
+                />
+              </AlertDescription>
+
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
+                    <Trans>View invites</Trans>
+                  </button>
+                </DialogTrigger>
+
+                <DialogContent position="center">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Pending invitations</Trans>
+                    </DialogTitle>
+
+                    <DialogDescription className="mt-4">
+                      <Plural
+                        value={data.length}
+                        one={
+                          <span>
+                            You have <strong>1</strong> pending team invitation
+                          </span>
+                        }
+                        other={
+                          <span>
+                            You have <strong>#</strong> pending team invitations
+                          </span>
+                        }
+                      />
+                    </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
+                          avatarSrc={formatAvatarUrl(invitation.team.avatarImageId)}
+                          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 space-x-2">
+                              <DeclineTeamInvitationButton teamId={invitation.team.id} />
+                              <AcceptTeamInvitationButton teamId={invitation.team.id} />
+                            </div>
+                          }
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </Alert>
+        </AnimateGenericFadeInOut>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const {
+    mutateAsync: acceptTeamInvitation,
+    isPending,
+    isSuccess,
+  } = trpc.team.acceptTeamInvitation.useMutation({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Accepted team invitation`),
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to join this team at this time.`),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={async () => acceptTeamInvitation({ teamId })}
+      loading={isPending}
+      disabled={isPending || isSuccess}
+    >
+      <Trans>Accept</Trans>
+    </Button>
+  );
+};
+
+const DeclineTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const {
+    mutateAsync: declineTeamInvitation,
+    isPending,
+    isSuccess,
+  } = trpc.team.declineTeamInvitation.useMutation({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Declined team invitation`),
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to decline this team invitation at this time.`),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={async () => declineTeamInvitation({ teamId })}
+      loading={isPending}
+      disabled={isPending || isSuccess}
+      variant="ghost"
+    >
+      <Trans>Decline</Trans>
+    </Button>
+  );
+};

apps/remix/app/routes/_authenticated+/settings+/tokens+/index.tsx

@@ -0,0 +1,91 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
+
+export default function ApiTokensPage() {
+  const { i18n } = useLingui();
+
+  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
+          On this page, you can create new API tokens and manage the existing ones. <br />
+          Also see our{' '}
+          <a
+            className="text-primary underline"
+            href={'https://docs.documenso.com/developers/public-api'}
+            target="_blank"
+          >
+            Documentation
+          </a>
+          .
+        </Trans>
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" tokens={tokens} />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
+
+      {tokens && tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>Your tokens will be shown here once you create them.</Trans>
+          </p>
+        </div>
+      )}
+
+      {tokens && tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Token doesn't have an expiration date</Trans>
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <TokenDeleteDialog token={token}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </TokenDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/webhooks+/$id.tsx

@@ -0,0 +1,212 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useParams, useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZEditWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
+
+const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export default function WebhookPage() {
+  const params = useParams();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const webhookId = params.id || '';
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: webhookId,
+    },
+    { enabled: !!webhookId },
+  );
+
+  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
+
+  const form = useForm<TEditWebhookFormSchema>({
+    resolver: zodResolver(ZEditWebhookFormSchema),
+    values: {
+      webhookUrl: webhook?.webhookUrl ?? '',
+      eventTriggers: webhook?.eventTriggers ?? [],
+      secret: webhook?.secret ?? '',
+      enabled: webhook?.enabled ?? true,
+    },
+  });
+
+  const onSubmit = async (data: TEditWebhookFormSchema) => {
+    try {
+      await updateWebhook({
+        id: webhookId,
+        ...data,
+      });
+
+      toast({
+        title: _(msg`Webhook updated`),
+        description: _(msg`The webhook has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`Failed to update webhook`),
+        description: _(
+          msg`We encountered an error while updating the webhook. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Edit webhook`)}
+        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
+      />
+
+      {isLoading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset
+            className="flex h-full max-w-xl flex-col gap-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <div className="flex flex-col-reverse gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel required>
+                      <Trans>Webhook URL</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>The URL for Documenso to send webhook events to.</Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Enabled</Trans>
+                    </FormLabel>
+
+                    <div>
+                      <FormControl>
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="eventTriggers"
+              render={({ field: { onChange, value } }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <FormLabel required>
+                    <Trans>Triggers</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <WebhookMultiSelectCombobox
+                      listValues={value}
+                      onChange={(values: string[]) => {
+                        onChange(values);
+                      }}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans> The events that will trigger a webhook to be sent to your URL.</Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secret"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Secret</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>
+                      A secret that will be sent to your URL so you can verify that the request has
+                      been sent by Documenso.
+                    </Trans>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                <Trans>Update webhook</Trans>
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/webhooks+/index.tsx

@@ -0,0 +1,106 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link } from 'react-router';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
+import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+export default function WebhookPage() {
+  const { _, i18n } = useLingui();
+
+  const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Webhooks`)}
+        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
+      >
+        <WebhookCreateDialog />
+      </SettingsHeader>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+      {webhooks && webhooks.length === 0 && (
+        // TODO: Perhaps add some illustrations here to make the page more engaging
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>
+              You have no webhooks yet. Your webhooks will be shown here once you create them.
+            </Trans>
+          </p>
+        </div>
+      )}
+      {webhooks && webhooks.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {webhooks?.map((webhook) => (
+            <div
+              key={webhook.id}
+              className={cn(
+                'border-border rounded-lg border p-4',
+                !webhook.enabled && 'bg-muted/40',
+              )}
+            >
+              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <div className="truncate font-mono text-xs">{webhook.id}</div>
+
+                  <div className="mt-1.5 flex items-center gap-4">
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
+                      {webhook.webhookUrl}
+                    </h5>
+
+                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
+                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+                    </Badge>
+                  </div>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
+                      Listening to{' '}
+                      {webhook.eventTriggers
+                        .map((trigger) => toFriendlyWebhookEventName(trigger))
+                        .join(', ')}
+                    </Trans>
+                  </p>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(webhook.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                </div>
+
+                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
+                  <Button asChild variant="outline">
+                    <Link to={`/settings/webhooks/${webhook.id}`}>
+                      <Trans>Edit</Trans>
+                    </Link>
+                  </Button>
+                  <WebhookDeleteDialog webhook={webhook}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </WebhookDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_index.tsx

@@ -0,0 +1,14 @@
+import { redirect } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+
+export function loader() {
+  const { currentTeam } = getLoaderSession();
+
+  if (!currentTeam) {
+    throw redirect('/settings/teams');
+  }
+
+  throw redirect(formatDocumentsPath(currentTeam.url));
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx

@@ -0,0 +1,147 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, Outlet, isRouteErrorResponse, redirect, useNavigate } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { AppErrorCode } from '@documenso/lib/errors/app-error';
+import { TrpcProvider } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TeamProvider } from '~/providers/team';
+
+import type { Route } from './+types/_layout';
+
+export const loader = () => {
+  const { currentTeam } = getLoaderSession();
+
+  if (!currentTeam) {
+    throw redirect('/settings/teams');
+  }
+
+  const trpcHeaders = {
+    'x-team-Id': currentTeam.id.toString(),
+  };
+
+  return {
+    currentTeam,
+    trpcHeaders,
+  };
+};
+
+export default function Layout({ loaderData }: Route.ComponentProps) {
+  const { currentTeam, trpcHeaders } = loaderData;
+
+  return (
+    <TeamProvider team={currentTeam}>
+      <TrpcProvider headers={trpcHeaders}>
+        <main className="mt-8 pb-8 md:mt-12 md:pb-12">
+          <Outlet />
+        </main>
+      </TrpcProvider>
+    </TeamProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const { _ } = useLingui();
+
+  const navigate = useNavigate();
+
+  let errorMessage = msg`Unknown error`;
+  let errorDetails: MessageDescriptor | null = null;
+
+  if (error instanceof Error && error.message === AppErrorCode.UNAUTHORIZED) {
+    errorMessage = msg`Unauthorized`;
+    errorDetails = msg`You are not authorized to view this page.`;
+  }
+
+  if (isRouteErrorResponse(error)) {
+    return match(error.status)
+      .with(404, () => (
+        <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+          <div>
+            <p className="text-muted-foreground font-semibold">
+              <Trans>404 Team not found</Trans>
+            </p>
+
+            <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+              <Trans>Oops! Something went wrong.</Trans>
+            </h1>
+
+            <p className="text-muted-foreground mt-4 text-sm">
+              <Trans>
+                The team you are looking for may have been removed, renamed or may have never
+                existed.
+              </Trans>
+            </p>
+
+            <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+              <Button asChild className="w-32">
+                <Link to="/settings/teams">
+                  <ChevronLeft className="mr-2 h-4 w-4" />
+                  <Trans>Go Back</Trans>
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      ))
+      .with(500, () => (
+        <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">
+              <Trans>Oops! Something went wrong.</Trans>
+            </h1>
+
+            <p className="text-muted-foreground mt-4 text-sm">
+              {errorDetails ? _(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 navigate(-1);
+                }}
+              >
+                <ChevronLeft className="mr-2 h-4 w-4" />
+                <Trans>Go Back</Trans>
+              </Button>
+
+              <Button asChild>
+                <Link to="/settings/teams">
+                  <Trans>View teams</Trans>
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      ))
+      .otherwise(() => (
+        <>
+          <h1>
+            {error.status} {error.statusText}
+          </h1>
+          <p>{error.data}</p>
+        </>
+      ));
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
+  }
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -0,0 +1,5 @@
+import DocumentPage, { loader } from '~/routes/_authenticated+/documents+/$id._index';
+
+export { loader };
+
+export default DocumentPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -0,0 +1,5 @@
+import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents+/$id.edit';
+
+export { loader };
+
+export default DocumentEditPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -0,0 +1,5 @@
+import DocumentLogsPage, { loader } from '~/routes/_authenticated+/documents+/$id.logs';
+
+export { loader };
+
+export default DocumentLogsPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -0,0 +1,5 @@
+import DocumentsPage, { meta } from '~/routes/_authenticated+/documents+/_index';
+
+export { meta };
+
+export default DocumentsPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_index.tsx

@@ -0,0 +1,197 @@
+import { Trans } from '@lingui/react/macro';
+import { CheckCircle2, Clock } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+
+import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
+import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
+import { TeamTransferDialog } from '~/components/dialogs/team-transfer-dialog';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { TeamUpdateForm } from '~/components/forms/team-update-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
+import { TeamTransferStatus } from '~/components/general/teams/team-transfer-status';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsPage() {
+  const { user } = useSession();
+
+  const team = useCurrentTeam();
+
+  const isTransferVerificationExpired =
+    !team.transferVerification || isTokenExpired(team.transferVerification.expiresAt);
+
+  return (
+    <div>
+      <SettingsHeader title="General settings" subtitle="Here you can edit your team's details." />
+
+      <TeamTransferStatus
+        className="mb-4"
+        currentUserTeamRole={team.currentTeamMember.role}
+        teamId={team.id}
+        transferVerification={team.transferVerification}
+      />
+
+      <AvatarImageForm className="mb-8" />
+
+      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+
+      <section className="mt-6 space-y-6">
+        {(team.teamEmail || team.emailVerification) && (
+          <Alert className="p-6" variant="neutral">
+            <AlertTitle>
+              <Trans>Team email</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-2">
+              <Trans>
+                You can view documents associated with this email and use this identity when sending
+                documents.
+              </Trans>
+            </AlertDescription>
+
+            <hr className="border-border/50 mt-2" />
+
+            <div className="flex flex-row items-center justify-between pt-4">
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarSrc={formatAvatarUrl(team.avatarImageId)}
+                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">
+                  {match({
+                    teamEmail: team.teamEmail,
+                    emailVerification: team.emailVerification,
+                  })
+                    .with({ teamEmail: P.not(null) }, () => (
+                      <>
+                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
+                        <Trans>Active</Trans>
+                      </>
+                    ))
+                    .with(
+                      {
+                        emailVerification: P.when(
+                          (emailVerification) =>
+                            emailVerification && emailVerification?.expiresAt < new Date(),
+                        ),
+                      },
+                      () => (
+                        <>
+                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
+                          <Trans>Expired</Trans>
+                        </>
+                      ),
+                    )
+                    .with({ emailVerification: P.not(null) }, () => (
+                      <>
+                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
+                        <Trans>Awaiting email confirmation</Trans>
+                      </>
+                    ))
+                    .otherwise(() => null)}
+                </div>
+
+                <TeamEmailDropdown team={team} />
+              </div>
+            </div>
+          </Alert>
+        )}
+
+        {!team.teamEmail && !team.emailVerification && (
+          <Alert
+            className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+            variant="neutral"
+          >
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>
+                <Trans>Team email</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <ul className="text-muted-foreground mt-0.5 list-inside list-disc text-sm">
+                  {/* Feature not available yet. */}
+                  {/* <li>Display this name and email when sending documents</li> */}
+                  {/* <li>View documents associated with this email</li> */}
+
+                  <span>
+                    <Trans>View documents associated with this email</Trans>
+                  </span>
+                </ul>
+              </AlertDescription>
+            </div>
+
+            <TeamEmailAddDialog teamId={team.id} />
+          </Alert>
+        )}
+
+        {team.ownerUserId === user.id && (
+          <>
+            {isTransferVerificationExpired && (
+              <Alert
+                className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+                variant="neutral"
+              >
+                <div className="mb-4 sm:mb-0">
+                  <AlertTitle>
+                    <Trans>Transfer team</Trans>
+                  </AlertTitle>
+
+                  <AlertDescription className="mr-2">
+                    <Trans>Transfer the ownership of the team to another team member.</Trans>
+                  </AlertDescription>
+                </div>
+
+                <TeamTransferDialog
+                  ownerUserId={team.ownerUserId}
+                  teamId={team.id}
+                  teamName={team.name}
+                />
+              </Alert>
+            )}
+
+            <Alert
+              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>
+                  <Trans>Delete team</Trans>
+                </AlertTitle>
+
+                <AlertDescription className="mr-2">
+                  <Trans>
+                    This team, and any associated data excluding billing invoices will be
+                    permanently deleted.
+                  </Trans>
+                </AlertDescription>
+              </div>
+
+              <TeamDeleteDialog teamId={team.id} teamName={team.name} />
+            </Alert>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_layout.tsx

@@ -0,0 +1,40 @@
+import { Trans } from '@lingui/react/macro';
+import { Outlet } from 'react-router';
+import { getLoaderTeamSession } from 'server/utils/get-loader-session';
+
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+
+import { TeamSettingsNavDesktop } from '~/components/general/teams/team-settings-nav-desktop';
+import { TeamSettingsNavMobile } from '~/components/general/teams/team-settings-nav-mobile';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Team Settings');
+}
+
+export function loader() {
+  const { currentTeam: team } = getLoaderTeamSession();
+
+  if (!team || !canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
+    throw new Response(null, { status: 401 }); // Unauthorized.
+  }
+}
+
+export default function TeamsSettingsLayout() {
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">
+        <Trans>Team Settings</Trans>
+      </h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <TeamSettingsNavDesktop className="hidden md:col-span-3 md:flex" />
+        <TeamSettingsNavMobile className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/billing.tsx

@@ -0,0 +1,102 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { DateTime } from 'luxon';
+import { getLoaderTeamSession } from 'server/utils/get-loader-session';
+import type Stripe from 'stripe';
+import { match } from 'ts-pattern';
+
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+import { TeamBillingPortalButton } from '~/components/general/teams/team-billing-portal-button';
+import { TeamSettingsBillingInvoicesTable } from '~/components/tables/team-settings-billing-invoices-table';
+
+import type { Route } from './+types/billing';
+
+export async function loader() {
+  const { currentTeam: team } = getLoaderTeamSession();
+
+  let teamSubscription: Stripe.Subscription | null = null;
+
+  if (team.subscription) {
+    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
+  }
+
+  return {
+    team,
+    teamSubscription,
+  };
+}
+
+export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentProps) {
+  const { _ } = useLingui();
+
+  const { team, teamSubscription } = loaderData;
+
+  const canManageBilling = canExecuteTeamAction('MANAGE_BILLING', team.currentTeamMember.role);
+
+  const formatTeamSubscriptionDetails = (subscription: Stripe.Subscription | null) => {
+    if (!subscription) {
+      return <Trans>No payment required</Trans>;
+    }
+
+    const numberOfSeats = subscription.items.data[0].quantity ?? 0;
+
+    const formattedDate = DateTime.fromSeconds(subscription.current_period_end).toFormat(
+      'LLL dd, yyyy',
+    );
+
+    const subscriptionInterval = match(subscription?.items.data[0].plan.interval)
+      .with('year', () => _(msg`Yearly`))
+      .with('month', () => _(msg`Monthly`))
+      .otherwise(() => _(msg`Unknown`));
+
+    return (
+      <span>
+        <Plural value={numberOfSeats} one="# member" other="# members" />
+        {' • '}
+        <span>{subscriptionInterval}</span>
+        {' • '}
+        <Trans>Renews: {formattedDate}</Trans>
+      </span>
+    );
+  };
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Billing`)}
+        subtitle={_(msg`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">
+              {formatTeamSubscriptionDetails(teamSubscription)}
+            </p>
+          </div>
+
+          {teamSubscription && (
+            <div
+              title={
+                canManageBilling
+                  ? _(msg`Manage team subscription.`)
+                  : _(msg`You must be an admin of this team to manage billing.`)
+              }
+            >
+              <TeamBillingPortalButton teamId={team.id} />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <section className="mt-6">
+        <TeamSettingsBillingInvoicesTable teamId={team.id} />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/members.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Link, useLocation, useSearchParams } from 'react-router';
+
+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 { TeamMemberInviteDialog } from '~/components/dialogs/team-member-invite-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { TeamSettingsMemberInvitesTable } from '~/components/tables/team-settings-member-invites-table';
+import { TeamSettingsMembersDataTable } from '~/components/tables/team-settings-members-table';
+
+export default function TeamsSettingsMembersPage() {
+  const { _ } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  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(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    // If nothing  to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Members`)}
+        subtitle={_(msg`Manage the members or invite new members.`)}
+      >
+        <TeamMemberInviteDialog />
+      </SettingsHeader>
+
+      <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={_(msg`Search`)}
+          />
+
+          <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+            <TabsList>
+              <TabsTrigger className="min-w-[60px]" value="members" asChild>
+                <Link to={pathname ?? '/'}>
+                  <Trans>Active</Trans>
+                </Link>
+              </TabsTrigger>
+
+              <TabsTrigger className="min-w-[60px]" value="invites" asChild>
+                <Link to={`${pathname}?tab=invites`}>
+                  <Trans>Pending</Trans>
+                </Link>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        {currentTab === 'invites' ? (
+          <TeamSettingsMemberInvitesTable key="invites" />
+        ) : (
+          <TeamSettingsMembersDataTable key="members" />
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/preferences.tsx

@@ -0,0 +1,36 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { TeamBrandingPreferencesForm } from '~/components/forms/team-branding-preferences-form';
+import { TeamDocumentPreferencesForm } from '~/components/forms/team-document-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsPage() {
+  const { _ } = useLingui();
+
+  const team = useCurrentTeam();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Team Preferences`)}
+        subtitle={_(msg`Here you can set preferences and defaults for your team.`)}
+      />
+
+      <section>
+        <TeamDocumentPreferencesForm team={team} settings={team.teamGlobalSettings} />
+      </section>
+
+      <SettingsHeader
+        title={_(msg`Branding Preferences`)}
+        subtitle={_(msg`Here you can set preferences and defaults for branding.`)}
+        className="mt-8"
+      />
+
+      <section>
+        <TeamBrandingPreferencesForm team={team} settings={team.teamGlobalSettings} />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/public-profile.tsx

@@ -0,0 +1,21 @@
+import { getLoaderTeamSession } from 'server/utils/get-loader-session';
+
+import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-public-profile';
+
+import PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile+/index';
+
+export async function loader() {
+  const { user, currentTeam: team } = getLoaderTeamSession();
+
+  const { profile } = await getTeamPublicProfile({
+    userId: user.id,
+    teamId: team.id,
+  });
+
+  return {
+    profile,
+  };
+}
+
+// Todo: Test that the profile shows up correctly for teams.
+export default PublicProfilePage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/tokens.tsx

@@ -0,0 +1,119 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DateTime } from 'luxon';
+import { getLoaderTeamSession } from 'server/utils/get-loader-session';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
+import { Button } from '@documenso/ui/primitives/button';
+
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
+
+import type { Route } from './+types/tokens';
+
+export async function loader() {
+  const { user, currentTeam: team } = getLoaderTeamSession();
+
+  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id }).catch(() => null);
+
+  return {
+    user,
+    team,
+    tokens,
+  };
+}
+
+export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
+  const { i18n } = useLingui();
+
+  const { team, tokens } = loaderData;
+
+  if (!tokens) {
+    return (
+      <div>
+        <h3 className="text-2xl font-semibold">
+          <Trans>API Tokens</Trans>
+        </h3>
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>Something went wrong.</Trans>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
+          On this page, you can create new API tokens and manage the existing ones. <br />
+          You can view our swagger docs{' '}
+          <a
+            className="text-primary underline"
+            href={`${NEXT_PUBLIC_WEBAPP_URL()}/api/v1/openapi`}
+            target="_blank"
+          >
+            here
+          </a>
+        </Trans>
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" teamId={team.id} tokens={tokens} />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
+
+      {tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>Your tokens will be shown here once you create them.</Trans>
+          </p>
+        </div>
+      )}
+
+      {tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Token doesn't have an expiration date</Trans>
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <TokenDeleteDialog token={token} teamId={team.id}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </TokenDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/webhooks.$id.tsx

@@ -0,0 +1,211 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZEditWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
+import { useCurrentTeam } from '~/providers/team';
+
+import type { Route } from './+types/webhooks.$id';
+
+const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export default function WebhookPage({ params }: Route.ComponentProps) {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const team = useCurrentTeam();
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: params.id,
+      teamId: team.id,
+    },
+    { enabled: !!params.id && !!team.id },
+  );
+
+  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
+
+  const form = useForm<TEditWebhookFormSchema>({
+    resolver: zodResolver(ZEditWebhookFormSchema),
+    values: {
+      webhookUrl: webhook?.webhookUrl ?? '',
+      eventTriggers: webhook?.eventTriggers ?? [],
+      secret: webhook?.secret ?? '',
+      enabled: webhook?.enabled ?? true,
+    },
+  });
+
+  const onSubmit = async (data: TEditWebhookFormSchema) => {
+    try {
+      await updateWebhook({
+        id: params.id,
+        teamId: team.id,
+        ...data,
+      });
+
+      toast({
+        title: _(msg`Webhook updated`),
+        description: _(msg`The webhook has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`Failed to update webhook`),
+        description: _(
+          msg`We encountered an error while updating the webhook. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Edit webhook`)}
+        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
+      />
+
+      {isLoading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset
+            className="flex h-full max-w-xl flex-col gap-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <div className="flex flex-col-reverse gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>The URL for Documenso to send webhook events to.</Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Enabled</Trans>
+                    </FormLabel>
+
+                    <div>
+                      <FormControl>
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="eventTriggers"
+              render={({ field: { onChange, value } }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <FormLabel required>
+                    <Trans>Triggers</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <WebhookMultiSelectCombobox
+                      listValues={value}
+                      onChange={(values: string[]) => {
+                        onChange(values);
+                      }}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>The events that will trigger a webhook to be sent to your URL.</Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secret"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Secret</FormLabel>
+                  <FormControl>
+                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>
+                      A secret that will be sent to your URL so you can verify that the request has
+                      been sent by Documenso.
+                    </Trans>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                <Trans>Update webhook</Trans>
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/webhooks.tsx

@@ -0,0 +1,111 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link } from 'react-router';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
+import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function WebhookPage() {
+  const { _, i18n } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const { data: webhooks, isLoading } = trpc.webhook.getTeamWebhooks.useQuery({
+    teamId: team.id,
+  });
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Webhooks`)}
+        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
+      >
+        <WebhookCreateDialog />
+      </SettingsHeader>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+      {webhooks && webhooks.length === 0 && (
+        // TODO: Perhaps add some illustrations here to make the page more engaging
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>
+              You have no webhooks yet. Your webhooks will be shown here once you create them.
+            </Trans>
+          </p>
+        </div>
+      )}
+      {webhooks && webhooks.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {webhooks?.map((webhook) => (
+            <div
+              key={webhook.id}
+              className={cn(
+                'border-border rounded-lg border p-4',
+                !webhook.enabled && 'bg-muted/40',
+              )}
+            >
+              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <div className="truncate font-mono text-xs">{webhook.id}</div>
+
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
+                      {webhook.webhookUrl}
+                    </h5>
+
+                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
+                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+                    </Badge>
+                  </div>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
+                      Listening to{' '}
+                      {webhook.eventTriggers
+                        .map((trigger) => toFriendlyWebhookEventName(trigger))
+                        .join(', ')}
+                    </Trans>
+                  </p>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(webhook.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                </div>
+
+                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
+                  <Button asChild variant="outline">
+                    <Link to={`/t/${team.url}/settings/webhooks/${webhook.id}`}>
+                      <Trans>Edit</Trans>
+                    </Link>
+                  </Button>
+                  <WebhookDeleteDialog webhook={webhook}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </WebhookDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -0,0 +1,5 @@
+import TemplatePage, { loader } from '~/routes/_authenticated+/templates+/$id._index';
+
+export { loader };
+
+export default TemplatePage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.edit.tsx

@@ -0,0 +1,5 @@
+import TemplateEditPage, { loader } from '~/routes/_authenticated+/templates+/$id.edit';
+
+export { loader };
+
+export default TemplateEditPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -0,0 +1,5 @@
+import TemplatesPage, { meta } from '~/routes/_authenticated+/templates+/_index';
+
+export { meta };
+
+export default TemplatesPage;

apps/remix/app/routes/_authenticated+/templates+/$id._index.tsx

@@ -0,0 +1,215 @@
+import { Trans } from '@lingui/react/macro';
+import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
+import { ChevronLeft, LucideEdit } from 'lucide-react';
+import { Link, redirect, useNavigate } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
+import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
+import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
+import { TemplatePageViewRecentActivity } from '~/components/general/template/template-page-view-recent-activity';
+import { TemplatePageViewRecipients } from '~/components/general/template/template-page-view-recipients';
+import { TemplateType } from '~/components/general/template/template-type';
+import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/$id._index';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getLoaderSession();
+
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    throw redirect(templateRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
+    throw redirect(templateRootPath);
+  }
+
+  return superLoaderJson({
+    user,
+    team,
+    template,
+    templateRootPath,
+    documentRootPath,
+  });
+}
+
+export default function TemplatePage() {
+  const { user, team, template, templateRootPath, documentRootPath } =
+    useSuperLoaderData<typeof loader>();
+
+  const { templateDocumentData, fields, recipients, templateMeta } = template;
+
+  const navigate = useNavigate();
+
+  // Remap to fit the DocumentReadOnlyFields component.
+  const readOnlyFields = fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      name: '',
+      email: '',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return {
+      ...field,
+      recipient,
+      signature: null,
+    };
+  });
+
+  const mockedDocumentMeta = templateMeta
+    ? {
+        ...templateMeta,
+        signingOrder: templateMeta.signingOrder || DocumentSigningOrder.SEQUENTIAL,
+        documentId: 0,
+      }
+    : undefined;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link to={templateRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Templates</Trans>
+      </Link>
+
+      <div className="flex flex-row justify-between truncate">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 flex flex-row space-x-4 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+
+          <Button className="w-full" asChild>
+            <Link to={`${templateRootPath}/${template.id}/edit`}>
+              <LucideEdit className="mr-1.5 h-3.5 w-3.5" />
+              <Trans>Edit Template</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer
+              document={template}
+              key={template.id}
+              documentData={templateDocumentData}
+            />
+          </CardContent>
+        </Card>
+
+        <DocumentReadOnlyFields
+          fields={readOnlyFields}
+          showFieldStatus={false}
+          documentMeta={mockedDocumentMeta}
+        />
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  <Trans>Template</Trans>
+                </h3>
+
+                <div>
+                  <TemplatesTableActionDropdown
+                    row={template}
+                    teamId={team?.id}
+                    templateRootPath={templateRootPath}
+                    onDelete={async () => navigate(templateRootPath)}
+                    onMove={async ({ teamUrl, templateId }) =>
+                      navigate(`${formatTemplatesPath(teamUrl)}/${templateId}`)
+                    }
+                  />
+                </div>
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm">
+                <Trans>Manage and view template</Trans>
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <TemplateUseDialog
+                  templateId={template.id}
+                  templateSigningOrder={template.templateMeta?.signingOrder}
+                  recipients={template.recipients}
+                  documentRootPath={documentRootPath}
+                  trigger={
+                    <Button className="w-full">
+                      <Trans>Use</Trans>
+                    </Button>
+                  }
+                />
+              </div>
+            </section>
+
+            {/* Template information section. */}
+            <TemplatePageViewInformation template={template} userId={user.id} />
+
+            {/* Recipients section. */}
+            <TemplatePageViewRecipients template={template} templateRootPath={templateRootPath} />
+
+            {/* Recent activity section. */}
+            <TemplatePageViewRecentActivity
+              documentRootPath={documentRootPath}
+              templateId={template.id}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16" id="documents">
+        <h1 className="mb-4 text-2xl font-bold">
+          <Trans>Documents created from template</Trans>
+        </h1>
+
+        <TemplatePageViewDocumentsTable templateId={template.id} />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/templates+/$id.edit.tsx

@@ -0,0 +1,100 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplateEditForm } from '~/components/general/template/template-edit-form';
+import { TemplateType } from '~/components/general/template/template-type';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import { TemplateDirectLinkDialogWrapper } from '../../../components/dialogs/template-direct-link-dialog-wrapper';
+import type { Route } from './+types/$id.edit';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getLoaderSession();
+
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    throw redirect(templateRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    throw redirect(templateRootPath);
+  }
+
+  const isTemplateEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  return superLoaderJson({
+    template,
+    isTemplateEnterprise,
+    templateRootPath,
+  });
+}
+
+export default function TemplateEditPage() {
+  const { template, isTemplateEnterprise, templateRootPath } = useSuperLoaderData<typeof loader>();
+
+  return (
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link
+            to={`${templateRootPath}/${template.id}`}
+            className="flex items-center text-[#7AC455] hover:opacity-80"
+          >
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            <Trans>Template</Trans>
+          </Link>
+
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
+      </div>
+
+      <TemplateEditForm
+        className="mt-6"
+        initialTemplate={template}
+        templateRootPath={templateRootPath}
+        isEnterprise={isTemplateEnterprise}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/templates+/_index.tsx

@@ -0,0 +1,87 @@
+import { Trans } from '@lingui/react/macro';
+import { Bird } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesPage() {
+  const [searchParams] = useSearchParams();
+
+  const team = useOptionalCurrentTeam();
+
+  const page = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { data, isLoading, isLoadingError } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <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">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div>
+          <TemplateCreateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        </div>
+      </div>
+
+      <div className="relative mt-5">
+        {data && data.count === 0 ? (
+          <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+            <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+            <div className="text-center">
+              <h3 className="text-lg font-semibold">
+                <Trans>We're all empty</Trans>
+              </h3>
+
+              <p className="mt-2 max-w-[50ch]">
+                <Trans>
+                  You have not yet created any templates. To create a template please upload one.
+                </Trans>
+              </p>
+            </div>
+          </div>
+        ) : (
+          <TemplatesTable
+            data={data}
+            isLoading={isLoading}
+            isLoadingError={isLoadingError}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_index.tsx

@@ -0,0 +1,12 @@
+import { redirect } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+export function loader() {
+  const session = getOptionalLoaderSession();
+
+  if (session) {
+    throw redirect('/documents');
+  }
+
+  throw redirect('/signin');
+}

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx

@@ -0,0 +1,171 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { DateTime } from 'luxon';
+import { redirect } from 'react-router';
+
+import { DOCUMENT_STATUS } from '@documenso/lib/constants/document';
+import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
+import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { InternalAuditLogTable } from '~/components/tables/internal-audit-log-table';
+
+import type { Route } from './+types/audit-log';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const d = new URL(request.url).searchParams.get('d');
+
+  if (typeof d !== 'string' || !d) {
+    throw redirect('/');
+  }
+
+  const rawDocumentId = decryptSecondaryData(d);
+
+  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
+    throw redirect('/');
+  }
+
+  const documentId = Number(rawDocumentId);
+
+  const document = await getEntireDocument({
+    id: documentId,
+  }).catch(() => null);
+
+  if (!document) {
+    throw redirect('/');
+  }
+
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
+
+  const { data: auditLogs } = await findDocumentAuditLogs({
+    documentId: documentId,
+    userId: document.userId,
+    teamId: document.teamId || undefined,
+    perPage: 100_000,
+  });
+
+  return {
+    auditLogs,
+    document,
+    documentLanguage,
+  };
+}
+
+/**
+ * DO NOT USE TRANS. YOU MUST USE _ FOR THIS FILE AND ALL CHILDREN COMPONENTS.
+ *
+ * Cannot use dynamicActivate by itself to translate this specific page and all
+ * children components because `not-found.tsx` page runs and overrides the i18n.
+ */
+export default function AuditLog({ loaderData }: Route.ComponentProps) {
+  const { auditLogs, document, documentLanguage } = loaderData;
+
+  const { i18n } = useLingui();
+
+  // Todo
+  void dynamicActivate(documentLanguage);
+
+  const { _ } = useLingui();
+
+  return (
+    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
+      <div className="flex items-center">
+        <h1 className="my-8 text-2xl font-bold">{_(msg`Version History`)}</h1>
+      </div>
+
+      <Card>
+        <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
+          <p>
+            <span className="font-medium">{_(msg`Document ID`)}</span>
+
+            <span className="mt-1 block break-words">{document.id}</span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Enclosed Document`)}</span>
+
+            <span className="mt-1 block break-words">{document.title}</span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Status`)}</span>
+
+            <span className="mt-1 block">
+              {_(
+                document.deletedAt ? msg`Deleted` : DOCUMENT_STATUS[document.status].description,
+              ).toUpperCase()}
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Owner`)}</span>
+
+            <span className="mt-1 block break-words">
+              {document.user.name} ({document.user.email})
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Created At`)}</span>
+
+            <span className="mt-1 block">
+              {DateTime.fromJSDate(document.createdAt)
+                .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                .toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Last Updated`)}</span>
+
+            <span className="mt-1 block">
+              {DateTime.fromJSDate(document.updatedAt)
+                .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                .toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">{_(msg`Time Zone`)}</span>
+
+            <span className="mt-1 block break-words">
+              {document.documentMeta?.timezone ?? 'N/A'}
+            </span>
+          </p>
+
+          <div>
+            <p className="font-medium">{_(msg`Recipients`)}</p>
+
+            <ul className="mt-1 list-inside list-disc">
+              {document.recipients.map((recipient) => (
+                <li key={recipient.id}>
+                  <span className="text-muted-foreground">
+                    [{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}]
+                  </span>{' '}
+                  {recipient.name} ({recipient.email})
+                </li>
+              ))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-8">
+        <CardContent className="p-0">
+          <InternalAuditLogTable logs={auditLogs} />
+        </CardContent>
+      </Card>
+
+      <div className="my-8 flex-row-reverse">
+        <div className="flex items-end justify-end gap-x-4">
+          <BrandingLogo className="max-h-6 print:max-h-4" />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -0,0 +1,324 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { FieldType } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { redirect } from 'react-router';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_SIGNING_REASONS,
+} from '@documenso/lib/constants/recipient-roles';
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
+import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { BrandingLogo } from '~/components/general/branding-logo';
+
+import type { Route } from './+types/certificate';
+
+const FRIENDLY_SIGNING_REASONS = {
+  ['__OWNER__']: msg`I am the owner of this document`,
+  ...RECIPIENT_ROLE_SIGNING_REASONS,
+};
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const d = new URL(request.url).searchParams.get('d');
+
+  if (typeof d !== 'string' || !d) {
+    throw redirect('/');
+  }
+
+  const rawDocumentId = decryptSecondaryData(d);
+
+  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
+    throw redirect('/');
+  }
+
+  const documentId = Number(rawDocumentId);
+
+  const document = await getEntireDocument({
+    id: documentId,
+  }).catch(() => null);
+
+  if (!document) {
+    throw redirect('/');
+  }
+
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
+
+  const auditLogs = await getDocumentCertificateAuditLogs({
+    id: documentId,
+  });
+
+  return {
+    document,
+    documentLanguage,
+    auditLogs,
+  };
+}
+
+/**
+/**
+ * DO NOT USE TRANS. YOU MUST USE _ FOR THIS FILE AND ALL CHILDREN COMPONENTS.
+ *
+ * Cannot use dynamicActivate by itself to translate this specific page and all
+ * children components because `not-found.tsx` page runs and overrides the i18n.
+ */
+export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
+  const { document, documentLanguage, auditLogs } = loaderData;
+
+  const { i18n } = useLingui();
+
+  const { _ } = useLingui();
+
+  // Todo
+  // dynamicActivate(i18n, documentLanguage);
+
+  const isOwner = (email: string) => {
+    return email.toLowerCase() === document.user.email.toLowerCase();
+  };
+
+  const getDevice = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return `${result.os.name} - ${result.browser.name} ${result.browser.version}`;
+  };
+
+  const getAuthenticationLevel = (recipientId: number) => {
+    const recipient = document.recipients.find((recipient) => recipient.id === recipientId);
+
+    if (!recipient) {
+      return 'Unknown';
+    }
+
+    const extractedAuthMethods = extractDocumentAuthMethods({
+      documentAuth: document.authOptions,
+      recipientAuth: recipient.authOptions,
+    });
+
+    let authLevel = match(extractedAuthMethods.derivedRecipientActionAuth)
+      .with('ACCOUNT', () => _(msg`Account Re-Authentication`))
+      .with('TWO_FACTOR_AUTH', () => _(msg`Two-Factor Re-Authentication`))
+      .with('PASSKEY', () => _(msg`Passkey Re-Authentication`))
+      .with('EXPLICIT_NONE', () => _(msg`Email`))
+      .with(null, () => null)
+      .exhaustive();
+
+    if (!authLevel) {
+      authLevel = match(extractedAuthMethods.derivedRecipientAccessAuth)
+        .with('ACCOUNT', () => _(msg`Account Authentication`))
+        .with(null, () => _(msg`Email`))
+        .exhaustive();
+    }
+
+    return authLevel;
+  };
+
+  const getRecipientAuditLogs = (recipientId: number) => {
+    return {
+      [DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT]: auditLogs[DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT && log.data.recipientId === recipientId,
+      ),
+      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED]: auditLogs[
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED
+      ].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED &&
+          log.data.recipientId === recipientId,
+      ),
+      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED]: auditLogs[
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED
+      ].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED &&
+          log.data.recipientId === recipientId,
+      ),
+    };
+  };
+
+  const getRecipientSignatureField = (recipientId: number) => {
+    return document.recipients
+      .find((recipient) => recipient.id === recipientId)
+      ?.fields.find(
+        (field) => field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE,
+      );
+  };
+
+  return (
+    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
+      <div className="flex items-center">
+        <h1 className="my-8 text-2xl font-bold">{_(msg`Signing Certificate`)}</h1>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          <Table overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{_(msg`Signer Events`)}</TableHead>
+                <TableHead>{_(msg`Signature`)}</TableHead>
+                <TableHead>{_(msg`Details`)}</TableHead>
+                {/* <TableHead>Security</TableHead> */}
+              </TableRow>
+            </TableHeader>
+
+            <TableBody className="print:text-xs">
+              {document.recipients.map((recipient, i) => {
+                const logs = getRecipientAuditLogs(recipient.id);
+                const signature = getRecipientSignatureField(recipient.id);
+
+                return (
+                  <TableRow key={i} className="print:break-inside-avoid">
+                    <TableCell truncate={false} className="w-[min-content] max-w-[220px] align-top">
+                      <div className="hyphens-auto break-words font-medium">{recipient.name}</div>
+                      <div className="break-all">{recipient.email}</div>
+                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                        {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+                      </p>
+
+                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                        <span className="font-medium">{_(msg`Authentication Level`)}:</span>{' '}
+                        <span className="block">{getAuthenticationLevel(recipient.id)}</span>
+                      </p>
+                    </TableCell>
+
+                    <TableCell truncate={false} className="w-[min-content] align-top">
+                      {signature ? (
+                        <>
+                          <div
+                            className="inline-block rounded-lg p-1"
+                            style={{
+                              boxShadow: `0px 0px 0px 4.88px rgba(122, 196, 85, 0.1), 0px 0px 0px 1.22px rgba(122, 196, 85, 0.6), 0px 0px 0px 0.61px rgba(122, 196, 85, 1)`,
+                            }}
+                          >
+                            {signature.signature?.signatureImageAsBase64 && (
+                              <img
+                                src={`${signature.signature?.signatureImageAsBase64}`}
+                                alt="Signature"
+                                className="max-h-12 max-w-full"
+                              />
+                            )}
+
+                            {signature.signature?.typedSignature && (
+                              <p className="font-signature text-center text-sm">
+                                {signature.signature?.typedSignature}
+                              </p>
+                            )}
+                          </div>
+
+                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                            <span className="font-medium">{_(msg`Signature ID`)}:</span>{' '}
+                            <span className="block font-mono uppercase">
+                              {signature.secondaryId}
+                            </span>
+                          </p>
+
+                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                            <span className="font-medium">{_(msg`IP Address`)}:</span>{' '}
+                            <span className="inline-block">
+                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
+                            </span>
+                          </p>
+
+                          <p className="text-muted-foreground mt-1 text-sm print:text-xs">
+                            <span className="font-medium">{_(msg`Device`)}:</span>{' '}
+                            <span className="inline-block">
+                              {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
+                            </span>
+                          </p>
+                        </>
+                      ) : (
+                        <p className="text-muted-foreground">N/A</p>
+                      )}
+                    </TableCell>
+
+                    <TableCell truncate={false} className="w-[min-content] align-top">
+                      <div className="space-y-1">
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">{_(msg`Sent`)}:</span>{' '}
+                          <span className="inline-block">
+                            {logs.EMAIL_SENT[0]
+                              ? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt)
+                                  .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                  .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                              : _(msg`Unknown`)}
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">{_(msg`Viewed`)}:</span>{' '}
+                          <span className="inline-block">
+                            {logs.DOCUMENT_OPENED[0]
+                              ? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt)
+                                  .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                  .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                              : _(msg`Unknown`)}
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
+                          <span className="inline-block">
+                            {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
+                              ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt)
+                                  .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                  .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                              : _(msg`Unknown`)}
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">{_(msg`Reason`)}:</span>{' '}
+                          <span className="inline-block">
+                            {_(
+                              isOwner(recipient.email)
+                                ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                                : FRIENDLY_SIGNING_REASONS[recipient.role],
+                            )}
+                          </span>
+                        </p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <div className="my-8 flex-row-reverse">
+        <div className="flex items-end justify-end gap-x-4">
+          <p className="flex-shrink-0 text-sm font-medium print:text-xs">
+            {_(msg`Signing certificate provided by`)}:
+          </p>
+
+          <BrandingLogo className="max-h-6 print:max-h-4" />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_profile+/_layout.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
+import { Link, Outlet } from 'react-router';
+
+import LogoIcon from '@documenso/assets/logo_icon.png';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/general/app-header';
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Profile');
+}
+
+export default function PublicProfileLayout() {
+  const session = useSession();
+
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      {session ? (
+        <AuthenticatedHeader user={session.user} teams={session.teams} />
+      ) : (
+        <header
+          className={cn(
+            'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+            scrollY > 5 && 'border-b-border',
+          )}
+        >
+          <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:px-8">
+            <Link
+              to="/"
+              className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+            >
+              <BrandingLogo className="hidden h-6 w-auto sm:block" />
+
+              <img
+                src={LogoIcon}
+                alt="Documenso Logo"
+                width={48}
+                height={48}
+                className="h-10 w-auto sm:hidden dark:invert"
+              />
+            </Link>
+
+            <div className="flex flex-row items-center justify-center">
+              <p className="text-muted-foreground mr-4">
+                <span className="text-sm sm:hidden">
+                  <Trans>Want your own public profile?</Trans>
+                </span>
+                <span className="hidden text-sm sm:block">
+                  <Trans>Like to have your own public profile with agreements?</Trans>
+                </span>
+              </p>
+
+              <Button asChild variant="secondary">
+                <Link to="/signup">
+                  <div className="hidden flex-row items-center sm:flex">
+                    <PlusIcon className="mr-1 h-5 w-5" />
+                    <Trans>Create now</Trans>
+                  </div>
+
+                  <span className="sm:hidden">
+                    <Trans>Create</Trans>
+                  </span>
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </header>
+      )}
+
+      <main className="my-8 px-4 md:my-12 md:px-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  const errorCodeMap = {
+    404: {
+      subHeading: msg`404 Profile not found`,
+      heading: msg`Oops! Something went wrong.`,
+      message: msg`The profile you are looking for could not be found.`,
+    },
+  };
+
+  return (
+    <GenericErrorLayout
+      errorCodeMap={errorCodeMap}
+      secondaryButton={null}
+      primaryButton={
+        <Button asChild className="w-32">
+          <Link to="/">
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            <Trans>Go Back</Trans>
+          </Link>
+        </Button>
+      }
+    />
+  );
+}

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -0,0 +1,203 @@
+import { Trans } from '@lingui/react/macro';
+import { FileIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import type { Route } from './+types/p.$url';
+
+const BADGE_DATA = {
+  Premium: {
+    imageSrc: '/static/premium-user-badge.svg',
+    name: 'Premium',
+  },
+  EarlySupporter: {
+    imageSrc: '/static/early-supporter-badge.svg',
+    name: 'Early supporter',
+  },
+};
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { url: profileUrl } = params;
+
+  if (!profileUrl) {
+    throw redirect('/');
+  }
+
+  const publicProfile = await getPublicProfileByUrl({
+    profileUrl,
+  }).catch(() => null);
+
+  // Todo: Test
+  if (!publicProfile || !publicProfile.profile.enabled) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  return {
+    publicProfile,
+  };
+}
+
+export default function PublicProfilePage({ loaderData }: Route.ComponentProps) {
+  const { publicProfile } = loaderData;
+
+  const { profile, templates } = publicProfile;
+
+  const { user } = useOptionalSession();
+
+  return (
+    <div className="flex flex-col items-center justify-center py-4 sm:py-32">
+      <div className="flex flex-col items-center">
+        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
+          {publicProfile.avatarImageId && (
+            <AvatarImage src={formatAvatarUrl(publicProfile.avatarImageId)} />
+          )}
+
+          <AvatarFallback className="text-sm text-gray-400">
+            {extractInitials(publicProfile.name)}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="mt-4 flex flex-row items-center justify-center">
+          <h2 className="text-xl font-semibold md:text-2xl">{publicProfile.name}</h2>
+
+          {publicProfile.badge && (
+            <Tooltip>
+              <TooltipTrigger>
+                <img
+                  className="ml-2 flex items-center justify-center"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-row items-start py-2 !pl-3 !pr-3.5">
+                <img
+                  className="mt-0.5"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+
+                <div className="ml-2">
+                  <p className="text-foreground text-base font-semibold">
+                    {BADGE_DATA[publicProfile.badge.type].name}
+                  </p>
+                  <p className="text-muted-foreground mt-0.5 text-sm">
+                    <Trans>
+                      Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                    </Trans>
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="text-muted-foreground mt-4 space-y-1">
+          {(profile.bio ?? '').split('\n').map((line, index) => (
+            <p
+              key={index}
+              className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm"
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      </div>
+
+      {templates.length === 0 && (
+        <div className="mt-4 w-full max-w-xl border-t pt-4">
+          <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
+            <Trans>
+              It looks like {publicProfile.name} hasn't added any documents to their profile yet.
+            </Trans>{' '}
+            {!user?.id && (
+              <span className="mt-2 inline-block">
+                <Trans>
+                  While waiting for them to do so you can create your own Documenso account and get
+                  started with document signing right away.
+                </Trans>
+              </span>
+            )}
+            {'userId' in profile && user?.id === profile.userId && (
+              <span className="mt-2 inline-block">
+                <Trans>
+                  Go to your{' '}
+                  <Link to="/settings/public-profile" className="underline">
+                    public profile settings
+                  </Link>{' '}
+                  to add documents.
+                </Trans>
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {templates.length > 0 && (
+        <div className="mt-8 w-full max-w-xl rounded-md border">
+          <Table className="w-full" overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
+                  <Trans>Documents</Trans>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {templates.map((template) => (
+                <TableRow key={template.id}>
+                  <TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
+                    <div className="flex flex-1 items-start justify-start gap-2">
+                      <FileIcon
+                        className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                        strokeWidth={1.5}
+                      />
+
+                      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
+                        <div>
+                          <p className="text-foreground text-sm font-semibold leading-none">
+                            {template.publicTitle}
+                          </p>
+                          <p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
+                            {template.publicDescription}
+                          </p>
+                        </div>
+
+                        <Button asChild className="w-20">
+                          <Link to={formatDirectTemplatePath(template.directLink.token)}>
+                            <Trans>Sign</Trans>
+                          </Link>
+                        </Button>
+                      </div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -0,0 +1,71 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, Outlet } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/general/app-header';
+
+import type { Route } from './+types/_layout';
+
+export function loader() {
+  const session = getOptionalLoaderSession();
+
+  return {
+    user: session?.user,
+    teams: session?.teams || [],
+  };
+}
+
+/**
+ * A layout to handle scenarios where the user is a recipient of a given resource
+ * where we do not care whether they are authenticated or not.
+ *
+ * Such as direct template access, or signing.
+ */
+export default function RecipientLayout({ loaderData }: Route.ComponentProps) {
+  const { user, teams } = loaderData;
+
+  return (
+    <div className="min-h-screen">
+      {user && <AuthenticatedHeader user={user} teams={teams} />}
+
+      <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  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">
+          <Trans>404 Not found</Trans>
+        </p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+          <Trans>Oops! Something went wrong.</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          <Trans>
+            The resource you are looking for may have been disabled, deleted or may have never
+            existed.
+          </Trans>
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link to="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              <Trans>Go Back</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -0,0 +1,111 @@
+import { Plural } from '@lingui/react/macro';
+import { UsersIcon } from 'lucide-react';
+import { redirect } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DirectTemplatePageView } from '~/components/general/direct-template/direct-template-page';
+import { DirectTemplateAuthPageView } from '~/components/general/direct-template/direct-template-signing-auth-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/_index';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    throw redirect('/');
+  }
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  if (!template || !template.directLink?.enabled) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const directTemplateRecipient = template.recipients.find(
+    (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => Boolean(session?.user))
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return superLoaderJson({
+      isAccessAuthValid: false as const,
+    });
+  }
+
+  return superLoaderJson({
+    isAccessAuthValid: true,
+    template,
+    directTemplateRecipient,
+  } as const);
+}
+
+export default function DirectTemplatePage() {
+  const { user } = useOptionalSession();
+
+  const data = useSuperLoaderData<typeof loader>();
+
+  // Should not be possible for directLink to be null.
+  if (!data.isAccessAuthValid) {
+    return <DirectTemplateAuthPageView />;
+  }
+
+  const { template, directTemplateRecipient } = data;
+
+  return (
+    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentSigningAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={directTemplateRecipient}
+        user={user}
+      >
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <UsersIcon className="h-4 w-4" />
+            <p className="text-muted-foreground/80">
+              <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
+            </p>
+          </div>
+
+          <DirectTemplatePageView
+            directTemplateRecipient={directTemplateRecipient}
+            directTemplateToken={template.directLink.token}
+            template={template}
+          />
+        </div>
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -0,0 +1,230 @@
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, SigningStatus } from '@prisma/client';
+import { Clock8 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getOptionalLoaderContext } from 'server/utils/get-loader-session';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningPageView } from '~/components/general/document-signing/document-signing-page-view';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/_index';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { session, requestMetadata } = getOptionalLoaderContext();
+
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = session?.user;
+
+  const [document, fields, recipient, completedFields] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+      userId: user?.id,
+      requireAccessAuth: false,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }),
+  ]);
+
+  if (
+    !document ||
+    !document.documentData ||
+    !recipient ||
+    document.status === DocumentStatus.DRAFT
+  ) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
+
+  if (!isRecipientsTurn) {
+    throw redirect(`/sign/${token}/waiting`);
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  let recipientHasAccount: boolean | null = null;
+
+  if (!isDocumentAccessValid) {
+    recipientHasAccount = await getUserByEmail({ email: recipient.email })
+      .then((user) => !!user)
+      .catch(() => false);
+
+    return superLoaderJson({
+      isDocumentAccessValid: false,
+      recipientEmail: recipient.email,
+      recipientHasAccount,
+    } as const);
+  }
+
+  await viewedDocument({
+    token,
+    requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  }).catch(() => null);
+
+  const { documentMeta } = document;
+
+  if (recipient.signingStatus === SigningStatus.REJECTED) {
+    throw redirect(`/sign/${token}/rejected`);
+  }
+
+  if (
+    document.status === DocumentStatus.COMPLETED ||
+    recipient.signingStatus === SigningStatus.SIGNED
+  ) {
+    throw redirect(documentMeta?.redirectUrl || `/sign/${token}/complete`);
+  }
+
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
+
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
+
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
+
+  //   documentMeta.password = securePassword;
+  // }
+
+  const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
+
+  return superLoaderJson({
+    isDocumentAccessValid: true,
+    document,
+    fields,
+    recipient,
+    completedFields,
+    recipientSignature,
+    isRecipientsTurn,
+  } as const);
+}
+
+export default function SigningPage() {
+  const data = useSuperLoaderData<typeof loader>();
+
+  const { user } = useOptionalSession();
+
+  if (!data.isDocumentAccessValid) {
+    return (
+      <DocumentSigningAuthPageView
+        email={data.recipientEmail}
+        emailHasAccount={!!data.recipientHasAccount}
+      />
+    );
+  }
+
+  const { document, fields, recipient, completedFields, recipientSignature, isRecipientsTurn } =
+    data;
+
+  if (document.deletedAt) {
+    return (
+      <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
+        <SigningCard3D
+          name={recipient.name}
+          signature={recipientSignature}
+          signingCelebrationImage={signingCelebration}
+        />
+
+        <div className="relative mt-2 flex w-full flex-col items-center">
+          <div className="mt-8 flex items-center text-center text-red-600">
+            <Clock8 className="mr-2 h-5 w-5" />
+            <span className="text-sm">
+              <Trans>Document Cancelled</Trans>
+            </span>
+          </div>
+
+          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>
+              <span className="mt-1.5 block">"{document.title}"</span>
+              is no longer available to sign
+            </Trans>
+          </h2>
+
+          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+            <Trans>This document has been cancelled by the owner.</Trans>
+          </p>
+
+          {user ? (
+            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
+              <Trans>Go Back Home</Trans>
+            </Link>
+          ) : (
+            <p className="text-muted-foreground/60 mt-36 text-sm">
+              <Trans>
+                Want to send slick signing links like this one?{' '}
+                <Link
+                  to="https://documenso.com"
+                  className="text-documenso-700 hover:text-documenso-600"
+                >
+                  Check out Documenso.
+                </Link>
+              </Trans>
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <DocumentSigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <DocumentSigningPageView
+          recipient={recipient}
+          document={document}
+          fields={fields}
+          completedFields={completedFields}
+          isRecipientsTurn={isRecipientsTurn}
+        />
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -0,0 +1,287 @@
+import { useEffect } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { type Document, DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
+import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
+import { Link, useRevalidator } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { env } from '@documenso/lib/utils/env';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ClaimAccount } from '~/components/general/claim-account';
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+
+import type { Route } from './+types/complete';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = session?.user;
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  if (!isDocumentAccessValid) {
+    return {
+      isDocumentAccessValid: false,
+      recipientEmail: recipient.email,
+    } as const;
+  }
+
+  const signatures = await getRecipientSignatures({ recipientId: recipient.id });
+  const isExistingUser = await getUserByEmail({ email: recipient.email })
+    .then((u) => !!u)
+    .catch(() => false);
+
+  const recipientName =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  const canSignUp = !isExistingUser && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true';
+
+  return {
+    isDocumentAccessValid: true,
+    canSignUp,
+    recipientName,
+    recipientEmail: recipient.email,
+    signatures,
+    document,
+    recipient,
+  };
+}
+
+export default function CompletedSigningPage({ loaderData }: Route.ComponentProps) {
+  const { _ } = useLingui();
+
+  const { user } = useOptionalSession();
+
+  const {
+    isDocumentAccessValid,
+    canSignUp,
+    recipientName,
+    signatures,
+    document,
+    recipient,
+    recipientEmail,
+  } = loaderData;
+
+  if (!isDocumentAccessValid) {
+    return <DocumentSigningAuthPageView email={recipientEmail} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
+      )}
+    >
+      <div
+        className={cn('relative mt-6 flex w-full flex-col items-center justify-center', {
+          'mt-0 flex-col divide-y overflow-hidden pt-6 md:pt-16 lg:flex-row lg:divide-x lg:divide-y-0 lg:pt-20 xl:pt-24':
+            canSignUp,
+        })}
+      >
+        <div
+          className={cn('flex flex-col items-center', {
+            'mb-8 p-4 md:mb-0 md:p-12': canSignUp,
+          })}
+        >
+          <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+            <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
+              {document.title}
+            </span>
+          </Badge>
+
+          {/* Card with recipient */}
+          <SigningCard3D
+            name={recipientName}
+            signature={signatures.at(0)}
+            signingCelebrationImage={signingCelebration}
+          />
+
+          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            {recipient.role === RecipientRole.SIGNER && <Trans>Document Signed</Trans>}
+            {recipient.role === RecipientRole.VIEWER && <Trans>Document Viewed</Trans>}
+            {recipient.role === RecipientRole.APPROVER && <Trans>Document Approved</Trans>}
+          </h2>
+
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <div className="text-documenso-700 mt-4 flex items-center text-center">
+                <CheckCircle2 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Everyone has signed</Trans>
+                </span>
+              </div>
+            ))
+            .with({ deletedAt: null }, () => (
+              <div className="mt-4 flex items-center text-center text-blue-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Waiting for others to sign</Trans>
+                </span>
+              </div>
+            ))
+            .otherwise(() => (
+              <div className="flex items-center text-center text-red-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Document no longer available to sign</Trans>
+                </span>
+              </div>
+            ))}
+
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  Everyone has signed! You will receive an Email copy of the signed document.
+                </Trans>
+              </p>
+            ))
+            .with({ deletedAt: null }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  You will receive an Email copy of the signed document once everyone has signed.
+                </Trans>
+              </p>
+            ))
+            .otherwise(() => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  This document has been cancelled by the owner and is no longer available for
+                  others to sign.
+                </Trans>
+              </p>
+            ))}
+
+          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+            <DocumentShareButton documentId={document.id} token={recipient.token} />
+
+            {document.status === DocumentStatus.COMPLETED ? (
+              <DocumentDownloadButton
+                className="flex-1"
+                fileName={document.title}
+                documentData={document.documentData}
+                disabled={document.status !== DocumentStatus.COMPLETED}
+              />
+            ) : (
+              <DocumentDialog
+                documentData={document.documentData}
+                trigger={
+                  <Button
+                    className="text-[11px]"
+                    title={_(msg`Signatures will appear once the document has been completed`)}
+                    variant="outline"
+                  >
+                    <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
+                    <Trans>View Original Document</Trans>
+                  </Button>
+                }
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center">
+          {canSignUp && (
+            <div className="flex max-w-xl flex-col items-center justify-center p-4 md:p-12">
+              <h2 className="mt-8 text-center text-xl font-semibold md:mt-0">
+                <Trans>Need to sign documents?</Trans>
+              </h2>
+
+              <p className="text-muted-foreground/60 mt-4 max-w-[55ch] text-center leading-normal">
+                <Trans>
+                  Create your account and start using state-of-the-art document signing.
+                </Trans>
+              </p>
+
+              <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
+            </div>
+          )}
+
+          {user && (
+            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-2">
+              <Trans>Go Back Home</Trans>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      <PollUntilDocumentCompleted document={document} />
+    </div>
+  );
+}
+
+export type PollUntilDocumentCompletedProps = {
+  document: Pick<Document, 'id' | 'status' | 'deletedAt'>;
+};
+
+export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentCompletedProps) => {
+  const { revalidate } = useRevalidator();
+
+  useEffect(() => {
+    if (document.status === DocumentStatus.COMPLETED) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      if (window.document.hasFocus()) {
+        void revalidate();
+      }
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document.status]);
+
+  return <></>;
+};

apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx

@@ -0,0 +1,125 @@
+import { Trans } from '@lingui/react/macro';
+import { FieldType } from '@prisma/client';
+import { XCircle } from 'lucide-react';
+import { Link } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+import { truncateTitle } from '~/utils/truncate-title';
+
+import type { Route } from './+types/rejected';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = session?.user;
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const truncatedTitle = truncateTitle(document.title);
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  const recipientReference =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  if (isDocumentAccessValid) {
+    return {
+      isDocumentAccessValid: true,
+      recipientReference,
+      truncatedTitle,
+    };
+  }
+
+  // Don't leak data if access is denied.
+  return {
+    isDocumentAccessValid: false,
+    recipientReference,
+  };
+}
+
+export default function RejectedSigningPage({ loaderData }: Route.ComponentProps) {
+  const { user } = useOptionalSession();
+
+  const { isDocumentAccessValid, recipientReference, truncatedTitle } = loaderData;
+
+  if (!isDocumentAccessValid) {
+    return <DocumentSigningAuthPageView email={recipientReference} />;
+  }
+
+  return (
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+      <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+        {truncatedTitle}
+      </Badge>
+
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <XCircle className="text-destructive h-10 w-10" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Document Rejected</Trans>
+          </h2>
+        </div>
+
+        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+          <Trans>You have rejected this document</Trans>
+        </div>
+
+        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+          <Trans>
+            The document owner has been notified of your decision. They may contact you with further
+            instructions if necessary.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+          <Trans>No further action is required from you at this time.</Trans>
+        </p>
+
+        {user && (
+          <Button className="mt-6" asChild>
+            <Link to={`/`}>Return Home</Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx

@@ -0,0 +1,106 @@
+import { Trans } from '@lingui/react/macro';
+import type { Team } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
+import { Link, redirect } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/waiting';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const [document, recipient] = await Promise.all([
+    getDocumentAndSenderByToken({ token }).catch(() => null),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!document || !recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (document.status === DocumentStatus.COMPLETED) {
+    throw redirect(`/sign/${token}/complete`);
+  }
+
+  let isOwnerOrTeamMember = false;
+
+  const user = session?.user;
+  let team: Team | null = null;
+
+  if (user) {
+    isOwnerOrTeamMember = await getDocumentById({
+      documentId: document.id,
+      userId: user.id,
+      teamId: document.teamId ?? undefined,
+    })
+      .then((document) => !!document)
+      .catch(() => false);
+
+    if (document.teamId) {
+      team = await getTeamById({
+        userId: user.id,
+        teamId: document.teamId,
+      });
+    }
+  }
+
+  const documentPathForEditing = isOwnerOrTeamMember
+    ? formatDocumentsPath(team?.url) + '/' + document.id
+    : null;
+
+  return {
+    documentPathForEditing,
+  };
+}
+
+export default function WaitingForTurnToSignPage({ loaderData }: Route.ComponentProps) {
+  const { documentPathForEditing } = loaderData;
+
+  return (
+    <div className="relative flex flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md text-center">
+        <h2 className="tracking-tigh text-3xl font-bold">
+          <Trans>Waiting for Your Turn</Trans>
+        </h2>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            It's currently not your turn to sign. You will receive an email with instructions once
+            it's your turn to sign the document.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          <Trans>Please check your email for updates.</Trans>
+        </p>
+
+        <div className="mt-4">
+          {documentPathForEditing ? (
+            <Button variant="link" asChild>
+              <Link to={documentPathForEditing}>
+                <Trans>Were you trying to edit this document instead?</Trans>
+              </Link>
+            </Button>
+          ) : (
+            <Button variant="link" asChild>
+              <Link to="/documents">Return Home</Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_redirects+/ingest.$.tsx

@@ -0,0 +1,41 @@
+/**
+ * https://posthog.com/docs/advanced/proxy/remix
+ */
+import type { Route } from './+types/ingest.$';
+
+const API_HOST = 'eu.i.posthog.com';
+const ASSET_HOST = 'eu-assets.i.posthog.com';
+
+const posthogProxy = async (request: Request) => {
+  const url = new URL(request.url);
+  const hostname = url.pathname.startsWith('/ingest/static/') ? ASSET_HOST : API_HOST;
+
+  const newUrl = new URL(url);
+  newUrl.protocol = 'https';
+  newUrl.hostname = hostname;
+  newUrl.port = '443';
+  newUrl.pathname = newUrl.pathname.replace(/^\/ingest/, '');
+
+  const headers = new Headers(request.headers);
+  headers.set('host', hostname);
+
+  const response = await fetch(newUrl, {
+    method: request.method,
+    headers,
+    body: request.body,
+  });
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: response.headers,
+  });
+};
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return posthogProxy(request);
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  return posthogProxy(request);
+}

apps/remix/app/routes/_unauthenticated+/_layout.tsx

@@ -0,0 +1,27 @@
+import { Outlet } from 'react-router';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+
+export default function Layout() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div>
+        <div className="absolute -inset-[min(600px,max(400px,60vw))] -z-[1] flex items-center justify-center opacity-70">
+          <img
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            }}
+          />
+        </div>
+
+        <div className="relative w-full">
+          <Outlet />
+        </div>
+      </div>
+    </main>
+  );
+}

apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx

@@ -0,0 +1,166 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+const SUPPORT_EMAIL = 'support@documenso.com';
+
+export default function SignatureDisclosure() {
+  return (
+    <div>
+      <article className="prose dark:prose-invert">
+        <h1>
+          <Trans>Electronic Signature Disclosure</Trans>
+        </h1>
+
+        <h2>
+          <Trans>Welcome</Trans>
+        </h2>
+        <p>
+          <Trans>
+            Thank you for using Documenso to perform your electronic document signing. The purpose
+            of this disclosure is to inform you about the process, legality, and your rights
+            regarding the use of electronic signatures on our platform. By opting to use an
+            electronic signature, you are agreeing to the terms and conditions outlined below.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Acceptance and Consent</Trans>
+        </h2>
+        <p>
+          <Trans>
+            When you use our platform to affix your electronic signature to documents, you are
+            consenting to do so under the Electronic Signatures in Global and National Commerce Act
+            (E-Sign Act) and other applicable laws. This action indicates your agreement to use
+            electronic means to sign documents and receive notifications.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Legality of Electronic Signatures</Trans>
+        </h2>
+        <p>
+          <Trans>
+            An electronic signature provided by you on our platform, achieved through clicking
+            through to a document and entering your name, or any other electronic signing method we
+            provide, is legally binding. It carries the same weight and enforceability as a manual
+            signature written with ink on paper.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>System Requirements</Trans>
+        </h2>
+        <p>
+          <Trans>To use our electronic signature service, you must have access to:</Trans>
+        </p>
+        <ul>
+          <li>
+            <Trans>A stable internet connection</Trans>
+          </li>
+          <li>
+            <Trans>An email account</Trans>
+          </li>
+          <li>
+            <Trans>A device capable of accessing, opening, and reading documents</Trans>
+          </li>
+          <li>
+            <Trans>A means to print or download documents for your records</Trans>
+          </li>
+        </ul>
+
+        <h2>
+          <Trans>Electronic Delivery of Documents</Trans>
+        </h2>
+        <p>
+          <Trans>
+            All documents related to the electronic signing process will be provided to you
+            electronically through our platform or via email. It is your responsibility to ensure
+            that your email address is current and that you can receive and open our emails.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Consent to Electronic Transactions</Trans>
+        </h2>
+        <p>
+          <Trans>
+            By using the electronic signature feature, you are consenting to conduct transactions
+            and receive disclosures electronically. You acknowledge that your electronic signature
+            on documents is binding and that you accept the terms outlined in the documents you are
+            signing.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Withdrawing Consent</Trans>
+        </h2>
+        <p>
+          <Trans>
+            You have the right to withdraw your consent to use electronic signatures at any time
+            before completing the signing process. To withdraw your consent, please contact the
+            sender of the document. In failing to contact the sender you may reach out to{' '}
+            <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> for assistance. Be aware that
+            withdrawing consent may delay or halt the completion of the related transaction or
+            service.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Updating Your Information</Trans>
+        </h2>
+        <p>
+          <Trans>
+            It is crucial to keep your contact information, especially your email address, up to
+            date with us. Please notify us immediately of any changes to ensure that you continue to
+            receive all necessary communications.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Retention of Documents</Trans>
+        </h2>
+        <p>
+          <Trans>
+            After signing a document electronically, you will be provided the opportunity to view,
+            download, and print the document for your records. It is highly recommended that you
+            retain a copy of all electronically signed documents for your personal records. We will
+            also retain a copy of the signed document for our records however we may not be able to
+            provide you with a copy of the signed document after a certain period of time.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Acknowledgment</Trans>
+        </h2>
+        <p>
+          <Trans>
+            By proceeding to use the electronic signature service provided by Documenso, you affirm
+            that you have read and understood this disclosure. You agree to all terms and conditions
+            related to the use of electronic signatures and electronic transactions as outlined
+            herein.
+          </Trans>
+        </p>
+
+        <h2>
+          <Trans>Contact Information</Trans>
+        </h2>
+        <p>
+          <Trans>
+            For any questions regarding this disclosure, electronic signatures, or any related
+            process, please contact us at: <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>
+          </Trans>
+        </p>
+      </article>
+
+      <div className="mt-8">
+        <Button asChild>
+          <Link to="/documents">
+            <Trans>Back to Documents</Trans>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/check-email.tsx

@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Forgot password');
+}
+
+export default function ForgotPasswordPage() {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-4xl font-semibold">
+          <Trans>Email sent!</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          <Trans>
+            A password reset email has been sent, if you have an account you should see it in your
+            inbox shortly.
+          </Trans>
+        </p>
+
+        <Button asChild>
+          <Link to="/signin">
+            <Trans>Return to sign in</Trans>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/forgot-password.tsx

@@ -0,0 +1,39 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { ForgotPasswordForm } from '~/components/forms/forgot-password';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Forgot Password');
+}
+
+export default function ForgotPasswordPage() {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-3xl font-semibold">
+          <Trans>Forgot your password?</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            No worries, it happens! Enter your email and we'll email you a special link to reset
+            your password.
+          </Trans>
+        </p>
+
+        <ForgotPasswordForm className="mt-4" />
+
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          <Trans>
+            Remembered your password?{' '}
+            <Link to="/signin" className="text-primary duration-200 hover:opacity-70">
+              Sign In
+            </Link>
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/reset-password.$token.tsx

@@ -0,0 +1,56 @@
+import { Trans } from '@lingui/react/macro';
+import { Link, redirect } from 'react-router';
+
+import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
+
+import { ResetPasswordForm } from '~/components/forms/reset-password';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/reset-password.$token';
+
+export function meta() {
+  return appMetaTags('Reset Password');
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { token } = params;
+
+  const isValid = await getResetTokenValidity({ token });
+
+  if (!isValid) {
+    throw redirect('/reset-password');
+  }
+
+  return {
+    token,
+  };
+}
+
+export default function ResetPasswordPage({ loaderData }: Route.ComponentProps) {
+  const { token } = loaderData;
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-4xl font-semibold">
+          <Trans>Reset Password</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>Please choose your new password</Trans>
+        </p>
+
+        <ResetPasswordForm token={token} className="mt-4" />
+
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          <Trans>
+            Don't have an account?{' '}
+            <Link to="/signup" className="text-primary duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/reset-password._index.tsx

@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Reset Password');
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-3xl font-semibold">
+          <Trans>Unable to reset password</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            The token you have used to reset your password is either expired or it never existed. If
+            you have still forgotten your password, please request a new reset link.
+          </Trans>
+        </p>
+
+        <Button className="mt-4" asChild>
+          <Link to="/signin">
+            <Trans>Return to sign in</Trans>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/share.$slug.opengraph.tsx

@@ -0,0 +1,192 @@
+// Todo: Test, used AI to migrate this component from NextJS to Remix.
+import satori from 'satori';
+import sharp from 'sharp';
+import { P, match } from 'ts-pattern';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
+import type { ShareHandlerAPIResponse } from '../api+/share';
+import type { Route } from './+types/share.$slug.opengraph';
+
+export const runtime = 'edge';
+
+const CARD_OFFSET_TOP = 173;
+const CARD_OFFSET_LEFT = 307;
+const CARD_WIDTH = 590;
+const CARD_HEIGHT = 337;
+
+const IMAGE_SIZE = {
+  width: 1200,
+  height: 630,
+};
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { slug } = params;
+
+  const baseUrl = NEXT_PUBLIC_WEBAPP_URL();
+
+  const [interSemiBold, interRegular, caveatRegular] = await Promise.all([
+    fetch(new URL(`${baseUrl}/fonts/inter-semibold.ttf`, import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL(`${baseUrl}/fonts/inter-regular.ttf`, import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL(`${baseUrl}/fonts/caveat-regular.ttf`, import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+  ]);
+
+  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
+    new URL(`/api/share?slug=${slug}`, baseUrl),
+  ).then(async (res) => res.json());
+
+  if ('error' in recipientOrSender) {
+    return Response.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  const isRecipient = 'Signature' in recipientOrSender;
+
+  const signatureImage = match(recipientOrSender)
+    .with({ signatures: P.array(P._) }, (recipient) => {
+      return recipient.signatures?.[0]?.signatureImageAsBase64 || null;
+    })
+    .otherwise((sender) => {
+      return sender.signature || null;
+    });
+
+  const signatureName = match(recipientOrSender)
+    .with({ signatures: P.array(P._) }, (recipient) => {
+      return recipient.name || recipient.email;
+    })
+    .otherwise((sender) => {
+      return sender.name || sender.email;
+    });
+
+  // Generate SVG using Satori
+  const svg = await satori(
+    <div
+      style={{
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'white',
+        position: 'relative',
+      }}
+    >
+      <img
+        src={`${baseUrl}/static/og-share-frame2.png`}
+        alt="og-share-frame"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+        }}
+      />
+
+      {signatureImage ? (
+        <div
+          style={{
+            position: 'absolute',
+            padding: '24px 48px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            top: CARD_OFFSET_TOP,
+            left: CARD_OFFSET_LEFT,
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+          }}
+        >
+          <img
+            src={signatureImage}
+            alt="signature"
+            style={{
+              opacity: 0.6,
+              height: '100%',
+              maxWidth: '100%',
+            }}
+          />
+        </div>
+      ) : (
+        <p
+          style={{
+            position: 'absolute',
+            padding: '24px 48px',
+            marginTop: '-8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            color: '#64748b',
+            fontFamily: 'Caveat',
+            fontSize: Math.max(Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80), 36),
+            top: CARD_OFFSET_TOP,
+            left: CARD_OFFSET_LEFT,
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+          }}
+        >
+          {signatureName}
+        </p>
+      )}
+
+      <div
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          width: '100%',
+          top: CARD_OFFSET_TOP - 78,
+          left: CARD_OFFSET_LEFT,
+        }}
+      >
+        <h2
+          style={{
+            fontSize: '20px',
+            color: '#828282',
+            fontFamily: 'Inter',
+            fontWeight: 700,
+          }}
+        >
+          {isRecipient ? 'Document Signed!' : 'Document Sent!'}
+        </h2>
+      </div>
+    </div>,
+    {
+      width: IMAGE_SIZE.width,
+      height: IMAGE_SIZE.height,
+      fonts: [
+        {
+          name: 'Caveat',
+          data: caveatRegular,
+          style: 'italic',
+        },
+        {
+          name: 'Inter',
+          data: interRegular,
+          weight: 400,
+        },
+        {
+          name: 'Inter',
+          data: interSemiBold,
+          weight: 600,
+        },
+      ],
+    },
+  );
+
+  // Convert SVG to PNG using sharp
+  const pngBuffer = await sharp(Buffer.from(svg)).toFormat('png').toBuffer();
+
+  return new Response(pngBuffer, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Content-Length': pngBuffer.length.toString(),
+      'Cache-Control': 'public, max-age=31536000, immutable',
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+    },
+  });
+};

apps/remix/app/routes/_unauthenticated+/share.$slug.tsx

@@ -0,0 +1,55 @@
+import { redirect } from 'react-router';
+
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
+import type { Route } from './+types/share.$slug';
+
+// Todo: Test meta.
+export function meta({ params: { slug } }: Route.MetaArgs) {
+  return [
+    { title: 'Documenso - Share' },
+    { description: 'I just signed a document in style with Documenso!' },
+    {
+      property: 'og:title',
+      title: 'Documenso - Join the open source signing revolution',
+    },
+    {
+      property: 'og:description',
+      description: 'I just signed with Documenso!',
+    },
+    {
+      property: 'og:type',
+      type: 'website',
+    },
+    {
+      property: 'og:images',
+      images: `${NEXT_PUBLIC_WEBAPP_URL()}/share/${slug}/opengraph`,
+    },
+    {
+      name: 'twitter:site',
+      site: '@documenso',
+    },
+    {
+      name: 'twitter:card',
+      card: 'summary_large_image',
+    },
+    {
+      name: 'twitter:images',
+      images: `${NEXT_PUBLIC_WEBAPP_URL()}/share/${slug}/opengraph`,
+    },
+    {
+      name: 'twitter:description',
+      description: 'I just signed with Documenso!',
+    },
+  ];
+}
+
+export const loader = ({ request }: Route.LoaderArgs) => {
+  const userAgent = request.headers.get('User-Agent') ?? '';
+
+  if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
+    return null;
+  }
+
+  throw redirect(NEXT_PUBLIC_MARKETING_URL());
+};

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -0,0 +1,74 @@
+import { Trans } from '@lingui/react/macro';
+import { Link, redirect } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import {
+  IS_GOOGLE_SSO_ENABLED,
+  IS_OIDC_SSO_ENABLED,
+  OIDC_PROVIDER_LABEL,
+} from '@documenso/lib/constants/auth';
+import { env } from '@documenso/lib/utils/env';
+
+import { SignInForm } from '~/components/forms/signin';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/signin';
+
+export function meta() {
+  return appMetaTags('Sign In');
+}
+
+export function loader() {
+  const session = getOptionalLoaderSession();
+
+  // SSR env variables.
+  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
+  const oidcProviderLabel = OIDC_PROVIDER_LABEL;
+
+  if (session) {
+    throw redirect('/documents');
+  }
+
+  return {
+    isGoogleSSOEnabled,
+    isOIDCSSOEnabled,
+    oidcProviderLabel,
+  };
+}
+
+export default function SignIn({ loaderData }: Route.ComponentProps) {
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData;
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="border-border dark:bg-background z-10 rounded-xl border bg-neutral-100 p-6">
+        <h1 className="text-2xl font-semibold">
+          <Trans>Sign in to your account</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>Welcome back, we are lucky to have you.</Trans>
+        </p>
+        <hr className="-mx-6 my-4" />
+
+        <SignInForm
+          isGoogleSSOEnabled={isGoogleSSOEnabled}
+          isOIDCSSOEnabled={isOIDCSSOEnabled}
+          oidcProviderLabel={oidcProviderLabel}
+        />
+
+        {env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true' && (
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            <Trans>
+              Don't have an account?{' '}
+              <Link to="/signup" className="text-documenso-700 duration-200 hover:opacity-70">
+                Sign up
+              </Link>
+            </Trans>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/signup.tsx

@@ -0,0 +1,42 @@
+import { redirect } from 'react-router';
+
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { env } from '@documenso/lib/utils/env';
+
+import { SignUpForm } from '~/components/forms/signup';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/signup';
+
+export function meta() {
+  return appMetaTags('Sign Up');
+}
+
+export function loader() {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
+  // SSR env variables.
+  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
+
+  if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
+    throw redirect('/signin');
+  }
+
+  return {
+    isGoogleSSOEnabled,
+    isOIDCSSOEnabled,
+  };
+}
+
+export default function SignUp({ loaderData }: Route.ComponentProps) {
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled } = loaderData;
+
+  return (
+    <SignUpForm
+      className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
+      isGoogleSSOEnabled={isGoogleSSOEnabled}
+      isOIDCSSOEnabled={isOIDCSSOEnabled}
+    />
+  );
+}

apps/remix/app/routes/_unauthenticated+/team.decline.$token.tsx

@@ -0,0 +1,165 @@
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberInviteStatus } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { Link } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
+import { declineTeamInvitation } from '@documenso/lib/server-only/team/decline-team-invitation';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/team.decline.$token';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!teamMemberInvite) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const team = await getTeamById({ teamId: teamMemberInvite.teamId });
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: {
+        equals: teamMemberInvite.email,
+        mode: 'insensitive',
+      },
+    },
+  });
+
+  if (user) {
+    await declineTeamInvitation({ userId: user.id, teamId: team.id });
+  }
+
+  if (!user && teamMemberInvite.status !== TeamMemberInviteStatus.DECLINED) {
+    await prisma.teamMemberInvite.update({
+      where: {
+        id: teamMemberInvite.id,
+      },
+      data: {
+        status: TeamMemberInviteStatus.DECLINED,
+      },
+    });
+  }
+
+  const email = encryptSecondaryData({
+    data: teamMemberInvite.email,
+    expiresAt: DateTime.now().plus({ days: 1 }).toMillis(),
+  });
+
+  if (!user) {
+    return {
+      state: 'LoginRequired',
+      email,
+      teamName: team.name,
+    } as const;
+  }
+
+  const isSessionUserTheInvitedUser = user.id === session?.user.id;
+
+  return {
+    state: 'Success',
+    email,
+    teamName: team.name,
+    isSessionUserTheInvitedUser,
+  } as const;
+}
+
+export default function DeclineInvitationPage({ loaderData }: Route.ComponentProps) {
+  const data = loaderData;
+
+  if (data.state === 'InvalidLink') {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">
+            <Trans>Invalid token</Trans>
+          </h1>
+
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            <Trans>This token is invalid or has expired. No action is needed.</Trans>
+          </p>
+
+          <Button asChild>
+            <Link to="/">
+              <Trans>Return</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (data.state === 'LoginRequired') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team invitation</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            You have been invited by <strong>{data.teamName}</strong> to join their team.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mb-4 mt-1 text-sm">
+          <Trans>To decline this invitation you must create an account.</Trans>
+        </p>
+
+        <Button asChild>
+          <Link to={`/signup?email=${encodeURIComponent(data.email)}`}>
+            <Trans>Create account</Trans>
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <h1 className="text-4xl font-semibold">
+        <Trans>Invitation declined</Trans>
+      </h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        <Trans>
+          You have declined the invitation from <strong>{data.teamName}</strong> to join their team.
+        </Trans>
+      </p>
+
+      {data.isSessionUserTheInvitedUser ? (
+        <Button asChild>
+          <Link to="/">
+            <Trans>Return to Dashboard</Trans>
+          </Link>
+        </Button>
+      ) : (
+        <Button asChild>
+          <Link to="/">
+            <Trans>Return to Home</Trans>
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/team.invite.$token.tsx

@@ -0,0 +1,170 @@
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberInviteStatus } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { Link } from 'react-router';
+import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+
+import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
+import { acceptTeamInvitation } from '@documenso/lib/server-only/team/accept-team-invitation';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/team.invite.$token';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const session = getOptionalLoaderSession();
+
+  const { token } = params;
+
+  if (!token) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!teamMemberInvite) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  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 });
+  }
+
+  // For users who do not exist yet, 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 email = encryptSecondaryData({
+    data: teamMemberInvite.email,
+    expiresAt: DateTime.now().plus({ days: 1 }).toMillis(),
+  });
+
+  if (!user) {
+    return {
+      state: 'LoginRequired',
+      email,
+      teamName: team.name,
+    } as const;
+  }
+
+  const isSessionUserTheInvitedUser = user.id === session?.user.id;
+
+  return {
+    state: 'Success',
+    email,
+    teamName: team.name,
+    isSessionUserTheInvitedUser,
+  } as const;
+}
+
+export default function AcceptInvitationPage({ loaderData }: Route.ComponentProps) {
+  const data = loaderData;
+
+  if (data.state === 'InvalidLink') {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">
+            <Trans>Invalid token</Trans>
+          </h1>
+
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            <Trans>
+              This token is invalid or has expired. Please contact your team for a new invitation.
+            </Trans>
+          </p>
+
+          <Button asChild>
+            <Link to="/">
+              <Trans>Return</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (data.state === 'LoginRequired') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team invitation</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            You have been invited by <strong>{data.teamName}</strong> to join their team.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mb-4 mt-1 text-sm">
+          <Trans>To accept this invitation you must create an account.</Trans>
+        </p>
+
+        <Button asChild>
+          <Link to={`/signup?email=${encodeURIComponent(data.email)}`}>
+            <Trans>Create account</Trans>
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Invitation accepted!</Trans>
+      </h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        <Trans>
+          You have accepted an invitation from <strong>{data.teamName}</strong> to join their team.
+        </Trans>
+      </p>
+
+      {data.isSessionUserTheInvitedUser ? (
+        <Button asChild>
+          <Link to="/">
+            <Trans>Continue</Trans>
+          </Link>
+        </Button>
+      ) : (
+        <Button asChild>
+          <Link to={`/signin?email=${encodeURIComponent(data.email)}`}>
+            <Trans>Continue to login</Trans>
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/team.verify.email.$token.tsx

@@ -0,0 +1,176 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/team.verify.email.$token';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const teamEmailVerification = await prisma.teamEmailVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamEmailVerification || isTokenExpired(teamEmailVerification.expiresAt)) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  if (teamEmailVerification.completed) {
+    return {
+      state: 'AlreadyCompleted',
+      teamName: teamEmailVerification.team.name,
+    } as const;
+  }
+
+  const { team } = teamEmailVerification;
+
+  let isTeamEmailVerificationError = false;
+
+  try {
+    await prisma.$transaction([
+      prisma.teamEmailVerification.updateMany({
+        where: {
+          teamId: team.id,
+          email: teamEmailVerification.email,
+        },
+        data: {
+          completed: true,
+        },
+      }),
+      prisma.teamEmailVerification.deleteMany({
+        where: {
+          teamId: team.id,
+          expiresAt: {
+            lt: new Date(),
+          },
+        },
+      }),
+      prisma.teamEmail.create({
+        data: {
+          teamId: team.id,
+          email: teamEmailVerification.email,
+          name: teamEmailVerification.name,
+        },
+      }),
+    ]);
+  } catch (e) {
+    console.error(e);
+    isTeamEmailVerificationError = true;
+  }
+
+  if (isTeamEmailVerificationError) {
+    return {
+      state: 'VerificationError',
+      teamName: team.name,
+    } as const;
+  }
+
+  return {
+    state: 'Success',
+    teamName: team.name,
+  } as const;
+}
+
+export default function VerifyTeamEmailPage({ loaderData }: Route.ComponentProps) {
+  const data = loaderData;
+
+  if (data.state === 'InvalidLink') {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">
+            <Trans>Invalid link</Trans>
+          </h1>
+
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            <Trans>
+              This link is invalid or has expired. Please contact your team to resend a
+              verification.
+            </Trans>
+          </p>
+
+          <Button asChild>
+            <Link to="/">
+              <Trans>Return</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (data.state === 'AlreadyCompleted') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team email already verified!</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          <Trans>
+            You have already verified your email address for <strong>{data.teamName}</strong>.
+          </Trans>
+        </p>
+
+        <Button asChild>
+          <Link to="/">
+            <Trans>Continue</Trans>
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  if (data.state === 'VerificationError') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team email verification</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            Something went wrong while attempting to verify your email address for{' '}
+            <strong>{data.teamName}</strong>. Please try again later.
+          </Trans>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Team email verified!</Trans>
+      </h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        <Trans>
+          You have verified your email address for <strong>{data.teamName}</strong>.
+        </Trans>
+      </p>
+
+      <Button asChild>
+        <Link to="/">
+          <Trans>Continue</Trans>
+        </Link>
+      </Button>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/team.verify.transfer.token.tsx

@@ -0,0 +1,154 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { transferTeamOwnership } from '@documenso/lib/server-only/team/transfer-team-ownership';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/team.verify.transfer.token';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const teamTransferVerification = await prisma.teamTransferVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamTransferVerification || isTokenExpired(teamTransferVerification.expiresAt)) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  if (teamTransferVerification.completed) {
+    return {
+      state: 'AlreadyCompleted',
+      teamName: teamTransferVerification.team.name,
+    } as const;
+  }
+
+  const { team } = teamTransferVerification;
+
+  let isTransferError = false;
+
+  try {
+    await transferTeamOwnership({ token });
+  } catch (e) {
+    console.error(e);
+    isTransferError = true;
+  }
+
+  if (isTransferError) {
+    return {
+      state: 'TransferError',
+      teamName: team.name,
+    } as const;
+  }
+
+  return {
+    state: 'Success',
+    teamName: team.name,
+    teamUrl: team.url,
+  } as const;
+}
+
+export default function VerifyTeamTransferPage({ loaderData }: Route.ComponentProps) {
+  const data = loaderData;
+
+  if (data.state === 'InvalidLink') {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">
+            <Trans>Invalid link</Trans>
+          </h1>
+
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            <Trans>
+              This link is invalid or has expired. Please contact your team to resend a transfer
+              request.
+            </Trans>
+          </p>
+
+          <Button asChild>
+            <Link to="/">
+              <Trans>Return</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (data.state === 'AlreadyCompleted') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team ownership transfer already completed!</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          <Trans>
+            You have already completed the ownership transfer for <strong>{data.teamName}</strong>.
+          </Trans>
+        </p>
+
+        <Button asChild>
+          <Link to="/">
+            <Trans>Continue</Trans>
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  if (data.state === 'TransferError') {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">
+          <Trans>Team ownership transfer</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            Something went wrong while attempting to transfer the ownership of team{' '}
+            <strong>{data.teamName}</strong> to your. Please try again later or contact support.
+          </Trans>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Team ownership transferred!</Trans>
+      </h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        <Trans>
+          The ownership of team <strong>{data.teamName}</strong> has been successfully transferred
+          to you.
+        </Trans>
+      </p>
+
+      <Button asChild>
+        <Link to={`/t/${data.teamUrl}/settings`}>
+          <Trans>Continue</Trans>
+        </Link>
+      </Button>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/unverified-account.tsx

@@ -0,0 +1,37 @@
+import { Trans } from '@lingui/react/macro';
+import { Mails } from 'lucide-react';
+
+import { SendConfirmationEmailForm } from '~/components/forms/send-confirmation-email';
+
+export default function UnverifiedAccount() {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="flex items-start">
+        <div className="mr-4 mt-1 hidden md:block">
+          <Mails className="text-primary h-10 w-10" strokeWidth={2} />
+        </div>
+        <div className="">
+          <h2 className="text-2xl font-bold md:text-4xl">
+            <Trans>Confirm email</Trans>
+          </h2>
+
+          <p className="text-muted-foreground mt-4">
+            <Trans>
+              To gain access to your account, please confirm your email address by clicking on the
+              confirmation link from your inbox.
+            </Trans>
+          </p>
+
+          <p className="text-muted-foreground mt-4">
+            <Trans>
+              If you don't find the confirmation link in your inbox, you can request a new one
+              below.
+            </Trans>
+          </p>
+
+          <SendConfirmationEmailForm />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/verify-email.$token.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangle, CheckCircle2, Loader, XCircle } from 'lucide-react';
+import { Link, redirect, useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { authClient } from '@documenso/auth/client';
+import { EMAIL_VERIFICATION_STATE } from '@documenso/lib/constants/email';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import type { Route } from './+types/verify-email.$token';
+
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { token } = params;
+
+  if (!token) {
+    throw redirect('/verify-email');
+  }
+
+  return {
+    token,
+  };
+};
+
+export default function VerifyEmailPage({ loaderData }: Route.ComponentProps) {
+  const { token } = loaderData;
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  const [state, setState] = useState<keyof typeof EMAIL_VERIFICATION_STATE | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const verifyToken = async () => {
+    setIsLoading(true);
+
+    try {
+      const response = await authClient.emailPassword.verifyEmail({
+        token,
+      });
+
+      setState(response.state);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to verify your email at this time.`),
+      });
+
+      await navigate('/verify-email');
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    void verifyToken();
+  }, []);
+
+  if (isLoading || state === null) {
+    return (
+      <div className="relative">
+        <Loader className="text-documenso h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  return match(state)
+    .with(EMAIL_VERIFICATION_STATE.NOT_FOUND, () => (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">
+              <Trans>Something went wrong</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mt-4">
+              <Trans>
+                We were unable to verify your email. If your email is not verified already, please
+                try again.
+              </Trans>
+            </p>
+
+            <Button className="mt-4" asChild>
+              <Link to="/">
+                <Trans>Go back home</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    ))
+    .with(EMAIL_VERIFICATION_STATE.EXPIRED, () => (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">
+              <Trans>Your token has expired!</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mt-4">
+              <Trans>
+                It seems that the provided token has expired. We've just sent you another token,
+                please check your email and try again.
+              </Trans>
+            </p>
+
+            <Button className="mt-4" asChild>
+              <Link to="/">
+                <Trans>Go back home</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    ))
+    .with(EMAIL_VERIFICATION_STATE.VERIFIED, () => (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">
+              <Trans>Email Confirmed!</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mt-4">
+              <Trans>
+                Your email has been successfully confirmed! You can now use all features of
+                Documenso.
+              </Trans>
+            </p>
+
+            <Button className="mt-4" asChild>
+              <Link to="/">
+                <Trans>Continue</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    ))
+    .with(EMAIL_VERIFICATION_STATE.ALREADY_VERIFIED, () => (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">
+              <Trans>Email already confirmed</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mt-4">
+              <Trans>
+                Your email has already been confirmed. You can now use all features of Documenso.
+              </Trans>
+            </p>
+
+            <Button className="mt-4" asChild>
+              <Link to="/">
+                <Trans>Go back home</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    ))
+    .exhaustive();
+}

apps/remix/app/routes/_unauthenticated+/verify-email._index.tsx

@@ -0,0 +1,42 @@
+import { Trans } from '@lingui/react/macro';
+import { XCircle } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Verify Email');
+}
+
+export default function EmailVerificationWithoutTokenPage() {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="flex w-full items-start">
+        <div className="mr-4 mt-1 hidden md:block">
+          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+        </div>
+
+        <div>
+          <h2 className="text-2xl font-bold md:text-4xl">
+            <Trans>Uh oh! Looks like you're missing a token</Trans>
+          </h2>
+
+          <p className="text-muted-foreground mt-4">
+            <Trans>
+              It seems that there is no token provided, if you are trying to verify your email
+              please follow the link in your email.
+            </Trans>
+          </p>
+
+          <Button className="mt-4" asChild>
+            <Link to="/">
+              <Trans>Go back home</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/api+/avatar.$id.tsx

@@ -0,0 +1,40 @@
+import { getAvatarImage } from '@documenso/lib/server-only/profile/get-avatar-image';
+
+import type { Route } from './+types/avatar.$id';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { id } = params;
+
+  if (typeof id !== 'string') {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Missing id',
+      },
+      { status: 400 },
+    );
+  }
+
+  const result = await getAvatarImage({ id });
+
+  if (!result) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Not found',
+      },
+      { status: 404 },
+    );
+  }
+
+  // res.setHeader('Content-Type', result.contentType);
+  // res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+  // res.send(result.content);
+
+  return new Response(result.content, {
+    headers: {
+      'Content-Type': result.contentType,
+      'Cache-Control': 'public, max-age=31536000, immutable',
+    },
+  });
+}

apps/remix/app/routes/api+/branding.logo.team.$teamId.ts

@@ -0,0 +1,73 @@
+import sharp from 'sharp';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+
+import type { Route } from './+types/branding.logo.team.$teamId';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const teamId = Number(params.teamId);
+
+  if (teamId === 0 || Number.isNaN(teamId)) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Invalid team ID',
+      },
+      { status: 400 },
+    );
+  }
+
+  const settings = await prisma.teamGlobalSettings.findFirst({
+    where: {
+      teamId,
+    },
+  });
+
+  if (!settings || !settings.brandingEnabled) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Not found',
+      },
+      { status: 404 },
+    );
+  }
+
+  if (!settings.brandingLogo) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Not found',
+      },
+      { status: 404 },
+    );
+  }
+
+  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
+
+  if (!file) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Not found',
+      },
+      { status: 404 },
+    );
+  }
+
+  const img = await sharp(file)
+    .toFormat('png', {
+      quality: 80,
+    })
+    .toBuffer();
+
+  return new Response(img, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Content-Length': img.length.toString(),
+      // Stale while revalidate for 1 hours to 24 hours
+      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+    },
+  });
+}

apps/remix/app/routes/api+/health.ts

@@ -0,0 +1,22 @@
+import { prisma } from '@documenso/prisma';
+
+export async function loader() {
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+
+    return Response.json({
+      status: 'ok',
+      message: 'All systems operational',
+    });
+  } catch (err) {
+    console.error(err);
+
+    return Response.json(
+      {
+        status: 'error',
+        message: err instanceof Error ? err.message : 'Unknown error',
+      },
+      { status: 500 },
+    );
+  }
+}

apps/remix/app/routes/api+/limits.tsx

@@ -0,0 +1,7 @@
+import { limitsHandler } from '@documenso/ee/server-only/limits/handler';
+
+import type { Route } from './+types/limits';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return limitsHandler(request);
+}

apps/remix/app/routes/api+/locale.tsx

@@ -0,0 +1,19 @@
+import type { ActionFunctionArgs } from 'react-router';
+
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
+
+import { langCookie } from '~/storage/lang-cookie.server';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const formData = await request.formData();
+  const lang = formData.get('lang') || '';
+
+  if (!APP_I18N_OPTIONS.supportedLangs.find((l) => l === lang)) {
+    throw new Response('Unsupported language', { status: 400 });
+  }
+
+  return new Response('OK', {
+    status: 200,
+    headers: { 'Set-Cookie': await langCookie.serialize(lang) },
+  });
+};

apps/remix/app/routes/api+/share.ts

@@ -0,0 +1,27 @@
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+
+import type { Route } from './+types/share';
+
+export type ShareHandlerAPIResponse =
+  | Awaited<ReturnType<typeof getRecipientOrSenderByShareLinkSlug>>
+  | { error: string };
+
+// Todo: Test
+export async function loader({ request }: Route.LoaderArgs) {
+  try {
+    const url = new URL(request.url);
+    const slug = url.searchParams.get('slug');
+
+    if (typeof slug !== 'string') {
+      throw new Error('Invalid slug');
+    }
+
+    const data = await getRecipientOrSenderByShareLinkSlug({
+      slug,
+    });
+
+    return Response.json(data);
+  } catch (error) {
+    return Response.json({ error: 'Not found' }, { status: 404 });
+  }
+}

apps/remix/app/routes/api+/stripe.webhook.ts

@@ -0,0 +1,11 @@
+import { stripeWebhookHandler } from '@documenso/ee/server-only/stripe/webhook/handler';
+
+// Todo
+// export const config = {
+//   api: { bodyParser: false },
+// };
+import type { Route } from './+types/webhook.trigger';
+
+export async function action({ request }: Route.ActionArgs) {
+  return stripeWebhookHandler(request);
+}

apps/remix/app/routes/api+/theme.tsx

@@ -0,0 +1,5 @@
+import { createThemeAction } from 'remix-themes';
+
+import { themeSessionResolver } from '~/storage/theme-session.server';
+
+export const action = createThemeAction(themeSessionResolver);

apps/remix/app/routes/api+/webhook.trigger.ts

@@ -0,0 +1,17 @@
+import { handlerTriggerWebhooks } from '@documenso/lib/server-only/webhooks/trigger/handler';
+
+import type { Route } from './+types/webhook.trigger';
+
+// Todo
+// export const config = {
+//   maxDuration: 300,
+//   api: {
+//     bodyParser: {
+//       sizeLimit: '50mb',
+//     },
+//   },
+// };
+
+export async function action({ request }: Route.ActionArgs) {
+  return handlerTriggerWebhooks(request);
+}

apps/remix/app/routes/embed+/_layout.tsx

@@ -0,0 +1,42 @@
+import { Outlet, isRouteErrorResponse, useRouteError } from 'react-router';
+
+import { EmbedAuthenticationRequired } from '~/components/embed/embed-authentication-required';
+import { EmbedPaywall } from '~/components/embed/embed-paywall';
+
+import type { Route } from './+types/_layout';
+
+// Todo: Test
+export function headers({ loaderHeaders }: Route.HeadersArgs) {
+  const origin = loaderHeaders.get('Origin') ?? '*';
+
+  // Allow third parties to iframe the document.
+  return {
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+    'Access-Control-Allow-Origin': origin,
+    'Content-Security-Policy': `frame-ancestors ${origin}`,
+    'Referrer-Policy': 'strict-origin-when-cross-origin',
+    'X-Content-Type-Options': 'nosniff',
+  };
+}
+
+export default function Layout() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 401 && error.data.type === 'embed-authentication-required') {
+      return (
+        <EmbedAuthenticationRequired email={error.data.email} returnTo={error.data.returnTo} />
+      );
+    }
+
+    if (error.status === 403 && error.data.type === 'embed-paywall') {
+      return <EmbedPaywall />;
+    }
+  }
+
+  return <div>Not Found</div>;
+}

apps/remix/app/routes/embed+/direct.$url.tsx

@@ -0,0 +1,145 @@
+import { data } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { EmbedDirectTemplateClientPage } from '~/components/embed/embed-direct-template-client-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/direct.$url';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  if (!params.url) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.url;
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  // `template.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!template || !template.directLink) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !template.teamId) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const { user } = getLoaderSession();
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  const [isPlatformDocument, isEnterpriseDocument] = await Promise.all([
+    isDocumentPlatform(template),
+    isUserEnterprise({
+      userId: template.userId,
+      teamId: template.teamId ?? undefined,
+    }),
+  ]);
+
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: user?.email,
+        returnTo: `/embed/direct/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const { directTemplateRecipientId } = template.directLink;
+
+  const recipient = template.recipients.find(
+    (recipient) => recipient.id === directTemplateRecipientId,
+  );
+
+  if (!recipient) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);
+
+  const team = template.teamId
+    ? await getTeamById({ teamId: template.teamId, userId: template.userId }).catch(() => null)
+    : null;
+
+  const hidePoweredBy = team?.teamGlobalSettings?.brandingHidePoweredBy ?? false;
+
+  return superLoaderJson({
+    token,
+    user,
+    template,
+    recipient,
+    fields,
+    hidePoweredBy,
+    isPlatformDocument,
+    isEnterpriseDocument,
+  });
+}
+
+export default function EmbedDirectTemplatePage() {
+  const {
+    token,
+    user,
+    template,
+    recipient,
+    fields,
+    hidePoweredBy,
+    isPlatformDocument,
+    isEnterpriseDocument,
+  } = useSuperLoaderData<typeof loader>();
+
+  return (
+    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentSigningAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EmbedDirectTemplateClientPage
+          token={token}
+          updatedAt={template.updatedAt}
+          documentData={template.templateDocumentData}
+          recipient={recipient}
+          fields={fields}
+          metadata={template.templateMeta}
+          hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+          isPlatformOrEnterprise={isPlatformDocument || isEnterpriseDocument}
+        />
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}

apps/remix/app/routes/embed+/sign.$url.tsx

@@ -0,0 +1,147 @@
+import { DocumentStatus } from '@prisma/client';
+import { data } from 'react-router';
+import { getLoaderSession } from 'server/utils/get-loader-session';
+import { match } from 'ts-pattern';
+
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { EmbedSignDocumentClientPage } from '~/components/embed/embed-document-signing-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/sign.$url';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  if (!params.url) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.url;
+
+  const { user } = getLoaderSession();
+
+  const [document, fields, recipient] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+      userId: user?.id,
+      requireAccessAuth: false,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  // `document.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!document || !recipient) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !document.teamId) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const [isPlatformDocument, isEnterpriseDocument] = await Promise.all([
+    isDocumentPlatform(document),
+    isUserEnterprise({
+      userId: document.userId,
+      teamId: document.teamId ?? undefined,
+    }),
+  ]);
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+  });
+
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: user?.email || recipient.email,
+        returnTo: `/embed/sign/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const team = document.teamId
+    ? await getTeamById({ teamId: document.teamId, userId: document.userId }).catch(() => null)
+    : null;
+
+  const hidePoweredBy = team?.teamGlobalSettings?.brandingHidePoweredBy ?? false;
+
+  return superLoaderJson({
+    token,
+    user,
+    document,
+    recipient,
+    fields,
+    hidePoweredBy,
+    isPlatformDocument,
+    isEnterpriseDocument,
+  });
+}
+
+export default function EmbedSignDocumentPage() {
+  const {
+    token,
+    user,
+    document,
+    recipient,
+    fields,
+    hidePoweredBy,
+    isPlatformDocument,
+    isEnterpriseDocument,
+  } = useSuperLoaderData<typeof loader>();
+
+  return (
+    <DocumentSigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EmbedSignDocumentClientPage
+          token={token}
+          documentId={document.id}
+          documentData={document.documentData}
+          recipient={recipient}
+          fields={fields}
+          metadata={document.documentMeta}
+          isCompleted={document.status === DocumentStatus.COMPLETED}
+          hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+          isPlatformOrEnterprise={isPlatformDocument || isEnterpriseDocument}
+        />
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}