here is my dashboard frontend code, do the following:

import React, { useState, useEffect, useContext } from 'react';
import { AuthContext } from '../AuthContext';
import { auth } from '../firebase';
import { signOut } from 'firebase/auth';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import {
  Typography,
  Table,
  TableHead,
  TableBody,
  TableCell,
  TableRow,
  Button,
  Paper,
} from '@mui/material';
import { styled } from '@mui/system'; // Import styled from @mui/system

// Define your custom styled components
const Root = styled('div')(({ theme }) => ({
  padding: theme.spacing(3),
}));

const TableContainer = styled(Paper)(({ theme }) => ({
  marginTop: theme.spacing(4),
  padding: theme.spacing(2),
}));

const Title = styled(Typography)(({ theme }) => ({
  marginBottom: theme.spacing(2),
}));

const LogoutButton = styled(Button)(({ theme }) => ({
  marginBottom: theme.spacing(2),
  float: 'right',
}));

const TableHeadStyled = styled(TableHead)(({ theme }) => ({
  backgroundColor: theme.palette.primary.light,
}));

const TableHeadCell = styled(TableCell)(({ theme }) => ({
  color: theme.palette.common.white,
  fontWeight: 'bold',
}));

function DashboardPage() {
  const [usersData, setUsersData] = useState([]);
  const { currentUser } = useContext(AuthContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (!currentUser) {
      navigate('/');
      return;
    }

    // Fetch users data from backend
    const fetchUsersData = async () => {
      try {
        const token = await currentUser.getIdToken();
        const response = await axios.get('/api/users', {
          headers: { Authorization: `Bearer ${token}` },
        });
        setUsersData(response.data);
      } catch (error) {
        console.error('Error fetching users data:', error);
      }
    };

    fetchUsersData();
  }, [currentUser, navigate]);

  const handleLogout = () => {
    signOut(auth)
      .then(() => {
        navigate('/');
      })
      .catch((error) => {
        console.error('Error during sign out:', error);
      });
  };

  return (
    <Root>
      <Title variant="h4">Psychologist Dashboard</Title>
      <LogoutButton variant="outlined" color="secondary" onClick={handleLogout}>
        Logout
      </LogoutButton>
      <TableContainer elevation={3}>
        <Table>
          <TableHeadStyled>
            <TableRow>
              <TableHeadCell>User ID</TableHeadCell>
              <TableHeadCell>Last Active</TableHeadCell>
              <TableHeadCell>Notes</TableHeadCell>
            </TableRow>
          </TableHeadStyled>
          <TableBody>
            {usersData.map((user) => (
              <TableRow key={user.id}>
                <TableCell>{user.id}</TableCell>
                <TableCell>{user.lastActive}</TableCell>
                <TableCell>{user.notes}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Root>
  );
}

export default DashboardPage;

add the following functionalities:
    a. Add functionality to open to user page
    b. Add hollow piechart on top right corner
    c. Add Ai generated summary on how the
       patient is doing using the chat log array
       and the sentiment score
    d. Add UI for the sentiment score below 
       hollow piechart
    e. Add useractivity logs for the psychologist
       overview page

here is the ideal design diagram of the new dashboard:
    |-----------User activity logs
    |-----------Userlist
                  |--user[1]
                       |--summary
                       |--piechart
                       |--sentiment score
                  |--user[2]
                       |--summary
                       |--piechart
                       |--sentiment score
                  .
                  .
                  |--user[n]