some styles componentes

src/App.css

   color:white !important;
   background:var(--main) !important;
 }
+
 .headert_pwdu{
   background:var(--main);
   color:white !important;

src/App.js

 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      refetchOnWindowFocus: false,
+      refetchOnWindowFocus: true,
     },
   },
 })

src/Components/Dashboard.js

 import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
 
 import {
-    Container, IconButton, Divider,
+  Container, IconButton, Divider,
-    Typography, List, Toolbar,useMediaQuery as Size,
+  Typography, List, Toolbar, useMediaQuery as Size,
-    Box, Badge, Menu, Avatar, MenuItem
+  Box, Badge, Menu, Avatar, MenuItem
 } from '@mui/material'
 
 import {
-    Fullscreen as FullscreenIcon,
+  Fullscreen as FullscreenIcon,
-    Menu as MenuIcon,
+  Menu as MenuIcon,
-    KeyboardDoubleArrowLeft as LeftKey,
+  KeyboardDoubleArrowLeft as LeftKey,
-    Notifications as NotificationsIcon,
+  Notifications as NotificationsIcon,
 } from '@mui/icons-material'
 
 import Logo from '../Images/evaluacion.jpeg';
 import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
 import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
 import ProfilePicture from '../Images/man.png';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { removeToken } from '../Slices/tokenSlice';
 
 const drawerWidth = 240;
 const mdTheme = createTheme();
 
+function stringToColor(string) {
+  let hash = 0;
+  let i;
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+  return color;
+}
+
+
+function stringAvatar(name) {
+  console.log("NAME: ", name)
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}
+
 const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
+  shouldForwardProp: (prop) => prop !== 'open',
 })(({ theme, open }) => ({
-    zIndex: theme.zIndex.drawer + 1,
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(['width', 'margin'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
+      easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
+      duration: theme.transitions.duration.enteringScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
     }),
+  }),
 }));
 
 
-const Drawer = styled(MuiDrawer, 
+const Drawer = styled(MuiDrawer,
-    { shouldForwardProp: (prop) => prop !== 'open' })(
+  { shouldForwardProp: (prop) => prop !== 'open' })(
     ({ theme, open }) => ({
-        '& .MuiDrawer-paper': {
+      '& .MuiDrawer-paper': {
-            position: 'relative',
+        position: 'relative',
-            whiteSpace: 'nowrap',
+        whiteSpace: 'nowrap',
-            width: drawerWidth,
+        width: drawerWidth,
-            transition: theme.transitions.create('width', {
+        transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
+          easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
+          duration: theme.transitions.duration.enteringScreen,
-            }),
+        }),
-            boxSizing: 'border-box',
+        boxSizing: 'border-box',
-            ...(!open && {
+        ...(!open && {
-                overflowX: 'hidden',
+          overflowX: 'hidden',
-                transition: theme.transitions.create('width', {
+          transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
+            easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
+            duration: theme.transitions.duration.leavingScreen,
-                }),
+          }),
-                width: theme.spacing(7),
+          width: theme.spacing(7),
-                [theme.breakpoints.up('sm')]: {
+          [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9),
+            width: theme.spacing(9),
-                },
+          },
-            }),
+        }),
-        },
+      },
     }),
