feat: add organisations (#1820)

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

@@ -1,15 +1,20 @@
-import { Outlet, redirect } from 'react-router';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Link, Outlet, redirect } from 'react-router';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getLimits } from '@documenso/ee/server-only/limits/client';
-import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 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 { Button } from '@documenso/ui/primitives/button';
 
 import { AppBanner } from '~/components/general/app-banner';
 import { Header } from '~/components/general/app-header';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { OrganisationBillingBanner } from '~/components/general/organisations/organisation-billing-banner';
 import { VerifyEmailBanner } from '~/components/general/verify-email-banner';
+import { TeamProvider } from '~/providers/team';
 
 import type { Route } from './+types/_layout';
 
@@ -21,45 +26,96 @@ import type { Route } from './+types/_layout';
 export const shouldRevalidate = () => false;
 
 export async function loader({ request }: Route.LoaderArgs) {
-  const requestHeaders = Object.fromEntries(request.headers.entries());
-
-  const session = await getOptionalSession(request);
-
-  if (!session.isAuthenticated) {
-    throw redirect('/signin');
-  }
-
-  const [limits, banner] = await Promise.all([
-    getLimits({ headers: requestHeaders }),
+  const [session, banner] = await Promise.all([
+    getOptionalSession(request),
     getSiteSettings().then((settings) =>
       settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
     ),
   ]);
 
+  if (!session.isAuthenticated) {
+    throw redirect('/signin');
+  }
+
   return {
     banner,
-    limits,
   };
 }
 
-export default function Layout({ loaderData }: Route.ComponentProps) {
-  const { user, teams } = useSession();
+export default function Layout({ loaderData, params }: Route.ComponentProps) {
+  const { banner } = loaderData;
 
-  const { banner, limits } = loaderData;
+  const { user, organisations } = useSession();
+
+  const teamUrl = params.teamUrl;
+  const orgUrl = params.orgUrl;
+
+  const teams = organisations.flatMap((org) => org.teams);
+
+  const extractCurrentOrganisation = () => {
+    if (orgUrl) {
+      return organisations.find((org) => org.url === orgUrl);
+    }
+
+    // Search organisations to find the team since we don't have access to the orgUrl in the URL.
+    if (teamUrl) {
+      return organisations.find((org) => org.teams.some((team) => team.url === teamUrl));
+    }
+
+    return null;
+  };
+
+  const currentTeam = teams.find((team) => team.url === teamUrl);
+  const currentOrganisation = extractCurrentOrganisation() || null;
+
+  const orgNotFound = params.orgUrl && !currentOrganisation;
+  const teamNotFound = params.teamUrl && !currentTeam;
+
+  if (orgNotFound || teamNotFound) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: orgNotFound
+            ? {
+                heading: msg`Organisation not found`,
+                subHeading: msg`404 Organisation not found`,
+                message: msg`The organisation you are looking for may have been removed, renamed or may have never
+                  existed.`,
+              }
+            : {
+                heading: msg`Team not found`,
+                subHeading: msg`404 Team not found`,
+                message: msg`The team you are looking for may have been removed, renamed or may have never
+                  existed.`,
+              },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to="/">
+              <Trans>Go home</Trans>
+            </Link>
+          </Button>
+        }
+      />
+    );
+  }
 
   return (
-    <LimitsProvider initialValue={limits}>
-      <div id="portal-header"></div>
+    <OrganisationProvider organisation={currentOrganisation}>
+      <TeamProvider team={currentTeam || null}>
+        <OrganisationBillingBanner />
 
-      {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
+        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
-      {banner && <AppBanner banner={banner} />}
+        {banner && <AppBanner banner={banner} />}
 
-      <Header user={user} teams={teams} />
+        <Header />
 
-      <main className="mt-8 pb-8 md:mt-12 md:pb-12">
-        <Outlet />
-      </main>
-    </LimitsProvider>
+        <main className="mt-8 pb-8 md:mt-12 md:pb-12">
+          <Outlet />
+        </main>
+      </TeamProvider>
+    </OrganisationProvider>
   );
 }

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

@@ -1,5 +1,13 @@
 import { Trans } from '@lingui/react/macro';
-import { BarChart3, FileStack, Settings, Trophy, Users, Wallet2 } from 'lucide-react';
+import {
+  BarChart3,
+  Building2Icon,
+  FileStack,
+  Settings,
+  Trophy,
+  Users,
+  Wallet2,
+} from 'lucide-react';
 import { Link, Outlet, redirect, useLocation } from 'react-router';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
@@ -13,7 +21,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
   if (!user || !isAdmin(user)) {
-    throw redirect('/documents');
+    throw redirect('/');
   }
 }
 
