Jelajahi Sumber

[add] listado de pruebas funcionalidad

amenpunk 4 tahun lalu
induk
melakukan
ab1ab874d6
2 mengubah file dengan 200 tambahan dan 1058 penghapusan
  1. 2 2
      psicoadmin/src/Css/all.css
  2. 198 1056
      psicoadmin/src/Pages/Pruebas.jsx

+ 2 - 2
psicoadmin/src/Css/all.css

@@ -3900,14 +3900,14 @@ All this is done for any sub-level being entered.
     transition: all 0.3s;
 }
 
-.pagination_pruebas .botones_pagination a {
+.pagination_pruebas .botones_pagination span {
     color: #c4c4c4;
     border: 1px solid #c4c4c4;
     padding: 6px 11px;
     font-size: 12px;
     transition: all 0.3s;
 }
-.pagination_pruebas .botones_pagination a:hover{
+.pagination_pruebas .botones_pagination span:hover{
     color: #fff;
     border: 1px solid #fd4b4b;
     background: #fd4b4b;

+ 198 - 1056
psicoadmin/src/Pages/Pruebas.jsx

@@ -1,1084 +1,226 @@
+import React, { useEffect } from 'react'
+import $ from 'jquery'
+import { Row, Col } from 'react-bootstrap'
+
+import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
+import EditIcon from '@mui/icons-material/Edit';
+
+import { useNavigate } from 'react-router-dom'
+
+function Pagination () {
+    return(
+        <div class="pagination_pruebas">
+            <div class="botones_pagination">
+                <span class="disabled">Ant.</span>
+                <span href="#" class="active">1</span>
+                <span href="#">2</span>
+                <span href="#">3</span>
+                <span href="#">4</span>
+                <span href="#">5</span>
+                <span href="#">Sig.</span>
+            </div>
+        </div>
+    )
+}
+    
+function ListTests(pruebas){
+    return pruebas.map( ( prueba, index ) => {
+        return(
+            <>
+                <Col key={index} md="3">
+                    <div className="body_prueba_list">
+                        <div className="botones_edicion">
+                            <div className="contenedor_botones">
+                                <Row>
+                                    <Col md="6">
+                                        {/*<a href="index" title="Editar"><i className="far fa-edit"></i></a> */}
+                                        <EditIcon className="grid_btn"/>
+                                    </Col>
+                                    <Col md="6">
+                                        <RemoveRedEyeIcon className="grid_btn"/>
+                                        {/*  <a href="index" title="Eliminar"><i className="fas fa-times"></i></a> */}
+                                    </Col>
+                                </Row>
+                            </div>
+                        </div>
+                        <div className="modern-Checkbox">
+                            <label htmlFor="box-21">{prueba}</label>
+                        </div>
+                    </div>
+                </Col>
+            </>
+        )
+    })
+}
+
 export function Pruebas() {
+    
+    let navigate = useNavigate()
+
+    var inteligencia = [
+        'TERMAN',
+        'BETAIIR',
+        'BETAIII',
+        'IE',
+        'RAVEN',
+        'DOMINOS',
+        'WONDERLIC',
+        'COIR',
+    ]
+
+    var comportamiento = [
+        'CLEAVER',
+        'ESTILO',
+        'VALORES',
+        'VALORES COMP',
+        'MOSS',
+        'KOSTICK',
+        'ZAVIC',
+        'VALPER',
+        'LIFO',
+    ]
+
+    var personalidad = [
+        'LUSCHER',
+        'CPI',
+        'PGV',
+        'BFQ',
+        '16FP',
+        'PIP',
+        'IMP',
+        'PVC',
+        'NIC',
+    ]
+
+    useEffect(() => todaspruebas_list() ,[])
+    
+    function todaspruebas_list() {
+        $("#todas_las_pruebas_body").css('display', 'block');
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'none');
+        $("#todaspruebas").addClass("active");
+        $("#comportamiento").removeClass("active");
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").removeClass("active");
+    };
+
+    function comportamiento_list() {
+        $("#comportamiento_body").css('display', 'block');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'none');
+        $("#todas_las_pruebas_body").css('display', 'none');
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#comportamiento").addClass("active");
+        $("#todaspruebas").removeClass("active");
+    };
+
+    function personalidad_list() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'block');
+        $("#inteligencia_body").css('display', 'none');
+        $("#todas_las_pruebas_body").css('display', 'none');
+        $("#comportamiento").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#personalidad").addClass("active");
+        $("#todaspruebas").removeClass("active");
+    };
+
+    function inteligencia_list() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'block');
+        $("#todas_las_pruebas_body").css('display', 'none');
+        $("#comportamiento").removeClass("active");
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").addClass("active");
+        $("#todaspruebas").removeClass("active");
+    };
 
