feat: admin panel org improvements (#2548)

## Description

- Add a new team page showing team details, global settings, members,
and pending invites
- Update the organisation page to display organisation usage and global
settings
- Show the role and ID of each organisation member, with navigation to
their teams

## Checklist

<!--- Please check the boxes that apply to this pull request. -->
<!--- You can add or remove items as needed. -->

- [ ] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [ ] I have followed the project's coding style guidelines.
- [ ] I have addressed the code review feedback from the previous
submission, if applicable.

packages/trpc/server/admin-router/get-admin-team.ts

@@ -0,0 +1,131 @@
+import { OrganisationMemberInviteStatus } from '@prisma/client';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisations';
+import { getHighestTeamRoleInGroup } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+
+import { adminProcedure } from '../trpc';
+import { ZGetAdminTeamRequestSchema, ZGetAdminTeamResponseSchema } from './get-admin-team.types';
+
+export const getAdminTeamRoute = adminProcedure
+  .input(ZGetAdminTeamRequestSchema)
+  .output(ZGetAdminTeamResponseSchema)
+  .query(async ({ input, ctx }) => {
+    const { teamId } = input;
+
+    ctx.logger.info({
+      input: {
+        teamId,
+      },
+    });
+
+    const team = await prisma.team.findUnique({
+      where: {
+        id: teamId,
+      },
+      include: {
+        organisation: {
+          select: {
+            id: true,
+            name: true,
+            url: true,
+            ownerUserId: true,
+          },
+        },
+        teamEmail: true,
+        teamGlobalSettings: true,
+      },
+    });
+
+    if (!team) {
+      throw new AppError(AppErrorCode.NOT_FOUND, {
+        message: 'Team not found',
+      });
+    }
+
+    const [teamMembers, pendingInvites] = await Promise.all([
+      prisma.organisationMember.findMany({
+        where: {
+          organisationId: team.organisationId,
+          organisationGroupMembers: {
+            some: {
+              group: {
+                teamGroups: {
+                  some: {
+                    teamId,
+                  },
+                },
+              },
+            },
+          },
+        },
+        orderBy: {
+          createdAt: 'desc',
+        },
+        select: {
+          id: true,
+          userId: true,
+          createdAt: true,
+          organisationGroupMembers: {
+            include: {
+              group: {
+                include: {
+                  teamGroups: {
+                    where: {
+                      teamId,
+                    },
+                  },
+                },
+              },
+            },
+          },
+          user: {
+            select: {
+              id: true,
+              email: true,
+              name: true,
+            },
+          },
+        },
+      }),
+      // Invites are organisation-scoped in the schema (no team relation), so this is intentionally
+      // all pending invites for the team's parent organisation.
+      prisma.organisationMemberInvite.findMany({
+        where: {
+          organisationId: team.organisationId,
+          status: OrganisationMemberInviteStatus.PENDING,
+        },
+        orderBy: {
+          createdAt: 'desc',
+        },
+        select: {
+          id: true,
+          email: true,
+          createdAt: true,
+          organisationRole: true,
+          status: true,
+        },
+      }),
+    ]);
+
+    const mappedTeamMembers = teamMembers.map((teamMember) => {
+      const groups = teamMember.organisationGroupMembers.map(({ group }) => group);
+
+      return {
+        id: teamMember.id,
+        userId: teamMember.userId,
+        createdAt: teamMember.createdAt,
+        user: teamMember.user,
+        teamRole: getHighestTeamRoleInGroup(groups.flatMap((group) => group.teamGroups)),
+        organisationRole: getHighestOrganisationRoleInGroup(groups),
+      };
+    });
+
+    return {
+      ...team,
+      memberCount: mappedTeamMembers.length,
+      teamMembers: mappedTeamMembers,
+      pendingInvites,
+    };
+  });

packages/trpc/server/admin-router/get-admin-team.types.ts

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+
+import { OrganisationMemberRoleSchema } from '@documenso/prisma/generated/zod/inputTypeSchemas/OrganisationMemberRoleSchema';
+import { TeamMemberRoleSchema } from '@documenso/prisma/generated/zod/inputTypeSchemas/TeamMemberRoleSchema';
+import OrganisationMemberInviteSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationMemberInviteSchema';
+import OrganisationMemberSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationMemberSchema';
+import OrganisationSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationSchema';
+import TeamEmailSchema from '@documenso/prisma/generated/zod/modelSchema/TeamEmailSchema';
+import TeamGlobalSettingsSchema from '@documenso/prisma/generated/zod/modelSchema/TeamGlobalSettingsSchema';
+import TeamSchema from '@documenso/prisma/generated/zod/modelSchema/TeamSchema';
+import UserSchema from '@documenso/prisma/generated/zod/modelSchema/UserSchema';
+
+export const ZGetAdminTeamRequestSchema = z.object({
+  teamId: z.number().min(1),
+});
+
+export const ZGetAdminTeamResponseSchema = TeamSchema.extend({
+  organisation: OrganisationSchema.pick({
+    id: true,
+    name: true,
+    url: true,
+    ownerUserId: true,
+  }),
+  teamEmail: TeamEmailSchema.nullable(),
+  teamGlobalSettings: TeamGlobalSettingsSchema.nullable(),
+  memberCount: z.number(),
+  teamMembers: OrganisationMemberSchema.pick({
+    id: true,
+    userId: true,
+    createdAt: true,
+  })
+    .extend({
+      user: UserSchema.pick({
+        id: true,
+        email: true,
+        name: true,
+      }),
+      teamRole: TeamMemberRoleSchema,
+      organisationRole: OrganisationMemberRoleSchema,
+    })
+    .array(),
+  pendingInvites: OrganisationMemberInviteSchema.pick({
+    id: true,
+    email: true,
+    createdAt: true,
+    organisationRole: true,
+    status: true,
+  }).array(),
+});
+
+export type TGetAdminTeamRequest = z.infer<typeof ZGetAdminTeamRequestSchema>;
+export type TGetAdminTeamResponse = z.infer<typeof ZGetAdminTeamResponseSchema>;

packages/trpc/server/admin-router/router.ts

@@ -17,6 +17,7 @@ import { findSubscriptionClaimsRoute } from './find-subscription-claims';
 import { findUnsealedDocumentsRoute } from './find-unsealed-documents';
 import { findUserTeamsRoute } from './find-user-teams';
 import { getAdminOrganisationRoute } from './get-admin-organisation';
+import { getAdminTeamRoute } from './get-admin-team';
 import { getEmailDomainRoute } from './get-email-domain';
 import { getUserRoute } from './get-user';
 import { promoteMemberToOwnerRoute } from './promote-member-to-owner';
@@ -82,5 +83,8 @@ export const adminRouter = router({
     get: getEmailDomainRoute,
     reregister: reregisterEmailDomainRoute,
   },
+  team: {
+    get: getAdminTeamRoute,
+  },
   updateSiteSetting: updateSiteSettingRoute,
 });

packages/ui/primitives/select.tsx

@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     disabled={loading || props.disabled}
@@ -56,7 +56,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-popover text-popover-foreground animate-in fade-in-80 relative z-[1001] min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        'relative z-[1001] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
         position === 'popper' && 'translate-y-1',
         className,
       )}
@@ -98,7 +98,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -121,7 +121,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ));