version stable 1

src/Components/AppBar.js

@@ -1,193 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
-import useAuth from '../Auth/useAuth';
-import { Outlet, useNavigate} from "react-router-dom";
-
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import Menu from '@mui/material/Menu';
-// import Container from '@mui/material/Container';
-import Badge from '@mui/material/Badge';
-import Avatar from '@mui/material/Avatar';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-
-import MenuItem from '@mui/material/MenuItem';
-import MailIcon from '@mui/icons-material/Mail';
-import ProfilePicture from '../Images/man.png';
-import MuiAppBar from '@mui/material/AppBar';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import Toolbar from '@mui/material/Toolbar';
-import Box from '@mui/material/Box';
-
-const drawerWidth = 240;
-
-const useCheckMobileScreen = () => {
-    const [width, setWidth] = useState(window.innerWidth);
-    const handleWindowSizeChange = () => {
-        let size = window.innerWidth;
-        setWidth(size);
-    }
-
-    useEffect(() => {
-        window.addEventListener('resize', handleWindowSizeChange);
-        return () => {
-            window.removeEventListener('resize', handleWindowSizeChange);
-        }
-    }, []);
-
-    let isMobile = width <= 1000
-
-    return (isMobile);
-}
-
-const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
-    transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        width: `calc(100% - ${drawerWidth}px)`,
-        marginLeft: `${drawerWidth}px`,
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    }),
-}));
-
-export default function AppBarComponent (){
-
-    const [open, setOpen] = React.useState(true);
-    const elRef = useRef();
-
-
-    const auth = useAuth();
-    const navigate = useNavigate()
-    const [anchorEl, setAnchorEl] = React.useState(null);
-
-    const [anchorElMovil, setAnchorElMov] = React.useState(null);
-
-    const toggleDrawer = () => setOpen(!open);
-    const open_profile = Boolean(anchorEl);
-    const handleClick = (event) => setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null)
-    const openMov = Boolean(anchorElMovil);
-    const handleCloseMov = () => {
-        setAnchorElMov(null);
-    };
-
-    const MenuResponsive = ()  => {
-        setAnchorElMov(elRef.current);
-    } 
-
-    const CerrarSession = () => {
-        console.log('cerrando session')
-        // auth.logout();
-        // navigate('/')
-    } 
-
-    return(
-        <AppBar 
-            style={{ backgroundColor : '#fff', boxShadow : 'None' }} 
-            position="fixed" 
-            open={useCheckMobileScreen() ? false : open} >
-
-            <Toolbar sx={{ borderBottom : "1px solid #ec5e69"}} >
-
-                <div ref={elRef}>
-                    <IconButton 
-                        edge="start" 
-                        color="inherit" 
-                        aria-label="open drawer" 
-                        onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
-                        sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
-                        <MenuIcon  style={{
-                            background: '#ec5e69',
-                            fontSize: "40",
-                            color: "#fff"
-                        }}/>
-                    </IconButton>
-
-                    <Menu
-                        id="basic-menu"
-                        anchorEl={anchorElMovil}
-                        open={openMov}
-                        onClose={handleCloseMov}
-                        MenuListProps={{
-                            'aria-labelledby': 'basic-button',
-                        }}>
-                        <MenuItem onClick={ () => navigate('/perfil') }>Perfil</MenuItem>
-                        <MenuItem onClick={handleCloseMov}>My account</MenuItem>
-                        <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
-                    </Menu>
-
-                </div>
-
-                <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
-                    {
-                        !useCheckMobileScreen() && open ? (
-                            <React.Fragment>
-
-                                <IconButton onClick={toggleDrawer}>
-                                    <MenuIcon />
-                                </IconButton>
-
-                                <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
-                                    <FullscreenIcon style={{ paddinLeft : 15 }}/>
-                                </IconButton>
-
-
-                            </React.Fragment>
-                        ) : undefined
-                    }
-                </Typography>
-
-
-                <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                    <IconButton size="large" aria-label="show 4 new mails" color="inherit">
-                        <Badge badgeContent={4} color="error">
-                            <MailIcon style={{ color : '#212529' }} />
-                        </Badge>
-                    </IconButton>
-                    <IconButton
-                        size="large"
-                        aria-label="show 17 new notifications"
-                        color="inherit">
-                        <Badge badgeContent={17} color="error">
-                            <NotificationsIcon style={{ color : '#212529' }}/>
-                        </Badge>
-                    </IconButton>
-
-
-                    <IconButton
-                        size="small"
-                        edge="end"
-                        aria-label="account of current user"
-                        aria-haspopup="true"
-                        aria-expanded={open_profile ? 'true' : undefined}
-                        onClick={handleClick}
-                        color="inherit"
-                    >
-                        <Avatar alt="Cindy Baker" src={ProfilePicture} />
-
-                    </IconButton>
-                    <Menu
-                        id="basic-menu"
-                        anchorEl={anchorEl}
-                        open={open_profile}
-                        onClose={handleClose}
-                        MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                        <MenuItem onClick={() => navigate('perfil') }>Profile</MenuItem>
-                        <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
-                        <MenuItem onClick={CerrarSession}>Logout</MenuItem>
-                    </Menu>
-
-                </Box>
-
-            </Toolbar>
-        </AppBar>
-    )
-}

