[ADD] dashboard components

psicoadmin/src/Components/Actividades.js

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { Col, Row } from 'react-bootstrap';
+
+function LastActivitys() {
+
+    let activitys = [{
+        password : "rcardona2510",
+        description : "Creó la contraseña: pilotosanti",
+        module : "Contraseñas",
+        date : "21/12/18 7:25:52",
+    },{
+        password : "rcardona2510",
+        description : "Creó la contraseña: pilotosanti",
+        module : "Contraseñas",
+        date : "21/12/18 8:25:52",
+    },{
+        password : "rcardona2510",
+        description : "Creó la contraseña: pilotosanti",
+        module : "Contraseñas",
+        date : "21/12/18 9:25:52",
+    } ]
+
+    return(
+        <React.Fragment>
+            {
+                activitys.map( ( activity, index ) => {
+                    return(
+                        <div key={index} className="body_history">
+                            <div className="row">
+                                <div className="col25">
+                                    <p>{ activity.password }</p>
+                                </div>
+                                <div className="col25">
+                                    <p>{ activity.description }</p>
+                                </div>
+                                <div className="col25">
+                                    <p>{ activity.module }</p>
+                                </div>
+                                <div className="col25">
+                                    <p>{ activity.date }</p>
+                                </div>
+                            </div> 
+                        </div>
+
+                    )
+                })
+            }
+        </React.Fragment>
+    )
+}
+
+export default function Actividades() {
+    return(
+        <div className="actividades_recientes">
+            <div className="cabecera_recently">
+                <FlightTakeoffIcon style={{   color : "#607d8b", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15  }}/>
+                <p>HISTORIAL DE ACTIVIDADES</p>
+            </div>
+            <div className="content_historial">
+                <p>Últimas actividades registradas</p>
+                <div className="data_actividad">
+                    <div className="filtros_history">
+                        <Row>
+                            <Col md="4">
+                                <label>Contraseña</label>
+                                <input type="text" name="contraseña" placeholder="Contraseña"/>
+                            </Col>
+                            <Col md="4">
+                                <label>Módulo</label>
+                                <select>
+                                    <option>Puestos</option>
+                                    <option>Contraseñas</option>
+                                    <option>Expedientes</option>
+                                    <option>Resultados</option>
+                                    <option>Pruebas</option>
+                                    <option>Ajustes</option>
+                                    <option>Membresías</option>
+                                    <option>Sesiones</option>
+                                </select>
+                            </Col>
+                            <Col md="4">
+                                <label>Acción</label>
+                                <select>
+                                    <option>Crear</option>
+                                    <option>Editar</option>
+                                    <option>Eliminar</option>
+                                    <option>Desbloquear</option>
+                                </select>
+                            </Col>
+                            <Col md="4">
+                                <label>Fecha Inicio</label>
+                                <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
+                            </Col>
+                            <Col md="4">
+                                <label>Fecha Inicio</label>
+                                <input id="custom-input-date-2" className="calendar" type="text" name="upload-release" placeholder=""/>
+                            </Col>
+                            <Col md="4">
+                                <button className="buscar_filtros_history">Buscar</button>
+                            </Col>
+                        </Row>
+                    </div>
+                    <div className="cabeceras_actividad">
+                        <div className="row">
+                            <div className="col25">
+                                <p>Contraseña</p>
+                            </div>
+                            <div className="col25">
+                                <p>Descripción</p>
+                            </div>
+                            <div className="col25">
+                                <p>Módulo</p>
+                            </div>
+                            <div className="col25">
+                                <p>Fecha</p>
+                            </div>
+                        </div>
+                    </div>
+                    <LastActivitys/>
+                    <div className="footer_history">
+                        <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    )
+}

psicoadmin/src/Components/Candidatos.js

