add Account Manager Page

frontend/src/@types/index.ts

@@ -1,6 +1,6 @@
 export const enum ROLE {
   ADMIN = 1,
-  MANAGER = 10,
+  DATA_MANAGER = 10,
   OPERATOR = 20,
   GUEST_OPERATOR = 30
 }

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import Experiments from 'pages/Database/Experiments'
 import PublicExperiments from 'pages/PublicDatabase/PublicExperiments'
 import PublicCells from 'pages/PublicDatabase/PublicCells'
 import Cells from 'pages/Database/Cells'
+import AccountManager from "./pages/AccountManager";
 
 const App: React.FC = () => {
   return (
@@ -45,6 +46,7 @@ const App: React.FC = () => {
               <Route path="/reset-password" element={<ResetPassword />} />
               <Route path="/console" element={<Dashboard />} />
               <Route path="/console/account" element={<Account />} />
+              <Route path="/console/account-manager" element={<AccountManager />} />
               <Route path="/console/experiments" element={<Experiments />} />
               <Route path="/console/cells" element={<Cells />} />
               <Route path="/console/workspaces">

frontend/src/api/users/UsersAdmin.ts

@@ -3,9 +3,9 @@ import {
   AddUserDTO,
   UserDTO,
   ListUsersQueryDTO,
-  UserListDTO,
-  UpdateUserDTO,
+  UpdateUserDTO, UserListDTO,
 } from './UsersApiDTO'
+import qs from "qs";
 
 export const createUserApi = async (data: AddUserDTO): Promise<UserDTO> => {
   const response = await axios.post('/admin/users', data)
@@ -20,7 +20,8 @@ export const getUserApi = async (uid: string): Promise<UserDTO> => {
 export const listUsersApi = async (
   data: ListUsersQueryDTO,
 ): Promise<UserListDTO> => {
-  const response = await axios.get('/admin/users', { params: data })
+  const paramsNew = qs.stringify(data, { indices: false })
+  const response = await axios.get(`/admin/users?${paramsNew}`)
   return response.data
 }
 

frontend/src/api/users/UsersApiDTO.ts

@@ -5,8 +5,8 @@ export type UserDTO = {
   name?: string
   organization_id?: number
   role_id?: number
-  create_at?: string
-  update_at?: string
+  created_at?: string
+  updated_at?: string
 }
 
 export type AddUserDTO = {
@@ -15,13 +15,18 @@ export type AddUserDTO = {
 }
 
 export type ListUsersQueryDTO = {
+  name?: string
+  email?: string
+  sort?: string[]
   offset?: number
   limit?: number
 }
 
 export type UserListDTO = {
-  data: UserDTO[]
-  total_page: number
+  items: UserDTO[]
+  total: number
+  limit: number
+  offset: number
 }
 
 export type UpdateUserDTO = {

frontend/src/components/Database/DatabaseExperiments.tsx

@@ -433,7 +433,7 @@ const DatabaseExperiments = ({ user, cellPath }: DatabaseProps) => {
               sx={{ cursor: 'pointer' }}
               onClick={() => handleOpenShare(row.experiment_id, value, row.id)}
             >
-              <GroupsIcon sx={{ color: `${value === SHARE.NOSHARE ? "bredlack" : value === SHARE.ORGANIZATION ? "blue" : "red" }`}}/>
+              <GroupsIcon sx={{ color: `${value === SHARE.NOSHARE ? "black" : value === SHARE.ORGANIZATION ? "red" : "blue" }`}}/>
             </Box>
           )
         }

frontend/src/components/Layout/LeftMenu.tsx

@@ -9,15 +9,19 @@ import ListItemText from '@mui/material/ListItemText'
 import WebIcon from '@mui/icons-material/Web';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import StorageIcon from '@mui/icons-material/Storage'
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import AnalyticsIcon from '@mui/icons-material/Analytics'
 import { DRAWER_WIDTH } from 'const/Layout'
 import { Box } from '@mui/material'
+import {useSelector} from "react-redux";
+import {isAdmin} from "../../store/slice/User/UserSelector";
 
 const LeftMenu: FC<{ open: boolean; handleDrawerClose: () => void }> = ({
   open,
   handleDrawerClose,
 }) => {
   const navigate = useNavigate()
+  const admin = useSelector(isAdmin)
 
   const onClickDashboard = () => {
     handleDrawerClose()
@@ -31,7 +35,12 @@ const LeftMenu: FC<{ open: boolean; handleDrawerClose: () => void }> = ({
 
   const onClickWorkspaces = () => {
     handleDrawerClose()
-    navigate('/console/workspaces')
+    navigate('/console/workspaces?limit=50&offset=0')
+  }
+
+  const onClickAccountManager = () => {
+    handleDrawerClose()
+    navigate('/console/account-manager?sort=&sort=&limit=50&offset=0')
   }
 
   const onClickOpenSite = () => {
@@ -68,6 +77,17 @@ const LeftMenu: FC<{ open: boolean; handleDrawerClose: () => void }> = ({
                 <ListItemText primary="Workspaces" />
               </ListItemButton>
             </ListItem>
+            {
+              admin ?
+                <ListItem key="account-manager" disablePadding>
+                  <ListItemButton onClick={onClickAccountManager}>
+                    <ListItemIcon>
+                      <ManageAccountsIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Account Manager" />
+                  </ListItemButton>
+                </ListItem> : null
+            }
             <ListItem key="site" disablePadding>
               <ListItemButton onClick={onClickOpenSite}>
                 <ListItemIcon>

frontend/src/components/PopupShare.tsx

@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { postListUserShare } from "../store/slice/Database/DatabaseActions";
 import CancelIcon from '@mui/icons-material/Cancel'
 import { postListUserShareWorkspaces } from "store/slice/Workspace/WorkspacesActions";
-import { selectListSearch, selectListSearchLoading } from "../store/slice/User/UserSelector";
+import { selectListSearch, selectLoading } from "../store/slice/User/UserSelector";
 import { getListSearch } from "../store/slice/User/UserActions";
 import Loading from "./common/Loading";
 import { UserDTO } from "../api/users/UsersApiDTO";
@@ -78,7 +78,7 @@ const TableListSearch = ({usersSuggest, onClose, handleAddListUser, stateUserSha
 const PopupShare = ({open, handleClose, data, usersShare, id, isWorkspace, title}: PopupType) => {
   const [shareType, setShareType] = useState(data?.shareType || 0)
   const usersSuggest = useSelector(selectListSearch)
-  const loading = useSelector(selectListSearchLoading)
+  const loading = useSelector(selectLoading)
   const [textSearch, setTextSearch] = useState('')
   const [stateUserShare, setStateUserShare] = useState(usersShare || undefined)
   const dispatch = useDispatch()