home refactor style

psicoadmin/src/App.css

@@ -67,3 +67,13 @@
     margin-top : 45px !important;
     max-width : 1777px !important;
 }
+
+.panel_card{
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    padding : 70px;
+}

psicoadmin/src/App.js

@@ -5,8 +5,6 @@ import { createContext } from 'react'
 import { BrowserRouter as Router } from "react-router-dom";
 import { Container } from 'react-bootstrap'
 import { AuthProvider } from './Auth/AuthProvider'
-import { useEffect } from 'react'
-import  useAuth from './Auth/useAuth'
 
 import Routes from './Components/Routes'
 // import { Header } from './Components/Header';

psicoadmin/src/Auth/AuthProvider.js

@@ -22,7 +22,7 @@ export function AuthProvider ({ children }){
         isLogged : () => {
             let CookiesUser = Cookies.get('user')
             console.log('existe usuario -> ', CookiesUser)
-            if(!CookiesUser){
+            if(!CookiesUser || CookiesUser === 'undefined'){
                 return false
             }
             return !!CookiesUser

psicoadmin/src/Components/Card.js

@@ -0,0 +1,19 @@
+export function Card( props ){
+    return(
+        <div className="panel" >
+            <a href="#">
+                <div className="panel_card">
+                    <div>
+                        <h1>{ props.title }</h1>
+                    </div>
+                    <div>
+                        <props.icon style={{ color :'#fd4b4b', fontSize : 45 }}/>
+                    </div>
+                    <div className="content_info">
+                        <p>432</p>
+                    </div>
+                </div>
+            </a>
+        </div>
+    )
+}

psicoadmin/src/Components/Dashboard.js

@@ -29,7 +29,7 @@ import Logo from '../Images/logo.png';
 import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
-import { Outlet, Navigate } from "react-router-dom";
+import { Outlet, useNavigate} from "react-router-dom";
 
 
 const drawerWidth = 240;
@@ -85,12 +85,17 @@ function DashboardContent() {
     const [open, setOpen] = React.useState(true);
     const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
+    const navigate = useNavigate()
 
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null);
-    const CerrarSession = () => auth.logout();
+    const CerrarSession = () => {
+        console.log('cerrando session')
+        auth.logout();
+        navigate('/')
+    } 
 
     return (
         <ThemeProvider theme={mdTheme}>

psicoadmin/src/Components/Routes.js

@@ -35,7 +35,7 @@ export default function MyRoutes () {
                 auth.isLogged() ? 
                     (
                         <Route path="dashboard" element={<Dashboard/>}>
-                            <Route index path="home" element={<Home/>} />
+                            <Route path="home" element={<Home/>} />
                             <Route path="puestos" element={<Puestos/>} />
                             <Route path="contrasenas" element={<Contras/>} />
                             <Route path="expedientes" element={<Expedientes/>} />

psicoadmin/src/Css/all.css

@@ -280,7 +280,8 @@ li.nav-item {
 .main .panel {
     background: #ffffff;
     color: #25344f;
-    margin-bottom: 30px;
+    /* margin-bottom: 30px; */
+    margin-bottom: 5px;
     border-radius: 2px;
     width: 100%;
     float: left;
@@ -299,8 +300,8 @@ li.nav-item {
     letter-spacing: 7px;
     padding: 0!important;
     margin: 0!important;
-    position: relative;
-    top: 10px;
+    /* position: relative; */
+    /* top: 10px; */
 }
 .breadcrumb-header {
     font-size: 20px;
@@ -1685,12 +1686,12 @@ li.cabecera_li {
 .panel .content_info p {
     font-size: 34px;
     color: #25344f;
-    margin: 0;
-    text-align: right;
-    width: 50%;
-    float: left;
-    position: relative;
-    top: 0px;
+    /* margin: 0; */
+    /* text-align: right; */
+    /* width: 50%; */
+    /* float: left; */
+    /* position: relative; */
+    /* top: 0px; */
 }
 .content-section .main h1 {
     font-size: 27px;
@@ -2018,7 +2019,7 @@ label {
 .content-section .main p {
     color: #878787;
     padding: 0 15px;
-    margin-bottom: 40px;
+    /* margin-bottom: 40px; */
 }
 .datos_candidato {
     margin-bottom: 40px;

psicoadmin/src/Pages/Historial.js

@@ -1,5 +1,94 @@
-export function Historial() {
-    return (
-        <h1>Historial</h1>
+import { useEffect, useState } from 'react'
+import { Container, Row, Col, Card } from 'react-bootstrap'
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+function CardChar (props){
+    let { image, name, species } = props.proto
+    return(
+        <Card onClick={ () => props.remove(props.id) } style={{ width: '18rem' }}>
+            <Card.Img variant="top" src={image} />
+            <Card.Body>
+                <Card.Title>{name}</Card.Title>
+            </Card.Body>
+        </Card>
     )
 }
+
+function Preview (){
+    return(
+        <div>
+            <Stack spacing={1}>
+                <Skeleton variant="text" />
+                <Skeleton variant="circular" width={40} height={40} animation="wave" />
+                <Skeleton variant="rectangular" width={210} height={118} animation="wave" />
+            </Stack>
+            <Stack spacing={1}>
+                <Skeleton variant="text" />
+                <Skeleton variant="circular" width={40} height={40} animation="wave"/>
+                <Skeleton variant="rectangular" width={210} height={118}animation="wave" />
+            </Stack>
+            <Stack spacing={1}>
+                <Skeleton variant="text" animation="wave" />
+                <Skeleton variant="circular" width={40} height={40}  animation="wave"/>
+                <Skeleton variant="rectangular" width={210} height={118} animation="wave"/>
+            </Stack>
+        </div>
+    )
+}
+
+
+
+export function Historial () {
+
+    let [character, setCharacter] = useState([])
+    let [elements, setElements] = useState(0)
+
+    useEffect(() => {
+
+        if(!character.length){
+            fetch('https://rickandmortyapi.com/api/character')
+                .then( response => response.json() )
+                .then( data => {
+                    let { results } = data;
+                    console.log('RES ',results)
+                    setCharacter(results)
+                    setElements(results.length)
+                })
+        }
+
+        console.log('Render', character, elements)
+
+    }, [elements])
+
+
+    const Remove = (index) =>{
+        console.log('start leng => ', character.length)
+        let c = character.splice(index, 1)
+        console.log('result -> ',c.length)
+        console.log('character -> ',character.length)
+        setCharacter(character)
+        setElements(character.length)
+    } 
+    
+
+    return(
+        <Container >
+            <Row style={{ marginBottom : 15 }}>
+                <Col>
+                    <h1>Pruebas Psicometricas</h1>
+                </Col>
+            </Row>
+            <Row style={{ display : 'flex', flexWrap : 'wrap', justifyContent: "center" }}>
+                {
+                    !character.length ?
+                        <Preview/>
+                    :
+                    character.map( (person, i) => <CardChar remove={Remove} key={i} proto={person} id={i}/> )
+                }
+            </Row>
+        </Container>
+    )
+
+}
+

psicoadmin/src/Pages/Home.js

@@ -1,189 +1,157 @@
+import { Card } from '../Components/Card';
+
+import LockIcon from '@mui/icons-material/Lock';
+import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
+import PersonIcon from '@mui/icons-material/Person';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
+
+import ListAltIcon from '@mui/icons-material/ListAlt';
+
 export function Home() {
     return (
         <section >
-            <div class="content-section">
-                <div class="main">
+            <div className="content-section">
+                <div className="main">
                     <h1>Bienvenido de nuevo Grupo DIT</h1>
-                    <div class="panel_options">
-                        <div class="row">
-                            <div class="col-md-4">
-                                <div class="panel" >
-                                    <a href="#">
-                                        <div class="body_tabs">
-                                            <div class="row">
-                                                <div class="col-md-6">
-                                                    <h1>Contraseñas</h1>
-                                                </div>
-                                                <div class="col-md-6 content_info">
-                                                    <i class="fas fa-shield-alt"></i>
-                                                    <p>432</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                </div>
+                    <div className="panel_options">
+                        <div className="row">
+                            <div className="col-md-4">
+                                <Card title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
                             </div>
-                            <div class="col-md-4">
-                                <div class="panel" >
-                                    <a href="#">
-                                        <div class="body_tabs">
-                                            <div class="row">
-                                                <div class="col-md-6">
-                                                    <h1>Expedientes</h1>
-                                                </div>
-                                                <div class="col-md-6 content_info">
-                                                    <i class="far fa-user"></i>
-                                                    <p>11982</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                </div>
+                            <div className="col-md-4">
+                                <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
                             </div>
-                            <div class="col-md-4">
-                                <div class="panel" >
-                                    <a href="#">
-                                        <div class="body_tabs">
-                                            <div class="row">
-                                                <div class="col-md-6">
-                                                    <h1>Puestos</h1>
-                                                </div>
-                                                <div class="col-md-6 content_info">
-                                                    <i class="far fa-list-alt"></i>
-                                                    <p>359</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                </div>
+                            <div className="col-md-4">
+                                <Card title='PUESTOS' icon={ListAltIcon}/>
                             </div>
                         </div>
                     </div>
-                    <div class="historial_candidatos">
-                        <div class="row">
-                            <div class="col-md-8">
-                                <div class="body_historial">
-                                    <div class="header_historial">
-                                        <i class="far fa-clock"></i>
+                    <div className="historial_candidatos">
+                        <div className="row">
+                            <div className="col-md-8">
+                                <div className="body_historial">
+                                    <div className="header_historial">
+                                        <i className="far fa-clock"></i>
                                         <p>HISTORIAL DE ACCESO DE CANDIDATOS</p>
                                     </div>
-                                    <div class="content_historial">
+                                    <div className="content_historial">
                                         <p>Últimos candidatos que han ingresado al sistema:</p>
-                                        <div class="cabeceras">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="cabeceras">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>Contraseña</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Puesto</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No. Identificación</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Fecha de aplicación</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Pruebas Pendientes</p>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="data_candidato">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="data_candidato">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>repartidorPARMA</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Piloto Repartidor</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p><a href="#">1583266600501</a></p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>27/12/2018</p>
                                                     <p>12:02 PM</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No</p>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="data_candidato">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="data_candidato">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>repartidorPARMA</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Piloto Repartidor</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p><a href="#">1583266600501</a></p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>27/12/2018</p>
                                                     <p>12:02 PM</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No</p>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="data_candidato">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="data_candidato">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>repartidorPARMA</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Piloto Repartidor</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p><a href="#">1583266600501</a></p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>27/12/2018</p>
                                                     <p>12:02 PM</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No</p>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="data_candidato">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="data_candidato">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>repartidorPARMA</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Piloto Repartidor</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p><a href="#">1583266600501</a></p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>27/12/2018</p>
                                                     <p>12:02 PM</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No</p>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="data_candidato">
-                                            <div class="row">
-                                                <div class="col20">
+                                        <div className="data_candidato">
+                                            <div className="row">
+                                                <div className="col20">
                                                     <p>repartidorPARMA</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>Piloto Repartidor</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p><a href="#">1583266600501</a></p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>27/12/2018</p>
                                                     <p>12:02 PM</p>
                                                 </div>
-                                                <div class="col20">
+                                                <div className="col20">
                                                     <p>No</p>
                                                 </div>
                                             </div>
@@ -191,22 +159,22 @@ export function Home() {
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4">
-                                <div class="actividades_recientes">
-                                    <div class="cabecera_recently">
-                                        <i class="fas fa-plane-departure"></i>
+                            <div className="col-md-4">
+                                <div className="actividades_recientes">
+                                    <div className="cabecera_recently">
+                                        <i className="fas fa-plane-departure"></i>
                                         <p>HISTORIAL DE ACTIVIDADES</p>
                                     </div>
-                                    <div class="content_historial">
+                                    <div className="content_historial">
                                         <p>Últimas actividades registradas</p>
-                                        <div class="data_actividad">
-                                            <div class="filtros_history">
-                                                <div class="row">
-                                                    <div class="col-md-4">
+                                        <div className="data_actividad">
+                                            <div className="filtros_history">
+                                                <div className="row">
+                                                    <div className="col-md-4">
                                                         <label>Contraseña</label>
                                                         <input type="text" name="contraseña" placeholder="Contraseña"/>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div className="col-md-4">
                                                         <label>Módulo</label>
                                                         <select>
                                                             <option>Puestos</option>
@@ -219,7 +187,7 @@ export function Home() {
                                                             <option>Sesiones</option>
                                                         </select>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div className="col-md-4">
                                                         <label>Acción</label>
                                                         <select>
                                                             <option>Crear</option>
@@ -228,84 +196,84 @@ export function Home() {
                                                             <option>Desbloquear</option>
                                                         </select>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div className="col-md-4">
                                                         <label>Fecha Inicio</label>
-                                                        <input id="custom-input-date" class="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
+                                                        <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div className="col-md-4">
                                                         <label>Fecha Inicio</label>
-                                                        <input id="custom-input-date-2" class="calendar" type="text" name="upload-release" placeholder=""/>
+                                                        <input id="custom-input-date-2" className="calendar" type="text" name="upload-release" placeholder=""/>
                                                     </div>
-                                                    <div class="col-md-4">
-                                                        <button class="buscar_filtros_history">Buscar</button>
+                                                    <div className="col-md-4">
+                                                        <button className="buscar_filtros_history">Buscar</button>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="cabeceras_actividad">
-                                                <div class="row">
-                                                    <div class="col25">
+                                            <div className="cabeceras_actividad">
+                                                <div className="row">
+                                                    <div className="col25">
                                                         <p>Contraseña</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Descripción</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Módulo</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Fecha</p>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="body_history">
-                                                <div class="row">
-                                                    <div class="col25">
+                                            <div className="body_history">
+                                                <div className="row">
+                                                    <div className="col25">
                                                         <p>rcardona2510</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Creó la contraseña: pilotosanti</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Contraseñas</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>21/12/18 8:25:52</p>
                                                     </div>
                                                 </div> 
                                             </div>
-                                            <div class="body_history">
-                                                <div class="row">
-                                                    <div class="col25">
+                                            <div className="body_history">
+                                                <div className="row">
+                                                    <div className="col25">
                                                         <p>rcardona2510</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Creó la contraseña: pilotosanti</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Contraseñas</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>21/12/18 8:25:52</p>
                                                     </div>
                                                 </div> 
                                             </div>
-                                            <div class="body_history">
-                                                <div class="row">
-                                                    <div class="col25">
+                                            <div className="body_history">
+                                                <div className="row">
+                                                    <div className="col25">
                                                         <p>rcardona2510</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Creó la contraseña: pilotosanti</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>Contraseñas</p>
                                                     </div>
-                                                    <div class="col25">
+                                                    <div className="col25">
                                                         <p>21/12/18 8:25:52</p>
                                                     </div>
                                                 </div> 
                                             </div>
-                                            <div class="footer_history">
+                                            <div className="footer_history">
                                                 <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
                                             </div>
                                         </div>

psicoadmin/src/Pages/Login.js

@@ -11,7 +11,7 @@ export function Login () {
     function In () {
         auth.login({ name : 'edgar', id : 1 })
         console.log('is logged ? ',auth.isLogged())
-        return navigate('/dashboard')
+        return navigate('/dashboard/home')
     }
 
     return(