feat(auth): add user and role management

packages/web/src/pages/Roles/index.ee.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import RoleList from 'components/RoleList/index.ee';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function RolesPage() {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center">
+            <PageTitle>{formatMessage('rolesPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid
+            container
+            item
+            xs="auto"
+            sm="auto"
+            alignItems="center"
+          >
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={Link}
+              to={URLS.CREATE_ROLE}
+              fullWidth
+              icon={<AddIcon />}
+              data-test="create-role"
+            >
+              {formatMessage('rolesPage.createRole')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <RoleList />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default RolesPage;