src/Components/Dashboard.js

@@ -1,26 +1,27 @@
 import React from 'react';
-import {createTheme, ThemeProvider } from '@mui/material/styles';
-
-import { MainListItems, secondaryListItems } from './listItems';
+import { ThemeProvider } from '@mui/material/styles';
 import { 
     Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
-    Typography, List, Toolbar, Box, CssBaseline,useMediaQuery as Size
+    Typography, List, Toolbar, Box, CssBaseline,useMediaQuery as Size,
 } from '@mui/material'
 import {
     Mail as MailIcon, Notifications as NotificationsIcon, Fullscreen as FullscreenIcon,
     Menu as MenuIcon,
 } from '@mui/icons-material'
 
+import useAuth from '../Auth/useAuth';
+
 import Logo from '../Images/logo.png';
 import ProfilePicture from '../Images/man.png';
 
-import useAuth from '../Auth/useAuth';
+
 import { Outlet, useNavigate} from "react-router-dom";
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";
-import { Drawer, AppBar } from "../Components/Navigation/AppBar"
 
-const mdTheme = createTheme();
+import { mdTheme } from '../Utils/theme'
+import { Drawer, AppBar } from "../Components/Navigation/AppBar"
+import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
 
 function DashboardContent() {
 
@@ -72,16 +73,12 @@ function DashboardContent() {
                             {
                             !isMovil && open ? (
                                 <React.Fragment>
-
                                     <IconButton onClick={toggleDrawer}>
                                         <MenuIcon />
                                     </IconButton>
-
                                     <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
                                         <FullscreenIcon style={{ paddinLeft : 15 }}/>
                                     </IconButton>
-
-
                                 </React.Fragment>
                             ) : undefined
                         }
@@ -111,10 +108,8 @@ function DashboardContent() {
                                 aria-haspopup="true"
                                 aria-expanded={open_profile ? 'true' : undefined}
                                 onClick={handleClick}
-                                color="inherit"
-                            >
-                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
-
+                                color="inherit" >
+                            <Avatar alt="profile picture" src={ProfilePicture} />
                             </IconButton>
                             <Menu
                                 id="basic-menu"
@@ -126,9 +121,7 @@ function DashboardContent() {
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                             </Menu>
-
                         </Box>
-
                     </Toolbar>
                 </AppBar>
                 <Drawer variant="permanent" open={open}>
@@ -137,16 +130,13 @@ function DashboardContent() {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'flex-start',
-                            px: [1],
-
+                            px: [1]
                         }} >
-
                         <div style={{ flat : 'righ' }} className="sidebar-header">
                             <div className="width_img">
                                 <img src={Logo} alt="pruebas psicometricas"/>
                             </div>
                         </div>
-
                     </Toolbar>
                     <Divider />
                     <List>
@@ -154,7 +144,7 @@ function DashboardContent() {
                     </List>
                     <Divider />
                     <List>
-                        {secondaryListItems}
+                        {SecondaryListItems}
                     </List>
                 </Drawer>
                 <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>

src/Components/MenuMovilList.js

@@ -1,42 +0,0 @@
-import Logo from '../Images/logo.png';
-import Fade from '@mui/material/Fade';
-
-import {
-    Home, Work,VisibilityOff,PeopleAlt, Equalizer
-} from '@mui/icons-material/'
-
-
-import { NavItem} from '../Components/Navigation/NavItem'
-import { BottomNav }  from '../Components/Navigation/BottomNavigation'
-
-
-export function MenuMovil(props) {
-
-    let { open } =  props;
-
-    return(
-        <Fade 
-            in={open}>
-            <div className="menu-shit w3-sidebar w3-bar-block w3-border-right" id="mySidebar">
-                <div style={{ flat : 'righ' }} className="sidebar-header">
-                    <div className="width_img_mov">
-                        <img src={Logo} alt="pruebas psicometricas"/>
-                    </div>
-                </div>
-                <NavItem icon={<Home/>} title="Inicio" route="home" />
-                <NavItem icon={<Work/>} title="Puestos" route="puestos" />
-                <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
-                <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <BottomNav/>
-            </div>
-        </Fade>
-    )
-
-}

src/Components/Navigation/MenuMovil.jsx

@@ -1,65 +1,20 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-// import { MovilList } from './MovilList'
-let items = ['uno', 'dos', 'tres', 'cuatro', 'cinco','Inbox', 'Starred', 'Send email', 'Drafts','uno', 'dos', 'tres', 'cuatro', 'cinco','Inbox', 'Starred', 'Send email', 'Drafts']
-
 
+import Drawer from '@mui/material/Drawer';
+import { MainListItems } from './MainListItems'
 
 export function MenuMovil(props) {
 
     let { anchor } = props;
-
-    const list = (anchor) => (
-        <Box
-            sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
-            role="presentation"
-        >
-            <List>
-                {items.map((text, index) => (
-                    <ListItem key={text} disablePadding>
-                        <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-            </List>
-            <Divider />
-            <List>
-                {['All mail', 'Trash', 'Spam'].map((text, index) => (
-                    <ListItem key={text} disablePadding>
-                        <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-            </List>
-        </Box>
-    );
-
-
     return (
         <div>
             <React.Fragment >
                 <Drawer
                     anchor="left"
                     open={anchor} >
-                    {list("left")}
+                    <div  style={{ paddingTop : 15}}>
+                        <MainListItems/>
+                    </div>
                 </Drawer>
             </React.Fragment>
         </div>

src/Components/listItems.js

@@ -110,7 +110,7 @@ export const MainListItems = (props) =>  {
     )
 };
 
-export const secondaryListItems = (
+export const SecondaryListItems = (
     <Nav>
         <ListSubheader inset>EXTRAS</ListSubheader>
         <NavItem icon={<Star/>} title="Elementos" route="/work" />

src/Pages/Login.jsx

@@ -63,6 +63,7 @@ export function Login() {
                 token = token.replace("Bearer ", "")
                     console.log(token);
                 let user_permissions = jwt_decode(token);
+                    console.log(user_permissions)
                 Object.keys(user_permissions);
                 // console.log("Bearer ", token)
                 setTimeout( () => {

src/Pages/PruebaAsignar.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect , useState} from 'react'
 import {Col, Row } from 'react-bootstrap'
 import $ from 'jquery'
-import { inteligencia, comportamiento, personalidad } from '../Components/TipoTest'
+import { inteligencia, comportamiento, personalidad } from '../Utils/TipoTest'
 import AyudaAsignarModal, { ShowComportamiento, ShowPersonalidad, ShowInteligencia } from '../Components/Modal/AyudaAsignar'
 
 function* idMaker() {

src/Pages/Pruebas.jsx

@@ -5,7 +5,7 @@ import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
 import EditIcon from '@mui/icons-material/Edit';
 
 import { useNavigate } from 'react-router-dom'
-import { inteligencia, comportamiento, personalidad } from '../Components/TipoTest'
+import { inteligencia, comportamiento, personalidad } from '../Utils/TipoTest'
 
 function Pagination () {
     return(

src/Utils/theme.js

@@ -0,0 +1,10 @@
+import { createTheme } from '@mui/material/styles';
+import { colors } from '@mui/material'
+
+export const mdTheme = createTheme({
+    palette: {
+        primary: {
+            main: colors.red[500],
+        },
+    },
+});