diff --git a/frontend/src/component/accessOverview/AccessOverview.tsx b/frontend/src/component/accessOverview/AccessOverview.tsx
new file mode 100644
index 0000000000..c058f3df9e
--- /dev/null
+++ b/frontend/src/component/accessOverview/AccessOverview.tsx
@@ -0,0 +1,17 @@
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
+import { IconButton } from '@mui/material';
+import { Download } from '@mui/icons-material';
+import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
+
+export const AccessOverview = () => {
+ const { downloadCSV } = useAccessOverviewApi();
+
+ return (
+
+
+
+ );
+};
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index 9589027085..027b107e81 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -6,6 +6,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
import { IUser } from 'interfaces/user';
import { IRole } from 'interfaces/role';
import useToast from 'hooks/useToast';
@@ -13,7 +14,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
import { useUsersPlan } from 'hooks/useUsersPlan';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Button, useMediaQuery } from '@mui/material';
+import { Button, IconButton, Tooltip, useMediaQuery } from '@mui/material';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { UserTypeCell } from './UserTypeCell/UserTypeCell';
import { useFlexLayout, useSortBy, useTable } from 'react-table';
@@ -31,12 +32,15 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning';
import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell';
import { useSearch } from 'hooks/useSearch';
+import { Download } from '@mui/icons-material';
+import { useUiFlag } from 'hooks/useUiFlag';
const UsersList = () => {
const navigate = useNavigate();
const { users, roles, refetch, loading } = useUsers();
const { setToastData, setToastApiError } = useToast();
const { removeUser, userLoading, userApiErrors } = useAdminUsersApi();
+ const { downloadCSV } = useAccessOverviewApi();
const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({
open: false,
});
@@ -47,6 +51,8 @@ const UsersList = () => {
const [delUser, setDelUser] = useState();
const { planUsers, isBillingUsers } = useUsersPlan(users);
+ const accessOverviewEnabled = useUiFlag('accessOverview');
+
const [searchValue, setSearchValue] = useState('');
const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -263,6 +269,23 @@ const UsersList = () => {
onChange={setSearchValue}
/>
+
+ (
+ <>
+
+
+
+
+
+ >
+ )}
+ />