+ 
     return (
         <section>
-            <div class="content-section">
-                <div class="main main_pruebas_list">
+            <div className="content-section">
+                <div className="main main_pruebas_list">
                     <h1>Listado de pruebas psicométricas</h1>
-                    <div class="row">
-                        <div class="col-md-6 busqueda_prueba">
-                            <div class="row">
-                                <div class="col-md-6">
+
+                    <div className="row">
+                        <Col md='6' className="busqueda_prueba">
+                            <Row>
+                                <Col md="6">
                                     <input type="text" name="nombreprueba" placeholder="Escribe el nombre de la prueba que deseas consultar"/>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="buscar_prueba">
-                                        <button class="btn_buscar_prueba">BUSCAR</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="crear_nueva_prueba">
-                                <a href="nueva-prueba.php" target="_blank" class="btn_crear_prueba">CREAR PRUEBA</a>
+                                </Col>
+                                <Col md="6">
+                                    <div className="buscar_prueba">
+                                        <button className="btn_buscar_prueba">BUSCAR</button>
+                                    </div>
+                                </Col>
+                            </Row>
+                        </Col>
+                        <Col md="6">
+                            <div className="crear_nueva_prueba">
+                                <span onClick={ () =>  navigate('/dashboard/pruebas/crear') } className="btn_crear_prueba">CREAR PRUEBA</span>
                             </div>
-                        </div>
+                        </Col>
                     </div>
-                    <div class="tabs_pruebas">
-                        <div class="row">
-                            <div class="col-md-3">
-                                <div class="test_tab active" id="todaspruebas" onclick="todaspruebas()">
+
+                    <div className="tabs_pruebas">
+                        <Row >
+                            <Col md="3">
+                                <div className="test_tab active" id="todaspruebas" onClick={todaspruebas_list}>
                                     <p>TODAS LAS PRUEBAS</p>
                                 </div>
-                            </div>
-                            <div class="col-md-3">
-                                <div class="test_tab" id="comportamiento" onclick="comportamiento()">
+                            </Col>
+                            <Col md="3">
+                                <div className="test_tab" id="comportamiento" onClick={comportamiento_list}>
                                     <p>COMPORTAMIENTO</p>
                                 </div>
-                            </div>
-                            <div class="col-md-3">
-                                <div class="test_tab" id="personalidad" onclick="personalidad()">
+                            </Col>
+                            <Col md="3">
+                                <div className="test_tab" id="personalidad" onClick={personalidad_list}>
                                     <p>PERSONALIDAD</p>
                                 </div>
-                            </div>
-                            <div class="col-md-3">
-                                <div class="test_tab" id="inteligencia" onclick="inteligencia()">
+                            </Col>
+                            <Col md="3">
+                                <div className="test_tab" id="inteligencia" onClick={inteligencia_list}>
                                     <p>INTELIGENCIA</p>
                                 </div>
-                            </div>
-                        </div>
+                            </Col>
+                        </Row>
                     </div>
-                    <div class="pruebas_grid">
 
-                        <div class="todas_las_pruebas_body" id="todas_las_pruebas_body">
-                            <div class="row">
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-1">CLEAVER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-2">ESTILO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                                    <div class="col-md-3">
-                                                        <div class="body_prueba_list">
-                                                            <div class="botones_edicion">
-                                                                <div class="contenedor_botones">
-                                                                    <div class="row">
-                                                                        <div class="col-md-6">
-                                                                            <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                                        </div>
-                                                                        <div class="col-md-6">
-                                                                            <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="modern-Checkbox">
-                                                                <label for="box-3">VALORES</label>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-4">VALORES COMP.</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-5">MOSS</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-6">KOSTICK</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-7">ZAVIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-8">VALPER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-9">LIFO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-10">LUSCHER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-11">CPI</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-12">PGV</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-13">BFQ</label>
-                                        </div>
-                                    </div>
-                                </div>
-                        <div class="col-md-3">
-                            <div class="body_prueba_list">
-                                <div class="botones_edicion">
-                                    <div class="contenedor_botones">
-                                        <div class="row">
-                                            <div class="col-md-6">
-                                                <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                            </div>
-                                            <div class="col-md-6">
-                                                <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="modern-Checkbox">
-                                    <label for="box-14">16FP</label>
-                                </div>
-                            </div>
-                        </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-15">PIP</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-16">IMP</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-17">PVC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-18">NIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-19">TERMAN</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-20">BETAIIR</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-21">BETAIII</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-22">IE</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-23">RAVEN</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-24">DOMINOS</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-25">WONDERLIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-26">COIR</label>
-                                        </div>
-                                    </div>
-                                </div>
+                    <div className="pruebas_grid">
+                            <div className="todas_las_pruebas_body" id="todas_las_pruebas_body">
+                                <Row>
+                                    {ListTests([...inteligencia,...personalidad,...comportamiento])}
+                                </Row>
+                                <Pagination/>
                             </div>
-                            <div class="pagination_pruebas">
-                                <div class="botones_pagination">
-                                    <a href='index' class="disabled">Ant.</a>
-                                    <a href="index" class="active">1</a>
-                                    <a href="index">2</a>
-                                    <a href="index">3</a>
-                                    <a href="index">4</a>
-                                    <a href="index">5</a>
-                                    <a href="index">Sig.</a>
-                                </div>
-                            </div>
-                        </div>
-
-
-
 
-
-                        <div class="comportamiento_body" id="comportamiento_body">
-                            <div class="row">
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-1">CLEAVER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-2">ESTILO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-3">VALORES</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-4">VALORES COMP.</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-5">MOSS</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-6">KOSTICK</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-7">ZAVIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-8">VALPER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-9">LIFO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                        <div className="comportamiento_body" id="comportamiento_body">
+                            <Row>
+                                {ListTests(comportamiento)}
+                            </Row>
+                            <Pagination/>
                         </div>
-
-
-
-                        <div class="personalidad_body" id="personalidad_body">
-                            <div class="row">
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-10">LUSCHER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-11">CPI</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-12">PGV</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-13">BFQ</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-14">16FP</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                                    <div class="col-md-3">
-                                                        <div class="body_prueba_list">
-                                                            <div class="botones_edicion">
-                                                                <div class="contenedor_botones">
-                                                                    <div class="row">
-                                                                        <div class="col-md-6">
-                                                                            <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                                        </div>
-                                                                        <div class="col-md-6">
-                                                                            <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="modern-Checkbox">
-                                                                <label for="box-15">PIP</label>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-16">IMP</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-17">PVC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-18">NIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                            
+                        <div className="inteligencia_body" id="inteligencia_body">
+                            <Row>
+                                { ListTests(inteligencia)  }
+                            </Row>
+                            <Pagination/>
                         </div>
 
-
-
-                        <div class="inteligencia_body" id="inteligencia_body">
-                            <div class="row">
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-19">TERMAN</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-20">BETAIIR</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-21">BETAIII</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-22">IE</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-23">RAVEN</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-24">DOMINOS</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-25">WONDERLIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="body_prueba_list">
-                                        <div class="botones_edicion">
-                                            <div class="contenedor_botones">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Editar"><i class="far fa-edit"></i></a>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <a href="index" title="Eliminar"><i class="fas fa-times"></i></a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="modern-Checkbox">
-                                            <label for="box-26">COIR</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                        <div className="personalidad_body" id="personalidad_body">
+                            <Row >
+                                {ListTests(personalidad)}
+                            </Row>
+                            <Pagination/>
                         </div>
                     </div>
                 </div>
-            </div>
-        </section>
+                </div>
+            </section>
     )
 }