diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index a8c1c8f8dfa8..96fca8478ca7 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -2,6 +2,8 @@ import { Box, styled } from '@mui/material'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { useState } from 'react'; import { LicensedUsersSidebar } from './LicensedUsersSidebar'; +import { useLicensedUsers } from 'hooks/useLicensedUsers'; +import useLoading from 'hooks/useLoading'; const StyledButton = styled('button')(({ theme }) => ({ background: 'none', @@ -40,12 +42,35 @@ const MainMetric = styled('span')(({ theme }) => ({ fontWeight: 'bold', })); -export const LicensedUsersBox = () => { +const OpenSidebarButton = () => { const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false); + return ( -
+ <> + { + setLicensedUsersChartOpen(true); + }} + > + View graph over time + + setLicensedUsersChartOpen(false)} + /> + + ); +}; + +export const LicensedUsersBox = () => { + const { data, loading } = useLicensedUsers(); + const ref = useLoading(loading, '[data-loading-licensed-users=true]'); + return ( +
- 11/25 + + {data.licensedUsers.current}/{data.seatCount} + { Seats used in the last 30 days - { - setLicensedUsersChartOpen(true); - }} - > - View graph over time - + - setLicensedUsersChartOpen(false)} - />
); };