fix: wip

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

@@ -15,7 +15,7 @@ import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionButtonProps = {
   row: Document & {
@@ -30,7 +30,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const recipient = row.recipients.find((recipient) => recipient.email === user.email);
 

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

@@ -13,7 +13,6 @@ import {
   EyeIcon,
   Loader,
   MoreHorizontal,
-  MoveRight,
   Pencil,
   Share,
   Trash2,
@@ -37,10 +36,9 @@ 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 { DocumentMoveDialog } from '~/components/dialogs/document-move-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionDropdownProps = {
   row: Document & {
@@ -52,14 +50,13 @@ export type DocumentsTableActionDropdownProps = {
 
 export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdownProps) => {
   const { user } = useSession();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
-  const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
 
   const recipient = row.recipients.find((recipient) => recipient.email === user.email);
 
@@ -157,14 +154,6 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
-        {/* We don't want to allow teams moving documents across at the moment. */}
-        {!team && !row.teamId && (
-          <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
-            <MoveRight className="mr-2 h-4 w-4" />
-            <Trans>Move to Team</Trans>
-          </DropdownMenuItem>
-        )}
-
         {/* No point displaying this if there's no functionality. */}
         {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />
@@ -216,16 +205,9 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
         documentTitle={row.title}
         open={isDeleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
-        teamId={team?.id}
         canManageDocument={canManageDocument}
       />
 
-      <DocumentMoveDialog
-        documentId={row.id}
-        open={isMoveDialogOpen}
-        onOpenChange={setMoveDialogOpen}
-      />
-
       <DocumentDuplicateDialog
         id={row.id}
         open={isDuplicateDialogOpen}

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

@@ -3,7 +3,6 @@ import { Trans } from '@lingui/react/macro';
 import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { trpc } from '@documenso/trpc/react';
 import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 
@@ -18,18 +17,20 @@ export const DocumentsTableSenderFilter = ({ teamId }: DocumentsTableSenderFilte
 
   const isMounted = useIsMounted();
 
-  const senderIds = parseToIntegerArray(searchParams?.get('senderIds') ?? '');
+  const senderIds = (searchParams?.get('senderIds') ?? '')
+    .split(',')
+    .filter((value) => value !== '');
 
-  const { data, isLoading } = trpc.team.getTeamMembers.useQuery({
+  const { data, isLoading } = trpc.team.member.getMany.useQuery({
     teamId,
   });
 
   const comboBoxOptions = (data ?? []).map((member) => ({
-    label: member.user.name ?? member.user.email,
-    value: member.user.id,
+    label: member.name ?? member.email,
+    value: member.id,
   }));
 
-  const onChange = (newSenderIds: number[]) => {
+  const onChange = (newSenderIds: string[]) => {
     if (!pathname) {
       return;
     }

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

@@ -19,7 +19,7 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
 import { DocumentStatus } from '~/components/general/document/document-status';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from './documents-table-action-button';
@@ -36,7 +36,7 @@ type DocumentsTableRow = TFindDocumentsResponse['data'][number];
 export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTableProps) => {
   const { _, i18n } = useLingui();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
   const [isPending, startTransition] = useTransition();
 
   const updateSearchParams = useUpdateSearchParams();

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

@@ -0,0 +1,199 @@
+import { useMemo, useTransition } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+import { CheckCircleIcon, EyeIcon, Loader, PencilIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, useSearchParams } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { trpc } from '@documenso/trpc/react';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
+
+export type DocumentsTableProps = {
+  data?: TFindDocumentsResponse;
+  isLoading?: boolean;
+  isLoadingError?: boolean;
+};
+
+type DocumentsTableRow = TFindDocumentsResponse['data'][number];
+
+export const InboxTable = () => {
+  const { _, i18n } = useLingui();
+
+  const team = useOptionalCurrentTeam();
+  const [isPending, startTransition] = useTransition();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
+  const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
+
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery({
+    status: ExtendedDocumentStatus.INBOX,
+    page: page || 1,
+    perPage: perPage || 10,
+  });
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Created`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) =>
+          i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }),
+      },
+      {
+        header: _(msg`Title`),
+        cell: ({ row }) => (
+          <Link
+            to={`/sign/${row.original.recipients[0]?.token}`}
+            title={row.original.title}
+            className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+          >
+            {row.original.title}
+          </Link>
+        ),
+      },
+      {
+        id: 'sender',
+        header: _(msg`Sender`),
+        cell: ({ row }) => row.original.user.name ?? row.original.user.email,
+      },
+      {
+        header: _(msg`Recipient`),
+        accessorKey: 'recipient',
+        cell: ({ row }) => (
+          <StackAvatarsWithTooltip
+            recipients={row.original.recipients}
+            documentStatus={row.original.status}
+          />
+        ),
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) => (
+          <div className="flex items-center gap-x-4">
+            <Button className="w-32" asChild>
+              <Link to={`/sign/${row.original.recipients[0]?.token}`}>
+                {match(row.original.recipients[0]?.role)
+                  .with(RecipientRole.SIGNER, () => (
+                    <>
+                      <PencilIcon className="-ml-1 mr-2 h-4 w-4" />
+                      <Trans>Sign</Trans>
+                    </>
+                  ))
+                  .with(RecipientRole.APPROVER, () => (
+                    <>
+                      <CheckCircleIcon className="-ml-1 mr-2 h-4 w-4" />
+                      <Trans>Approve</Trans>
+                    </>
+                  ))
+                  .otherwise(() => (
+                    <>
+                      <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                      <Trans>View</Trans>
+                    </>
+                  ))}
+              </Link>
+            </Button>
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<DocumentsTableRow>[];
+  }, [team]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+        columnVisibility={{
+          sender: team !== undefined,
+        }}
+        error={{
+          enable: isLoadingError || false,
+        }}
+        emptyState={
+          <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+            <p>
+              <Trans>Documents that require your attention will appear here</Trans>
+            </p>
+          </div>
+        }
+        skeleton={{
+          enable: isLoading || false,
+          rows: 5,
+          component: (
+            <>
+              <TableCell>
+                <Skeleton className="h-4 w-40 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-20 rounded-full" />
+              </TableCell>
+              <TableCell className="py-4">
+                <div className="flex w-full flex-row items-center">
+                  <Skeleton className="h-10 w-10 flex-shrink-0 rounded-full" />
+                </div>
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-20 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-10 w-24 rounded" />
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {(table) =>
+          results.totalPages > 1 && (
+            <DataTablePagination additionalInformation="VisibleCount" table={table} />
+          )
+        }
+      </DataTable>
+
+      {isPending && (
+        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
+          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/tables/organisation-groups-table.tsx

@@ -0,0 +1,150 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationGroupType } from '@prisma/client';
+import { Link, useSearchParams } from 'react-router';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { useCurrentOrganisation } from '~/providers/organisation';
+
+import { OrganisationGroupDeleteDialog } from '../dialogs/organisation-group-delete-dialog';
+
+export const OrganisationGroupsDataTable = () => {
+  const { _ } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const organisation = useCurrentOrganisation();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError } = trpc.organisation.group.find.useQuery(
+    {
+      organisationId: organisation.id,
+      query: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+      types: [OrganisationGroupType.CUSTOM],
+    },
+    {
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Group`),
+        accessorKey: 'name',
+      },
+      {
+        header: _(msg`Role`),
+        accessorKey: 'organisationRole',
+        cell: ({ row }) => _(EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[row.original.organisationRole]),
+      },
+      {
+        header: _(msg`Members`),
+        accessorKey: 'members',
+        cell: ({ row }) => row.original.members.length,
+      },
+      {
+        header: _(msg`Assigned Teams`),
+        accessorKey: 'teams',
+        cell: ({ row }) => row.original.teams.length,
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) => (
+          <div className="flex justify-end space-x-2">
+            <Button asChild variant="outline">
+              <Link to={`/org/${organisation.url}/settings/groups/${row.original.id}`}>Manage</Link>
+            </Button>
+
+            <OrganisationGroupDeleteDialog
+              organisationGroupId={row.original.id}
+              organisationGroupName={row.original.name ?? ''}
+              trigger={
+                <Button variant="destructive" title={_(msg`Remove organisation group`)}>
+                  <Trans>Delete</Trans>
+                </Button>
+              }
+            />
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) =>
+        results.totalPages > 1 && (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        )
+      }
+    </DataTable>
+  );
+};

apps/remix/app/components/tables/organisation-member-invites-table.tsx

@@ -3,11 +3,12 @@ import { useMemo } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberInviteStatus } from '@prisma/client';
 import { History, MoreHorizontal, Trash2 } from 'lucide-react';
 import { useSearchParams } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -25,32 +26,33 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
+import { useCurrentOrganisation } from '~/providers/organisation';
 
-export const TeamSettingsMemberInvitesTable = () => {
+export const OrganisationMemberInvitesTable = () => {
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
-  const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
 
   const { _, i18n } = useLingui();
   const { toast } = useToast();
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isLoadingError } = trpc.team.findTeamMemberInvites.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.organisation.member.invite.find.useQuery(
     {
-      teamId: team.id,
+      organisationId: organisation.id,
       query: parsedSearchParams.query,
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,
+      status: OrganisationMemberInviteStatus.PENDING,
     },
     {
       placeholderData: (previousData) => previousData,
     },
   );
 
-  const { mutateAsync: resendTeamMemberInvitation } =
-    trpc.team.resendTeamMemberInvitation.useMutation({
+  const { mutateAsync: resendOrganisationMemberInvitation } =
+    trpc.organisation.member.invite.resend.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -66,8 +68,8 @@ export const TeamSettingsMemberInvitesTable = () => {
       },
     });
 
-  const { mutateAsync: deleteTeamMemberInvitations } =
-    trpc.team.deleteTeamMemberInvitations.useMutation({
+  const { mutateAsync: deleteOrganisationMemberInvitations } =
+    trpc.organisation.member.invite.deleteMany.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -100,7 +102,7 @@ export const TeamSettingsMemberInvitesTable = () => {
   const columns = useMemo(() => {
     return [
       {
-        header: _(msg`Team Member`),
+        header: _(msg`Organisation Member`),
         cell: ({ row }) => {
           return (
             <AvatarWithText
@@ -116,7 +118,7 @@ export const TeamSettingsMemberInvitesTable = () => {
       {
         header: _(msg`Role`),
         accessorKey: 'role',
-        cell: ({ row }) => _(TEAM_MEMBER_ROLE_MAP[row.original.role]) ?? row.original.role,
+        cell: ({ row }) => _(ORGANISATION_MEMBER_ROLE_MAP[row.original.organisationRole]),
       },
       {
         header: _(msg`Invited At`),
@@ -138,8 +140,8 @@ export const TeamSettingsMemberInvitesTable = () => {
 
               <DropdownMenuItem
                 onClick={async () =>
-                  resendTeamMemberInvitation({
-                    teamId: team.id,
+                  resendOrganisationMemberInvitation({
+                    organisationId: organisation.id,
                     invitationId: row.original.id,
                   })
                 }
@@ -150,8 +152,8 @@ export const TeamSettingsMemberInvitesTable = () => {
 
               <DropdownMenuItem
                 onClick={async () =>
-                  deleteTeamMemberInvitations({
-                    teamId: team.id,
+                  deleteOrganisationMemberInvitations({
+                    organisationId: organisation.id,
                     invitationIds: [row.original.id],
                   })
                 }
@@ -201,7 +203,11 @@ export const TeamSettingsMemberInvitesTable = () => {
         ),
       }}
     >
-      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      {(table) =>
+        results.totalPages > 1 && (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        )
+      }
     </DataTable>
   );
 };

apps/remix/app/components/tables/organisation-members-table.tsx

@@ -0,0 +1,219 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationGroupType } from '@prisma/client';
+import { Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { isOrganisationRoleWithinUserHierarchy } from '@documenso/lib/utils/organisations';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { OrganisationMemberDeleteDialog } from '~/components/dialogs/organisation-member-delete-dialog';
+import { OrganisationMemberUpdateDialog } from '~/components/dialogs/organisation-member-update-dialog';
+import { useCurrentOrganisation } from '~/providers/organisation';
+
+export const OrganisationMembersDataTable = () => {
+  const { _, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const organisation = useCurrentOrganisation();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError } = trpc.organisation.member.find.useQuery(
+    {
+      organisationId: organisation.id,
+      query: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Organisation Member`),
+        cell: ({ row }) => {
+          const avatarFallbackText = row.original.name
+            ? extractInitials(row.original.name)
+            : row.original.email.slice(0, 1).toUpperCase();
+
+          return (
+            <AvatarWithText
+              avatarClass="h-12 w-12"
+              avatarFallback={avatarFallbackText}
+              primaryText={
+                <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+              }
+              secondaryText={row.original.email}
+            />
+          );
+        },
+      },
+      {
+        header: _(msg`Role`),
+        accessorKey: 'role',
+        cell: ({ row }) =>
+          organisation.ownerUserId === row.original.userId
+            ? _(msg`Owner`)
+            : _(ORGANISATION_MEMBER_ROLE_MAP[row.original.currentOrganisationRole]),
+      },
+      {
+        header: _(msg`Member Since`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: _(msg`Groups`),
+        cell: ({ row }) =>
+          row.original.groups.filter((group) => group.type === OrganisationGroupType.CUSTOM).length,
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent className="w-52" align="start" forceMount>
+              <DropdownMenuLabel>
+                <Trans>Actions</Trans>
+              </DropdownMenuLabel>
+
+              <OrganisationMemberUpdateDialog
+                currentUserOrganisationRole={organisation.currentOrganisationRole}
+                organisationId={organisation.id}
+                organisationMemberId={row.original.id}
+                organisationMemberName={row.original.name ?? ''}
+                organisationMemberRole={row.original.currentOrganisationRole}
+                trigger={
+                  <DropdownMenuItem
+                    disabled={
+                      organisation.ownerUserId === row.original.userId ||
+                      !isOrganisationRoleWithinUserHierarchy(
+                        organisation.currentOrganisationRole,
+                        row.original.currentOrganisationRole,
+                      )
+                    }
+                    onSelect={(e) => e.preventDefault()}
+                    title="Update organisation member role"
+                  >
+                    <Edit className="mr-2 h-4 w-4" />
+                    <Trans>Update role</Trans>
+                  </DropdownMenuItem>
+                }
+              />
+
+              <OrganisationMemberDeleteDialog
+                organisationMemberId={row.original.id}
+                organisationMemberName={row.original.name ?? ''}
+                organisationMemberEmail={row.original.email}
+                trigger={
+                  <DropdownMenuItem
+                    onSelect={(e) => e.preventDefault()}
+                    disabled={
+                      organisation.ownerUserId === row.original.userId ||
+                      !isOrganisationRoleWithinUserHierarchy(
+                        organisation.currentOrganisationRole,
+                        row.original.currentOrganisationRole,
+                      )
+                    }
+                    title={_(msg`Remove organisation member`)}
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    <Trans>Remove</Trans>
+                  </DropdownMenuItem>
+                }
+              />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) =>
+        results.totalPages > 1 && (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        )
+      }
+    </DataTable>
+  );
+};

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

@@ -19,7 +19,7 @@ import { TeamCheckoutCreateDialog } from '~/components/dialogs/team-checkout-cre
 
 import { UserSettingsPendingTeamsTableActions } from './user-settings-pending-teams-table-actions';
 
-export const UserSettingsPendingTeamsDataTable = () => {
+export const OrganisationPendingTeamsTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();
@@ -137,7 +137,11 @@ export const UserSettingsPendingTeamsDataTable = () => {
           ),
         }}
       >
-        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+        {(table) =>
+          results.totalPages > 1 && (
+            <DataTablePagination additionalInformation="VisibleCount" table={table} />
+          )
+        }
       </DataTable>
 
       <TeamCheckoutCreateDialog

apps/remix/app/components/tables/organisation-teams-table.tsx

@@ -8,10 +8,8 @@ import { Link } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -21,26 +19,25 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { TeamLeaveDialog } from '~/components/dialogs/team-leave-dialog';
+import { useCurrentOrganisation } from '~/providers/organisation';
 
-export const UserSettingsCurrentTeamsDataTable = () => {
+import { TeamDeleteDialog } from '../dialogs/team-delete-dialog';
+
+export const OrganisationTeamsTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
+  const organisation = useCurrentOrganisation();
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isLoadingError } = trpc.team.findTeams.useQuery(
-    {
-      query: parsedSearchParams.query,
-      page: parsedSearchParams.page,
-      perPage: parsedSearchParams.perPage,
-    },
-    {
-      placeholderData: (previousData) => previousData,
-    },
-  );
+  const { data, isLoading, isLoadingError } = trpc.team.find.useQuery({
+    organisationId: organisation.id,
+    query: parsedSearchParams.query,
+    page: parsedSearchParams.page,
+    perPage: parsedSearchParams.perPage,
+  });
 
   const onPaginationChange = (page: number, perPage: number) => {
     updateSearchParams({
@@ -76,15 +73,7 @@ export const UserSettingsCurrentTeamsDataTable = () => {
         ),
       },
       {
-        header: _(msg`Role`),
-        accessorKey: 'role',
-        cell: ({ row }) =>
-          row.original.ownerUserId === row.original.currentTeamMember.userId
-            ? _(msg`Owner`)
-            : _(TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role]),
-      },
-      {
-        header: _(msg`Member Since`),
+        header: _(msg`Created`),
         accessorKey: 'createdAt',
         cell: ({ row }) => i18n.date(row.original.createdAt),
       },
@@ -92,26 +81,18 @@ export const UserSettingsCurrentTeamsDataTable = () => {
         id: 'actions',
         cell: ({ row }) => (
           <div className="flex justify-end space-x-2">
-            {canExecuteTeamAction('MANAGE_TEAM', row.original.currentTeamMember.role) && (
-              <Button variant="outline" asChild>
-                <Link to={`/t/${row.original.url}/settings`}>
-                  <Trans>Manage</Trans>
-                </Link>
-              </Button>
-            )}
+            <Button variant="outline" asChild>
+              <Link to={`/t/${row.original.url}/settings`}>
+                <Trans>Manage</Trans>
+              </Link>
+            </Button>
 
-            <TeamLeaveDialog
+            <TeamDeleteDialog
               teamId={row.original.id}
               teamName={row.original.name}
-              teamAvatarImageId={row.original.avatarImageId}
-              role={row.original.currentTeamMember.role}
               trigger={
-                <Button
-                  variant="destructive"
-                  disabled={row.original.ownerUserId === row.original.currentTeamMember.userId}
-                  onSelect={(e) => e.preventDefault()}
-                >
-                  <Trans>Leave</Trans>
+                <Button variant="destructive" onSelect={(e) => e.preventDefault()}>
+                  <Trans>Delete</Trans>
                 </Button>
               }
             />
@@ -163,7 +144,11 @@ export const UserSettingsCurrentTeamsDataTable = () => {
         ),
       }}
     >
-      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      {(table) =>
+        results.totalPages > 1 && (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        )
+      }
     </DataTable>
   );
 };

apps/remix/app/components/tables/team-groups-table.tsx

@@ -0,0 +1,183 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationGroupType } from '@prisma/client';
+import { EditIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { useCurrentTeam } from '~/providers/team';
+
+import { TeamGroupDeleteDialog } from '../dialogs/team-group-delete-dialog';
+import { TeamGroupUpdateDialog } from '../dialogs/team-group-update-dialog';
+
+export const TeamGroupsTable = () => {
+  const { _, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const team = useCurrentTeam();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError } = trpc.team.group.find.useQuery(
+    {
+      teamId: team.id,
+      query: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+      types: [OrganisationGroupType.CUSTOM],
+    },
+    {
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Group`),
+        accessorKey: 'name',
+      },
+      {
+        header: _(msg`Role`),
+        accessorKey: 'teamRole',
+        cell: ({ row }) => _(EXTENDED_TEAM_MEMBER_ROLE_MAP[row.original.teamRole]),
+      },
+      {
+        header: _(msg`Members`),
+        accessorKey: 'members',
+        cell: ({ row }) => row.original.members.length,
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent className="w-52" align="start" forceMount>
+              <DropdownMenuLabel>
+                <Trans>Actions</Trans>
+              </DropdownMenuLabel>
+
+              <TeamGroupUpdateDialog
+                teamGroupId={row.original.id}
+                teamGroupName={row.original.name ?? ''}
+                teamGroupRole={row.original.teamRole}
+                trigger={
+                  <DropdownMenuItem
+                    onSelect={(e) => e.preventDefault()}
+                    title="Update team group role"
+                  >
+                    <EditIcon className="mr-2 h-4 w-4" />
+                    <Trans>Update role</Trans>
+                  </DropdownMenuItem>
+                }
+              />
+
+              <TeamGroupDeleteDialog
+                teamGroupId={row.original.id}
+                teamGroupName={row.original.name ?? ''}
+                teamGroupRole={row.original.teamRole}
+                trigger={
+                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                    <Trash2Icon className="mr-2 h-4 w-4" />
+                    <Trans>Remove</Trans>
+                  </DropdownMenuItem>
+                }
+              />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      emptyState={
+        <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+          <p>
+            <Trans>No team groups found</Trans>
+          </p>
+        </div>
+      }
+      skeleton={{
+        enable: isLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) =>
+        results.totalPages > 1 && (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        )
+      }
+    </DataTable>
+  );
+};

apps/remix/app/components/tables/team-members-table.tsx

@@ -3,11 +3,11 @@ import { useMemo } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { EditIcon, MoreHorizontal, Trash2Icon } from 'lucide-react';
 import { useSearchParams } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
@@ -26,20 +26,24 @@ import {
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { TeamMemberDeleteDialog } from '~/components/dialogs/team-member-delete-dialog';
-import { TeamMemberUpdateDialog } from '~/components/dialogs/team-member-update-dialog';
+import { useCurrentOrganisation } from '~/providers/organisation';
 import { useCurrentTeam } from '~/providers/team';
 
-export const TeamSettingsMembersDataTable = () => {
+import { TeamMemberDeleteDialog } from '../dialogs/team-member-delete-dialog';
+import { TeamMemberUpdateDialog } from '../dialogs/team-member-update-dialog';
+
+export const TeamMembersDataTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
+
+  const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isLoadingError } = trpc.team.findTeamMembers.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.team.member.find.useQuery(
     {
       teamId: team.id,
       query: parsedSearchParams.query,
@@ -70,18 +74,18 @@ export const TeamSettingsMembersDataTable = () => {
       {
         header: _(msg`Team Member`),
         cell: ({ row }) => {
-          const avatarFallbackText = row.original.user.name
-            ? extractInitials(row.original.user.name)
-            : row.original.user.email.slice(0, 1).toUpperCase();
+          const avatarFallbackText = row.original.name
+            ? extractInitials(row.original.name)
+            : row.original.email.slice(0, 1).toUpperCase();
 
           return (
             <AvatarWithText
               avatarClass="h-12 w-12"
               avatarFallback={avatarFallbackText}
               primaryText={
-                <span className="text-foreground/80 font-semibold">{row.original.user.name}</span>
+                <span className="text-foreground/80 font-semibold">{row.original.name}</span>
               }
-              secondaryText={row.original.user.email}
+              secondaryText={row.original.email}
             />
           );
         },
@@ -89,15 +93,12 @@ export const TeamSettingsMembersDataTable = () => {
       {
         header: _(msg`Role`),
         accessorKey: 'role',
-        cell: ({ row }) =>
-          team.ownerUserId === row.original.userId
-            ? _(msg`Owner`)
-            : _(TEAM_MEMBER_ROLE_MAP[row.original.role]),
+        cell: ({ row }) => _(EXTENDED_TEAM_MEMBER_ROLE_MAP[row.original.teamRole]),
       },
       {
-        header: _(msg`Member Since`),
-        accessorKey: 'createdAt',
-        cell: ({ row }) => i18n.date(row.original.createdAt),
+        header: _(msg`Source`),
+        cell: ({ row }) => _(msg`Group`),
+        // cell: ({ row }) => (row.original.type === 'member' ? _(msg`Member`) : _(msg`Group`)),
       },
       {
         header: _(msg`Actions`),
@@ -113,21 +114,21 @@ export const TeamSettingsMembersDataTable = () => {
               </DropdownMenuLabel>
 
               <TeamMemberUpdateDialog
-                currentUserTeamRole={team.currentTeamMember.role}
-                teamId={row.original.teamId}
-                teamMemberId={row.original.id}
-                teamMemberName={row.original.user.name ?? ''}
-                teamMemberRole={row.original.role}
+                currentUserTeamRole={team.currentTeamRole}
+                teamId={team.id}
+                memberId={row.original.id}
+                memberName={row.original.name ?? ''}
+                memberTeamRole={row.original.teamRole}
                 trigger={
                   <DropdownMenuItem
                     disabled={
-                      team.ownerUserId === row.original.userId ||
-                      !isTeamRoleWithinUserHierarchy(team.currentTeamMember.role, row.original.role)
+                      organisation.ownerUserId === row.original.userId ||
+                      !isTeamRoleWithinUserHierarchy(team.currentTeamRole, row.original.teamRole)
                     }
                     onSelect={(e) => e.preventDefault()}
                     title="Update team member role"
                   >
-                    <Edit className="mr-2 h-4 w-4" />
+                    <EditIcon className="mr-2 h-4 w-4" />
                     <Trans>Update role</Trans>
                   </DropdownMenuItem>
                 }
@@ -136,19 +137,19 @@ export const TeamSettingsMembersDataTable = () => {
               <TeamMemberDeleteDialog
                 teamId={team.id}
                 teamName={team.name}
-                teamMemberId={row.original.id}
-                teamMemberName={row.original.user.name ?? ''}
-                teamMemberEmail={row.original.user.email}
+                memberId={row.original.id}
+                memberName={row.original.name ?? ''}
+                memberEmail={row.original.email}
                 trigger={
                   <DropdownMenuItem
                     onSelect={(e) => e.preventDefault()}
                     disabled={
-                      team.ownerUserId === row.original.userId ||
-                      !isTeamRoleWithinUserHierarchy(team.currentTeamMember.role, row.original.role)
+                      organisation.ownerUserId === row.original.userId ||
+                      !isTeamRoleWithinUserHierarchy(team.currentTeamRole, row.original.teamRole)
                     }
                     title={_(msg`Remove team member`)}
                   >
-                    <Trash2 className="mr-2 h-4 w-4" />
+                    <Trash2Icon className="mr-2 h-4 w-4" />
                     <Trans>Remove</Trans>
                   </DropdownMenuItem>
                 }

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
-import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2, Upload } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, Share2Icon, Trash2, Upload } from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -18,7 +18,6 @@ import { TemplateBulkSendDialog } from '../dialogs/template-bulk-send-dialog';
 import { TemplateDeleteDialog } from '../dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '../dialogs/template-direct-link-dialog';
 import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
-import { TemplateMoveDialog } from '../dialogs/template-move-dialog';
 
 export type TemplatesTableActionDropdownProps = {
   row: Template & {
@@ -26,15 +25,8 @@ export type TemplatesTableActionDropdownProps = {
     recipients: Recipient[];
   };
   templateRootPath: string;
-  teamId?: number;
+  teamId: number;
   onDelete?: () => Promise<void> | void;
-  onMove?: ({
-    templateId,
-    teamUrl,
-  }: {
-    templateId: number;
-    teamUrl: string;
-  }) => Promise<void> | void;
 };
 
 export const TemplatesTableActionDropdown = ({
@@ -42,14 +34,12 @@ export const TemplatesTableActionDropdown = ({
   templateRootPath,
   teamId,
   onDelete,
-  onMove,
 }: TemplatesTableActionDropdownProps) => {
   const { user } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
-  const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
 
   const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
@@ -83,13 +73,6 @@ export const TemplatesTableActionDropdown = ({
           <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
-        {!teamId && !row.teamId && (
-          <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
-            <MoveRight className="mr-2 h-4 w-4" />
-            <Trans>Move to Team</Trans>
-          </DropdownMenuItem>
-        )}
-
         <TemplateBulkSendDialog
           templateId={row.id}
           recipients={row.recipients}
@@ -122,13 +105,6 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setTemplateDirectLinkDialogOpen}
       />
 
-      <TemplateMoveDialog
-        templateId={row.id}
-        open={isMoveDialogOpen}
-        onOpenChange={setMoveDialogOpen}
-        onMove={onMove}
-      />
-
       <TemplateDeleteDialog
         id={row.id}
         open={isDeleteDialogOpen}

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

@@ -19,7 +19,7 @@ import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TemplateType } from '~/components/general/template/template-type';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 import { TemplateUseDialog } from '../dialogs/template-use-dialog';
 import { TemplateDirectLinkBadge } from '../general/template/template-direct-link-badge';
@@ -45,7 +45,7 @@ export const TemplatesTable = ({
   const { _, i18n } = useLingui();
   const { remaining } = useLimits();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isPending, startTransition] = useTransition();
 

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

@@ -0,0 +1,169 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Link, useSearchParams } from 'react-router';
+import { useLocation } from 'react-router';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { OrganisationLeaveDialog } from '../dialogs/organisation-leave-dialog';
+
+export const UserSettingsOrganisationsTable = () => {
+  const { _, i18n } = useLingui();
+  const { user } = useSession();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { pathname } = useLocation();
+
+  const { data, isLoading, isLoadingError } = trpc.organisation.getMany.useQuery();
+
+  const results = {
+    data: data || [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  // Todo: Orgs
+  // const results = data ?? {
+  //   data: [],
+  //   perPage: 10,
+  //   currentPage: 1,
+  //   totalPages: 1,
+  // };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Organisation`),
+        accessorKey: 'name',
+        cell: ({ row }) => (
+          <Link to={`/org/${row.original.url}`} preventScrollReset={true}>
+            <AvatarWithText
+              avatarSrc={formatAvatarUrl(row.original.avatarImageId)}
+              avatarClass="h-12 w-12"
+              avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+              primaryText={
+                <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+              }
+              secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/org/${row.original.url}`}
+            />
+          </Link>
+        ),
+      },
+      {
+        header: _(msg`Role`),
+        accessorKey: 'role',
+        cell: ({ row }) =>
+          row.original.ownerUserId === user.id
+            ? _(msg`Owner`)
+            : _(ORGANISATION_MEMBER_ROLE_MAP[row.original.currentOrganisationRole]),
+      },
+      {
+        header: _(msg`Member Since`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          <div className="flex justify-end space-x-2">
+            {canExecuteOrganisationAction(
+              'MANAGE_ORGANISATION',
+              row.original.currentOrganisationRole,
+            ) && (
+              <Button variant="outline" asChild>
+                <Link to={`/org/${row.original.url}/settings`}>
+                  <Trans>Manage</Trans>
+                </Link>
+              </Button>
+            )}
+
+            <OrganisationLeaveDialog
+              organisationId={row.original.id}
+              organisationName={row.original.name}
+              organisationAvatarImageId={row.original.avatarImageId}
+              organisationMemberId={row.original.currentMemberId}
+              role={row.original.currentOrganisationRole}
+              trigger={
+                <Button
+                  variant="destructive"
+                  disabled={row.original.ownerUserId === user.id}
+                  onSelect={(e) => e.preventDefault()}
+                >
+                  <Trans>Leave</Trans>
+                </Button>
+              }
+            />
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        // onPaginationChange={onPaginationChange}
+        error={{
+          enable: isLoadingError,
+        }}
+        skeleton={{
+          enable: isLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell className="w-1/3 py-4 pr-4">
+                <div className="flex w-full flex-row items-center">
+                  <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                  <div className="ml-2 flex flex-grow flex-col">
+                    <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                    <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-20 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <div className="flex flex-row justify-end space-x-2">
+                  <Skeleton className="h-10 w-20 rounded" />
+                  <Skeleton className="h-10 w-16 rounded" />
+                </div>
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {/* {(table) =>
+          results.totalPages > 1 && (
+            <DataTablePagination additionalInformation="VisibleCount" table={table} />
+          )
+        } */}
+      </DataTable>
+    </div>
+  );
+};

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

@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Link, useSearchParams } from 'react-router';
-import { useLocation } from 'react-router';
-
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
-import { trpc } from '@documenso/trpc/react';
-import { Input } from '@documenso/ui/primitives/input';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-
-import { UserSettingsCurrentTeamsDataTable } from './user-settings-current-teams-table';
-import { UserSettingsPendingTeamsDataTable } from './user-settings-pending-teams-table';
-
-export const UserSettingsTeamsPageDataTable = () => {
-  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') === 'pending' ? 'pending' : 'active';
-
-  const { data } = trpc.team.findTeamsPending.useQuery(
-    {},
-    {
-      placeholderData: (previousData) => previousData,
-    },
-  );
-
-  /**
-   * 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>
-      <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="active" asChild>
-              <Link to={pathname ?? '/'}>
-                <Trans>Active</Trans>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value="pending" asChild>
-              <Link to={`${pathname}?tab=pending`}>
-                <Trans>Pending</Trans>
-                {data && data.count > 0 && (
-                  <span className="ml-1 hidden opacity-50 md:inline-block">{data.count}</span>
-                )}
-              </Link>
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
-
-      {currentTab === 'pending' ? (
-        <UserSettingsPendingTeamsDataTable />
-      ) : (
-        <UserSettingsCurrentTeamsDataTable />
-      )}
-    </div>
-  );
-};