-);
+  );
 
 
 function DashboardContent() {
   const isMovil = Size('(max-width:1000px)');
   const dispatch = useDispatch();
   const navigate = useNavigate()
+  const profile = useSelector((state) => state.recluter.info)
+  console.log('PROFILE: ', profile)
 
   const CerrarSession = () => {
+    //TODO:
+    //remove all status
     dispatch(removeToken())
     navigate('/')
   }
 
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open_profile = Boolean(anchorEl);
-  const handleClick = (event) =>  setAnchorEl(event.currentTarget);
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
   const handleClose = () => setAnchorEl(null)
   const toggleDrawer = () => {
-    if(isMovil){
+    if (isMovil) {
       setAnchorElMov(!anchorElMovil)
-    }else{
+    } else {
       setOpen(!open);
     }
   }
   const [anchorElMovil, setAnchorElMov] = React.useState(false);
-  React.useEffect(() => isMovil ? setOpen(false) : null , [isMovil])
+  React.useEffect(() => isMovil ? setOpen(false) : null, [isMovil])
 
   return (
     <ThemeProvider theme={mdTheme}>
               edge="start"
               color="inherit"
               aria-label="open drawer"
-              // onClick={isMovil ? MenuResponsive : toggleDrawer}
               onClick={toggleDrawer}
-              sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
+              sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
               <MenuIcon style={{
                 background: '#ec5e69',
                 fontSize: "40",
             </IconButton>
             <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
               {
-              open ? (
+                open ? (
-                <React.Fragment>
+                  <React.Fragment>
-
+
-                  <IconButton onClick={toggleDrawer}>
+                    <IconButton onClick={toggleDrawer}>
-                    <LeftKey/>
+                      <LeftKey />
-                  </IconButton>
+                    </IconButton>
-
+
-                  <IconButton onClick={(event) => event.target.requestFullscreen()}>
+                    <IconButton onClick={(event) => event.target.requestFullscreen()}>
-                    <FullscreenIcon style={{ paddinLeft: 15 }} />
+                      <FullscreenIcon style={{ paddinLeft: 15 }} />
-                  </IconButton>
+                    </IconButton>
-                </React.Fragment>
+                  </React.Fragment>
-              ) : undefined
+                ) : undefined
-            }
+              }
             </Typography>
 
             <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
                 size="large"
                 aria-label="show 17 new notifications"
                 color="inherit">
-                <Badge badgeContent={17} color="error">
+                <Badge badgeContent={1} color="error">
-                  <NotificationsIcon style={{ color : '#212529' }}/>
+                  <NotificationsIcon style={{ color: '#212529' }} />
                 </Badge>
               </IconButton>
 
                 onClick={handleClick}
                 color="inherit"
               >
-                <Avatar alt="Cindy Baker" src={ProfilePicture} />
+                {/* <Avatar alt="Cindy Baker" src={ProfilePicture} /> */ }
+                <Avatar {...stringAvatar(`${profile.nombre} ${profile.apelidos}`)} />
 
               </IconButton>
               <Menu
                 open={open_profile}
                 onClose={handleClose}
                 MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                <MenuItem onClick={() => navigate('/dashboard/configuraciones') }>Perfil</MenuItem>
+                <MenuItem onClick={() => navigate('/dashboard/configuraciones')}>Perfil</MenuItem>
                 <MenuItem onClick={CerrarSession}>Cerrar Sesion</MenuItem>
               </Menu>
             </Box>
 }
 
 export function Dashboard() {
-    return <DashboardContent />;
+  return <DashboardContent />;
 }
 

src/Components/Home/Candidato.jsx

   let navigate = useNavigate()
   let auth = useSelector((state) => state.token)
 
-  console.log(props)
   const calificar = () => {
-    console.log('TOKEN: ',auth.token)
     let rest = new Service(`/prueba/calificacion/cleaver/report/${props.pwd}`);
 
     rest
       .getQuery(auth.token)
       .then(r => {
-        console.log("SUCCESS:", r)
         navigate('/dashboard/resultados/' + props.pwd)
       })
       .catch(e => {
-        console.log("ERROR:", e.message)
         // navigate('/dashboard/resultados/' + props.pwd)
       })
   }
             // navigate('/dashboard/resultados/' + props.pwd)
           }
         }}
