feat(orgAdmins): show total user & team counts (#10396)

packages/client/modules/userDashboard/components/OrgBilling/OrgPlansAndBilling.tsx

@@ -12,6 +12,7 @@ import OrgBillingInvoices from './OrgBillingInvoices'
 import OrgPlanDrawer from './OrgPlanDrawer'
 import OrgPlans from './OrgPlans'
 import OrgPlansAndBillingHeading from './OrgPlansAndBillingHeading'
+import OrgUsage from './OrgUsage'
 import PaymentDetails from './PaymentDetails'
 
 type Props = {
@@ -50,6 +51,7 @@ const OrgPlansAndBilling = (props: Props) => {
         ...BillingLeaders_organization
         ...PaymentDetails_organization
         ...OrgPlanDrawer_organization
+        ...OrgUsage_organization
         id
         billingTier
         isBillingLeader
@@ -92,6 +94,7 @@ const OrgPlansAndBilling = (props: Props) => {
     <Suspense fallback={''}>
       <div className='pb-20'>
         <OrgPlansAndBillingHeading organizationRef={organization} />
+        {billingTier === 'enterprise' && <OrgUsage organizationRef={organization} />}
         {isBillingLeader && billingTier === 'team' && (
           <>
             <OrgBillingInvoices queryRef={queryData} isWide />

packages/client/modules/userDashboard/components/OrgBilling/OrgUsage.tsx

@@ -0,0 +1,64 @@
+import graphql from 'babel-plugin-relay/macro'
+import React from 'react'
+import {useFragment} from 'react-relay'
+import {OrgUsage_organization$key} from '../../../../__generated__/OrgUsage_organization.graphql'
+import Panel from '../../../../components/Panel/Panel'
+import useRouter from '../../../../hooks/useRouter'
+
+interface Props {
+  organizationRef: OrgUsage_organization$key
+}
+
+const OrgUsage = (props: Props) => {
+  const {organizationRef} = props
+  const organization = useFragment(
+    graphql`
+      fragment OrgUsage_organization on Organization {
+        id
+        allTeamsCount
+        orgUserCount {
+          activeUserCount
+          inactiveUserCount
+        }
+      }
+    `,
+    organizationRef
+  )
+
+  const {id: orgId, allTeamsCount, orgUserCount} = organization
+  const totalUserCount = orgUserCount.activeUserCount + orgUserCount.inactiveUserCount
+  const {history} = useRouter()
+
+  return (
+    <Panel className='mb-4 max-w-[976px]' label='Usage'>
+      <div className='flex items-center justify-around border-t border-solid border-slate-300 p-4 '>
+        <a
+          onClick={(e) => {
+            e.preventDefault()
+            history.push(`/me/organizations/${orgId}/teams`)
+          }}
+          className='cursor-pointer text-center text-sky-500 hover:text-sky-600'
+        >
+          <div className='mb-1 text-3xl font-bold'>{allTeamsCount}</div>
+          <div className='flex items-center justify-center text-base text-slate-600'>
+            Total teams
+          </div>
+        </a>
+        <a
+          onClick={(e) => {
+            e.preventDefault()
+            history.push(`/me/organizations/${orgId}/members`)
+          }}
+          className='cursor-pointer text-center text-sky-500 hover:text-sky-600'
+        >
+          <div className='mb-1 text-3xl font-bold'>{totalUserCount}</div>
+          <div className='flex items-center justify-center text-base text-slate-600'>
+            Total members
+          </div>
+        </a>
+      </div>
+    </Panel>
+  )
+}
+
+export default OrgUsage

packages/client/modules/userDashboard/components/OrganizationRow/OrganizationRow.tsx

@@ -140,7 +140,8 @@ const OrganizationRow = (props: Props) => {
             )}
           </RowInfoHeader>
           <StyledRowInfoCopy>
-            {`${totalUsers} ${plural(totalUsers, 'User')} (${activeUserCount} Active)`}
+            {`${totalUsers} ${plural(totalUsers, 'User')}`}
+            {billingTier !== 'enterprise' && ` (${activeUserCount} Active)`}
           </StyledRowInfoCopy>
         </StyledRowInfo>
         <RowActions>