fix: wip

apps/remix/app/components/(dashboard)/period-selector/types.ts

@@ -1,6 +0,0 @@
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
-
-export const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return ['', '7d', '14d', '30d'].includes(value as string);
-};

apps/remix/app/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx

@@ -1,18 +0,0 @@
-export const RefreshOnFocus = () => {
-  // Todo: Would this still work?
-  // const { refresh } = useRouter();
-
-  // const onFocus = useCallback(() => {
-  //   refresh();
-  // }, [refresh]);
-
-  // useEffect(() => {
-  //   window.addEventListener('focus', onFocus);
-
-  //   return () => {
-  //     window.removeEventListener('focus', onFocus);
-  //   };
-  // }, [onFocus]);
-
-  return null;
-};

apps/remix/app/components/(dashboard)/settings/token/contants.ts

@@ -1,9 +0,0 @@
-import { msg } from '@lingui/macro';
-
-export const EXPIRATION_DATES = {
-  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: msg`12 months`,
-} as const;

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { User } from '@prisma/client';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -29,7 +30,7 @@ export type AdminUserDeleteDialogProps = {
 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
+  const navigate = useNavigate();
   const [email, setEmail] = useState('');
 
   const { mutateAsync: deleteUser, isPending: isDeletingUser } =
@@ -41,14 +42,13 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
         id: user.id,
       });
 
+      await navigate('/admin/users');
+
       toast({
         title: _(msg`Account deleted`),
         description: _(msg`The account has been deleted successfully.`),
         duration: 5000,
       });
-
-      // todo
-      // router.push('/admin/users');
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -24,6 +24,7 @@ type DocumentDeleteDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
   teamId?: number;