-        style={{ color: '#0bd641' }}
+        style={{ color: props.color }}
         components="label">
         {<props.icon />}
       </IconButton>
   // Patrik: 1 -> Solo esta asignado.
   switch (estado) {
     case 1: // solo asignado
-      return <IconStatus icon={AddTaskIcon} message="Candidato Asignado" />
+      return <IconStatus color="#0bd641" icon={AddTaskIcon} message="Candidato Asignado" />
     case 97: //error en las respuestas
-      return <IconStatus icon={ErrorIcon} message="Hay error en las respuestas" />
+      return <IconStatus color="var(--main)"  icon={ErrorIcon} message="Hay error en las respuestas" />
     case 99: // el candidato se encuentra realizndolo
-      return <IconStatus icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
+      return <IconStatus color="#f5f511" icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
     case 100: // finalizado
-      return <IconStatus estado={100} icon={CheckBoxIcon} message="Calificar el examen" pwd={SuperPWD} />
+      return <IconStatus color="#0bd641" estado={100} icon={CheckBoxIcon} message="Calificar el examen" pwd={SuperPWD} />
     default: return null
   }
 }
 
 function Asignaciones(props) {
 
-  let { estado, cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;
+  let { estado, cattest, id: SuperPWD } = props.asign;
-  console.log(props, test_result, SuperPWD)
 
   return (
     <tr>

src/Components/Navigation/listItems.js

 
 import { Fingerprint, ExpandLess, ExpandMore } from '@mui/icons-material/'
 import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
-import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
+import { Collapse, ListItem, List, ListItemIcon, ListItemText, ListSubheader } from '@mui/material/'
 
-import { 
+import {
-    MainItems, ExtraItems, PruebaItems, TxTStyle,
+  MainItems, ExtraItems, PruebaItems, TxTStyle,
-    UserItems
+  UserItems
 } from '../../Utils/MenuItems'
 
 
-function NavItem (props) {
+function NavItem(props) {
-    
+
-    let navigate = useNavigate()
+  let navigate = useNavigate()
-    let resolved = useResolvedPath(props.route);
+  let resolved = useResolvedPath(props.route);
-    let match = useMatch({ path: resolved.pathname, end: true });
+  let match = useMatch({ path: resolved.pathname, end: true });
+
+  let { title, route, icon, open, AppBarVisible, setOpen } = props
+
+  if (route.startsWith('prueba') && match && open && !AppBarVisible) {
+    setOpen(false);
+  }
+
+  return (
+    <ListItem
+      sx={{ color: '#25344f' }}
+      selected={match && typeof (match) === "object"}
+      onClick={() => navigate(route)}
+      button >
+      <ListItemIcon>
+        {icon && icon}
+      </ListItemIcon>
+      <ListItemText
+        sx={TxTStyle}
+        primary={title}
+      />
+    </ListItem>
+  )
+}
 
-    let { title, route, icon, open, AppBarVisible, setOpen } = props
 
-    if(route.startsWith('prueba') && match && open && !AppBarVisible ){
+export const MainListItems = (props) => {
-        setOpen(false);
-    }
 
-    return(
+  const [open, setOpen] = React.useState(false);
-        <ListItem
-            sx={{ color : '#25344f'}}
-            selected={ match && typeof(match) === "object" }
-            onClick={() => navigate(route) } 
-            button >
-            <ListItemIcon>
-                {icon && icon}
-            </ListItemIcon>
-            <ListItemText 
-                sx={TxTStyle}
-                primary={title} 
-            />
-        </ListItem>
-    )
-}
 
+  const showPruebas = () => {
+    if (!props.AppBarVisible) {
+      props.setAppBarVisible(true);
+    }
+    setOpen(!open);
+  };
+
+  return (
+    <List>
+      <ListSubheader inset>MENÚ</ListSubheader>
+      {
+        MainItems.map(({ icon, title, route }, i) => (
+          <NavItem key={i} icon={icon} title={title} route={route} />
+        ))
+      }
+
+      {/*
+        <ListItem selected={open} onClick={showPruebas}>
+          <ListItemIcon>
+            <Fingerprint />
+          </ListItemIcon>
+          <ListItemText
+            sx={TxTStyle}
+            primary="Pruebas"
+          />
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
 
-export const MainListItems = (props) =>  {
+          <Collapse in={open} timeout="auto" unmountOnExit>
-
+            <List component="div" disablePadding>
-    const [open, setOpen] = React.useState(false);
+              {
-
+                PruebaItems.map(({ route, title }, i) =>
-    const showPruebas = () => {
+                  (<NavItem key={i} setOpen={setOpen} {...props} open={open} route={route} title={title} />)
-        if(!props.AppBarVisible){
+                )
-            props.setAppBarVisible(true);
+              }
-        }
+            </List>
-        setOpen(!open);
-    };
-
-    return(
-        <List>
-            <ListSubheader inset>MENÚ</ListSubheader>
-            {
-                MainItems.map( ({ icon, title, route}, i) =>  (
-                    <NavItem key={i} icon={icon} title={title} route={route} />
-                ))
-            }
-            <ListItem selected={open} onClick={showPruebas}>
-                <ListItemIcon>
-                    <Fingerprint />
-                </ListItemIcon>
-                <ListItemText 
-                    sx={TxTStyle}
-                    primary="Pruebas" 
-                />
-                {open ? <ExpandLess /> : <ExpandMore />}
-            </ListItem>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-                <List component="div" disablePadding>
-                    {
-                        PruebaItems.map( ({ route, title},i) => 
-                            ( <NavItem key={i} setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
-                        )
-                    }
-                </List>
             </Collapse>
+      */}
 
-        </List>
+    </List>
-    )
+  )
 };
 
-export const UserListItems = (_props) =>  {
+export const UserListItems = (_props) => {
-    return(
+  return (
-        <List>
+    <List>
-            <ListSubheader inset>MENÚ</ListSubheader>
+      <ListSubheader inset>MENÚ</ListSubheader>
-            {
+      {
-                UserItems.map( ({ icon, title, route}, i) =>  (
+        UserItems.map(({ icon, title, route }, i) => (
-                    <NavItem key={i} icon={icon} title={title} route={route} />
+          <NavItem key={i} icon={icon} title={title} route={route} />
-                ))
+        ))
-            }
+      }
-        </List>
+    </List>
-    )
+  )
 };
 
 export const SecondaryListItems = (
-    <Nav>
+  <Nav>
-        <ListSubheader inset>EXTRAS</ListSubheader>
+    <ListSubheader inset>EXTRAS</ListSubheader>
-        {
+    {
-            ExtraItems.map( ({ icon, route, title}) => 
+      ExtraItems.map(({ icon, route, title }) =>
-                ( <NavItem key={route} icon={icon} title={title} route={route} />)
+        (<NavItem key={route} icon={icon} title={title} route={route} />)
-            )
+      )
-        }
+    }
-    </Nav>
+  </Nav>
 );
 

src/Components/Routes.js

 import { HomeUser } from '../Pages/HomeUser'
 import { Prueba } from '../Pages/Prueba.jsx'
 import { RequireToken, RequireUserToken } from '../Components/PrivateRoute'
+import { Default } from '../Pages/Default';
 
 export default function MyRoutes() {
 
         <Route path="pruebas/listar" element={<Pruebas />} />
         <Route path="pruebas/crear" element={<PruebaNueva />} />
         <Route path="pruebas/aplicar" element={<PruebaAsignar />} />
+        <Route path="default" element={<Default />} />
+        <Route path="default2" element={<Default />} />
+
       </Route>
       <Route path="*" element={<NotFound />} />
 

src/Pages/Default.jsx

+import { Row, Container } from 'react-bootstrap'
+
+export function Default() {
+
+  return (
+
+    <section>
+      <div className="content-section">
+        <div className="main">
+          <Container >
+            <Row style={{ display: 'flex', flexWrap: 'wrap', justifyContent: "center" }}></Row>
+          </Container>
+        </div>
+      </div>
+    </section>
+  )
+
+}

src/Utils/MenuItems.js

 ]
 
 export const ExtraItems = [
-  {
+  // {
-    icon: <Star />,
+  //   icon: <Star />,
-    route: 'elementos',
+  //   route: 'elementos',
-    title: 'Elementos'
+  //   title: 'Elementos'
-  },
+  // },
   {
     icon: <OndemandVideo />,
-    route: 'tutoriales',
+    route: 'default',
     title: 'Tutoriales'
   },
   {
     icon: <SupportAgent />,
-    route: 'help',
+    route: 'default2',
     title: 'Asistencia Técnica'
   },
 ]