add new dashboard page

      title: 'Users',

      icon: 'mdi:baseline-people',

      path: '/users'

    },

    {

      title: 'Home dashboards',

      icon: 'mdi:baseline-people',

      path: '/home-dashboards'

    }

    // {

import Link from 'next/link'

import Grid from '@mui/material/Grid'

import Card from '@mui/material/Card'

import { styled } from '@mui/material/styles'

import Typography from '@mui/material/Typography'

import CardHeader from '@mui/material/CardHeader'

import PageHeader from 'src/@core/components/page-header'

import Paper from '@mui/material/Paper'

import Table from '@mui/material/Table'

import TableRow from '@mui/material/TableRow'

import TableHead from '@mui/material/TableHead'

import TableBody from '@mui/material/TableBody'

import TableCell from '@mui/material/TableCell'

import TableContainer from '@mui/material/TableContainer'

import CircularProgress from '@mui/material/CircularProgress'

import { getProviders, getUsers } from 'src/configs/apiService'

import { useEffect, useState } from 'react'

import Button from '@mui/material/Button'

// ** Styled component for the link in the dataTable

const LinkStyled = styled(Link)(({ theme }) => ({

  textDecoration: 'none',

  color: theme.palette.primary.main

}))

const Users = () => {

  const [usersData, setUsersData] = useState(null)

  const fetchData = async () => {

    try {

      const { data } = await getProviders()

      setUsersData(data)

    } catch (error) {

      console.error('Error fetching users:', error)

    }

  }

  useEffect(() => {

    fetchData()

  }, [])

  return (

    <Grid container spacing={6}>

      <PageHeader

        title={<Typography variant='h5'>Users</Typography>}

        subtitle={<Typography variant='body2'>A table with users</Typography>}

      />

      <Grid item xs={12}>

        <Card>

          <CardHeader title='List of Users' />

          <TableContainer component={Paper}>

            <Table sx={{ minWidth: 650 }} aria-label='Users table'>

              {!usersData && <CircularProgress />}

              {usersData && (

                <>

                  <TableHead>

                    <TableRow>

                      <TableCell>Users name</TableCell>

                      <TableCell>Users info</TableCell>

                      <TableCell>Delete user</TableCell>

                    </TableRow>

                  </TableHead>

                  <TableBody>

                    {usersData.map(invoker => (

                      <TableRow

                        key={invoker.fullName}

                        sx={{

                          '&:last-of-type td, &:last-of-type th': {

                            border: 0

                          }

                        }}

                      >

                        <TableCell component='th' scope='row'>

                          <LinkStyled href={`/users/${invoker.fullName}`}>

                            {invoker.fullName}

                          </LinkStyled>

                        </TableCell>

                        <TableCell>user info </TableCell>

                        <TableCell>

                          <Button variant='contained'>Delete</Button>

                        </TableCell>

                      </TableRow>

                    ))}

                  </TableBody>

                </>

              )}

            </Table>

          </TableContainer>

        </Card>

      </Grid>

    </Grid>

  )

}

export default Users

 No newline at end of file