@@ -34,6 +35,7 @@ export const DocumentDeleteDialog = ({
   id,
   open,
   onOpenChange,
+  onDelete,
   status,
   documentTitle,
   canManageDocument,
@@ -48,9 +50,7 @@ export const DocumentDeleteDialog = ({
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
   const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
-    onSuccess: () => {
-      // todo
-      // router.refresh();
+    onSuccess: async () => {
       void refreshLimits();
 
       toast({
@@ -59,8 +59,18 @@ export const DocumentDeleteDialog = ({
         duration: 5000,
       });
 
+      await onDelete?.();
+
       onOpenChange(false);
     },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
   });
 
   useEffect(() => {
@@ -70,19 +80,6 @@ export const DocumentDeleteDialog = ({
     }
   }, [open, status]);
 
-  const onDelete = async () => {
-    try {
-      await deleteDocument({ documentId: id });
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
     setIsDeleteEnabled(event.target.value === _(deleteMessage));
@@ -191,7 +188,7 @@ export const DocumentDeleteDialog = ({
           <Button
             type="button"
             loading={isPending}
-            onClick={onDelete}
+            onClick={() => void deleteDocument({ documentId: id })}
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"
           >

apps/remix/app/components/dialogs/document-move-dialog.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -40,14 +40,12 @@ export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentM
 
   const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
     onSuccess: () => {
-      // todo
-      // router.refresh();
-
       toast({
         title: _(msg`Document moved`),
         description: _(msg`The document has been successfully moved to the selected team.`),
         duration: 5000,
       });
+
       onOpenChange(false);
     },
     onError: (error) => {
@@ -95,9 +93,7 @@ export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentM
                   <div className="flex items-center gap-4">
                     <Avatar className="h-8 w-8">
                       {team.avatarImageId && (
-                        <AvatarImage
-                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
-                        />
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
                       )}
 
                       <AvatarFallback className="text-sm text-gray-400">

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -35,9 +35,10 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { StackAvatar } from '../general/stack-avatar';
+
 const FORM_ID = 'resend-email';
 
 export type DocumentResendDialogProps = {

apps/remix/app/components/dialogs/template-delete-dialog.tsx

@@ -17,15 +17,21 @@ type TemplateDeleteDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
 };
 
-export const TemplateDeleteDialog = ({ id, open, onOpenChange }: TemplateDeleteDialogProps) => {
+export const TemplateDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onDelete,
+}: TemplateDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
-    onSuccess: () => {
-      // router.refresh(); // Todo
+    onSuccess: async () => {
+      await onDelete?.();
 
       toast({
         title: _(msg`Template deleted`),

apps/remix/app/components/dialogs/template-duplicate-dialog.tsx

@@ -30,8 +30,6 @@ export const TemplateDuplicateDialog = ({
   const { mutateAsync: duplicateTemplate, isPending } =
     trpcReact.template.duplicateTemplate.useMutation({
       onSuccess: () => {
-        // router.refresh(); // Todo
-
         toast({
           title: _(msg`Template duplicated`),
           description: _(msg`Your template has been duplicated successfully.`),

apps/remix/app/components/dialogs/template-move-dialog.tsx

@@ -4,8 +4,8 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { match } from 'ts-pattern';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -30,23 +30,42 @@ type TemplateMoveDialogProps = {
   templateId: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onMove?: ({
+    templateId,
+    teamUrl,
+  }: {
+    templateId: number;
+    teamUrl: string;
+  }) => Promise<void> | void;
 };
 
-export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateMoveDialogProps) => {
+export const TemplateMoveDialog = ({
+  templateId,
+  open,
+  onOpenChange,
+  onMove,
+}: TemplateMoveDialogProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
   const { mutateAsync: moveTemplate, isPending } = trpc.template.moveTemplateToTeam.useMutation({
-    onSuccess: () => {
-      // router.refresh(); // Todo
+    onSuccess: async () => {
+      const team = teams?.find((team) => team.id === selectedTeamId);
+
+      if (team) {
+        await onMove?.({ templateId, teamUrl: team.url });
+      }
+
       toast({
         title: _(msg`Template moved`),
         description: _(msg`The template has been successfully moved to the selected team.`),
         duration: 5000,
       });
+
       onOpenChange(false);
     },
     onError: (err) => {
@@ -69,7 +88,7 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
     },
   });
 
-  const onMove = async () => {
+  const handleOnMove = async () => {
     if (!selectedTeamId) {
       return;
     }
@@ -104,9 +123,7 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
                   <div className="flex items-center gap-4">
                     <Avatar className="h-8 w-8">
                       {team.avatarImageId && (
-                        <AvatarImage
-                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
-                        />
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
                       )}
 
                       <AvatarFallback className="text-sm text-gray-400">
@@ -126,7 +143,11 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
             <Trans>Cancel</Trans>
           </Button>
-          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
+          <Button
+            onClick={handleOnMove}
+            loading={isPending}
+            disabled={!selectedTeamId || isPending}
+          >
             {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -29,19 +29,19 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteTokenDialogProps = {
+export type TokenDeleteDialogProps = {
   teamId?: number;
   token: Pick<ApiToken, 'id' | 'name'>;
   onDelete?: () => void;
   children?: React.ReactNode;
 };
 
-export default function DeleteTokenDialog({
+export default function TokenDeleteDialog({
   teamId,
   token,
   onDelete,
   children,
-}: DeleteTokenDialogProps) {
+}: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -49,13 +49,13 @@ export default function DeleteTokenDialog({
 
   const deleteMessage = _(msg`delete ${token.name}`);
 
-  const ZDeleteTokenDialogSchema = z.object({
+  const ZTokenDeleteDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {
       errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
     }),
   });
 
-  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;
 
   const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
     onSuccess() {
@@ -64,7 +64,7 @@ export default function DeleteTokenDialog({
   });
 
   const form = useForm<TDeleteTokenByIdMutationSchema>({
-    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    resolver: zodResolver(ZTokenDeleteDialogSchema),
     values: {
       tokenName: '',
     },
@@ -84,8 +84,6 @@ export default function DeleteTokenDialog({
       });
 
       setIsOpen(false);
-
-      // router.refresh(); // Todo
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -88,8 +88,6 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
       });
 
       form.reset();
-
-      // router.refresh(); // Todo
     } catch (err) {
       toast({
         title: _(msg`Error`),

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -1,5 +1,3 @@
-'use effect';
-
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -77,8 +75,6 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
       });
 
       setOpen(false);
-
-      // router.refresh(); // Todo
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/forms/avatar-image.tsx

@@ -5,13 +5,14 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { ErrorCode, useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { base64 } from '@documenso/lib/universal/base64';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -43,6 +44,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
   const { user } = useSession();
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const team = useOptionalCurrentTeam();
 
@@ -106,8 +108,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
         duration: 5000,
       });
 
-      // Todo
-      // router.refresh();
+      void revalidate();
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -144,11 +145,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
                   <div className="flex items-center gap-8">
                     <div className="relative">
                       <Avatar className="h-16 w-16 border-2 border-solid">
-                        {avatarImageId && (
-                          <AvatarImage
-                            src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${avatarImageId}`}
-                          />
-                        )}
+                        {avatarImageId && <AvatarImage src={formatAvatarUrl(avatarImageId)} />}
                         <AvatarFallback className="text-sm text-gray-400">
                           {initials}
                         </AvatarFallback>

apps/remix/app/components/forms/public-profile-claim-dialog.tsx

@@ -31,7 +31,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { UserProfileSkeleton } from '../ui/user-profile-skeleton';
+import { UserProfileSkeleton } from '../general/user-profile-skeleton';
 
 export const ZClaimPublicProfileFormSchema = z.object({
   url: z

apps/remix/app/components/forms/signup.tsx

@@ -32,8 +32,8 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { UserProfileSkeleton } from '~/components/ui/user-profile-skeleton';
-import { UserProfileTimur } from '~/components/ui/user-profile-timur';
+import { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
+import { UserProfileTimur } from '~/components/general/user-profile-timur';
 
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
@@ -216,9 +216,8 @@ export const SignUpForm = ({
         <div className="absolute -inset-8 -z-[2] backdrop-blur">
           <img
             src={communityCardsImage}
-            // Todo fill={true}
             alt="community-cards"
-            className="dark:brightness-95 dark:contrast-[70%] dark:invert"
+            className="h-full w-full object-cover dark:brightness-95 dark:contrast-[70%] dark:invert"
           />
         </div>
 

apps/remix/app/components/forms/team-update-form.tsx

@@ -28,20 +28,20 @@ export type UpdateTeamDialogProps = {
   teamUrl: string;
 };
 
-const ZUpdateTeamFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+const ZTeamUpdateFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
   name: true,
   url: true,
 });
 
-type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
+type TTeamUpdateFormSchema = z.infer<typeof ZTeamUpdateFormSchema>;
 
-export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
   const navigate = useNavigate();
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const form = useForm({
-    resolver: zodResolver(ZUpdateTeamFormSchema),
+    resolver: zodResolver(ZTeamUpdateFormSchema),
     defaultValues: {
       name: teamName,
       url: teamUrl,
@@ -50,7 +50,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
 
   const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
 
-  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+  const onFormSubmit = async ({ name, url }: TTeamUpdateFormSchema) => {
     try {
       await updateTeam({
         data: {

apps/remix/app/components/forms/token.tsx

@@ -37,7 +37,13 @@ import {
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { EXPIRATION_DATES } from '../(dashboard)/settings/token/contants';
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+} as const;
 
 const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
   enabled: z.boolean(),
@@ -67,13 +73,6 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
   const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
   const [noExpirationDate, setNoExpirationDate] = useState(false);
 
-  // This lets us hide the token from being copied if it has been deleted without
-  // resorting to a useEffect or any other fanciness. This comes at the cost of it
-  // taking slighly longer to appear since it will need to wait for the router.refresh()
-  // to finish updating.
-  const hasNewlyCreatedToken =
-    tokens?.find((token) => token.id === newlyCreatedToken?.id) !== undefined;
-
   const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
     onSuccess(data) {
       setNewlyCreatedToken(data);
@@ -125,9 +124,6 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
       });
 
       form.reset();
-
-      // Todo
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -259,34 +255,36 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
         </form>
       </Form>
 
-      <AnimatePresence initial={!hasNewlyCreatedToken}>
-        {newlyCreatedToken && hasNewlyCreatedToken && (
-          <motion.div
-            className="mt-8"
-            initial={{ opacity: 0, y: -40 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 40 }}
-          >
-            <Card gradient>
-              <CardContent className="p-4">
-                <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>
-                    Your token was created successfully! Make sure to copy it because you won't be
-                    able to see it again!
-                  </Trans>
-                </p>
+      <AnimatePresence>
+        {newlyCreatedToken &&
+          tokens &&
+          tokens.find((token) => token.id === newlyCreatedToken.id) && (
+            <motion.div
+              className="mt-8"
+              initial={{ opacity: 0, y: -40 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 40 }}
+            >
+              <Card gradient>
+                <CardContent className="p-4">
+                  <p className="text-muted-foreground mt-2 text-sm">
+                    <Trans>
+                      Your token was created successfully! Make sure to copy it because you won't be
+                      able to see it again!
+                    </Trans>
+                  </p>
 
-                <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
-                  {newlyCreatedToken.token}
-                </p>
+                  <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+                    {newlyCreatedToken.token}
+                  </p>
 
-                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
-                  <Trans>Copy token</Trans>
-                </Button>
-              </CardContent>
-            </Card>
-          </motion.div>
-        )}
+                  <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
+                    <Trans>Copy token</Trans>
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+          )}
       </AnimatePresence>
     </div>
   );

apps/remix/app/components/general/app-command-menu.tsx

@@ -65,12 +65,12 @@ const SETTINGS_PAGES = [
   { label: msg`Password`, path: '/settings/password' },
 ];
 
-export type CommandMenuProps = {
+export type AppCommandMenuProps = {
   open?: boolean;
   onOpenChange?: (_open: boolean) => void;
 };
 
-export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
+export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const { _ } = useLingui();
 
   const navigate = useNavigate();

apps/remix/app/components/general/app-header.tsx

@@ -10,10 +10,10 @@ import { cn } from '@documenso/ui/lib/utils';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
 
-import { CommandMenu } from '../common/command-menu';
-import { DesktopNav } from './desktop-nav';
+import { AppCommandMenu } from './app-command-menu';
+import { AppNavDesktop } from './app-nav-desktop';
+import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
-import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
@@ -22,7 +22,7 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 
 export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
   const params = useParams();
-  const { pathname } = useLocation(); // Todo: Test
+  const { pathname } = useLocation();
 
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -65,7 +65,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
           <BrandingLogo className="h-6 w-auto" />
         </Link>
 
-        <DesktopNav setIsCommandMenuOpen={setIsCommandMenuOpen} />
+        <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
         <div
           className="flex gap-x-4 md:ml-8"
@@ -83,9 +83,9 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
             <MenuIcon className="text-muted-foreground h-6 w-6" />
           </button>
 
-          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+          <AppCommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
 
-          <MobileNavigation
+          <AppNavMobile
             isMenuOpen={isHamburgerMenuOpen}
             onMenuOpenChange={setIsHamburgerMenuOpen}
           />

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -21,11 +21,15 @@ const navigationLinks = [
   },
 ];
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement> & {
+export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
   setIsCommandMenuOpen: (value: boolean) => void;
 };
 
-export const DesktopNav = ({ className, setIsCommandMenuOpen, ...props }: DesktopNavProps) => {
+export const AppNavDesktop = ({
+  className,
+  setIsCommandMenuOpen,
+  ...props
+}: AppNavDesktopProps) => {
   const { _ } = useLingui();
 
   const { pathname } = useLocation();

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -8,12 +8,12 @@ import { getRootHref } from '@documenso/lib/utils/params';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-export type MobileNavigationProps = {
+export type AppNavMobileProps = {
   isMenuOpen: boolean;
   onMenuOpenChange?: (_value: boolean) => void;
 };
 
-export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
   const { _ } = useLingui();
 
   const params = useParams();

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -20,7 +20,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
-import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
 import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
@@ -34,6 +33,7 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 export type SigningPageViewProps = {
   document: DocumentAndSender;

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -15,6 +15,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { Link } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -33,7 +34,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
-import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
@@ -49,6 +50,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const { toast } = useToast();
   const { _ } = useLingui();
 
+  const navigate = useNavigate();
   const team = useOptionalCurrentTeam();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -186,6 +188,9 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
         open={isDeleteDialogOpen}
         canManageDocument={canManageDocument}
         onOpenChange={setDeleteDialogOpen}
+        onDelete={() => {
+          void navigate(documentsPath);
+        }}
       />
 
       {isDuplicateDialogOpen && (

apps/remix/app/components/general/document/document-upload.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -24,18 +25,19 @@ export type DocumentUploadDropzoneProps = {
 };
 
 export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
   const team = useOptionalCurrentTeam();
+
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const userTimezone =
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
     DEFAULT_DOCUMENT_TIME_ZONE;
 
-  const { user } = useSession();
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
   const { quota, remaining, refreshLimits } = useLimits();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -94,12 +96,11 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         duration: 5000,
       });
 
-      // Todo
-      // analytics.capture('App: Document Uploaded', {
-      //   userId: session?.user.id,
-      //   documentId: id,
-      //   timestamp: new Date().toISOString(),
-      // });
+      analytics.capture('App: Document Uploaded', {
+        userId: user.id,
+        documentId: id,
+        timestamp: new Date().toISOString(),
+      });
 
       void navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (err) {

apps/remix/app/components/general/period-selector.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Trans } from '@lingui/macro';
 import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import {
   Select,
   SelectContent,
@@ -11,7 +12,10 @@ import {
   SelectValue,
 } from '@documenso/ui/primitives/select';
 
-import { isPeriodSelectorValue } from './types';
+const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ['', '7d', '14d', '30d'].includes(value as string);
+};
 
 export const PeriodSelector = () => {
   const { pathname } = useLocation();

apps/remix/app/components/general/refresh-on-focus.tsx

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+
+import { useRevalidator } from 'react-router';
+
+export const RefreshOnFocus = () => {
+  const { revalidate } = useRevalidator();
+
+  const onFocus = useCallback(() => {
+    void revalidate();
+  }, [revalidate]);
+
+  useEffect(() => {
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [onFocus]);
+
+  return null;
+};

apps/remix/app/components/general/settings-nav-desktop.tsx

@@ -5,16 +5,16 @@ import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'luci
 import { useLocation } from 'react-router';
 import { Link } from 'react-router';
 
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type SettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
-export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = false; // Todo getFlag('app_billing');
-  const isPublicProfileEnabled = true; // Todo getFlag('app_public_profile');
+  const isBillingEnabled = IS_BILLING_ENABLED();
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -31,20 +31,18 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {isPublicProfileEnabled && (
-        <Link to="/settings/public-profile">
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-            )}
-          >
-            <Globe2Icon className="mr-2 h-5 w-5" />
-            <Trans>Public Profile</Trans>
-          </Button>
-        </Link>
-      )}
+      <Link to="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2Icon className="mr-2 h-5 w-5" />
+          <Trans>Public Profile</Trans>
+        </Button>
+      </Link>
 
       <Link to="/settings/teams">
         <Button

apps/remix/app/components/general/settings-nav-mobile.tsx

@@ -4,16 +4,16 @@ import { Trans } from '@lingui/macro';
 import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+export type SettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
 
-export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = false; // Todo getFlag('app_billing');
-  const isPublicProfileEnabled = true; // Todo getFlag('app_public_profile');
+  const isBillingEnabled = IS_BILLING_ENABLED();
 
   return (
     <div
@@ -33,20 +33,18 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {isPublicProfileEnabled && (
-        <Link to="/settings/public-profile">
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-            )}
-          >
-            <Globe2Icon className="mr-2 h-5 w-5" />
-            <Trans>Public Profile</Trans>
-          </Button>
-        </Link>
-      )}
+      <Link to="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2Icon className="mr-2 h-5 w-5" />
+          <Trans>Public Profile</Trans>
+        </Button>
+      </Link>
 
       <Link to="/settings/teams">
         <Button

apps/remix/app/components/general/teams/team-settings-nav-desktop.tsx

@@ -8,9 +8,9 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type TeamSettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type TeamSettingsNavDesktopProps = HTMLAttributes<HTMLDivElement>;
 
-export const TeamSettingsDesktopNav = ({ className, ...props }: TeamSettingsDesktopNavProps) => {
+export const TeamSettingsNavDesktop = ({ className, ...props }: TeamSettingsNavDesktopProps) => {
   const { pathname } = useLocation();
   const params = useParams();
 

apps/remix/app/components/general/teams/team-settings-nav-mobile.tsx

@@ -8,9 +8,9 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type TeamSettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
+export type TeamSettingsNavMobileProps = HTMLAttributes<HTMLDivElement>;
 
-export const TeamSettingsMobileNav = ({ className, ...props }: TeamSettingsMobileNavProps) => {
+export const TeamSettingsNavMobile = ({ className, ...props }: TeamSettingsNavMobileProps) => {
   const { pathname } = useLocation();
   const params = useParams();
 

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -20,16 +20,17 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentSearch } from '~/components/(dashboard)/document-search/document-search';
-import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { DocumentStatus } from '~/components/formatter/document-status';
 import { SearchParamSelector } from '~/components/forms/search-param-selector';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from '~/components/tables/documents-table-action-button';
 import { DocumentsTableActionDropdown } from '~/components/tables/documents-table-action-dropdown';
 import { DataTableTitle } from '~/components/tables/documents-table-title';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { PeriodSelector } from '../period-selector';
+
 const DOCUMENT_SOURCE_LABELS: { [key in DocumentSource]: MessageDescriptor } = {
   DOCUMENT: msg`Document`,
   TEMPLATE: msg`Template`,

apps/remix/app/components/general/verify-email-banner.tsx

@@ -29,6 +29,7 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
 
+  // Todo
   const { mutateAsync: sendConfirmationEmail, isPending } =
     trpc.profile.sendConfirmationEmail.useMutation();
 

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -37,7 +37,7 @@ import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialo
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentMoveDialog } from '~/components/dialogs/document-move-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
-import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionDropdownProps = {

apps/remix/app/components/tables/documents-table.tsx

@@ -18,10 +18,10 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { DocumentStatus } from '~/components/general/document/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from './documents-table-action-button';
 import { DocumentsTableActionDropdown } from './documents-table-action-dropdown';
 

apps/remix/app/components/tables/team-settings-billing-invoices-table.tsx

@@ -14,11 +14,13 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-export type TeamBillingInvoicesDataTableProps = {
+export type TeamSettingsBillingInvoicesTableProps = {
   teamId: number;
 };
 
-export const TeamBillingInvoicesDataTable = ({ teamId }: TeamBillingInvoicesDataTableProps) => {
+export const TeamSettingsBillingInvoicesTable = ({
+  teamId,
+}: TeamSettingsBillingInvoicesTableProps) => {
   const { _ } = useLingui();
 
   const { data, isLoading, isLoadingError } = trpc.team.findTeamInvoices.useQuery(

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -26,12 +26,22 @@ export type TemplatesTableActionDropdownProps = {
   };
   templateRootPath: string;
   teamId?: number;
+  onDelete?: () => Promise<void> | void;
+  onMove?: ({
+    templateId,
+    teamUrl,
+  }: {
+    templateId: number;
+    teamUrl: string;
+  }) => Promise<void> | void;
 };
 
 export const TemplatesTableActionDropdown = ({
   row,
   templateRootPath,
   teamId,
+  onDelete,
+  onMove,
 }: TemplatesTableActionDropdownProps) => {
   const { user } = useSession();
 
@@ -104,12 +114,14 @@ export const TemplatesTableActionDropdown = ({
         templateId={row.id}
         open={isMoveDialogOpen}
         onOpenChange={setMoveDialogOpen}
+        onMove={onMove}
       />
 
       <TemplateDeleteDialog
         id={row.id}
         open={isDeleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
+        onDelete={onDelete}
       />
     </DropdownMenu>
   );

apps/remix/app/components/tables/templates-table.tsx

@@ -17,7 +17,7 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { TemplateType } from '~/components/formatter/template-type';
+import { TemplateType } from '~/components/general/template/template-type';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { TemplateUseDialog } from '../dialogs/template-use-dialog';

apps/remix/app/components/tables/user-settings-current-teams-table.tsx

@@ -22,7 +22,7 @@ import { TableCell } from '@documenso/ui/primitives/table';
 
 import { TeamLeaveDialog } from '~/components/dialogs/team-leave-dialog';
 
-export const CurrentUserTeamsDataTable = () => {
+export const UserSettingsCurrentTeamsDataTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();

apps/remix/app/components/tables/user-settings-pending-teams-table-actions.tsx

@@ -6,17 +6,17 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type PendingUserTeamsDataTableActionsProps = {
+export type UserSettingsPendingTeamsTableActionsProps = {
   className?: string;
   pendingTeamId: number;
   onPayClick: (pendingTeamId: number) => void;
 };
 
-export const PendingUserTeamsDataTableActions = ({
+export const UserSettingsPendingTeamsTableActions = ({
   className,
   pendingTeamId,
   onPayClick,
-}: PendingUserTeamsDataTableActionsProps) => {
+}: UserSettingsPendingTeamsTableActionsProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 

apps/remix/app/components/tables/user-settings-pending-teams-table.tsx

@@ -17,9 +17,9 @@ import { TableCell } from '@documenso/ui/primitives/table';
 
 import { TeamCheckoutCreateDialog } from '~/components/dialogs/team-checkout-create-dialog';
 
-import { PendingUserTeamsDataTableActions } from './pending-user-teams-data-table-actions';
+import { UserSettingsPendingTeamsTableActions } from './user-settings-pending-teams-table-actions';
 
-export const PendingUserTeamsDataTable = () => {
+export const UserSettingsPendingTeamsDataTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();
@@ -78,7 +78,7 @@ export const PendingUserTeamsDataTable = () => {
       {
         id: 'actions',
         cell: ({ row }) => (
-          <PendingUserTeamsDataTableActions
+          <UserSettingsPendingTeamsTableActions
             className="justify-end"
             pendingTeamId={row.original.id}
             onPayClick={setCheckoutPendingTeamId}

apps/remix/app/components/tables/user-settings-teams-page-table.tsx

@@ -11,8 +11,8 @@ import { trpc } from '@documenso/trpc/react';
 import { Input } from '@documenso/ui/primitives/input';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
-import { CurrentUserTeamsDataTable } from './current-user-teams-data-table';
-import { PendingUserTeamsDataTable } from './pending-user-teams-data-table';
+import { UserSettingsCurrentTeamsDataTable } from './user-settings-current-teams-table';
+import { UserSettingsPendingTeamsDataTable } from './user-settings-pending-teams-table';
 
 export const UserSettingsTeamsPageDataTable = () => {
   const { _ } = useLingui();
@@ -82,7 +82,11 @@ export const UserSettingsTeamsPageDataTable = () => {
         </Tabs>
       </div>
 
-      {currentTab === 'pending' ? <PendingUserTeamsDataTable /> : <CurrentUserTeamsDataTable />}
+      {currentTab === 'pending' ? (
+        <UserSettingsPendingTeamsDataTable />
+      ) : (
+        <UserSettingsCurrentTeamsDataTable />
+      )}
     </div>
   );
 };