@@ -21,8 +29,12 @@ 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="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">
+        <Trans>Admin Panel</Trans>
+      </h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-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',
@@ -42,6 +54,34 @@ export default function AdminLayout() {
             </Link>
           </Button>
 
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/organisations') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/organisations">
+              <Building2Icon className="mr-2 h-5 w-5" />
+              <Trans>Organisations</Trans>
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/claims') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/claims">
+              <Wallet2 className="mr-2 h-5 w-5" />
+              <Trans>Claims</Trans>
+            </Link>
+          </Button>
+
           <Button
             variant="ghost"
             className={cn(
@@ -70,20 +110,6 @@ export default function AdminLayout() {
             </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(

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

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { useLocation, useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { ClaimCreateDialog } from '~/components/dialogs/claim-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { AdminClaimsTable } from '~/components/tables/admin-claims-table';
+
+export default function Claims() {
+  const { t } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  /**
+   * 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={t`Subscription Claims`}
+        subtitle={t`Manage all subscription claims`}
+        hideDivider
+      >
+        <ClaimCreateDialog />
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t`Search by claim ID or name`}
+          className="mb-4"
+        />
+
+        <AdminClaimsTable />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,571 @@
+import { useMemo } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { ExternalLinkIcon, InfoIcon, Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Link, useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { SUBSCRIPTION_STATUS_MAP } from '@documenso/lib/constants/billing';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
+import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
+import { ZUpdateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/update-admin-organisation.types';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+import type { Route } from './+types/organisations.$id';
+
+export default function OrganisationGroupSettingsPage({ params }: Route.ComponentProps) {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const organisationId = params.id;
+
+  const { data: organisation, isLoading: isLoadingOrganisation } =
+    trpc.admin.organisation.get.useQuery({
+      organisationId,
+    });
+
+  const { mutateAsync: createStripeCustomer, isPending: isCreatingStripeCustomer } =
+    trpc.admin.stripe.createCustomer.useMutation({
+      onSuccess: async () => {
+        await navigate(0);
+
+        toast({
+          title: t`Success`,
+          description: t`Stripe customer created successfully`,
+        });
+      },
+      onError: () => {
+        toast({
+          title: t`Error`,
+          description: t`We couldn't create a Stripe customer. Please try again.`,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const teamsColumns = useMemo(() => {
+    return [
+      {
+        header: t`Team`,
+        accessorKey: 'name',
+      },
+      {
+        header: t`Team url`,
+        accessorKey: 'url',
+      },
+    ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['teams'][number]>[];
+  }, []);
+
+  const organisationMembersColumns = useMemo(() => {
+    return [
+      {
+        header: t`Member`,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.name}</Link>
+            {row.original.user.id === organisation?.ownerUserId && <Badge>Owner</Badge>}
+          </div>
+        ),
+      },
+      {
+        header: t`Email`,
+        cell: ({ row }) => (
+          <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.email}</Link>
+        ),
+      },
+    ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['members'][number]>[];
+  }, [organisation]);
+
+  if (isLoadingOrganisation) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!organisation) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Organisation not found`,
+            subHeading: msg`404 Organisation not found`,
+            message: msg`The organisation you are looking for may have been removed, renamed or may have never
+                    existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/admin/organisations`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Manage organisation`}
+        subtitle={t`Manage the ${organisation.name} organisation`}
+      />
+
+      <GenericOrganisationAdminForm organisation={organisation} />
+
+      <SettingsHeader
+        title={t`Manage subscription`}
+        subtitle={t`Manage the ${organisation.name} organisation subscription`}
+        className="mt-16"
+      />
+
+      <Alert
+        className="my-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>Subscription</Trans>
+          </AlertTitle>
+
+          <AlertDescription className="mr-2">
+            {organisation.subscription ? (
+              <span>
+                {SUBSCRIPTION_STATUS_MAP[organisation.subscription.status]} subscription found
+              </span>
+            ) : (
+              <span>No subscription found</span>
+            )}
+          </AlertDescription>
+        </div>
+
+        {!organisation.customerId && (
+          <div>
+            <Button
+              variant="outline"
+              loading={isCreatingStripeCustomer}
+              onClick={async () => createStripeCustomer({ organisationId })}
+            >
+              <Trans>Create Stripe customer</Trans>
+            </Button>
+          </div>
+        )}
+
+        {organisation.customerId && !organisation.subscription && (
+          <div>
+            <Button variant="outline" asChild>
+              <Link
+                target="_blank"
+                to={`https://dashboard.stripe.com/customers/${organisation.customerId}?create=subscription&subscription_default_customer=${organisation.customerId}`}
+              >
+                <Trans>Create subscription</Trans>
+                <ExternalLinkIcon className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
+        )}
+
+        {organisation.subscription && (
+          <div>
+            <Button variant="outline" asChild>
+              <Link
+                target="_blank"
+                to={`https://dashboard.stripe.com/subscriptions/${organisation.subscription.planId}`}
+              >
+                <Trans>Manage subscription</Trans>
+                <ExternalLinkIcon className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
+        )}
+      </Alert>
+
+      <OrganisationAdminForm organisation={organisation} />
+
+      <div className="mt-16 space-y-10">
+        <div>
+          <label className="text-sm font-medium leading-none">
+            <Trans>Organisation Members</Trans>
+          </label>
+
+          <div className="my-2">
+            <DataTable columns={organisationMembersColumns} data={organisation.members} />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-sm font-medium leading-none">
+            <Trans>Organisation Teams</Trans>
+          </label>
+
+          <div className="my-2">
+            <DataTable columns={teamsColumns} data={organisation.teams} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ZUpdateGenericOrganisationDataFormSchema =
+  ZUpdateAdminOrganisationRequestSchema.shape.data.pick({
+    name: true,
+    url: true,
+  });
+
+type TUpdateGenericOrganisationDataFormSchema = z.infer<
+  typeof ZUpdateGenericOrganisationDataFormSchema
+>;
+
+type OrganisationAdminFormOptions = {
+  organisation: TGetAdminOrganisationResponse;
+};
+
+const GenericOrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const { mutateAsync: updateOrganisation } = trpc.admin.organisation.update.useMutation();
+
+  const form = useForm<TUpdateGenericOrganisationDataFormSchema>({
+    resolver: zodResolver(ZUpdateGenericOrganisationDataFormSchema),
+    defaultValues: {
+      name: organisation.name,
+      url: organisation.url,
+    },
+  });
+
+  const onSubmit = async (data: TUpdateGenericOrganisationDataFormSchema) => {
+    try {
+      await updateOrganisation({
+        organisationId: organisation.id,
+        data,
+      });
+
+      toast({
+        title: t`Success`,
+        description: t`Organisation has been updated successfully`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      toast({
+        title: t`An error occurred`,
+        description: t`We couldn't update the organisation. Please try again.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>
+                <Trans>Organisation Name</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>
+                <Trans>Organisation URL</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              {!form.formState.errors.url && (
+                <span className="text-foreground/50 text-xs font-normal">
+                  {field.value ? (
+                    `${NEXT_PUBLIC_WEBAPP_URL()}/o/${field.value}`
+                  ) : (
+                    <Trans>A unique URL to identify the organisation</Trans>
+                  )}
+                </span>
+              )}
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end">
+          <Button type="submit" loading={form.formState.isSubmitting}>
+            <Trans>Update</Trans>
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+const ZUpdateOrganisationBillingFormSchema = ZUpdateAdminOrganisationRequestSchema.shape.data.pick({
+  claims: true,
+  customerId: true,
+  originalSubscriptionClaimId: true,
+});
+
+type TUpdateOrganisationBillingFormSchema = z.infer<typeof ZUpdateOrganisationBillingFormSchema>;
+
+const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const { mutateAsync: updateOrganisation } = trpc.admin.organisation.update.useMutation();
+
+  const form = useForm<TUpdateOrganisationBillingFormSchema>({
+    resolver: zodResolver(ZUpdateOrganisationBillingFormSchema),
+    defaultValues: {
+      customerId: organisation.customerId || '',
+      claims: {
+        teamCount: organisation.organisationClaim.teamCount,
+        memberCount: organisation.organisationClaim.memberCount,
+        flags: organisation.organisationClaim.flags,
+      },
+      originalSubscriptionClaimId: organisation.organisationClaim.originalSubscriptionClaimId || '',
+    },
+  });
+
+  const onSubmit = async (values: TUpdateOrganisationBillingFormSchema) => {
+    try {
+      await updateOrganisation({
+        organisationId: organisation.id,
+        data: values,
+      });
+
+      toast({
+        title: t`Success`,
+        description: t`Organisation has been updated successfully`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      toast({
+        title: t`An error occurred`,
+        description: t`We couldn't update the organisation. Please try again.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="originalSubscriptionClaimId"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center">
+                <Trans>Inherited subscription claim</Trans>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="mx-2 h-4 w-4" />
+                  </TooltipTrigger>
+
+                  <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                    <h2>
+                      <strong>
+                        <Trans>Inherited subscription claim</Trans>
+                      </strong>
+                    </h2>
+
+                    <p>
+                      <Trans>
+                        This is the claim that this organisation was initially created with. Any
+                        feature flag changes to this claim will be backported into this
+                        organisation.
+                      </Trans>
+                    </p>
+
+                    <p>
+                      <Trans>
+                        For example, if the claim has a new flag "FLAG_1" set to true, then this
+                        organisation will get that flag added.
+                      </Trans>
+                    </p>
+                    <p>
+                      <Trans>
+                        This will ONLY backport feature flags which are set to true, anything
+                        disabled in the initial claim will not be backported
+                      </Trans>
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </FormLabel>
+              <FormControl>
+                <Input disabled {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="customerId"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>
+                <Trans>Stripe Customer ID</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input {...field} placeholder={t`No Stripe customer attached`} />
+              </FormControl>
+              {!form.formState.errors.customerId && field.value && (
+                <Link
+                  target="_blank"
+                  to={`https://dashboard.stripe.com/customers/${field.value}`}
+                  className="text-foreground/50 text-xs font-normal"
+                >
+                  {`https://dashboard.stripe.com/customers/${field.value}`}
+                </Link>
+              )}
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="claims.teamCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Team Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={0}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Number of teams allowed. 0 = Unlimited</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="claims.memberCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Member Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={0}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Number of members allowed. 0 = Unlimited</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div>
+          <FormLabel>
+            <Trans>Feature Flags</Trans>
+          </FormLabel>
+
+          <div className="mt-2 space-y-2 rounded-md border p-4">
+            {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label }) => (
+              <FormField
+                key={key}
+                control={form.control}
+                name={`claims.flags.${key}`}
+                render={({ field }) => (
+                  <FormItem className="flex items-center space-x-2">
+                    <FormControl>
+                      <div className="flex items-center">
+                        <Checkbox
+                          id={`flag-${key}`}
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+
+                        <label
+                          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+                          htmlFor={`flag-${key}`}
+                        >
+                          {label}
+                        </label>
+                      </div>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <Button type="submit" loading={form.formState.isSubmitting}>
+            <Trans>Update</Trans>
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { useLocation, useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { SettingsHeader } from '~/components/general/settings-header';
+import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
+
+export default function Organisations() {
+  const { t } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  /**
+   * 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
+        hideDivider
+        title={t`Manage organisations`}
+        subtitle={t`Search and manage all organisations`}
+      />
+
+      <div className="mt-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t`Search by organisation ID, name, customer ID or owner email`}
+          className="mb-4"
+        />
+
+        <AdminOrganisationsTable />
+      </div>
+    </div>
+  );
+}

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

@@ -18,9 +18,8 @@ import {
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
-  getUserWithSignedDocumentMonthlyGrowth,
+  getOrganisationsWithSubscriptionsCount,
   getUsersCount,
-  getUsersWithSubscriptionsCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
 import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 
@@ -34,31 +33,31 @@ import type { Route } from './+types/stats';
 export async function loader() {
   const [
     usersCount,
-    usersWithSubscriptionsCount,
+    organisationsWithSubscriptionsCount,
     docStats,
     recipientStats,
     signerConversionMonthly,
     // userWithAtLeastOneDocumentPerMonth,
     // userWithAtLeastOneDocumentSignedPerMonth,
-    MONTHLY_USERS_SIGNED,
+    // MONTHLY_USERS_SIGNED,
   ] = await Promise.all([
     getUsersCount(),
-    getUsersWithSubscriptionsCount(),
+    getOrganisationsWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
     getSignerConversionMonthly(),
     // getUserWithAtLeastOneDocumentPerMonth(),
     // getUserWithAtLeastOneDocumentSignedPerMonth(),
-    getUserWithSignedDocumentMonthlyGrowth(),
+    // getUserWithSignedDocumentMonthlyGrowth(),
   ]);
 
   return {
     usersCount,
-    usersWithSubscriptionsCount,
+    organisationsWithSubscriptionsCount,
     docStats,
     recipientStats,
     signerConversionMonthly,
-    MONTHLY_USERS_SIGNED,
+    // MONTHLY_USERS_SIGNED,
   };
 }
 
@@ -67,11 +66,11 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
 
   const {
     usersCount,
-    usersWithSubscriptionsCount,
+    organisationsWithSubscriptionsCount,
     docStats,
     recipientStats,
     signerConversionMonthly,
-    MONTHLY_USERS_SIGNED,
+    // MONTHLY_USERS_SIGNED,
   } = loaderData;
 
   return (
@@ -86,7 +85,7 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
         <CardMetric
           icon={UserPlus}
           title={_(msg`Active Subscriptions`)}
-          value={usersWithSubscriptionsCount}
+          value={organisationsWithSubscriptionsCount}
         />
 
         <CardMetric icon={FileCog} title={_(msg`App Version`)} value={`v${version}`} />
@@ -149,12 +148,14 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
         </h3>
         <div className="mt-5 grid grid-cols-2 gap-8">
           <AdminStatsUsersWithDocumentsChart
-            data={MONTHLY_USERS_SIGNED}
+            data={[]}
+            // 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}
+            data={[]}
+            // data={MONTHLY_USERS_SIGNED}
             completed
             title={_(msg`MAU (had document completed)`)}
             tooltip={_(

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

@@ -1,84 +0,0 @@
-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

@@ -2,8 +2,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
+import { Link } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -18,11 +20,15 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { AdminOrganisationCreateDialog } from '~/components/dialogs/admin-organisation-create-dialog';
 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 { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
 
 import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';
 
@@ -31,11 +37,7 @@ 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(
+  const { data: user, isLoading: isLoadingUser } = trpc.profile.getUser.useQuery(
     {
       id: Number(params.id),
     },
@@ -44,7 +46,43 @@ export default function UserPage({ params }: { params: { id: number } }) {
     },
   );
 
-  const roles = user?.roles ?? [];
+  if (isLoadingUser) {
+    return <SpinnerBox className="py-32" />;
+  }
+
+  if (!user) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`User not found`,
+            subHeading: msg`404 User not found`,
+            message: msg`The user you are looking for may have been removed, renamed or may have never
+                    existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/admin/users`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return <AdminUserPage user={user} />;
+}
+
+const AdminUserPage = ({ user }: { user: User }) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const roles = user.roles ?? [];
 
   const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
 
@@ -151,13 +189,41 @@ export default function UserPage({ params }: { params: { id: number } }) {
         </form>
       </Form>
 
-      <hr className="my-4" />
+      <hr className="my-8" />
 
-      <div className="flex flex-col items-center gap-4">
+      <div>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold leading-none tracking-tight">
+              <Trans>User Organisations</Trans>
+            </h3>
+            <p className="text-muted-foreground mt-1.5 text-sm">
+              <Trans>Organisations that the user is a member of.</Trans>
+            </p>
+          </div>
+
+          <AdminOrganisationCreateDialog
+            ownerUserId={user.id}
+            trigger={
+              <Button variant="outline" size="sm">
+                <Trans>Create Organisation</Trans>
+              </Button>
+            }
+          />
+        </div>
+
+        <AdminOrganisationsTable
+          memberUserId={user.id}
+          showOwnerColumn={false}
+          hidePaginationUntilOverflow
+        />
+      </div>
+
+      <div className="mt-16 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

@@ -1,7 +1,5 @@
 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';
@@ -15,24 +13,20 @@ export async function loader({ request }: Route.LoaderArgs) {
   const perPage = Number(url.searchParams.get('perPage')) || 10;
   const search = url.searchParams.get('search') || '';
 
-  const [{ users, totalPages }, individualPrices] = await Promise.all([
+  const [{ users, totalPages }] = 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;
+  const { users, totalPages, page, perPage } = loaderData;
 
   return (
     <div>
@@ -42,7 +36,6 @@ export default function AdminManageUsersPage({ loaderData }: Route.ComponentProp
 
       <AdminDashboardUsersTable
         users={users}
-        individualPriceIds={individualPriceIds}
         totalPages={totalPages}
         page={page}
         perPage={perPage}

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

@@ -0,0 +1,263 @@
+import { useMemo } from 'react';
+
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import { Building2Icon, InboxIcon, SettingsIcon, UsersIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ScrollArea, ScrollBar } from '@documenso/ui/primitives/scroll-area';
+
+import { OrganisationInvitations } from '~/components/general/organisations/organisation-invitations';
+import { InboxTable } from '~/components/tables/inbox-table';
+import { appMetaTags } from '~/utils/meta';
+
+export function loader() {
+  throw redirect('/');
+}
+
+export function meta() {
+  return appMetaTags('Dashboard');
+}
+
+export default function DashboardPage() {
+  const { t } = useLingui();
+
+  const { user, organisations } = useSession();
+
+  // Todo: Sort by recent access (TBD by cookies)
+  // Teams, flattened with the organisation data still attached.
+  const teams = useMemo(() => {
+    return organisations.flatMap((org) =>
+      org.teams.map((team) => ({
+        ...team,
+        organisation: {
+          ...org,
+          teams: undefined,
+        },
+      })),
+    );
+  }, [organisations]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="container">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold">
+            <Trans>Dashboard</Trans>
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            <Trans>Welcome back! Here's an overview of your account.</Trans>
+          </p>
+
+          <OrganisationInvitations className="mt-4" />
+        </div>
+
+        {organisations.length === 0 && (
+          <div className="mb-12 mt-6 flex flex-col items-center justify-center rounded-lg border py-32">
+            <Building2Icon className="h-10 w-10" />
+
+            <div className="mt-2 flex flex-col items-center gap-0.5">
+              <p className="font-semibold">
+                <Trans>No organisations found</Trans>
+              </p>
+              <p className="text-muted-foreground text-sm">
+                <Trans>Create an organisation to get started.</Trans>
+              </p>
+            </div>
+
+            <Button asChild className="mt-4" variant="outline">
+              <Link to="/settings/organisations?action=add-organisation">
+                <Trans>Create organisation</Trans>
+              </Link>
+            </Button>
+          </div>
+        )}
+
+        {/* Organisations Section */}
+        {organisations.length > 1 && (
+          <div className="mb-8">
+            <div className="mb-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Building2Icon className="text-muted-foreground h-5 w-5" />
+                <h2 className="text-xl font-semibold">
+                  <Trans>Organisations</Trans>
+                </h2>
+              </div>
+
+              {/* Right hand side action if required. */}
+              {/* <Button variant="outline" size="sm" className="gap-1">
+                <PlusIcon className="h-4 w-4" />
+                <Trans>New</Trans>
+              </Button> */}
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {organisations.map((org) => (
+                <div key={org.id} className="group relative">
+                  <Link to={`/o/${org.url}`}>
+                    <Card className="hover:bg-muted/50 h-full border pr-6 transition-all">
+                      <CardContent className="p-4">
+                        <div className="flex items-center gap-3">
+                          <Avatar className="h-10 w-10 border border-solid">
+                            {org.avatarImageId && (
+                              <AvatarImage src={formatAvatarUrl(org.avatarImageId)} />
+                            )}
+                            <AvatarFallback className="text-sm text-gray-400">
+                              {org.name.slice(0, 1).toUpperCase()}
+                            </AvatarFallback>
+                          </Avatar>
+
+                          <div className="flex-1">
+                            <h3 className="font-medium">{org.name}</h3>
+                            <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
+                              <div className="flex items-center gap-1">
+                                <UsersIcon className="h-3 w-3" />
+                                <span>
+                                  {org.ownerUserId === user.id
+                                    ? t`Owner`
+                                    : t(ORGANISATION_MEMBER_ROLE_MAP[org.currentOrganisationRole])}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Building2Icon className="h-3 w-3" />
+                                <span>
+                                  <Plural
+                                    value={org.teams.length}
+                                    one={<Trans># team</Trans>}
+                                    other={<Trans># teams</Trans>}
+                                  />
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+
+                  {canExecuteOrganisationAction(
+                    'MANAGE_ORGANISATION',
+                    org.currentOrganisationRole,
+                  ) && (
+                    <div className="text-muted-foreground absolute right-4 top-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <Link to={`/o/${org.url}/settings`}>
+                        <SettingsIcon className="h-4 w-4" />
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Teams Section */}
+        {teams.length >= 1 && (
+          <div className="mb-8">
+            <div className="mb-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <UsersIcon className="text-muted-foreground h-5 w-5" />
+                <h2 className="text-xl font-semibold">
+                  <Trans>Teams</Trans>
+                </h2>
+              </div>
+              {/* <Button variant="ghost" size="sm" asChild>
+              <Link to="/" className="gap-1">
+                <Trans>View all</Trans>
+                <ChevronRightIcon className="h-4 w-4" />
+              </Link>
+            </Button> */}
+            </div>
+
+            <ScrollArea className="w-full whitespace-nowrap pb-4">
+              <div className="flex gap-4">
+                {teams.map((team) => (
+                  <div key={team.id} className="group relative">
+                    <Link to={`/t/${team.url}`}>
+                      <Card className="hover:bg-muted/50 w-[350px] shrink-0 border transition-all">
+                        <CardContent className="p-4">
+                          <div className="flex items-center gap-3">
+                            <Avatar className="h-10 w-10 border border-solid">
+                              {team.avatarImageId && (
+                                <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
+                              )}
+                              <AvatarFallback className="text-sm text-gray-400">
+                                {team.name.slice(0, 1).toUpperCase()}
+                              </AvatarFallback>
+                            </Avatar>
+
+                            <div className="flex-1">
+                              <h3 className="font-medium">{team.name}</h3>
+                              <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
+                                <div className="flex items-center gap-1">
+                                  <UsersIcon className="h-3 w-3" />
+                                  {team.organisation.ownerUserId === user.id
+                                    ? t`Owner`
+                                    : t(TEAM_MEMBER_ROLE_MAP[team.currentTeamRole])}
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <Building2Icon className="h-3 w-3" />
+                                  <span className="truncate">{team.organisation.name}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div className="text-muted-foreground mt-3 text-xs">
+                            <Trans>
+                              Joined{' '}
+                              {DateTime.fromJSDate(team.createdAt).toRelative({ style: 'short' })}
+                            </Trans>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+
+                    {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
+                      <div className="text-muted-foreground absolute right-4 top-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                        <Link to={`/t/${team.url}/settings`}>
+                          <SettingsIcon className="h-4 w-4" />
+                        </Link>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        )}
+
+        {/* Inbox Section */}
+        <div>
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <InboxIcon className="text-muted-foreground h-5 w-5" />
+              <h2 className="text-xl font-semibold">
+                <Trans>Personal Inbox</Trans>
+              </h2>
+            </div>
+            {/* <Button variant="ghost" size="sm" asChild>
+              <Link to="/inbox" className="gap-1">
+                <span>
+                  <Trans>View all</Trans>
+                </span>
+                <ChevronRightIcon className="h-4 w-4" />
+              </Link>
+            </Button> */}
+          </div>
+
+          <InboxTable />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,273 +0,0 @@
-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 { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/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 { 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/documents.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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);
-  }
-
-  if (document?.folderId) {
-    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);
-  }
-
-  // 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">
-            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
-          </CardContent>
-        </Card>
-
-        {document.status !== DocumentStatus.COMPLETED && (
-          <DocumentReadOnlyFields
-            fields={fields}
-            documentMeta={documentMeta || undefined}
-            showRecipientTooltip={true}
-            showRecipientColors={true}
-            recipientIds={recipients.map((recipient) => recipient.id)}
-          />
-        )}
-
-        <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.REJECTED, () => (
-                    <Trans>This document has been rejected by a recipient</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

@@ -1,160 +0,0 @@
-import { Plural, Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Users2 } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
-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 { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
-import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/documents.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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);
-  }
-
-  if (document?.folderId) {
-    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 (isDocumentCompleted(document.status)) {
-    throw redirect(`${documentRootPath}/${documentId}`);
-  }
-
-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    document: {
-      ...document,
-      folder: null,
-    },
-    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>
-
-      <div className="mt-4 flex w-full items-end justify-between">
-        <div className="flex-1">
-          <h1
-            className="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>
-        </div>
-
-        {document.useLegacyFieldInsertion && (
-          <div>
-            <LegacyFieldWarningPopover type="document" documentId={document.id} />
-          </div>
-        )}
-      </div>
-
-      <DocumentEditForm
-        className="mt-6"
-        initialDocument={document}
-        documentRootPath={documentRootPath}
-        isDocumentEnterprise={isDocumentEnterprise}
-      />
-    </div>
-  );
-}

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

@@ -1,190 +0,0 @@
-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 { getSession } from '@documenso/auth/server/lib/utils/get-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-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/documents.$id.logs';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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 || !document.documentData) {
-    throw redirect(documentRootPath);
-  }
-
-  if (document.folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  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">
-        <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>
-        <div className="mt-1 flex flex-col justify-between sm:flex-row">
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatusComponent
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
-          </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>
-      </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 truncate">{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

@@ -1,390 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
-import { Link } from 'react-router';
-import { z } from 'zod';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-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 { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-
-import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
-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 { FolderCard } from '~/components/general/folder/folder-card';
-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 navigate = useNavigate();
-
-  const [isMovingDocument, setIsMovingDocument] = useState(false);
-  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const team = useOptionalCurrentTeam();
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
-  });
-
-  const findDocumentSearchParams = useMemo(
-    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
-    [searchParams],
-  );
-
-  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
-    {
-      ...findDocumentSearchParams,
-    },
-  );
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    type: FolderType.DOCUMENT,
-    parentId: null,
-  });
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
-    const params = new URLSearchParams(searchParams);
-
-    params.set('status', value);
-
-    if (value === ExtendedDocumentStatus.ALL) {
-      params.delete('status');
-    }
-
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    return `${formatDocumentsPath(team?.url)}?${params.toString()}`;
-  };
-
-  useEffect(() => {
-    if (data?.stats) {
-      setStats(data.stats);
-    }
-  }, [data?.stats]);
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  const handleViewAllFolders = () => {
-    void navigate(`${formatDocumentsPath(team?.url)}/folders`);
-  };
-
-  return (
-    <DocumentDropZoneWrapper>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-1 items-center">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-              onClick={() => navigateToFolder(null)}
-            >
-              <HomeIcon className="h-4 w-4" />
-              <span>Home</span>
-            </Button>
-
-            {foldersData?.breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center space-x-2">
-                <span>/</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                  onClick={() => navigateToFolder(folder.id)}
-                >
-                  <FolderIcon className="h-4 w-4" />
-                  <span>{folder.name}</span>
-                </Button>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex gap-4 sm:flex-row sm:justify-end">
-            <DocumentUploadDropzone />
-            <CreateFolderDialog />
-          </div>
-        </div>
-
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  ?.filter((folder) => !folder.pinned)
-                  .slice(0, 12)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-
-              <div className="mt-6 flex items-center justify-center">
-                {foldersData && foldersData.folders?.length > 12 && (
-                  <Button
-                    variant="link"
-                    size="sm"
-                    className="text-muted-foreground hover:text-foreground"
-                    onClick={() => void handleViewAllFolders()}
-                  >
-                    View all folders
-                  </Button>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        <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-muted-foreground text-xs">
-                  {team.name.slice(0, 1)}
-                </AvatarFallback>
-              </Avatar>
-            )}
-
-            <h2 className="text-4xl font-semibold">
-              <Trans>Documents</Trans>
-            </h2>
-          </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 &&
-            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
-              <DocumentsTableEmptyState
-                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
-              />
-            ) : (
-              <DocumentsTable
-                data={data}
-                isLoading={isLoading}
-                isLoadingError={isLoadingError}
-                onMoveDocument={(documentId) => {
-                  setDocumentToMove(documentId);
-                  setIsMovingDocument(true);
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {documentToMove && (
-          <DocumentMoveToFolderDialog
-            documentId={documentToMove}
-            open={isMovingDocument}
-            onOpenChange={(open) => {
-              setIsMovingDocument(open);
-
-              if (!open) {
-                setDocumentToMove(null);
-              }
-            }}
-          />
-        )}
-
-        <FolderMoveDialog
-          foldersData={foldersData?.folders}
-          folder={folderToMove}
-          isOpen={isMovingFolder}
-          onOpenChange={(open) => {
-            setIsMovingFolder(open);
-
-            if (!open) {
-              setFolderToMove(null);
-            }
-          }}
-        />
-
-        <FolderSettingsDialog
-          folder={folderToSettings}
-          isOpen={isSettingsFolderOpen}
-          onOpenChange={(open) => {
-            setIsSettingsFolderOpen(open);
-
-            if (!open) {
-              setFolderToSettings(null);
-            }
-          }}
-        />
-
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      </div>
-    </DocumentDropZoneWrapper>
-  );
-}

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

@@ -1,272 +0,0 @@
-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 { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/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 { 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/documents.f.$folderId.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || !folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  const document = await getDocumentById({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).catch(() => null);
-
-  if (document?.teamId && !team?.url) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : 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(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (team && !canAccessDocument) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (document.folderId !== folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  // 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,
-    folderId,
-  });
-}
-
-export default function DocumentPage() {
-  const loaderData = useSuperLoaderData<typeof loader>();
-
-  const { _ } = useLingui();
-  const { user } = useSession();
-
-  const { document, documentRootPath, fields, folderId } = 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={folderId ? `${documentRootPath}/f/${folderId}` : 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">
-            <PDFViewer 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.REJECTED, () => (
-                    <Trans>This document has been rejected by a recipient</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.f.$folderId.$id.edit.tsx

@@ -1,155 +0,0 @@
-import { Plural, Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Users2 } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
-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/documents.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    throw redirect(documentRootPath);
-  }
-
-  if (!folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  const document = await getDocumentWithDetailsById({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).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.folderId !== folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (isDocumentCompleted(document.status)) {
-    throw redirect(`${documentRootPath}/${documentId}`);
-  }
-
-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    document: {
-      ...document,
-      folder: null,
-    },
-    documentRootPath,
-    isDocumentEnterprise,
-    folderId,
-  });
-}
-
-export default function DocumentEditPage() {
-  const { document, documentRootPath, isDocumentEnterprise, folderId } =
-    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}/f/${folderId}`}
-        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.f.$folderId.$id.logs.tsx

@@ -1,199 +0,0 @@
-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 { getSession } from '@documenso/auth/server/lib/utils/get-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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-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/documents.f.$folderId.$id.logs';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (!folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  // Todo: Get full document instead?
-  const [document, recipients] = await Promise.all([
-    getDocumentById({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-      folderId,
-    }).catch(() => null),
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }),
-  ]);
-
-  if (!document || !document.documentData) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (document.folderId !== folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  return {
-    document,
-    documentRootPath,
-    recipients,
-    folderId,
-  };
-}
-
-export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
-  const { document, documentRootPath, recipients, folderId } = 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}/f/${folderId}/${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">
-        <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>
-        <div className="mt-1 flex flex-col justify-between sm:flex-row">
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatusComponent
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
-          </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>
-      </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 truncate">{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.f.$folderId._index.tsx

@@ -1,374 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useParams, 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 { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-
-import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
-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 { FolderCard } from '~/components/general/folder/folder-card';
-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 navigate = useNavigate();
-
-  const [isMovingDocument, setIsMovingDocument] = useState(false);
-  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { folderId } = useParams();
-
-  const team = useOptionalCurrentTeam();
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
-  });
-
-  const findDocumentSearchParams = useMemo(
-    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
-    [searchParams],
-  );
-
-  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
-    {
-      ...findDocumentSearchParams,
-      folderId,
-    },
-  );
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    parentId: folderId,
-  });
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
-    const params = new URLSearchParams(searchParams);
-
-    params.set('status', value);
-
-    if (value === ExtendedDocumentStatus.ALL) {
-      params.delete('status');
-    }
-
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    return `${formatDocumentsPath(team?.url)}/f/${folderId}?${params.toString()}`;
-  };
-
-  useEffect(() => {
-    if (data?.stats) {
-      setStats(data.stats);
-    }
-  }, [data?.stats]);
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  return (
-    <DocumentDropZoneWrapper>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-1 items-center">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-              onClick={() => navigateToFolder(null)}
-            >
-              <HomeIcon className="h-4 w-4" />
-              <span>Home</span>
-            </Button>
-
-            {foldersData?.breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center space-x-2">
-                <span>/</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                  onClick={() => navigateToFolder(folder.id)}
-                >
-                  <FolderIcon className="h-4 w-4" />
-                  <span>{folder.name}</span>
-                </Button>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex gap-4 sm:flex-row sm:justify-end">
-            <DocumentUploadDropzone />
-            <CreateFolderDialog />
-          </div>
-        </div>
-
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <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-muted-foreground text-xs">
-                  {team.name.slice(0, 1)}
-                </AvatarFallback>
-              </Avatar>
-            )}
-
-            <h2 className="text-4xl font-semibold">
-              <Trans>Documents</Trans>
-            </h2>
-          </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 &&
-            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
-              <DocumentsTableEmptyState
-                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
-              />
-            ) : (
-              <DocumentsTable
-                data={data}
-                isLoading={isLoading}
-                isLoadingError={isLoadingError}
-                onMoveDocument={(documentId) => {
-                  setDocumentToMove(documentId);
-                  setIsMovingDocument(true);
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {documentToMove && (
-          <DocumentMoveToFolderDialog
-            documentId={documentToMove}
-            open={isMovingDocument}
-            onOpenChange={(open) => {
-              setIsMovingDocument(open);
-
-              if (!open) {
-                setDocumentToMove(null);
-              }
-            }}
-            currentFolderId={folderId}
-          />
-        )}
-
-        <FolderMoveDialog
-          foldersData={foldersData?.folders}
-          folder={folderToMove}
-          isOpen={isMovingFolder}
-          onOpenChange={(open) => {
-            setIsMovingFolder(open);
-
-            if (!open) {
-              setFolderToMove(null);
-            }
-          }}
-        />
-
-        <FolderSettingsDialog
-          folder={folderToSettings}
-          isOpen={isSettingsFolderOpen}
-          onOpenChange={(open) => {
-            setIsSettingsFolderOpen(open);
-
-            if (!open) {
-              setFolderToSettings(null);
-            }
-          }}
-        />
-
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      </div>
-    </DocumentDropZoneWrapper>
-  );
-}

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

@@ -1,181 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Documents');
-}
-
-export default function DocumentsFoldersPage() {
-  const navigate = useNavigate();
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
-    type: FolderType.DOCUMENT,
-    parentId: null,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath();
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <CreateFolderDialog />
-        </div>
-      </div>
-
-      <div className="mt-6">
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
-
-              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      <FolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <FolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <FolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

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

@@ -0,0 +1,31 @@
+import { Trans } from '@lingui/react/macro';
+import { InboxIcon } from 'lucide-react';
+
+import { OrganisationInvitations } from '~/components/general/organisations/organisation-invitations';
+import { InboxTable } from '~/components/tables/inbox-table';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Personal Inbox');
+}
+
+export default function InboxPage() {
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="mb-8">
+        <h1 className="flex flex-row items-center gap-2 text-3xl font-bold">
+          <InboxIcon className="text-muted-foreground h-8 w-8" />
+
+          <Trans>Personal Inbox</Trans>
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          <Trans>Any documents that you have been invited to will appear here</Trans>
+        </p>
+
+        <OrganisationInvitations className="mt-4" />
+      </div>
+
+      <InboxTable />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx

@@ -0,0 +1,223 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import {
+  ArrowRight,
+  CalendarIcon,
+  MoreVerticalIcon,
+  PlusIcon,
+  SettingsIcon,
+  TrashIcon,
+  UserIcon,
+  UsersIcon,
+} from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { canExecuteTeamAction, formatTeamUrl } from '@documenso/lib/utils/teams';
+import type { TGetOrganisationSessionResponse } from '@documenso/trpc/server/organisation-router/get-organisation-session.types';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
+import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
+
+export default function OrganisationSettingsTeamsPage() {
+  const { t, i18n } = useLingui();
+
+  const organisation = useCurrentOrganisation();
+
+  // No teams view.
+  if (organisation.teams.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center px-4 py-16">
+        <div className="bg-muted mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+          <UsersIcon className="text-muted-foreground h-10 w-10" />
+        </div>
+
+        <h2 className="mb-2 text-xl font-semibold">
+          <Trans>No teams yet</Trans>
+        </h2>
+
+        {canExecuteOrganisationAction(
+          'MANAGE_ORGANISATION',
+          organisation.currentOrganisationRole,
+        ) ? (
+          <>
+            <p className="text-muted-foreground mb-8 max-w-md text-center text-sm">
+              <Trans>
+                Teams help you organise your work and collaborate with others. Create your first
+                team to get started.
+              </Trans>
+            </p>
+
+            <TeamCreateDialog
+              trigger={
+                <Button className="flex items-center gap-2">
+                  <PlusIcon className="h-4 w-4" />
+                  <Trans>Create team</Trans>
+                </Button>
+              }
+            />
+
+            <div className="mt-12 max-w-md rounded-lg border px-8 py-6">
+              <h3 className="mb-2 font-medium">
+                <Trans>What you can do with teams:</Trans>
+              </h3>
+              <ul className="text-muted-foreground space-y-2 text-sm">
+                <li className="flex flex-row items-center gap-2">
+                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                    <span className="text-xs">1</span>
+                  </div>
+                  <Trans>Organize your documents and templates</Trans>
+                </li>
+                <li className="flex flex-row items-center gap-2">
+                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                    <span className="text-xs">2</span>
+                  </div>
+                  <Trans>Invite team members to collaborate</Trans>
+                </li>
+                <li className="flex flex-row items-center gap-2">
+                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                    <span className="text-xs">3</span>
+                  </div>
+                  <Trans>Manage permissions and access controls</Trans>
+                </li>
+              </ul>
+            </div>
+          </>
+        ) : (
+          <p className="text-muted-foreground mb-8 max-w-md text-center text-sm">
+            <Trans>
+              You currently have no access to any teams within this organisation. Please contact
+              your organisation to request access.
+            </Trans>
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-6 flex flex-row justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">
+            <Trans>{organisation.name} Teams</Trans>
+          </h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            <Trans>Select a team to view its dashboard</Trans>
+          </p>
+        </div>
+
+        <Button asChild>
+          <Link to={`/o/${organisation.url}/settings`}>Manage Organisation</Link>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {organisation.teams.map((team) => (
+          <Link to={`/t/${team.url}`} key={team.id}>
+            <Card className="hover:bg-muted/50 border-border h-full border transition-all">
+              <CardContent className="p-4">
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-10 w-10 border-2 border-solid">
+                    {team.avatarImageId && (
+                      <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
+                    )}
+                    <AvatarFallback className="text-sm text-gray-400">
+                      {team.name.slice(0, 1).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h3 className="font-medium">{team.name}</h3>
+                        <div className="text-muted-foreground truncate text-xs">
+                          {formatTeamUrl(team.url)}
+                        </div>
+                      </div>
+
+                      <TeamDropdownMenu team={team} />
+                    </div>
+
+                    <div className="mt-2 flex items-center gap-4">
+                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
+                        <CalendarIcon className="h-3 w-3" />
+                        {i18n.date(team.createdAt, { dateStyle: 'short' })}
+                      </div>
+                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
+                        <UserIcon className="h-3 w-3" />
+                        <span>{t(TEAM_MEMBER_ROLE_MAP[team.currentTeamRole])}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const TeamDropdownMenu = ({ team }: { team: TGetOrganisationSessionResponse[0]['teams'][0] }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+          <MoreVerticalIcon className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+        <DropdownMenuItem asChild>
+          <Link to={`/t/${team.url}`}>
+            <ArrowRight className="mr-2 h-4 w-4" />
+            <Trans>Go to team</Trans>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to={`/t/${team.url}/settings`}>
+            <SettingsIcon className="mr-2 h-4 w-4" />
+            <Trans>Settings</Trans>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to={`/t/${team.url}/settings/members`}>
+            <UsersIcon className="mr-2 h-4 w-4" />
+            <Trans>Members</Trans>
+          </Link>
+        </DropdownMenuItem>
+
+        {canExecuteTeamAction('DELETE_TEAM', team.currentTeamRole) && (
+          <>
+            <DropdownMenuSeparator />
+
+            <TeamDeleteDialog
+              teamId={team.id}
+              teamName={team.name}
+              trigger={
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                  <TrashIcon className="mr-2 h-4 w-4" />
+                  <Trans>Delete</Trans>
+                </DropdownMenuItem>
+              }
+            />
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

apps/remix/app/routes/_authenticated+/o.$orgUrl._layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+
+export default function Layout() {
+  const currentOrganisation = useCurrentOrganisation();
+
+  // Note: We use a key to force a re-render if the team context changes.
+  // This is required otherwise you would see the wrong page content.
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8" key={currentOrganisation.url}>
+      <Outlet />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._index.tsx

@@ -0,0 +1,11 @@
+import { redirect } from 'react-router';
+
+import type { Route } from './+types/_layout';
+
+export function loader({ params }: Route.LoaderArgs) {
+  if (params.orgUrl) {
+    throw redirect(`/o/${params.orgUrl}/settings/general`);
+  }
+
+  throw redirect('/');
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx

@@ -0,0 +1,114 @@
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Building2Icon, CreditCardIcon, GroupIcon, Settings2Icon, Users2Icon } from 'lucide-react';
+import { FaUsers } from 'react-icons/fa6';
+import { Link, NavLink, Outlet } from 'react-router';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Organisation Settings');
+}
+
+export default function SettingsLayout() {
+  const { t } = useLingui();
+
+  const isBillingEnabled = IS_BILLING_ENABLED();
+  const organisation = useCurrentOrganisation();
+
+  const organisationSettingRoutes = [
+    {
+      path: `/o/${organisation.url}/settings/general`,
+      label: t`General`,
+      icon: Building2Icon,
+    },
+    {
+      path: `/o/${organisation.url}/settings/preferences`,
+      label: t`Preferences`,
+      icon: Settings2Icon,
+    },
+    {
+      path: `/o/${organisation.url}/settings/teams`,
+      label: t`Teams`,
+      icon: FaUsers,
+    },
+    {
+      path: `/o/${organisation.url}/settings/members`,
+      label: t`Members`,
+      icon: Users2Icon,
+    },
+    {
+      path: `/o/${organisation.url}/settings/groups`,
+      label: t`Groups`,
+      icon: GroupIcon,
+    },
+    {
+      path: `/o/${organisation.url}/settings/billing`,
+      label: t`Billing`,
+      icon: CreditCardIcon,
+    },
+  ].filter((route) => (isBillingEnabled ? route : !route.path.includes('/billing')));
+
+  if (!canExecuteOrganisationAction('MANAGE_ORGANISATION', organisation.currentOrganisationRole)) {
+    return (
+      <GenericErrorLayout
+        errorCode={401}
+        errorCodeMap={{
+          401: {
+            heading: msg`Unauthorized`,
+            subHeading: msg`401 Unauthorized`,
+            message: msg`You are not authorized to access this page.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/o/${organisation.url}`}>
+              <Trans>Go Back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Organisation Settings</Trans>
+      </h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        {/* Navigation */}
+        <div
+          className={cn(
+            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
+          )}
+        >
+          {organisationSettingRoutes.map((route) => (
+            <NavLink to={route.path} className="group w-full justify-start" key={route.path}>
+              <Button
+                variant="ghost"
+                className="group-aria-[current]:bg-secondary w-full justify-start"
+              >
+                <route.icon className="mr-2 h-5 w-5" />
+                <Trans>{route.label}</Trans>
+              </Button>
+            </NavLink>
+          ))}
+        </div>
+
+        <div className="col-span-12 md:col-span-9">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx

@@ -0,0 +1,147 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import type Stripe from 'stripe';
+import { match } from 'ts-pattern';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+
+import { BillingPlans } from '~/components/general/billing-plans';
+import { OrganisationBillingPortalButton } from '~/components/general/organisations/organisation-billing-portal-button';
+import { OrganisationBillingInvoicesTable } from '~/components/tables/organisation-billing-invoices-table';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Billing');
+}
+
+export default function TeamsSettingBillingPage() {
+  const { _, i18n } = useLingui();
+
+  const organisation = useCurrentOrganisation();
+
+  const { data: subscriptionQuery, isLoading: isLoadingSubscription } =
+    trpc.billing.subscription.get.useQuery({
+      organisationId: organisation.id,
+    });
+
+  if (isLoadingSubscription || !subscriptionQuery) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  const { subscription, plans } = subscriptionQuery;
+
+  const canManageBilling = canExecuteOrganisationAction(
+    'MANAGE_BILLING',
+    organisation.currentOrganisationRole,
+  );
+
+  const { organisationSubscription, stripeSubscription } = subscription || {};
+
+  const currentProductName =
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    (stripeSubscription?.items.data[0].price.product as Stripe.Product | undefined)?.name;
+
+  return (
+    <div>
+      <div className="flex flex-row items-end justify-between">
+        <div>
+          <h3 className="text-2xl font-semibold">
+            <Trans>Billing</Trans>
+          </h3>
+
+          <div className="text-muted-foreground mt-2 text-sm">
+            {!organisationSubscription && (
+              <p>
+                <Trans>
+                  You are currently on the <span className="font-semibold">Free Plan</span>.
+                </Trans>
+              </p>
+            )}
+
+            {organisationSubscription &&
+              match(organisationSubscription.status)
+                .with('ACTIVE', () => (
+                  <p>
+                    {currentProductName ? (
+                      <span>
+                        You are currently subscribed to{' '}
+                        <span className="font-semibold">{currentProductName}</span>
+                      </span>
+                    ) : (
+                      <span>You currently have an active plan</span>
+                    )}
+
+                    {organisationSubscription.periodEnd && (
+                      <span>
+                        {' '}
+                        which is set to{' '}
+                        {organisationSubscription.cancelAtPeriodEnd ? (
+                          <span>
+                            end on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(organisationSubscription.periodEnd)}.
+                            </span>
+                          </span>
+                        ) : (
+                          <span>
+                            automatically renew on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(organisationSubscription.periodEnd)}.
+                            </span>
+                          </span>
+                        )}
+                      </span>
+                    )}
+                  </p>
+                ))
+                .with('INACTIVE', () => (
+                  <p>
+                    {currentProductName ? (
+                      <Trans>
+                        You currently have an inactive{' '}
+                        <span className="font-semibold">{currentProductName}</span> subscription
+                      </Trans>
+                    ) : (
+                      <Trans>Your current plan is inactive.</Trans>
+                    )}
+                  </p>
+                ))
+                .with('PAST_DUE', () => (
+                  <p>
+                    {currentProductName ? (
+                      <Trans>
+                        Your current {currentProductName} plan is past due. Please update your
+                        payment information.
+                      </Trans>
+                    ) : (
+                      <Trans>Your current plan is past due.</Trans>
+                    )}
+                  </p>
+                ))
+                .otherwise(() => null)}
+          </div>
+        </div>
+
+        <OrganisationBillingPortalButton />
+      </div>
+
+      <hr className="my-4" />
+
+      {!subscription && canManageBilling && <BillingPlans plans={plans} />}
+
+      <section className="mt-6">
+        <OrganisationBillingInvoicesTable
+          organisationId={organisation.id}
+          subscriptionExists={Boolean(subscription)}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.general.tsx

@@ -0,0 +1,65 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+
+import { OrganisationDeleteDialog } from '~/components/dialogs/organisation-delete-dialog';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { OrganisationUpdateForm } from '~/components/forms/organisation-update-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Settings');
+}
+
+export default function OrganisationSettingsGeneral() {
+  const { _ } = useLingui();
+
+  const organisation = useCurrentOrganisation();
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={_(msg`General`)}
+        subtitle={_(msg`Here you can edit your organisation details.`)}
+      />
+
+      <div className="space-y-8">
+        <AvatarImageForm organisation={organisation} />
+        <OrganisationUpdateForm />
+      </div>
+
+      {canExecuteOrganisationAction(
+        'DELETE_ORGANISATION',
+        organisation.currentOrganisationRole,
+      ) && (
+        <>
+          <hr className="my-4" />
+
+          <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 organisation</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <Trans>
+                  This organisation, and any associated data will be permanently deleted.
+                </Trans>
+              </AlertDescription>
+            </div>
+
+            <OrganisationDeleteDialog />
+          </Alert>
+        </>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx

@@ -0,0 +1,302 @@
+import { useMemo } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationGroupType, OrganisationMemberRole } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Link } from 'react-router';
+import { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
+import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFindOrganisationGroupsResponse } from '@documenso/trpc/server/organisation-router/find-organisation-groups.types';
+import type { TFindOrganisationMembersResponse } from '@documenso/trpc/server/organisation-router/find-organisation-members.types';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { OrganisationGroupDeleteDialog } from '~/components/dialogs/organisation-group-delete-dialog';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+import type { Route } from './+types/o.$orgUrl.settings.groups.$id';
+
+export default function OrganisationGroupSettingsPage({ params }: Route.ComponentProps) {
+  const { t } = useLingui();
+
+  const organisation = useCurrentOrganisation();
+
+  const groupId = params.id;
+
+  const { data: members, isLoading: isLoadingMembers } = trpc.organisation.member.find.useQuery({
+    organisationId: organisation.id,
+  });
+
+  const { data: groupData, isLoading: isLoadingGroup } = trpc.organisation.group.find.useQuery(
+    {
+      organisationId: organisation.id,
+      organisationGroupId: groupId,
+      page: 1,
+      perPage: 1,
+      types: [OrganisationGroupType.CUSTOM],
+    },
+    {
+      enabled: !!organisation.id && !!groupId,
+    },
+  );
+
+  const group = groupData?.data.find((g) => g.id === groupId);
+
+  if (isLoadingGroup || isLoadingMembers) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  // Todo: Update UI, currently out of place.
+  if (!group) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Organisation group not found`,
+            subHeading: msg`404 Organisation group not found`,
+            message: msg`The organisation group you are looking for may have been removed, renamed or may have never
+                    existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/o/${organisation.url}/settings/groups`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Organisation Group Settings`}
+        subtitle={t`Manage your organisation group settings.`}
+      >
+        <OrganisationGroupDeleteDialog
+          organisationGroupId={groupId}
+          organisationGroupName={group.name || ''}
+          trigger={
+            <Button variant="destructive" title={t`Remove organisation group`}>
+              <Trans>Delete</Trans>
+            </Button>
+          }
+        />
+      </SettingsHeader>
+
+      <OrganisationGroupForm group={group} organisationMembers={members?.data || []} />
+    </div>
+  );
+}
+
+const ZUpdateOrganisationGroupFormSchema = z.object({
+  name: z.string().min(1, msg`Name is required`.id),
+  organisationRole: z.nativeEnum(OrganisationMemberRole),
+  memberIds: z.array(z.string()),
+});
+
+type TUpdateOrganisationGroupFormSchema = z.infer<typeof ZUpdateOrganisationGroupFormSchema>;
+
+type OrganisationGroupFormOptions = {
+  group: TFindOrganisationGroupsResponse['data'][number];
+  organisationMembers: TFindOrganisationMembersResponse['data'];
+};
+
+const OrganisationGroupForm = ({ group, organisationMembers }: OrganisationGroupFormOptions) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const organisation = useCurrentOrganisation();
+
+  const { mutateAsync: updateOrganisationGroup } = trpc.organisation.group.update.useMutation();
+
+  const form = useForm<TUpdateOrganisationGroupFormSchema>({
+    resolver: zodResolver(ZUpdateOrganisationGroupFormSchema),
+    defaultValues: {
+      name: group.name || '',
+      organisationRole: group.organisationRole,
+      memberIds: group.members.map((member) => member.id),
+    },
+  });
+
+  const onSubmit = async (values: TUpdateOrganisationGroupFormSchema) => {
+    try {
+      await updateOrganisationGroup({
+        id: group.id,
+        name: values.name,
+        organisationRole: values.organisationRole,
+        memberIds: values.memberIds,
+      });
+
+      toast({
+        title: t`Success`,
+        description: t`Group has been updated successfully`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      toast({
+        title: t`An error occurred`,
+        description: t`We couldn't update the group. Please try again.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const teamGroupsColumns = useMemo(() => {
+    return [
+      {
+        header: t`Team`,
+        accessorKey: 'name',
+      },
+      {
+        header: t`Team Role`,
+        cell: ({ row }) => t(TEAM_MEMBER_ROLE_MAP[row.original.teamRole]),
+      },
+    ] satisfies DataTableColumnDef<OrganisationGroupFormOptions['group']['teams'][number]>[];
+  }, []);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>
+                <Trans>Group Name</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="organisationRole"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>
+                <Trans>Organisation Role</Trans>
+              </FormLabel>
+              <FormControl>
+                <Select {...field} onValueChange={field.onChange}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+
+                  <SelectContent position="popper">
+                    {ORGANISATION_MEMBER_ROLE_HIERARCHY[organisation.currentOrganisationRole].map(
+                      (role) => (
+                        <SelectItem key={role} value={role}>
+                          {t(EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[role])}
+                        </SelectItem>
+                      ),
+                    )}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+              <FormDescription>
+                <Trans>
+                  The organisation role that will be applied to all members in this group.
+                </Trans>
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="memberIds"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Members</Trans>
+              </FormLabel>
+              <FormControl>
+                <MultiSelectCombobox
+                  options={organisationMembers.map((member) => ({
+                    label: member.name || member.email,
+                    value: member.id,
+                  }))}
+                  selectedValues={field.value}
+                  onChange={field.onChange}
+                  className="w-full"
+                  emptySelectionPlaceholder={t`Select members`}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Select the members to include in this group</Trans>
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+
+        <div>
+          <FormLabel>
+            <Trans>Team Assignments</Trans>
+          </FormLabel>
+
+          <div className="my-2">
+            <DataTable columns={teamGroupsColumns} data={group.teams} />
+          </div>
+
+          <FormDescription>
+            <Trans>Teams that this organisation group is currently assigned to</Trans>
+          </FormDescription>
+        </div>
+
+        <div className="flex justify-end">
+          <Button type="submit" loading={form.formState.isSubmitting}>
+            <Trans>Update</Trans>
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups._index.tsx

@@ -0,0 +1,24 @@
+import { useLingui } from '@lingui/react/macro';
+
+import { OrganisationGroupCreateDialog } from '~/components/dialogs/organisation-group-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { OrganisationGroupsDataTable } from '~/components/tables/organisation-groups-table';
+
+export default function TeamsSettingsMembersPage() {
+  const { t } = useLingui();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Custom Organisation Groups`}
+        subtitle={t`Manage the custom groups of members for your organisation.`}
+      >
+        <OrganisationGroupCreateDialog />
+      </SettingsHeader>
+
+      <div>
+        <OrganisationGroupsDataTable />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.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 { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { OrganisationMemberInvitesTable } from '~/components/tables/organisation-member-invites-table';
+import { OrganisationMembersDataTable } from '~/components/tables/organisation-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`Organisation Members`)}
+        subtitle={_(msg`Manage the members or invite new members.`)}
+      >
+        <OrganisationMemberInviteDialog />
+      </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' ? (
+          <OrganisationMemberInvitesTable key="invites" />
+        ) : (
+          <OrganisationMembersDataTable key="members" />
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.preferences.tsx

@@ -0,0 +1,199 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import {
+  BrandingPreferencesForm,
+  type TBrandingPreferencesFormSchema,
+} from '~/components/forms/branding-preferences-form';
+import {
+  DocumentPreferencesForm,
+  type TDocumentPreferencesFormSchema,
+} from '~/components/forms/document-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Preferences');
+}
+
+export default function OrganisationSettingsPreferencesPage() {
+  const { organisations } = useSession();
+
+  const organisation = useCurrentOrganisation();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
+  const { data: organisationWithSettings, isLoading: isLoadingOrganisation } =
+    trpc.organisation.get.useQuery({
+      organisationReference: organisation.url,
+    });
+
+  const { mutateAsync: updateOrganisationSettings } =
+    trpc.organisation.settings.update.useMutation();
+
+  const onDocumentPreferencesFormSubmit = async (data: TDocumentPreferencesFormSchema) => {
+    try {
+      const {
+        documentVisibility,
+        documentLanguage,
+        includeSenderDetails,
+        includeSigningCertificate,
+        signatureTypes,
+      } = data;
+
+      if (
+        documentVisibility === null ||
+        documentLanguage === null ||
+        includeSenderDetails === null ||
+        includeSigningCertificate === null
+      ) {
+        throw new Error('Should not be possible.');
+      }
+
+      await updateOrganisationSettings({
+        organisationId: organisation.id,
+        data: {
+          documentVisibility,
+          documentLanguage,
+          includeSenderDetails,
+          includeSigningCertificate,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+        },
+      });
+
+      toast({
+        title: t`Document preferences updated`,
+        description: t`Your document preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your document preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
+    try {
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+
+      let uploadedBrandingLogo: string | undefined = '';
+
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
+
+      await updateOrganisationSettings({
+        organisationId: organisation.id,
+        data: {
+          brandingEnabled: brandingEnabled ?? undefined,
+          brandingLogo: uploadedBrandingLogo,
+          brandingUrl,
+          brandingCompanyDetails,
+        },
+      });
+
+      toast({
+        title: t`Branding preferences updated`,
+        description: t`Your branding preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`We were unable to update your branding preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoadingOrganisation || !organisationWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  const settingsHeaderText = isPersonalLayoutMode ? t`Preferences` : t`Organisation Preferences`;
+  const settingsHeaderSubtitle = isPersonalLayoutMode
+    ? t`Here you can set your general preferences`
+    : t`Here you can set preferences and defaults for your organisation. Teams will inherit these settings by default.`;
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader title={settingsHeaderText} subtitle={settingsHeaderSubtitle} />
+
+      <section>
+        <DocumentPreferencesForm
+          canInherit={false}
+          settings={organisationWithSettings.organisationGlobalSettings}
+          onFormSubmit={onDocumentPreferencesFormSubmit}
+        />
+      </section>
+
+      {organisationWithSettings.organisationClaim.flags.allowCustomBranding ||
+      !IS_BILLING_ENABLED() ? (
+        <section>
+          <SettingsHeader
+            title={t`Branding Preferences`}
+            subtitle={t`Here you can set preferences and defaults for branding.`}
+            className="mt-8"
+          />
+
+          <BrandingPreferencesForm
+            context="Organisation"
+            settings={organisationWithSettings.organisationGlobalSettings}
+            onFormSubmit={onBrandingPreferencesFormSubmit}
+          />
+        </section>
+      ) : (
+        <Alert
+          className="mt-8 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+          variant="neutral"
+        >
+          <div className="mb-4 sm:mb-0">
+            <AlertTitle>
+              <Trans>Branding Preferences</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-2">
+              <Trans>Currently branding can only be configured for Teams and above plans.</Trans>
+            </AlertDescription>
+          </div>
+
+          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
+            <Button asChild variant="outline">
+              <Link
+                to={
+                  isPersonalLayoutMode
+                    ? '/settings/billing'
+                    : `/o/${organisation.url}/settings/billing`
+                }
+              >
+                <Trans>Update Billing</Trans>
+              </Link>
+            </Button>
+          )}
+        </Alert>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { useSearchParams } from 'react-router';
+import { useLocation } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { OrganisationTeamsTable } from '~/components/tables/organisation-teams-table';
+
+export default function OrganisationSettingsTeamsPage() {
+  const { t } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
+
+  return (
+    <div>
+      <SettingsHeader title={t`Teams`} subtitle={t`Manage the teams in this organisation.`}>
+        <TeamCreateDialog />
+      </SettingsHeader>
+
+      <Input
+        defaultValue={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder={t`Search`}
+        className="mb-4"
+      />
+
+      <OrganisationTeamsTable />
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+
+import { Outlet, useNavigate } from 'react-router';
+
+import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { TrpcProvider } from '@documenso/trpc/react';
+
+import { TeamProvider } from '~/providers/team';
+
+/**
+ * These routes should only render if the user has:
+ *
+ * - 1 Personal organisation
+ * - Nothing else
+ *
+ * This removes the UX complexity for users who only have a single personal organisation, instead of showing them multiple settings pages:
+ *
+ * - Organisation settings
+ * - Teams settings
+ */
+export default function Layout() {
+  const { organisations } = useSession();
+
+  const navigate = useNavigate();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
+  const currentOrganisation = organisations[0];
+  const team = currentOrganisation?.teams[0] || null;
+
+  useEffect(() => {
+    if (!isPersonalLayoutMode || !team) {
+      void navigate('/settings/profile');
+    }
+  }, []);
+
+  if (!isPersonalLayoutMode || !team) {
+    return null;
+  }
+
+  const trpcHeaders = {
+    'x-team-Id': team.id.toString(),
+  };
+
+  return (
+    <TrpcProvider headers={trpcHeaders}>
+      <OrganisationProvider organisation={currentOrganisation}>
+        <TeamProvider team={team}>
+          <Outlet />
+        </TeamProvider>
+      </OrganisationProvider>
+    </TrpcProvider>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/billing.tsx

@@ -0,0 +1,5 @@
+import BillingPage, { meta } from '../../o.$orgUrl.settings.billing';
+
+export { meta };
+
+export default BillingPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/preferences.tsx

@@ -0,0 +1,5 @@
+import PreferencesPage, { meta } from '../../o.$orgUrl.settings.preferences';
+
+export { meta };
+
+export default PreferencesPage;

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

@@ -0,0 +1,5 @@
+import PublicProfilePage, { loader, meta } from '../../t.$teamUrl+/settings.public-profile';
+
+export { meta, loader };
+
+export default PublicProfilePage;

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

@@ -0,0 +1,5 @@
+import TokensPage, { meta } from '../../t.$teamUrl+/settings.tokens';
+
+export { meta };
+
+export default TokensPage;

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

@@ -0,0 +1,5 @@
+import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id';
+
+export { meta };
+
+export default WebhookPage;

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

@@ -0,0 +1,5 @@
+import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks._index';
+
+export { meta };
+
+export default WebhookPage;

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

@@ -1,157 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro';
-import { SubscriptionStatus } from '@prisma/client';
-import { redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
-import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
-import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
-import { type Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
-
-import { BillingPlans } from '~/components/general/billing-plans';
-import { BillingPortalButton } from '~/components/general/billing-portal-button';
-import { appMetaTags } from '~/utils/meta';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/billing';
-
-export function meta() {
-  return appMetaTags('Billing');
-}
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  // Redirect if subscriptions are not enabled.
-  if (!IS_BILLING_ENABLED()) {
-    throw redirect('/settings/profile');
-  }
-
-  if (!user.customerId) {
-    await getStripeCustomerByUser(user).then((result) => result.user);
-  }
-
-  const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
-    getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ plans: [STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.PLATFORM] }),
-    getPrimaryAccountPlanPrices(),
-  ]);
-
-  const primaryAccountPlanPriceIds = primaryAccountPlanPrices.map(({ id }) => id);
-
-  let subscriptionProduct: Stripe.Product | null = null;
-
-  const primaryAccountPlanSubscriptions = subscriptions.filter(({ priceId }) =>
-    primaryAccountPlanPriceIds.includes(priceId),
-  );
-
-  const subscription =
-    primaryAccountPlanSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    primaryAccountPlanSubscriptions[0];
-
-  if (subscription?.priceId) {
-    subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(
-      () => null,
-    );
-  }
-
-  const isMissingOrInactiveOrFreePlan =
-    !subscription || subscription.status === SubscriptionStatus.INACTIVE;
-
-  return superLoaderJson({
-    prices,
-    subscription,
-    subscriptionProductName: subscriptionProduct?.name,
-    isMissingOrInactiveOrFreePlan,
-  });
-}
-
-export default function TeamsSettingBillingPage() {
-  const { prices, subscription, subscriptionProductName, isMissingOrInactiveOrFreePlan } =
-    useSuperLoaderData<typeof loader>();
-
-  const { i18n } = useLingui();
-
-  return (
-    <div>
-      <div className="flex flex-row items-end justify-between">
-        <div>
-          <h3 className="text-2xl font-semibold">
-            <Trans>Billing</Trans>
-          </h3>
-
-          <div className="text-muted-foreground mt-2 text-sm">
-            {isMissingOrInactiveOrFreePlan && (
-              <p>
-                <Trans>
-                  You are currently on the <span className="font-semibold">Free Plan</span>.
-                </Trans>
-              </p>
-            )}
-
-            {/* Todo: Translation */}
-            {!isMissingOrInactiveOrFreePlan &&
-              match(subscription.status)
-                .with('ACTIVE', () => (
-                  <p>
-                    {subscriptionProductName ? (
-                      <span>
-                        You are currently subscribed to{' '}
-                        <span className="font-semibold">{subscriptionProductName}</span>
-                      </span>
-                    ) : (
-                      <span>You currently have an active plan</span>
-                    )}
-
-                    {subscription.periodEnd && (
-                      <span>
-                        {' '}
-                        which is set to{' '}
-                        {subscription.cancelAtPeriodEnd ? (
-                          <span>
-                            end on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(subscription.periodEnd)}.
-                            </span>
-                          </span>
-                        ) : (
-                          <span>
-                            automatically renew on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(subscription.periodEnd)}.
-                            </span>
-                          </span>
-                        )}
-                      </span>
-                    )}
-                  </p>
-                ))
-                .with('PAST_DUE', () => (
-                  <p>
-                    <Trans>
-                      Your current plan is past due. Please update your payment information.
-                    </Trans>
-                  </p>
-                ))
-                .otherwise(() => null)}
-          </div>
-        </div>
-
-        {isMissingOrInactiveOrFreePlan && (
-          <BillingPortalButton>
-            <Trans>Manage billing</Trans>
-          </BillingPortalButton>
-        )}
-      </div>
-
-      <hr className="my-4" />
-
-      {isMissingOrInactiveOrFreePlan ? <BillingPlans prices={prices} /> : <BillingPortalButton />}
-    </div>
-  );
-}

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

@@ -0,0 +1,28 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { OrganisationCreateDialog } from '~/components/dialogs/organisation-create-dialog';
+import { OrganisationInvitations } from '~/components/general/organisations/organisation-invitations';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { UserOrganisationsTable } from '~/components/tables/user-organisations-table';
+
+export default function TeamsSettingsPage() {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Organisations`)}
+        subtitle={_(msg`Manage all organisations you are currently associated with.`)}
+      >
+        <OrganisationCreateDialog />
+      </SettingsHeader>
+
+      <UserOrganisationsTable />
+
+      <div className="mt-8 space-y-8">
+        <OrganisationInvitations />
+      </div>
+    </div>
+  );
+}

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

@@ -1,10 +1,17 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { AnimatePresence } from 'framer-motion';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 
 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 { TeamEmailUsage } from '~/components/general/teams/team-email-usage';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
@@ -13,6 +20,11 @@ export function meta() {
 
 export default function SettingsProfile() {
   const { _ } = useLingui();
+  const { organisations, user } = useSession();
+
+  const { data: teamEmail } = trpc.team.email.get.useQuery();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   return (
     <div>
@@ -26,7 +38,17 @@ export default function SettingsProfile() {
 
       <hr className="my-4 max-w-xl" />
 
-      <AccountDeleteDialog className="max-w-xl" />
+      <div className="max-w-xl space-y-8">
+        <AnimatePresence>
+          {(!isPersonalLayoutMode || user.email !== teamEmail?.email) && teamEmail && (
+            <AnimateGenericFadeInOut>
+              <TeamEmailUsage teamEmail={teamEmail} />
+            </AnimateGenericFadeInOut>
+          )}
+        </AnimatePresence>
+
+        <AccountDeleteDialog />
+      </div>
     </div>
   );
 }

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

@@ -1,237 +0,0 @@
-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 { getSession } from '@documenso/auth/server/lib/utils/get-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 { SettingsPublicProfileTemplatesTable } from '~/components/tables/settings-public-profile-templates-table';
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-import type { Route } from './+types/public-profile';
-
-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({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  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, refreshSession } = 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);
-
-      // Need to refresh session because we're editing the user's profile.
-      await refreshSession();
-    }
-
-    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+/teams.tsx

@@ -1,43 +0,0 @@
-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 { TeamEmailUsage } from '~/components/general/teams/team-email-usage';
-import { TeamInvitations } from '~/components/general/teams/team-invitations';
-import { UserSettingsTeamsPageDataTable } from '~/components/tables/user-settings-teams-page-table';
-
-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+/tokens.tsx

@@ -1,116 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { DateTime } from 'luxon';
-
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-
-import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
-import { ApiTokenForm } from '~/components/forms/token';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export default function ApiTokensPage() {
-  const { i18n } = useLingui();
-
-  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
-
-  const team = useOptionalCurrentTeam();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={<Trans>API Tokens</Trans>}
-        subtitle={
-          <Trans>
-            On this page, you can create and manage API tokens. See our{' '}
-            <a
-              className="text-primary underline"
-              href={'https://docs.documenso.com/developers/public-api'}
-              target="_blank"
-            >
-              Documentation
-            </a>{' '}
-            for more information.
-          </Trans>
-        }
-      />
-
-      {team && team?.currentTeamMember.role !== TeamMemberRole.ADMIN ? (
-        <Alert
-          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-          variant="warning"
-        >
-          <div>
-            <AlertTitle>
-              <Trans>Unauthorized</Trans>
-            </AlertTitle>
-            <AlertDescription className="mr-2">
-              <Trans>You need to be an admin to manage API tokens.</Trans>
-            </AlertDescription>
-          </div>
-        </Alert>
-      ) : (
-        <>
-          <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

@@ -1,212 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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+/_layout.tsx

@@ -5,32 +5,27 @@ import { Trans } from '@lingui/react/macro';
 import { SubscriptionStatus } from '@prisma/client';
 import { Link, Outlet } from 'react-router';
 
-import { TEAM_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
+import { PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { PortalComponent } from '~/components/general/portal';
-import { TeamLayoutBillingBanner } from '~/components/general/teams/team-layout-billing-banner';
-import { TeamProvider } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
-import type { Route } from './+types/_layout';
-
-export default function Layout({ params }: Route.ComponentProps) {
-  const { teams } = useSession();
-
-  const currentTeam = teams.find((team) => team.url === params.teamUrl);
+export default function Layout() {
+  const team = useOptionalCurrentTeam();
+  const organisation = useOptionalCurrentOrganisation();
 
   const limits = useMemo(() => {
-    if (!currentTeam) {
+    if (!organisation) {
       return undefined;
     }
 
     if (
-      currentTeam?.subscription &&
-      currentTeam.subscription.status === SubscriptionStatus.INACTIVE
+      organisation?.subscription &&
+      organisation.subscription.status === SubscriptionStatus.INACTIVE
     ) {
       return {
         quota: {
@@ -47,12 +42,12 @@ export default function Layout({ params }: Route.ComponentProps) {
     }
 
     return {
-      quota: TEAM_PLAN_LIMITS,
-      remaining: TEAM_PLAN_LIMITS,
+      quota: PAID_PLAN_LIMITS,
+      remaining: PAID_PLAN_LIMITS,
     };
-  }, [currentTeam?.subscription, currentTeam?.id]);
+  }, [organisation?.subscription]);
 
-  if (!currentTeam) {
+  if (!team) {
     return (
       <GenericErrorLayout
         errorCode={404}
@@ -76,29 +71,18 @@ export default function Layout({ params }: Route.ComponentProps) {
   }
 
   const trpcHeaders = {
-    'x-team-Id': currentTeam.id.toString(),
+    'x-team-Id': team.id.toString(),
   };
 
+  // Note: We use a key to force a re-render if the team context changes.
+  // This is required otherwise you would see the wrong page content.
   return (
-    <TeamProvider team={currentTeam}>
-      <LimitsProvider initialValue={limits} teamId={currentTeam.id}>
-        <TrpcProvider headers={trpcHeaders}>
-          {currentTeam?.subscription &&
-            currentTeam.subscription.status !== SubscriptionStatus.ACTIVE && (
-              <PortalComponent target="portal-header">
-                <TeamLayoutBillingBanner
-                  subscriptionStatus={currentTeam.subscription.status}
-                  teamId={currentTeam.id}
-                  userRole={currentTeam.currentTeamMember.role}
-                />
-              </PortalComponent>
-            )}
-
-          <main className="mt-8 pb-8 md:mt-12 md:pb-12">
-            <Outlet />
-          </main>
-        </TrpcProvider>
-      </LimitsProvider>
-    </TeamProvider>
+    <div key={team.url}>
+      <TrpcProvider headers={trpcHeaders}>
+        <LimitsProvider initialValue={limits} teamId={team.id}>
+          <Outlet />
+        </LimitsProvider>
+      </TrpcProvider>
+    </div>
   );
 }

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

@@ -1,5 +1,246 @@
-import DocumentPage, { loader } from '~/routes/_authenticated+/documents.$id._index';
+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 { match } from 'ts-pattern';
 
-export { loader };
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
-export default DocumentPage;
+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 { 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/documents.$id._index';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const teamUrl = params.teamUrl;
+
+  if (!teamUrl) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  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);
+
+  // Todo: 401 or 404 page.
+  if (!document) {
+    throw redirect(documentRootPath);
+  }
+
+  const documentVisibility = document?.visibility;
+  const currentTeamMemberRole = team.currentTeamRole;
+  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 || !document.documentData || !canAccessDocument) {
+    throw redirect(documentRootPath);
+  }
+
+  return superLoaderJson({
+    document,
+    documentRootPath,
+  });
+}
+
+export default function DocumentPage() {
+  const loaderData = useSuperLoaderData<typeof loader>();
+
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const { document, documentRootPath } = 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">
+            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
+
+        {document.status !== DocumentStatus.COMPLETED && (
+          <DocumentReadOnlyFields
+            fields={document.fields}
+            documentMeta={documentMeta || undefined}
+            showRecipientTooltip={true}
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+          />
+        )}
+
+        <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.REJECTED, () => (
+                    <Trans>This document has been rejected by a recipient</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+/t.$teamUrl+/documents.$id.edit.tsx

@@ -1,5 +1,150 @@
-import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents.$id.edit';
+import { Plural, Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import { ChevronLeft, Users2 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { match } from 'ts-pattern';
 
-export { loader };
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
-export default DocumentEditPage;
+import { DocumentEditForm } from '~/components/general/document/document-edit-form';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/documents.$id.edit';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const teamUrl = params.teamUrl;
+
+  if (!teamUrl) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  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.currentTeamRole;
+  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 (isDocumentCompleted(document.status)) {
+    throw redirect(`${documentRootPath}/${documentId}`);
+  }
+
+  return superLoaderJson({
+    document: {
+      ...document,
+      folder: null,
+    },
+    documentRootPath,
+  });
+}
+
+export default function DocumentEditPage() {
+  const { document, documentRootPath } = 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>
+
+      <div className="mt-4 flex w-full items-end justify-between">
+        <div className="flex-1">
+          <h1
+            className="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>
+        </div>
+
+        {document.useLegacyFieldInsertion && (
+          <div>
+            <LegacyFieldWarningPopover type="document" documentId={document.id} />
+          </div>
+        )}
+      </div>
+
+      <DocumentEditForm
+        className="mt-6"
+        initialDocument={document}
+        documentRootPath={documentRootPath}
+      />
+    </div>
+  );
+}

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

@@ -1,5 +1,186 @@
-import DocumentLogsPage, { loader } from '~/routes/_authenticated+/documents.$id.logs';
+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';
 
-export { loader };
+import { getSession } from '@documenso/auth/server/lib/utils/get-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 { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Card } from '@documenso/ui/primitives/card';
 
-export default DocumentLogsPage;
+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/documents.$id.logs';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+
+  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 || !document.documentData) {
+    throw redirect(documentRootPath);
+  }
+
+  if (document.folderId) {
+    throw redirect(documentRootPath);
+  }
+
+  const recipients = await getRecipientsForDocument({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  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">
+        <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>
+        <div className="mt-1 flex flex-col justify-between sm:flex-row">
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
+          </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>
+      </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 truncate">{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+/t.$teamUrl+/documents._index.tsx

@@ -1,5 +1,405 @@
-import DocumentsPage, { meta } from '~/routes/_authenticated+/documents._index';
+import { useEffect, useMemo, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { OrganisationType } from '@prisma/client';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
 
-export default DocumentsPage;
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { FolderType } from '@documenso/lib/types/folder-type';
+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 { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+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 { FolderCard } from '~/components/general/folder/folder-card';
+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 { useCurrentTeam } 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 navigate = useNavigate();
+
+  const organisation = useCurrentOrganisation();
+  const team = useCurrentTeam();
+
+  const [isMovingDocument, setIsMovingDocument] = useState(false);
+  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  });
+
+  const findDocumentSearchParams = useMemo(
+    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
+    {
+      ...findDocumentSearchParams,
+    },
+  );
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.DOCUMENT,
+    parentId: null,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === ExtendedDocumentStatus.ALL) {
+      params.delete('status');
+    }
+
+    if (value === ExtendedDocumentStatus.INBOX && organisation.type === OrganisationType.PERSONAL) {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team.url)}?${params.toString()}`;
+  };
+
+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatDocumentsPath(team.url)}/folders`);
+  };
+
+  return (
+    <DocumentDropZoneWrapper>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
+
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
+                >
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
+          </div>
+        </div>
+
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  ?.filter((folder) => !folder.pinned)
+                  .slice(0, 12)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+
+              <div className="mt-6 flex items-center justify-center">
+                {foldersData && foldersData.folders?.length > 12 && (
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="text-muted-foreground hover:text-foreground"
+                    onClick={() => void handleViewAllFolders()}
+                  >
+                    View all folders
+                  </Button>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        <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-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <h2 className="text-4xl font-semibold">
+              <Trans>Documents</Trans>
+            </h2>
+          </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,
+                ]
+                  .filter((value) => {
+                    if (organisation.type === OrganisationType.PERSONAL) {
+                      return value !== ExtendedDocumentStatus.INBOX;
+                    }
+
+                    return true;
+                  })
+                  .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 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {documentToMove && (
+          <DocumentMoveToFolderDialog
+            documentId={documentToMove}
+            open={isMovingDocument}
+            onOpenChange={(open) => {
+              setIsMovingDocument(open);
+
+              if (!open) {
+                setDocumentToMove(null);
+              }
+            }}
+          />
+        )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
+      </div>
+    </DocumentDropZoneWrapper>
+  );
+}

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

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

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

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

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

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

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

@@ -1,5 +1,374 @@
-import DocumentsPage, { meta } from '~/routes/_authenticated+/documents.f.$folderId._index';
+import { useEffect, useMemo, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
 
-export default DocumentsPage;
+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 { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+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 { FolderCard } from '~/components/general/folder/folder-card';
+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 { useCurrentTeam } 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 navigate = useNavigate();
+
+  const [isMovingDocument, setIsMovingDocument] = useState(false);
+  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { folderId } = useParams();
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  });
+
+  const findDocumentSearchParams = useMemo(
+    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
+    {
+      ...findDocumentSearchParams,
+      folderId,
+    },
+  );
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team.url]);
+
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === ExtendedDocumentStatus.ALL) {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team.url)}/f/${folderId}?${params.toString()}`;
+  };
+
+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  return (
+    <DocumentDropZoneWrapper>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
+
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
+                >
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
+          </div>
+        </div>
+
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        <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-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <h2 className="text-4xl font-semibold">
+              <Trans>Documents</Trans>
+            </h2>
+          </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 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {documentToMove && (
+          <DocumentMoveToFolderDialog
+            documentId={documentToMove}
+            open={isMovingDocument}
+            onOpenChange={(open) => {
+              setIsMovingDocument(open);
+
+              if (!open) {
+                setDocumentToMove(null);
+              }
+            }}
+            currentFolderId={folderId}
+          />
+        )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
+      </div>
+    </DocumentDropZoneWrapper>
+  );
+}

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

@@ -1,5 +1,184 @@
-import DocumentsFoldersPage, { meta } from '~/routes/_authenticated+/documents.folders._index';
+import { useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate } from 'react-router';
 
-export default DocumentsFoldersPage;
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Documents');
+}
+
+export default function DocumentsFoldersPage() {
+  const navigate = useNavigate();
+  const team = useCurrentTeam();
+
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
+    type: FolderType.DOCUMENT,
+    parentId: null,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
+          <CreateFolderDialog />
+        </div>
+      </div>
+
+      <div className="mt-6">
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-12">
+              <h1 className="truncate text-2xl font-semibold md:text-3xl">
+                <Trans>All Folders</Trans>
+              </h1>
+
+              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      <FolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

@@ -3,29 +3,27 @@ import { CheckCircle2, Clock } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTeamWithEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 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';
 
 import type { Route } from './+types/settings._index';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
-  const team = await getTeamByUrl({
+  const team = await getTeamWithEmail({
     userId: user.id,
     teamUrl: params.teamUrl,
   });
@@ -38,23 +36,13 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
   const { team } = loaderData;
 
-  const { user } = useSession();
-
-  const isTransferVerificationExpired =
-    !team.transferVerification || isTokenExpired(team.transferVerification.expiresAt);
+  const currentTeam = useCurrentTeam();
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <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" />
+      <AvatarImageForm team={currentTeam} className="mb-8" />
 
       <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
 
@@ -161,51 +149,26 @@ export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps)
           </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>
+        {canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
+          <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>Transfer the ownership of the team to another team member.</Trans>
-                  </AlertDescription>
-                </div>
+              <AlertDescription className="mr-2">
+                <Trans>
+                  This team, and any associated data excluding billing invoices will be permanently
+                  deleted.
+                </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>
-          </>
+            <TeamDeleteDialog teamId={team.id} teamName={team.name} redirectTo="/dashboard" />
+          </Alert>
         )}
       </section>
     </div>

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

@@ -1,12 +1,16 @@
+import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { Outlet, redirect } from 'react-router';
+import { Link, Outlet, redirect } from 'react-router';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
 
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { TeamSettingsNavDesktop } from '~/components/general/teams/team-settings-nav-desktop';
 import { TeamSettingsNavMobile } from '~/components/general/teams/team-settings-nav-mobile';
+import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/settings._layout';
@@ -23,7 +27,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
     teamUrl: params.teamUrl,
   });
 
-  if (!team || !canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
+  if (!team || !canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) {
     throw redirect(`/t/${params.teamUrl}`);
   }
 }
@@ -33,6 +37,31 @@ export async function clientLoader() {
 }
 
 export default function TeamsSettingsLayout() {
+  const team = useCurrentTeam();
+
+  if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) {
+    return (
+      <GenericErrorLayout
+        errorCode={401}
+        errorCodeMap={{
+          401: {
+            heading: msg`Unauthorized`,
+            subHeading: msg`401 Unauthorized`,
+            message: msg`You are not authorized to access this page.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/t/${team.url}`}>
+              <Trans>Go Back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <h1 className="text-4xl font-semibold">

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

@@ -1,109 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Plural, Trans } from '@lingui/react/macro';
-import { DateTime } from 'luxon';
-import type Stripe from 'stripe';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { stripe } from '@documenso/lib/server-only/stripe';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-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 { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/settings.billing';
-
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const session = await getSession(request);
-
-  const team = await getTeamByUrl({
-    userId: session.user.id,
-    teamUrl: params.teamUrl,
-  });
-
-  let teamSubscription: Stripe.Subscription | null = null;
-
-  if (team.subscription) {
-    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
-  }
-
-  return superLoaderJson({
-    team,
-    teamSubscription,
-  });
-}
-
-export default function TeamsSettingBillingPage() {
-  const { _ } = useLingui();
-
-  const { team, teamSubscription } = useSuperLoaderData<typeof loader>();
-
-  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.groups.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { OrganisationGroupType, OrganisationMemberRole } from '@prisma/client';
+import { useLocation, useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { TeamGroupCreateDialog } from '~/components/dialogs/team-group-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { TeamInheritMemberAlert } from '~/components/general/teams/team-inherit-member-alert';
+import { TeamGroupsTable } from '~/components/tables/team-groups-table';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsGroupsPage() {
+  const { t } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { pathname } = useLocation();
+  const team = useCurrentTeam();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  /**
+   * 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]);
+
+  const everyoneGroupQuery = trpc.team.group.find.useQuery({
+    teamId: team.id,
+    types: [OrganisationGroupType.INTERNAL_ORGANISATION],
+    organisationRoles: [OrganisationMemberRole.MEMBER],
+    perPage: 1,
+  });
+
+  const memberAccessTeamGroup = everyoneGroupQuery.data?.data[0] || null;
+
+  return (
+    <div>
+      <SettingsHeader title={t`Team Groups`} subtitle={t`Manage the groups assigned to this team.`}>
+        <TeamGroupCreateDialog />
+      </SettingsHeader>
+
+      <Input
+        defaultValue={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder={t`Search`}
+        className="mb-4"
+      />
+
+      <TeamGroupsTable />
+
+      <AnimateGenericFadeInOut key={everyoneGroupQuery.isFetched ? 'true' : 'false'}>
+        {everyoneGroupQuery.isFetched && (
+          <TeamInheritMemberAlert memberAccessTeamGroup={memberAccessTeamGroup} />
+        )}
+      </AnimateGenericFadeInOut>
+    </div>
+  );
+}

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

@@ -1,21 +1,17 @@
 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 { useLingui } from '@lingui/react/macro';
+import { 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 { TeamMemberCreateDialog } from '~/components/dialogs/team-member-create-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';
+import { TeamMembersTable } from '~/components/tables/team-members-table';
 
 export default function TeamsSettingsMembersPage() {
-  const { _ } = useLingui();
+  const { t } = useLingui();
 
   const [searchParams, setSearchParams] = useSearchParams();
   const { pathname } = useLocation();
@@ -24,8 +20,6 @@ export default function TeamsSettingsMembersPage() {
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
 
-  const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
-
   /**
    * Handle debouncing the search query.
    */
@@ -48,44 +42,18 @@ export default function TeamsSettingsMembersPage() {
 
   return (
     <div>
-      <SettingsHeader
-        title={_(msg`Members`)}
-        subtitle={_(msg`Manage the members or invite new members.`)}
-      >
-        <TeamMemberInviteDialog />
+      <SettingsHeader title={t`Team Members`} subtitle={t`Manage the members of your team.`}>
+        <TeamMemberCreateDialog />
       </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`)}
-          />
+      <Input
+        defaultValue={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder={t`Search`}
+        className="mb-4"
+      />
 
-          <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>
+      <TeamMembersTable />
     </div>
   );
 }

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

@@ -1,49 +1,156 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { TeamBrandingPreferencesForm } from '~/components/forms/team-branding-preferences-form';
-import { TeamDocumentPreferencesForm } from '~/components/forms/team-document-preferences-form';
+import {
+  BrandingPreferencesForm,
+  type TBrandingPreferencesFormSchema,
+} from '~/components/forms/branding-preferences-form';
+import {
+  DocumentPreferencesForm,
+  type TDocumentPreferencesFormSchema,
+} from '~/components/forms/document-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
 
-import type { Route } from './+types/settings.preferences';
-
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  const team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-
-  return {
-    team,
-  };
+export function meta() {
+  return appMetaTags('Preferences');
 }
 
-export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
-  const { team } = loaderData;
+export default function TeamsSettingsPage() {
+  const team = useCurrentTeam();
 
-  const { _ } = useLingui();
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onDocumentPreferencesSubmit = async (data: TDocumentPreferencesFormSchema) => {
+    try {
+      const {
+        documentVisibility,
+        documentLanguage,
+        includeSenderDetails,
+        includeSigningCertificate,
+        signatureTypes,
+      } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          documentVisibility,
+          documentLanguage,
+          includeSenderDetails,
+          includeSigningCertificate,
+          ...(signatureTypes.length === 0
+            ? {
+                typedSignatureEnabled: null,
+                uploadSignatureEnabled: null,
+                drawSignatureEnabled: null,
+              }
+            : {
+                typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+                uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+                drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+              }),
+        },
+      });
+
+      toast({
+        title: t`Document preferences updated`,
+        description: t`Your document preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your document preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
+    try {
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+
+      let uploadedBrandingLogo = teamWithSettings?.teamSettings?.brandingLogo;
+
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
+
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
+      }
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          brandingEnabled,
+          brandingLogo: uploadedBrandingLogo || null,
+          brandingUrl: brandingUrl || null,
+          brandingCompanyDetails: brandingCompanyDetails || null,
+        },
+      });
+
+      toast({
+        title: t`Branding preferences updated`,
+        description: t`Your branding preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`We were unable to update your branding preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <SettingsHeader
-        title={_(msg`Team Preferences`)}
-        subtitle={_(msg`Here you can set preferences and defaults for your team.`)}
+        title={t`Team Preferences`}
+        subtitle={t`Here you can set preferences and defaults for your team.`}
       />
 
       <section>
-        <TeamDocumentPreferencesForm team={team} settings={team.teamGlobalSettings} />
+        <DocumentPreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onDocumentPreferencesSubmit}
+        />
       </section>
 
       <SettingsHeader
-        title={_(msg`Branding Preferences`)}
-        subtitle={_(msg`Here you can set preferences and defaults for branding.`)}
+        title={t`Branding Preferences`}
+        subtitle={t`Here you can set preferences and defaults for branding.`}
         className="mt-8"
       />
 
       <section>
-        <TeamBrandingPreferencesForm team={team} settings={team.teamGlobalSettings} />
+        <BrandingPreferencesForm
+          canInherit={true}
+          context="Team"
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onBrandingPreferencesFormSubmit}
+        />
       </section>
     </div>
   );

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

@@ -1,11 +1,40 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type { TemplateDirectLink } from '@prisma/client';
+import { TemplateType } from '@prisma/client';
+
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-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 PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile';
+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 { SettingsPublicProfileTemplatesTable } from '~/components/tables/settings-public-profile-templates-table';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/settings.public-profile';
 
+type DirectTemplate = FindTemplateRow & {
+  directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+};
+
+export function meta() {
+  return appMetaTags('Public Profile');
+}
+
 // Todo: This can be optimized.
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getSession(request);
@@ -25,5 +54,170 @@ export async function loader({ request, params }: Route.LoaderArgs) {
   };
 }
 
-// Todo: Test that the profile shows up correctly for teams.
-export default PublicProfilePage;
+export default function PublicProfilePage({ loaderData }: Route.ComponentProps) {
+  const { profile } = loaderData;
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const { refreshSession } = useSession();
+
+  const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  const { data } = trpc.template.findTemplates.useQuery({
+    perPage: 100,
+  });
+
+  const { mutateAsync: updateTeam, isPending: isUpdatingTeamProfile } =
+    trpc.team.update.useMutation({
+      onSuccess: async () => {
+        await refreshSession();
+      },
+    });
+
+  const isUpdating = isUpdatingTeamProfile;
+
+  const enabledPrivateDirectTemplates = useMemo(
+    () =>
+      (data?.data ?? []).filter(
+        (template): template is DirectTemplate =>
+          template.directLink?.enabled === true && template.type !== TemplateType.PUBLIC,
+      ),
+    [data],
+  );
+
+  const onProfileUpdate = async (data: TPublicProfileFormSchema) => {
+    await updateTeam({
+      teamId: team.id,
+      data: {
+        ...data,
+        profileEnabled: isPublicProfileVisible,
+      },
+    });
+
+    if (!isPublicProfileVisible) {
+      setIsTooltipOpen(true);
+    }
+  };
+
+  const togglePublicProfileVisibility = async (isVisible: boolean) => {
+    setIsTooltipOpen(false);
+
+    if (isUpdating) {
+      return;
+    }
+
+    setIsPublicProfileVisible(isVisible);
+
+    try {
+      await updateTeam({
+        teamId: team.id,
+        data: {
+          profileEnabled: isVisible,
+        },
+      });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`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={t`Public Profile`}
+        subtitle={t`You can choose to enable or disable the profile for public view.`}
+      >
+        <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 profile={profile} onProfileUpdate={onProfileUpdate} />
+
+      <div className="mt-4">
+        <SettingsHeader
+          title={t`Templates`}
+          subtitle={t`Show templates in your public profile for your audience to sign and get started quickly`}
+          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+/t.$teamUrl+/settings.tokens.tsx

@@ -1,3 +1,121 @@
-import ApiTokensPage from '~/routes/_authenticated+/settings+/tokens';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import { DateTime } from 'luxon';
 
-export default ApiTokensPage;
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('API Tokens');
+}
+
+export default function ApiTokensPage() {
+  const { i18n } = useLingui();
+
+  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
+
+  const team = useOptionalCurrentTeam();
+
+  return (
+    <div>
+      <SettingsHeader
+        title={<Trans>API Tokens</Trans>}
+        subtitle={
+          <Trans>
+            On this page, you can create and manage API tokens. See our{' '}
+            <a
+              className="text-primary underline"
+              href={'https://docs.documenso.com/developers/public-api'}
+              target="_blank"
+            >
+              Documentation
+            </a>{' '}
+            for more information.
+          </Trans>
+        }
+      />
+
+      {team && team?.currentTeamRole !== TeamMemberRole.ADMIN ? (
+        <Alert
+          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+          variant="warning"
+        >
+          <div>
+            <AlertTitle>
+              <Trans>Unauthorized</Trans>
+            </AlertTitle>
+            <AlertDescription className="mr-2">
+              <Trans>You need to be an admin to manage API tokens.</Trans>
+            </AlertDescription>
+          </div>
+        </Alert>
+      ) : (
+        <>
+          <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+/t.$teamUrl+/settings.webhooks.$id.tsx

@@ -8,7 +8,7 @@ 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 { ZEditWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -27,13 +27,18 @@ 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 { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/settings.webhooks.$id';
 
-const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+const ZEditWebhookFormSchema = ZEditWebhookRequestSchema.omit({ id: true, teamId: true });
 
 type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
 
+export function meta() {
+  return appMetaTags('Webhooks');
+}
+
 export default function WebhookPage({ params }: Route.ComponentProps) {
   const { _ } = useLingui();
   const { toast } = useToast();

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

@@ -15,6 +15,11 @@ 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';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Webhooks');
+}
 
 export default function WebhookPage() {
   const { _, i18n } = useLingui();

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

@@ -1,5 +1,217 @@
-import TemplatePage, { loader } from '~/routes/_authenticated+/templates.$id._index';
+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';
 
-export { loader };
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
-export default TemplatePage;
+import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
+import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
+import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+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/templates.$id._index';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+
+  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} />
+
+          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
+
+          <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">
+            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
+          </CardContent>
+        </Card>
+
+        <DocumentReadOnlyFields
+          fields={readOnlyFields}
+          showFieldStatus={false}
+          showRecipientTooltip={true}
+          showRecipientColors={true}
+          recipientIds={recipients.map((recipient) => recipient.id)}
+          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)}
+                  />
+                </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+/t.$teamUrl+/templates.$id.edit.tsx

@@ -1,5 +1,108 @@
-import TemplateEditPage, { loader } from '~/routes/_authenticated+/templates.$id.edit';
+import { Trans } from '@lingui/react/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, redirect } from 'react-router';
 
-export { loader };
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
-export default TemplateEditPage;
+import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
+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 type { Route } from './+types/templates.$id.edit';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const team: TGetTeamByUrlResponse = await getTeamByUrl({
+    userId: user.id,
+    teamUrl: params.teamUrl,
+  });
+
+  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);
+  }
+
+  return superLoaderJson({
+    template: {
+      ...template,
+      folder: null,
+    },
+    templateRootPath,
+  });
+}
+
+export default function TemplateEditPage() {
+  const { template, 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 flex items-center gap-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+
+          {template.useLegacyFieldInsertion && (
+            <div>
+              <LegacyFieldWarningPopover type="template" templateId={template.id} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <TemplateEditForm
+        className="mt-6"
+        initialTemplate={template}
+        templateRootPath={templateRootPath}
+      />
+    </div>
+  );
+}

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

@@ -1,5 +1,292 @@
-import TemplatesPage, { meta } from '~/routes/_authenticated+/templates._index';
+import { useEffect, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useSearchParams } from 'react-router';
 
-export default TemplatesPage;
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
+import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
+import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  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, refetch } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+  });
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.TEMPLATE,
+    parentId: null,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team.url]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const templatesPath = formatTemplatesPath(team.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  const handleNavigate = (folderId: string) => {
+    navigateToFolder(folderId);
+  };
+
+  const handleMove = (folder: TFolderWithSubfolders) => {
+    setFolderToMove(folder);
+    setIsMovingFolder(true);
+  };
+
+  const handlePin = (folderId: string) => {
+    void pinFolder({ folderId });
+  };
+
+  const handleUnpin = (folderId: string) => {
+    void unpinFolder({ folderId });
+  };
+
+  const handleSettings = (folder: TFolderWithSubfolders) => {
+    setFolderToSettings(folder);
+    setIsSettingsFolderOpen(true);
+  };
+
+  const handleDelete = (folder: TFolderWithSubfolders) => {
+    setFolderToDelete(folder);
+    setIsDeletingFolder(true);
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatTemplatesPath(team.url)}/folders`);
+  };
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateCreateDialog templateRootPath={templateRootPath} />
+          <TemplateFolderCreateDialog />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={handleNavigate}
+                      onMove={handleMove}
+                      onPin={handlePin}
+                      onUnpin={handleUnpin}
+                      onSettings={handleSettings}
+                      onDelete={handleDelete}
+                    />
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+              {foldersData?.folders
+                ?.filter((folder) => !folder.pinned)
+                .slice(0, 12)
+                .map((folder) => (
+                  <FolderCard
+                    key={folder.id}
+                    folder={folder}
+                    onNavigate={handleNavigate}
+                    onMove={handleMove}
+                    onPin={handlePin}
+                    onUnpin={handleUnpin}
+                    onSettings={handleSettings}
+                    onDelete={handleDelete}
+                  />
+                ))}
+            </div>
+
+            <div className="mt-6 flex items-center justify-center">
+              {foldersData && foldersData.folders?.length > 12 && (
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-muted-foreground hover:text-foreground"
+                  onClick={() => void handleViewAllFolders()}
+                >
+                  View all folders
+                </Button>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="mt-12">
+        <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-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div className="mt-8">
+          {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>
+
+      <TemplateFolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <TemplateFolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <TemplateFolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

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

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

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

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

@@ -1,5 +1,369 @@
-import TemplatesPage, { meta } from '~/routes/_authenticated+/templates.f.$folderId._index';
+import { useEffect, useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
 
-export default TemplatesPage;
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesPage() {
+  const [searchParams] = useSearchParams();
+  const { folderId } = useParams();
+  const navigate = useNavigate();
+
+  const team = useCurrentTeam();
+
+  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, refetch } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+    folderId: folderId,
+  });
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+    type: FolderType.TEMPLATE,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
+  const navigateToFolder = (folderId?: string) => {
+    const templatesPath = formatTemplatesPath(team.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder()}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+
+          {foldersData?.breadcrumbs.map((folder) => (
+            <div key={folder.id} className="flex items-center space-x-2">
+              <span>/</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                onClick={() => navigateToFolder(folder.id)}
+              >
+                <FolderIcon className="h-4 w-4" />
+                <span>{folder.name}</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4 sm:flex-row sm:justify-end">
+          <TemplateFolderCreateDialog />
+          <TemplateCreateDialog templateRootPath={templateRootPath} folderId={folderId} />
+        </div>
+      </div>
+
+      {isFoldersLoading ? (
+        <div className="mt-6 flex justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {foldersData?.folders.some((folder) => folder.pinned) && (
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => folder.pinned)
+                  .map((folder) => (
+                    <div
+                      key={folder.id}
+                      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                    >
+                      <div className="flex items-start justify-between">
+                        <button
+                          className="flex items-center space-x-2 text-left"
+                          onClick={() => navigateToFolder(folder.id)}
+                        >
+                          <FolderIcon className="text-documenso h-6 w-6" />
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <h3 className="font-medium">{folder.name}</h3>
+                              <PinIcon className="text-documenso h-3 w-3" />
+                            </div>
+                            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                              <span>{folder._count.templates || 0} templates</span>
+                              <span>•</span>
+                              <span>{folder._count.subfolders} folders</span>
+                            </div>
+                          </div>
+                        </button>
+
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="opacity-0 group-hover:opacity-100"
+                            >
+                              •••
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToMove(folder);
+                                setIsMovingFolder(true);
+                              }}
+                            >
+                              Move
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                void unpinFolder({ folderId: folder.id });
+                              }}
+                            >
+                              Unpin
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => {
+                                setFolderToSettings(folder);
+                                setIsSettingsFolderOpen(true);
+                              }}
+                            >
+                              Settings
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              className="text-red-500"
+                              onClick={() => {
+                                setFolderToDelete(folder);
+                                setIsDeletingFolder(true);
+                              }}
+                            >
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {foldersData?.folders
+              .filter((folder) => !folder.pinned)
+              .map((folder) => (
+                <div
+                  key={folder.id}
+                  className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+                >
+                  <div className="flex items-start justify-between">
+                    <button
+                      className="flex items-center space-x-2 text-left"
+                      onClick={() => navigateToFolder(folder.id)}
+                    >
+                      <FolderIcon className="text-documenso h-6 w-6" />
+                      <div>
+                        <h3 className="font-medium">{folder.name}</h3>
+                        <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+                          <span>{folder._count.templates || 0} templates</span>
+                          <span>•</span>
+                          <span>{folder._count.subfolders} folders</span>
+                        </div>
+                      </div>
+                    </button>
+
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="opacity-0 group-hover:opacity-100"
+                        >
+                          •••
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToMove(folder);
+                            setIsMovingFolder(true);
+                          }}
+                        >
+                          Move
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            void pinFolder({ folderId: folder.id });
+                          }}
+                        >
+                          Pin
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setFolderToSettings(folder);
+                            setIsSettingsFolderOpen(true);
+                          }}
+                        >
+                          Settings
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-red-500"
+                          onClick={() => {
+                            setFolderToDelete(folder);
+                            setIsDeletingFolder(true);
+                          }}
+                        >
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </>
+      )}
+
+      <div className="relative mt-12">
+        <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-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div className="mt-8">
+          {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>
+
+      <FolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

@@ -1,5 +1,184 @@
-import TemplatesFoldersPage, { meta } from '~/routes/_authenticated+/templates.folders._index';
+import { useState } from 'react';
 
-export { meta };
+import { Trans } from '@lingui/react/macro';
+import { HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate } from 'react-router';
 
-export default TemplatesFoldersPage;
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
+import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
+import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
+import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Templates');
+}
+
+export default function TemplatesFoldersPage() {
+  const navigate = useNavigate();
+  const team = useCurrentTeam();
+
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
+    type: FolderType.TEMPLATE,
+    parentId: null,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const templatesPath = formatTemplatesPath(team.url);
+
+    if (folderId) {
+      void navigate(`${templatesPath}/f/${folderId}`);
+    } else {
+      void navigate(templatesPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
+          <TemplateFolderCreateDialog />
+        </div>
+      </div>
+
+      <div className="mt-6">
+        {isFoldersLoading ? (
+          <div className="mt- flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-12">
+              <h1 className="truncate text-2xl font-semibold md:text-3xl">
+                <Trans>All Folders</Trans>
+              </h1>
+
+              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      <TemplateFolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open: boolean) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <TemplateFolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open: boolean) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <TemplateFolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open: boolean) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

@@ -1,228 +0,0 @@
-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 { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-
-import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
-import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
-import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-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/templates.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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);
-  }
-
-  if (template.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
-  }
-
-  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} />
-
-          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
-
-          <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">
-            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
-          </CardContent>
-        </Card>
-
-        <DocumentReadOnlyFields
-          fields={readOnlyFields}
-          showFieldStatus={false}
-          showRecipientTooltip={true}
-          showRecipientColors={true}
-          recipientIds={recipients.map((recipient) => recipient.id)}
-          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

@@ -1,125 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { ChevronLeft } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-
-import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
-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/templates.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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);
-  }
-
-  if (template.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
-  }
-
-  const isTemplateEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    template: {
-      ...template,
-      folder: null,
-    },
-    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={
-              template.folderId
-                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
-                : `${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 flex items-center gap-2 sm:mt-0 sm:self-end">
-          <TemplateDirectLinkDialogWrapper template={template} />
-
-          {template.useLegacyFieldInsertion && (
-            <div>
-              <LegacyFieldWarningPopover type="template" templateId={template.id} />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <TemplateEditForm
-        className="mt-6"
-        initialTemplate={template}
-        templateRootPath={templateRootPath}
-        isEnterprise={isTemplateEnterprise}
-      />
-    </div>
-  );
-}

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

@@ -1,292 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
-import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
-import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
-import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
-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 navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const team = useOptionalCurrentTeam();
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  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, refetch } = trpc.template.findTemplates.useQuery({
-    page: page,
-    perPage: perPage,
-  });
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    type: FolderType.TEMPLATE,
-    parentId: null,
-  });
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const templatesPath = formatTemplatesPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  const handleNavigate = (folderId: string) => {
-    navigateToFolder(folderId);
-  };
-
-  const handleMove = (folder: TFolderWithSubfolders) => {
-    setFolderToMove(folder);
-    setIsMovingFolder(true);
-  };
-
-  const handlePin = (folderId: string) => {
-    void pinFolder({ folderId });
-  };
-
-  const handleUnpin = (folderId: string) => {
-    void unpinFolder({ folderId });
-  };
-
-  const handleSettings = (folder: TFolderWithSubfolders) => {
-    setFolderToSettings(folder);
-    setIsSettingsFolderOpen(true);
-  };
-
-  const handleDelete = (folder: TFolderWithSubfolders) => {
-    setFolderToDelete(folder);
-    setIsDeletingFolder(true);
-  };
-
-  const handleViewAllFolders = () => {
-    void navigate(`${formatTemplatesPath(team?.url)}/folders`);
-  };
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-
-          {foldersData?.breadcrumbs.map((folder) => (
-            <div key={folder.id} className="flex items-center space-x-2">
-              <span>/</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                onClick={() => navigateToFolder(folder.id)}
-              >
-                <FolderIcon className="h-4 w-4" />
-                <span>{folder.name}</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <TemplateCreateDialog templateRootPath={templateRootPath} />
-          <TemplateFolderCreateDialog />
-        </div>
-      </div>
-
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData.folders
-                  .filter((folder) => folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={handleNavigate}
-                      onMove={handleMove}
-                      onPin={handlePin}
-                      onUnpin={handleUnpin}
-                      onSettings={handleSettings}
-                      onDelete={handleDelete}
-                    />
-                  ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-6">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {foldersData?.folders
-                ?.filter((folder) => !folder.pinned)
-                .slice(0, 12)
-                .map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onNavigate={handleNavigate}
-                    onMove={handleMove}
-                    onPin={handlePin}
-                    onUnpin={handleUnpin}
-                    onSettings={handleSettings}
-                    onDelete={handleDelete}
-                  />
-                ))}
-            </div>
-
-            <div className="mt-6 flex items-center justify-center">
-              {foldersData && foldersData.folders?.length > 12 && (
-                <Button
-                  variant="link"
-                  size="sm"
-                  className="text-muted-foreground hover:text-foreground"
-                  onClick={() => void handleViewAllFolders()}
-                >
-                  View all folders
-                </Button>
-              )}
-            </div>
-          </div>
-        </>
-      )}
-
-      <div className="mt-12">
-        <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-muted-foreground text-xs">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
-          )}
-
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">
-            <Trans>Templates</Trans>
-          </h1>
-        </div>
-
-        <div className="mt-8">
-          {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>
-
-      <TemplateFolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <TemplateFolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <TemplateFolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,230 +0,0 @@
-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 { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-
-import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
-import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
-import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-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/templates.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const templateId = Number(id);
-  const templateRootPath = formatTemplatesPath(team?.url);
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
-    throw redirect(folderId ? `${templateRootPath}/f/${folderId}` : templateRootPath);
-  }
-
-  if (!template.folderId) {
-    throw redirect(`${templateRootPath}/${templateId}`);
-  }
-
-  if (template.folderId !== folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
-  }
-
-  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} />
-
-          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
-
-          <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">
-            <PDFViewer 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.f.$folderId.$id.edit.tsx

@@ -1,122 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { ChevronLeft } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-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/templates.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  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);
-  }
-
-  if (!template.folderId) {
-    throw redirect(`${templateRootPath}/${templateId}/edit`);
-  }
-
-  if (template.folderId !== params.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
-  }
-
-  const isTemplateEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    template: {
-      ...template,
-      folder: null,
-    },
-    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={
-              template.folderId
-                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
-                : `${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.f.$folderId._index.tsx

@@ -1,369 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-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 { folderId } = useParams();
-  const navigate = useNavigate();
-
-  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, refetch } = trpc.template.findTemplates.useQuery({
-    page: page,
-    perPage: perPage,
-    folderId: folderId,
-  });
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    parentId: folderId,
-    type: FolderType.TEMPLATE,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const navigateToFolder = (folderId?: string) => {
-    const templatesPath = formatTemplatesPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder()}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-
-          {foldersData?.breadcrumbs.map((folder) => (
-            <div key={folder.id} className="flex items-center space-x-2">
-              <span>/</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                onClick={() => navigateToFolder(folder.id)}
-              >
-                <FolderIcon className="h-4 w-4" />
-                <span>{folder.name}</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <TemplateFolderCreateDialog />
-          <TemplateCreateDialog templateRootPath={templateRootPath} folderId={folderId} />
-        </div>
-      </div>
-
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders.some((folder) => folder.pinned) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => folder.pinned)
-                  .map((folder) => (
-                    <div
-                      key={folder.id}
-                      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
-                    >
-                      <div className="flex items-start justify-between">
-                        <button
-                          className="flex items-center space-x-2 text-left"
-                          onClick={() => navigateToFolder(folder.id)}
-                        >
-                          <FolderIcon className="text-documenso h-6 w-6" />
-                          <div>
-                            <div className="flex items-center gap-2">
-                              <h3 className="font-medium">{folder.name}</h3>
-                              <PinIcon className="text-documenso h-3 w-3" />
-                            </div>
-                            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
-                              <span>{folder._count.templates || 0} templates</span>
-                              <span>•</span>
-                              <span>{folder._count.subfolders} folders</span>
-                            </div>
-                          </div>
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="opacity-0 group-hover:opacity-100"
-                            >
-                              •••
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => {
-                                setFolderToMove(folder);
-                                setIsMovingFolder(true);
-                              }}
-                            >
-                              Move
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => {
-                                void unpinFolder({ folderId: folder.id });
-                              }}
-                            >
-                              Unpin
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => {
-                                setFolderToSettings(folder);
-                                setIsSettingsFolderOpen(true);
-                              }}
-                            >
-                              Settings
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              className="text-red-500"
-                              onClick={() => {
-                                setFolderToDelete(folder);
-                                setIsDeletingFolder(true);
-                              }}
-                            >
-                              Delete
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {foldersData?.folders
-              .filter((folder) => !folder.pinned)
-              .map((folder) => (
-                <div
-                  key={folder.id}
-                  className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
-                >
-                  <div className="flex items-start justify-between">
-                    <button
-                      className="flex items-center space-x-2 text-left"
-                      onClick={() => navigateToFolder(folder.id)}
-                    >
-                      <FolderIcon className="text-documenso h-6 w-6" />
-                      <div>
-                        <h3 className="font-medium">{folder.name}</h3>
-                        <div className="mt-1 flex space-x-2 text-xs text-gray-500">
-                          <span>{folder._count.templates || 0} templates</span>
-                          <span>•</span>
-                          <span>{folder._count.subfolders} folders</span>
-                        </div>
-                      </div>
-                    </button>
-
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="opacity-0 group-hover:opacity-100"
-                        >
-                          •••
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFolderToMove(folder);
-                            setIsMovingFolder(true);
-                          }}
-                        >
-                          Move
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            void pinFolder({ folderId: folder.id });
-                          }}
-                        >
-                          Pin
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFolderToSettings(folder);
-                            setIsSettingsFolderOpen(true);
-                          }}
-                        >
-                          Settings
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          className="text-red-500"
-                          onClick={() => {
-                            setFolderToDelete(folder);
-                            setIsDeletingFolder(true);
-                          }}
-                        >
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </div>
-              ))}
-          </div>
-        </>
-      )}
-
-      <div className="relative mt-12">
-        <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-muted-foreground text-xs">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
-          )}
-
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">
-            <Trans>Templates</Trans>
-          </h1>
-        </div>
-
-        <div className="mt-8">
-          {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>
-
-      <FolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <FolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <FolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,181 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
-import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
-import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
-import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Templates');
-}
-
-export default function TemplatesFoldersPage() {
-  const navigate = useNavigate();
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
-    type: FolderType.TEMPLATE,
-    parentId: null,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const templatesPath = formatTemplatesPath();
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <TemplateFolderCreateDialog />
-        </div>
-      </div>
-
-      <div className="mt-6">
-        {isFoldersLoading ? (
-          <div className="mt- flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
-
-              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      <TemplateFolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open: boolean) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <TemplateFolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open: boolean) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <TemplateFolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open: boolean) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

apps/remix/app/routes/_index.tsx

@@ -14,31 +14,35 @@ export async function loader({ request }: Route.LoaderArgs) {
   if (session.isAuthenticated) {
     const teamUrlCookie = extractCookieFromHeaders('preferred-team-url', request.headers);
 
-    const referrer = request.headers.get('referer');
-    let isReferrerFromTeamUrl = false;
+    // const referrer = request.headers.get('referer');
+    // let isReferrerFromTeamUrl = false;
 
-    if (referrer) {
-      const referrerUrl = new URL(referrer);
+    // if (referrer) {
+    //   const referrerUrl = new URL(referrer);
 
-      if (referrerUrl.pathname.startsWith('/t/')) {
-        isReferrerFromTeamUrl = true;
-      }
-    }
+    //   if (referrerUrl.pathname.startsWith('/t/')) {
+    //     isReferrerFromTeamUrl = true;
+    //   }
+    // }
 
     const preferredTeamUrl =
       teamUrlCookie && ZTeamUrlSchema.safeParse(teamUrlCookie).success ? teamUrlCookie : undefined;
 
-    // Early return for no preferred team.
-    if (!preferredTeamUrl || isReferrerFromTeamUrl) {
-      throw redirect('/documents');
-    }
+    // // Early return for no preferred team.
+    // if (!preferredTeamUrl || isReferrerFromTeamUrl) {
+    //   throw redirect('/inbox');
+    // }
 
     const teams = await getTeams({ userId: session.user.id });
 
-    const currentTeam = teams.find((team) => team.url === preferredTeamUrl);
+    let currentTeam = teams.find((team) => team.url === preferredTeamUrl);
+
+    if (!currentTeam && teams.length === 1) {
+      currentTeam = teams[0];
+    }
 
     if (!currentTeam) {
-      throw redirect('/documents');
+      throw redirect('/inbox');
     }
 
     throw redirect(formatDocumentsPath(currentTeam.url));

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

@@ -45,7 +45,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const { data: auditLogs } = await findDocumentAuditLogs({
     documentId: documentId,
     userId: document.userId,
-    teamId: document.teamId || undefined,
+    teamId: document.teamId,
     perPage: 100_000,
   });
 

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

@@ -8,7 +8,6 @@ import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 import { renderSVG } from 'uqr';
 
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
@@ -18,7 +17,7 @@ import {
 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 { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getTranslations } from '@documenso/lib/utils/i18n';
@@ -64,11 +63,7 @@ export async function loader({ request }: Route.LoaderArgs) {
     throw redirect('/');
   }
 
-  const team = document.teamId
-    ? await getTeamById({ teamId: document.teamId, userId: document.userId })
-    : null;
-
-  const isPlatformDocument = await isDocumentPlatform(document);
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: document.teamId });
 
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
 
@@ -80,9 +75,8 @@ export async function loader({ request }: Route.LoaderArgs) {
 
   return {
     document,
-    team,
+    hidePoweredBy: organisationClaim.flags.hidePoweredBy,
     documentLanguage,
-    isPlatformDocument,
     auditLogs,
     messages,
   };
@@ -98,7 +92,7 @@ export async function loader({ request }: Route.LoaderArgs) {
  * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
-  const { document, team, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
+  const { document, documentLanguage, hidePoweredBy, auditLogs, messages } = loaderData;
 
   const { i18n, _ } = useLingui();
 
@@ -362,7 +356,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      {!isPlatformDocument && !team?.teamGlobalSettings?.brandingHidePoweredBy && (
+      {!hidePoweredBy && (
         <div className="my-8 flex-row-reverse space-y-4">
           <div className="flex items-end justify-end gap-x-4">
             <div
@@ -379,7 +373,6 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
             <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>

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

@@ -40,7 +40,7 @@ export default function PublicProfileLayout() {
   return (
     <div className="min-h-screen">
       {sessionData ? (
-        <AuthenticatedHeader user={sessionData.user} teams={sessionData.teams} />
+        <AuthenticatedHeader />
       ) : (
         <header
           className={cn(

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

@@ -21,9 +21,7 @@ export default function RecipientLayout() {
 
   return (
     <div className="min-h-screen">
-      {sessionData?.user && (
-        <AuthenticatedHeader user={sessionData.user} teams={sessionData.teams} />
-      )}
+      {sessionData?.user && <AuthenticatedHeader />}
 
       <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">
         <Outlet />

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

@@ -17,6 +17,7 @@ import { getNextPendingRecipient } from '@documenso/lib/server-only/recipient/ge
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
+import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
 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';
@@ -139,6 +140,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
 
+  const settings = await getTeamSettings({ teamId: document.teamId });
+
   return superLoaderJson({
     isDocumentAccessValid: true,
     document,
@@ -149,6 +152,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     completedFields,
     recipientSignature,
     isRecipientsTurn,
+    includeSenderDetails: settings.includeSenderDetails,
   } as const);
 }
 
@@ -175,6 +179,7 @@ export default function SigningPage() {
     recipientSignature,
     isRecipientsTurn,
     allRecipients,
+    includeSenderDetails,
     recipientWithFields,
   } = data;
 
@@ -207,7 +212,7 @@ export default function SigningPage() {
           </p>
 
           {user ? (
-            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
+            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-36">
               <Trans>Go Back Home</Trans>
             </Link>
           ) : (
@@ -249,6 +254,7 @@ export default function SigningPage() {
           completedFields={completedFields}
           isRecipientsTurn={isRecipientsTurn}
           allRecipients={allRecipients}
+          includeSenderDetails={includeSenderDetails}
         />
       </DocumentSigningAuthProvider>
     </DocumentSigningProvider>

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

@@ -249,7 +249,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
           )}
 
           {user && (
-            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-2">
+            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-2">
               <Trans>Go Back Home</Trans>
             </Link>
           )}

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

@@ -56,9 +56,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     }
   }
 
-  const documentPathForEditing = isOwnerOrTeamMember
-    ? formatDocumentsPath(team?.url) + '/' + document.id
-    : null;
+  const documentPathForEditing =
+    isOwnerOrTeamMember && team ? formatDocumentsPath(team.url) + '/' + document.id : null;
 
   return {
     documentPathForEditing,
@@ -95,7 +94,7 @@ export default function WaitingForTurnToSignPage({ loaderData }: Route.Component
             </Button>
           ) : (
             <Button variant="link" asChild>
-              <Link to="/documents">Return Home</Link>
+              <Link to="/">Return Home</Link>
             </Button>
           )}
         </div>

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

@@ -156,8 +156,8 @@ export default function SignatureDisclosure() {
 
       <div className="mt-8">
         <Button asChild>
-          <Link to="/documents">
-            <Trans>Back to Documents</Trans>
+          <Link to="/">
+            <Trans>Back home</Trans>
           </Link>
         </Button>
       </div>

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

@@ -0,0 +1,100 @@
+import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberInviteStatus } from '@prisma/client';
+import { Link } from 'react-router';
+
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/organisation.decline.$token';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  const organisationMemberInvite = await prisma.organisationMemberInvite.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      organisation: {
+        select: {
+          name: true,
+        },
+      },
+    },
+  });
+
+  if (!organisationMemberInvite) {
+    return {
+      state: 'InvalidLink',
+    } as const;
+  }
+
+  if (organisationMemberInvite.status !== OrganisationMemberInviteStatus.DECLINED) {
+    await prisma.organisationMemberInvite.update({
+      where: {
+        id: organisationMemberInvite.id,
+      },
+      data: {
+        status: OrganisationMemberInviteStatus.DECLINED,
+      },
+    });
+  }
+
+  return {
+    state: 'Success',
+    organisationName: organisationMemberInvite.organisation.name,
+  } 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>
+    );
+  }
+
+  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.organisationName}</strong> to join
+          their organisation.
+        </Trans>
+      </p>
+
+      <Button asChild>
+        <Link to="/">
+          <Trans>Return to Home</Trans>
+        </Link>
+      </Button>
+    </div>
+  );
+}

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

@@ -1,16 +1,12 @@
 import { Trans } from '@lingui/react/macro';
-import { TeamMemberInviteStatus } from '@prisma/client';
-import { DateTime } from 'luxon';
 import { Link } from 'react-router';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-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 { acceptOrganisationInvitation } from '@documenso/lib/server-only/organisation/accept-organisation-invitation';
 import { prisma } from '@documenso/prisma';
 import { Button } from '@documenso/ui/primitives/button';
 
-import type { Route } from './+types/team.invite.$token';
+import type { Route } from './+types/organisation.invite.$token';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const session = await getOptionalSession(request);
@@ -23,24 +19,29 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     } as const;
   }
 
-  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+  const organisationMemberInvite = await prisma.organisationMemberInvite.findUnique({
     where: {
       token,
     },
+    include: {
+      organisation: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
-  if (!teamMemberInvite) {
+  if (!organisationMemberInvite) {
     return {
       state: 'InvalidLink',
     } as const;
   }
 
-  const team = await getTeamById({ teamId: teamMemberInvite.teamId });
-
   const user = await prisma.user.findFirst({
     where: {
       email: {
-        equals: teamMemberInvite.email,
+        equals: organisationMemberInvite.email,
         mode: 'insensitive',
       },
     },
@@ -48,32 +49,14 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   // 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 });
+    await acceptOrganisationInvitation({ token: organisationMemberInvite.token });
   }
 
-  // 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,
+      email: organisationMemberInvite.email,
+      organisationName: organisationMemberInvite.organisation.name,
     } as const;
   }
 
@@ -81,8 +64,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return {
     state: 'Success',
-    email,
-    teamName: team.name,
+    email: organisationMemberInvite.email,
+    organisationName: organisationMemberInvite.organisation.name,
     isSessionUserTheInvitedUser,
   } as const;
 }
@@ -118,12 +101,13 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
     return (
       <div>
         <h1 className="text-4xl font-semibold">
-          <Trans>Team invitation</Trans>
+          <Trans>Organisation 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.
+            You have been invited by <strong>{data.organisationName}</strong> to join their
+            organisation.
           </Trans>
         </p>
 
@@ -132,7 +116,7 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
         </p>
 
         <Button asChild>
-          <Link to={`/signup?email=${encodeURIComponent(data.email)}`}>
+          <Link to={`/signup#email=${encodeURIComponent(data.email)}`}>
             <Trans>Create account</Trans>
           </Link>
         </Button>
@@ -148,7 +132,8 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
 
       <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.
+          You have accepted an invitation from <strong>{data.organisationName}</strong> to join
+          their organisation.
         </Trans>
       </p>
 
@@ -160,7 +145,7 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
         </Button>
       ) : (
         <Button asChild>
-          <Link to={`/signin?email=${encodeURIComponent(data.email)}`}>
+          <Link to={`/signin#email=${encodeURIComponent(data.email)}`}>
             <Trans>Continue to login</Trans>
           </Link>
         </Button>

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

@@ -27,7 +27,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
 
   if (isAuthenticated) {
-    throw redirect('/documents');
+    throw redirect('/');
   }
 
   return {

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

@@ -1,165 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { TeamMemberInviteStatus } from '@prisma/client';
-import { DateTime } from 'luxon';
-import { Link } from 'react-router';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-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, request }: Route.LoaderArgs) {
-  const session = await getOptionalSession(request);
-
-  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.verify.transfer.$token.tsx

@@ -1,154 +1,28 @@
 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>
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
         <h1 className="text-4xl font-semibold">
-          <Trans>Team ownership transfer already completed!</Trans>
+          <Trans>Invalid link</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>
+          <Trans>This link is invalid or has expired.</Trans>
         </p>
 
         <Button asChild>
           <Link to="/">
-            <Trans>Continue</Trans>
+            <Trans>Return</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/api+/branding.logo.organisation.$orgId.ts

@@ -0,0 +1,80 @@
+import sharp from 'sharp';
+
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { prisma } from '@documenso/prisma';
+
+import type { Route } from './+types/branding.logo.team.$teamId';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const organisationId = params.orgId;
+
+  if (!organisationId) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Invalid organisation ID',
+      },
+      { status: 400 },
+    );
+  }
+
+  const organisation = await prisma.organisation.findUnique({
+    where: {
+      id: organisationId,
+    },
+    include: {
+      organisationGlobalSettings: true,
+    },
+  });
+
+  const settings = organisation?.organisationGlobalSettings;
+
+  if (!settings || !settings.brandingLogo) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Logo not found',
+      },
+      { status: 404 },
+    );
+  }
+
+  if (!settings.brandingEnabled) {
+    return Response.json(
+      {
+        status: 'error',
+        message: 'Branding is not enabled',
+      },
+      { status: 400 },
+    );
+  }
+
+  const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
+    console.error(e);
+  });
+
+  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+/branding.logo.team.$teamId.ts

@@ -1,7 +1,7 @@
 import sharp from 'sharp';
 
+import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
 import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
-import { prisma } from '@documenso/prisma';
 
 import type { Route } from './+types/branding.logo.team.$teamId';
 
@@ -18,10 +18,8 @@ export async function loader({ params }: Route.LoaderArgs) {
     );
   }
 
-  const settings = await prisma.teamGlobalSettings.findFirst({
-    where: {
-      teamId,
-    },
+  const settings = await getTeamSettings({
+    teamId,
   });
 
   if (!settings || !settings.brandingLogo) {

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

@@ -2,11 +2,8 @@ import { data } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-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 { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 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';
@@ -36,10 +33,15 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw new Response('Not found', { status: 404 });
   }
 
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: template.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
   // 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) {
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
     throw data(
       {
         type: 'embed-paywall',
@@ -56,18 +58,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     documentAuth: template.authOptions,
   });
 
-  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
-    isDocumentPlatform(template),
-    isUserEnterprise({
-      userId: template.userId,
-      teamId: template.teamId ?? undefined,
-    }),
-    isUserCommunityPlan({
-      userId: template.userId,
-      teamId: template.teamId ?? undefined,
-    }),
-  ]);
-
   const isAccessAuthValid = match(derivedRecipientAccessAuth.at(0))
     .with(DocumentAccessAuth.ACCOUNT, () => !!user)
     .with(undefined, () => true)
@@ -98,12 +88,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   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,
@@ -111,24 +95,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     recipient,
     fields,
     hidePoweredBy,
-    isPlatformDocument,
-    isEnterpriseDocument,
-    isCommunityPlan,
+    allowEmbedSigningWhitelabel,
   });
 }
 
 export default function EmbedDirectTemplatePage() {
-  const {
-    token,
-    user,
-    template,
-    recipient,
-    fields,
-    hidePoweredBy,
-    isPlatformDocument,
-    isEnterpriseDocument,
-    isCommunityPlan,
-  } = useSuperLoaderData<typeof loader>();
+  const { token, user, template, recipient, fields, hidePoweredBy, allowEmbedSigningWhitelabel } =
+    useSuperLoaderData<typeof loader>();
 
   return (
     <DocumentSigningProvider
@@ -152,10 +125,8 @@ export default function EmbedDirectTemplatePage() {
             recipient={recipient}
             fields={fields}
             metadata={template.templateMeta}
-            hidePoweredBy={
-              isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
-            }
-            allowWhiteLabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
+            hidePoweredBy={hidePoweredBy}
+            allowWhiteLabelling={allowEmbedSigningWhitelabel}
           />
         </DocumentSigningRecipientProvider>
       </DocumentSigningAuthProvider>

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

@@ -3,17 +3,14 @@ import { data } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-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 { 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 { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 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 { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
-import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -51,10 +48,15 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw new Response('Not found', { status: 404 });
   }
 
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: document.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
   // 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) {
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
     throw data(
       {
         type: 'embed-paywall',
@@ -65,18 +67,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
-  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
-    isDocumentPlatform(document),
-    isUserEnterprise({
-      userId: document.userId,
-      teamId: document.teamId ?? undefined,
-    }),
-    isUserCommunityPlan({
-      userId: document.userId,
-      teamId: document.teamId ?? undefined,
-    }),
-  ]);
-
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
   });
@@ -119,12 +109,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
         })
       : [];
 
-  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,
@@ -134,9 +118,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     fields,
     completedFields,
     hidePoweredBy,
-    isPlatformDocument,
-    isEnterpriseDocument,
-    isCommunityPlan,
+    allowEmbedSigningWhitelabel,
   });
 }
 
@@ -150,9 +132,7 @@ export default function EmbedSignDocumentPage() {
     fields,
     completedFields,
     hidePoweredBy,
-    isPlatformDocument,
-    isEnterpriseDocument,
-    isCommunityPlan,
+    allowEmbedSigningWhitelabel,
   } = useSuperLoaderData<typeof loader>();
 
   return (
@@ -178,10 +158,8 @@ export default function EmbedSignDocumentPage() {
           completedFields={completedFields}
           metadata={document.documentMeta}
           isCompleted={isDocumentCompleted(document.status)}
-          hidePoweredBy={
-            isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
-          }
-          allowWhitelabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
+          hidePoweredBy={hidePoweredBy}
+          allowWhitelabelling={allowEmbedSigningWhitelabel}
           allRecipients={allRecipients}
         />
       </DocumentSigningAuthProvider>

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

@@ -2,10 +2,8 @@ import { useLayoutEffect } from 'react';
 
 import { Outlet, useLoaderData } from 'react-router';
 
-import { isCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { TrpcProvider } from '@documenso/trpc/react';
 
 import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
@@ -27,39 +25,25 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 
   const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
 
-  let hasPlatformPlan = false;
-  let hasEnterprisePlan = false;
-  let hasCommunityPlan = false;
+  let allowEmbedAuthoringWhiteLabel = false;
 
   if (result) {
-    [hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan] = await Promise.all([
-      isCommunityPlan({
-        userId: result.userId,
-        teamId: result.teamId ?? undefined,
-      }),
-      isDocumentPlatform({
-        userId: result.userId,
-        teamId: result.teamId,
-      }),
-      isUserEnterprise({
-        userId: result.userId,
-        teamId: result.teamId ?? undefined,
-      }),
-    ]);
+    const organisationClaim = await getOrganisationClaimByTeamId({
+      teamId: result.teamId,
+    });
+
+    allowEmbedAuthoringWhiteLabel = organisationClaim.flags.embedAuthoringWhiteLabel ?? false;
   }
 
   return {
     hasValidToken: !!result,
     token,
-    hasCommunityPlan,
-    hasPlatformPlan,
-    hasEnterprisePlan,
+    allowEmbedAuthoringWhiteLabel,
   };
 };
 
 export default function AuthoringLayout() {
-  const { hasValidToken, token, hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan } =
-    useLoaderData<typeof loader>();
+  const { hasValidToken, token, allowEmbedAuthoringWhiteLabel } = useLoaderData<typeof loader>();
 
   useLayoutEffect(() => {
     try {
@@ -79,7 +63,7 @@ export default function AuthoringLayout() {
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (hasCommunityPlan || hasPlatformPlan || hasEnterprisePlan) {
+      if (allowEmbedAuthoringWhiteLabel) {
         injectCss({
           css,
           cssVars,

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -4,12 +4,9 @@ import { SigningStatus } from '@prisma/client';
 import { useRevalidator } from 'react-router';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
 import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
@@ -54,26 +51,10 @@ export async function loader({ request }: Route.LoaderArgs) {
     });
   }
 
-  const team = firstDocument.teamId
-    ? await getTeamById({ teamId: firstDocument.teamId, userId: firstDocument.userId }).catch(
-        () => null,
-      )
-    : null;
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: firstDocument.teamId });
 
-  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
-    isDocumentPlatform(firstDocument),
-    isUserEnterprise({
-      userId: firstDocument.userId,
-      teamId: firstDocument.teamId ?? undefined,
-    }),
-    isUserCommunityPlan({
-      userId: firstDocument.userId,
-      teamId: firstDocument.teamId ?? undefined,
-    }),
-  ]);
-
-  const hidePoweredBy = team?.teamGlobalSettings?.brandingHidePoweredBy ?? false;
-  const allowWhitelabelling = isCommunityPlan || isPlatformDocument || isEnterpriseDocument;
+  const allowWhitelabelling = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
 
   return superLoaderJson({
     envelopes,