@@ -0,0 +1,77 @@
+import UpdateIcon from '@mui/icons-material/Update';
+import { Table } from 'react-bootstrap'
+
+export default function Candidatos () {
+
+    let users = [ {
+            password :'repartidorPARMA',
+            puesto : "Piloto Repartidor",
+            DPI : 1583266600501,
+            aplicacion : "27/12/2018 12:02 PM",
+            pendientes : "No",
+        },{
+            password :'repartidorPARMA',
+            puesto : "Piloto Repartidor",
+            DPI : 1583266600501,
+            aplicacion : "27/12/2018 12:02 PM",
+            pendientes : "Si",
+        }
+    ]
+
+    return (
+        <div className="body_historial">
+            <div className="header_historial">
+                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
+                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
+            </div>
+            <div className="content_historial">
+                <p>Últimos candidatos que han ingresado al sistema:</p>
+                <div className="cabeceras">
+                    <div className="row">
+                        <div className="col20">
+                            <p>Contraseña</p>
+                        </div>
+                        <div className="col20">
+                            <p>Puesto</p>
+                        </div>
+                        <div className="col20">
+                            <p>No. Identificación</p>
+                        </div>
+                        <div className="col20">
+                            <p>Fecha de aplicación</p>
+                        </div>
+                        <div className="col20">
+                            <p>Pruebas Pendientes</p>
+                        </div>
+                    </div>
+                </div>
+
+                {
+                    users.map( (user, index) => {
+                        return(
+                            <div key={index} className="data_candidato">
+                                <div className="row">
+                                    <div className="col20">
+                                        <p>{ user.password }</p>
+                                    </div>
+                                    <div className="col20">
+                                        <p>{ user.puesto }</p>
+                                    </div>
+                                    <div className="col20">
+                                        <p><a href="#">{ user.DPI }</a></p>
+                                    </div>
+                                    <div className="col20">
+                                        <p>{ user.aplicacion }</p>
+                                    </div>
+                                    <div className="col20">
+                                        <p>{ user.pendientes }</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        </div>
+    )
+}

psicoadmin/src/Css/all.css

@@ -1714,19 +1714,18 @@ li.cabecera_li {
     padding: 45px 20px;
 }
 .header_historial {
+    display : flex;
+    flex-direction : row;
+    align-items: center;
     background: #d7d7d7;
-    padding: 10px;
+    /* padding: 10px; */
     border: 1px solid #dcdcdc;
-}
-.header_historial i{
-    color: #fff;
-    float: left;
-    margin-right: 20px;
+    /* height : 45px; */
 }
 .header_historial p{
-    margin: 0!important;
-    padding: 0;
-    line-height: 1;
+    /* margin: 0!important; */
+    /* padding: 0; */
+    /* line-height: 1; */
     color: #fff;
     letter-spacing: 5px;
 }
@@ -1786,6 +1785,9 @@ li.cabecera_li {
     background: #eceff1;
     padding: 10px;
     border: 1px solid #dcdcdc;
+    display : flex;
+    flex-direction : row;
+    align-items: center
 }
 .cabecera_recently i {
     color: #607d8b;
@@ -3369,7 +3371,7 @@ All this is done for any sub-level being entered.
     width: 100%;
 }
 .content-section {
-    padding: 40px 0px;
+    padding: 0px 0px;
 }
 .cabeceras {
     background: #f1f1f1;
@@ -3946,5 +3948,10 @@ All this is done for any sub-level being entered.
     }
 }
 
+.titlie_main{
+    margin : 0px;
+    padding : 0px;
+}
+
 
 

psicoadmin/src/Pages/Home.js

@@ -1,12 +1,11 @@
 import { Card } from '../Components/Card';
+import { Col, Row } from 'react-bootstrap'
 
-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';
+import Actividades from '../Components/Actividades'
+import Candidatos from '../Components/Candidatos'
 
 export function Home() {
     return (
@@ -15,272 +14,27 @@ export function Home() {
                 <div className="main">
                     <h1>Bienvenido de nuevo Grupo DIT</h1>
                     <div className="panel_options">
-                        <div className="row">
-                            <div className="col-md-4">
+                        <Row>
+                            <Col md="4">
                                 <Card title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
-                            </div>
-                            <div className="col-md-4">
+                            </Col>
+                            <Col md="4">
                                 <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
-                            </div>
-                            <div className="col-md-4">
+                            </Col>
+                            <Col md="4">
                                 <Card title='PUESTOS' icon={ListAltIcon}/>
-                            </div>
-                        </div>
+                            </Col>
+                        </Row>
                     </div>
                     <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 className="content_historial">
-                                        <p>Últimos candidatos que han ingresado al sistema:</p>
-                                        <div className="cabeceras">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>Contraseña</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Puesto</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No. Identificación</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Fecha de aplicación</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Pruebas Pendientes</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="data_candidato">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>repartidorPARMA</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Piloto Repartidor</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p><a href="#">1583266600501</a></p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>27/12/2018</p>
-                                                    <p>12:02 PM</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="data_candidato">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>repartidorPARMA</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Piloto Repartidor</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p><a href="#">1583266600501</a></p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>27/12/2018</p>
-                                                    <p>12:02 PM</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="data_candidato">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>repartidorPARMA</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Piloto Repartidor</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p><a href="#">1583266600501</a></p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>27/12/2018</p>
-                                                    <p>12:02 PM</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="data_candidato">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>repartidorPARMA</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Piloto Repartidor</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p><a href="#">1583266600501</a></p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>27/12/2018</p>
-                                                    <p>12:02 PM</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="data_candidato">
-                                            <div className="row">
-                                                <div className="col20">
-                                                    <p>repartidorPARMA</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>Piloto Repartidor</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p><a href="#">1583266600501</a></p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>27/12/2018</p>
-                                                    <p>12:02 PM</p>
-                                                </div>
-                                                <div className="col20">
-                                                    <p>No</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <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 className="content_historial">
-                                        <p>Últimas actividades registradas</p>
-                                        <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 className="col-md-4">
-                                                        <label>Módulo</label>
-                                                        <select>
-                                                            <option>Puestos</option>
-                                                            <option>Contraseñas</option>
-                                                            <option>Expedientes</option>
-                                                            <option>Resultados</option>
-                                                            <option>Pruebas</option>
-                                                            <option>Ajustes</option>
-                                                            <option>Membresías</option>
-                                                            <option>Sesiones</option>
-                                                        </select>
-                                                    </div>
-                                                    <div className="col-md-4">
-                                                        <label>Acción</label>
-                                                        <select>
-                                                            <option>Crear</option>
-                                                            <option>Editar</option>
-                                                            <option>Eliminar</option>
-                                                            <option>Desbloquear</option>
-                                                        </select>
-                                                    </div>
-                                                    <div className="col-md-4">
-                                                        <label>Fecha Inicio</label>
-                                                        <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
-                                                    </div>
-                                                    <div className="col-md-4">
-                                                        <label>Fecha Inicio</label>
-                                                        <input id="custom-input-date-2" className="calendar" type="text" name="upload-release" placeholder=""/>
-                                                    </div>
-                                                    <div className="col-md-4">
-                                                        <button className="buscar_filtros_history">Buscar</button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="cabeceras_actividad">
-                                                <div className="row">
-                                                    <div className="col25">
-                                                        <p>Contraseña</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Descripción</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Módulo</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Fecha</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="body_history">
-                                                <div className="row">
-                                                    <div className="col25">
-                                                        <p>rcardona2510</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Creó la contraseña: pilotosanti</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Contraseñas</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>21/12/18 8:25:52</p>
-                                                    </div>
-                                                </div> 
-                                            </div>
-                                            <div className="body_history">
-                                                <div className="row">
-                                                    <div className="col25">
-                                                        <p>rcardona2510</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Creó la contraseña: pilotosanti</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Contraseñas</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>21/12/18 8:25:52</p>
-                                                    </div>
-                                                </div> 
-                                            </div>
-                                            <div className="body_history">
-                                                <div className="row">
-                                                    <div className="col25">
-                                                        <p>rcardona2510</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Creó la contraseña: pilotosanti</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>Contraseñas</p>
-                                                    </div>
-                                                    <div className="col25">
-                                                        <p>21/12/18 8:25:52</p>
-                                                    </div>
-                                                </div> 
-                                            </div>
-                                            <div className="footer_history">
-                                                <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <Row>
+                            <Col md="8">
+                                <Candidatos/>
+                            </Col>
+                            <Col md="4">
+                                <Actividades/>
+                            </Col>
+                        </Row>
                     </div>
                 </div>
             </div>