[add] responsive show menu

psicoadmin/src/Components/Dashboard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import MuiDrawer from '@mui/material/Drawer';
@@ -30,6 +30,7 @@ import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
 import { Outlet, useNavigate} from "react-router-dom";
+import MenuMovil from "./MenuMovil";
 
 
 const drawerWidth = 240;
@@ -56,7 +57,6 @@ const useCheckMobileScreen = () => {
     const [width, setWidth] = useState(window.innerWidth);
     const handleWindowSizeChange = () => {
         let size = window.innerWidth;
-        console.log('SIZE >', size)
         setWidth(size);
     }
 
@@ -103,6 +103,8 @@ const mdTheme = createTheme();
 function DashboardContent() {
 
     const [open, setOpen] = React.useState(false);
+    const elRef = useRef();
+
 
     const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
@@ -111,10 +113,16 @@ function DashboardContent() {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null);
+    const handleClose = () => setAnchorEl(null)
+
+    const [anchorElMovil, setAnchorElMov] = React.useState(null);
+    const openMov = Boolean(anchorElMovil);
+    const handleCloseMov = () => {
+        setAnchorElMov(null);
+    };
 
     const MenuResponsive = ()  => {
-        console.log('show menu responsive')
+        setAnchorElMov(elRef.current);
     } 
 
     const CerrarSession = () => {
@@ -123,7 +131,6 @@ function DashboardContent() {
         navigate('/')
     } 
 
-
     return (
         <ThemeProvider theme={mdTheme}>
             <Box sx={{ display: 'flex' }}>
@@ -132,20 +139,40 @@ function DashboardContent() {
 
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
 
-                        <IconButton 
-                            edge="start" 
-                            color="inherit" 
-                            aria-label="open drawer" 
-                            onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
-                            // onClick={ () => console.log('que estoy haciendo con mi vida') } 
-                            sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
-
-                            <MenuIcon  style={{
-                                background: '#ec5e69',
-                                fontSize: "40",
-                                color: "#fff"
-                            }}/>
-                        </IconButton>
+                        <div ref={elRef}>
+                            <IconButton 
+                                edge="start" 
+                                color="inherit" 
+                                aria-label="open drawer" 
+                                onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
+                                // onClick={ () => console.log('que estoy haciendo con mi vida') } 
+                                sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
+
+                                <MenuIcon  style={{
+                                    background: '#ec5e69',
+                                    fontSize: "40",
+                                    color: "#fff"
+                                }}/>
+                            </IconButton>
+
+                              <Menu
+                                id="basic-menu"
+                                anchorEl={anchorElMovil}
+                                open={openMov}
+                                onClose={handleCloseMov}
+                                MenuListProps={{
+                                  'aria-labelledby': 'basic-button',
+                                }}
+                                                      >
+                                  <MenuItem onClick={handleCloseMov}>Profile</MenuItem>
+                                  <MenuItem onClick={handleCloseMov}>My account</MenuItem>
+                                  <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
+                              </Menu>
+
+
+
+
+                        </div>
 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
 
@@ -179,8 +206,7 @@ function DashboardContent() {
                             <IconButton
                                 size="large"
                                 aria-label="show 17 new notifications"
-                                color="inherit"
-                            >
+                                color="inherit">
                                 <Badge badgeContent={17} color="error">
                                     <NotificationsIcon style={{ color : '#212529' }}/>
                                 </Badge>
@@ -196,7 +222,7 @@ function DashboardContent() {
                                 onClick={handleClick}
                                 color="inherit"
                             >
-                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
+                            <Avatar alt="Cindy Baker" src={ProfilePicture} />
 
                             </IconButton>
                             <Menu
@@ -204,10 +230,7 @@ function DashboardContent() {
                                 anchorEl={anchorEl}
                                 open={open_profile}
                                 onClose={handleClose}
-                                MenuListProps={{
-                                    'aria-labelledby': 'basic-button',
-                                }}
-                            >
+                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
                                 <MenuItem onClick={() => console.log('opcion 1') }>Profile</MenuItem>
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
@@ -242,7 +265,9 @@ function DashboardContent() {
                         <MainListItems/>
                     </List>
                     <Divider />
-                    <List>{secondaryListItems}</List>
+                    <List>
+                        {secondaryListItems}
+                    </List>
                 </Drawer>
                 <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} >
 

psicoadmin/src/Components/HeaderMobile.js

@@ -0,0 +1,99 @@
+export default function HeaderMobile () {
+    return(
+        <div className="header_mobile">
+            <div className="column">
+                <div id="dl-menu" className="dl-menuwrapper">
+                    <button className="dl-trigger"></button>
+                    <ul className="dl-menu">
+                        <li>
+                            <a href="index.php">Inicio</a>
+                        </li>
+                        <li>
+                            <a href="puestos.php">Puestos</a>
+                        </li>
+                        <li>
+                            <a href="contraseñas.php">Contraseñas</a>
+                        </li>
+                        <li>
+                            <a href="expedientes.php">Expedientes</a>
+                        </li>
+                        <li>
+                            <a href="resultados.php">Resultados</a>
+                        </li>
+                        <li>
+                            <a href="contraseñas.php">Contraseñas</a>
+                        </li>
+                        <li>
+                            <a href="#">Pruebas<i className="fa fa-angle-right" aria-hidden="true"></i></a>
+                            <ul className="dl-submenu">
+                                <li>
+                                    <a href="#">Crear prueba</a>
+                                </li>
+                                <li>
+                                    <a href="#">Listado de pruebas</a>
+                                </li>
+                                <li>
+                                    <a href="#">Aplicar</a>
+                                </li>
+                                <li>
+                                    <a href="#">Respuestas</a>
+                                </li>
+                                <li>
+                                    <a href="#">Calificaciones</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Configuraciones</a>
+                        </li>
+                        <li>
+                            <a href="#">Historial</a>
+                        </li>
+                        <li>
+                            <a href="#">Tutoriales<i className="fa fa-angle-right" aria-hidden="true"></i></a>
+                            <ul className="dl-submenu">
+                                <li>
+                                    <a href="#">Manual de Uso Básico</a>
+                                </li>
+                                <li>
+                                    <a href="#">¿Qué evalúa cada test?</a>
+                                </li>
+                                <li>
+                                    <a href="#">Ayuda General</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Asistencia Técnica<i className="fa fa-angle-right" aria-hidden="true"></i></a>
+                            <ul className="dl-submenu">
+                                <li>
+                                    <a href="#">Soporte En Línea</a>
+                                </li>
+                                <li>
+                                    <a href="#">Soporte Por Ticket</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Notificaciones</a>
+                        </li>
+                        <li>
+                            <a href="#">Cuenta<i className="fa fa-angle-right" aria-hidden="true"></i></a>
+                            <ul className="dl-submenu">
+                                <li>
+                                    <a href="#">Perfil</a>
+                                </li>
+                                <li>
+                                    <a href="#">Configuraciones</a>
+                                </li>
+                                <li>
+                                    <a href="#">Cerrar sesión</a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>    
+        </div>
+    )
+}

psicoadmin/src/Components/MenuMovil.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function MenuMovil(props) {
+
+    const [anchorEl, setAnchorEl] = React.useState(props.open);
+    const open = Boolean(anchorEl);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        console.log('cerrando el componente')
+        // setAnchorEl(null);
+    };
+
+    return (
+        <div>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{ 'aria-labelledby': 'basic-button', }}
+            >
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>My account</MenuItem>
+                <MenuItem onClick={handleClose}>Logout</MenuItem>
+            </Menu>
+        </div>
+    );
+
+}

psicoadmin/src/Pages/Puestos.js

@@ -1,4 +1,405 @@
 export function Puestos() {
-    return ( <h1>Puestos</h1>
+    return (
+        <div id="content" style={{ paddingTop : 150 }}>
+            <div class="content-section">
+                <div class="main">
+                    <h1 class="breadcrumb-header">Plazas</h1>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="list_view">
+                                <div class="row">
+                                    <div class="colgrilla">
+                                        <div class="btn_view">
+                                            <a class="activar_vista" id="list_click" tooltip-location="top" tooltip-animate tooltip="Ver como lista" onclick="activarlista()"><i class="fas fa-list"></i></a>
+                                        </div>
+                                    </div>
+                                    <div class="colgrilla">
+                                        <div class="btn_view">
+                                            <a id="grid_click" tooltip-location="top" tooltip-animate tooltip="Ver como grupo" onclick="activargrid()"><i class="fas fa-th"></i></a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="add_producto">
+                                <div class="btn_add_producto">
+                                    <a href="#" data-toggle="modal" data-target="#addProducto">Agregar manual</a>
+                                </div>
+                            </div>
+                            <div class="add_producto">
+                                <div class="btn_add_producto">
+                                    <a href="#" data-toggle="modal" data-target="#addProductoExpress">Agregar express</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="main_productos" id="grid_view">
+                        <div class="row">
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="panel">
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="img-container">
+                                                <img src="images/not_found.png"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="info_details">
+                                                <p>Nombre de la plaza</p>
+                                                <p>Descripción</p>
+                                                <p>Salario</p>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                                </div>
+                                                <div class="botones_interactivos">
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="main_list_products" id="list_view_products">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="body-table">
+                                    <table id="tablaproductos" class="display" style={{ width : "100%" }}>
+                                        <thead>
+                                            <tr>
+                                                <th>Nombre de la plaza</th>
+                                                <th>Descripción</th>
+                                                <th>Salario</th>
+                                                <th>Acciones</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>Nombre de la plaza</td>
+                                                <td>Descripción</td>
+                                                <td>Salario</td>
+                                                <td><a href="#" class="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a><a href="#" class="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a><a href="#" class="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a></td>
+                                            </tr>
+
+
+                                        </tbody>
+                                        <tfoot>
+                                            <tr>
+                                                <th>Nombre de la plaza</th>
+                                                <th>Descripción</th>
+                                                <th>Salario</th>
+                                                <th>Acciones</th>
+                                            </tr>
+                                        </tfoot>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     )
 }