[ADD] puestos pre visualitation mode

psicoadmin/src/App.css

 .MuiFormControl{
     border : 1px solid #eceff1;
 }
+.actions_butons_plaza{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: space-around;
+    align-items: flex-start;
+    padding : 10px;
+}
+
+

psicoadmin/src/Components/Candidatos.js

 import React, { useState } from 'react';
-import { Row, Col } from 'react-bootstrap';
 
 import UpdateIcon from '@mui/icons-material/Update';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
+import { Row, Col } from 'react-bootstrap';
 
 export default function Candidatos () {
 

psicoadmin/src/Components/Dashboard.js

                                 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",
                                 }}/>
                             </IconButton>
 
-                              <Menu
+                            <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>
-
-
-
+                                    '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 }} >
-
                             {
                                 !useCheckMobileScreen() && open ? (
                                     <React.Fragment>
                                     </React.Fragment>
                                 ) : undefined
                             }
-
-
                         </Typography>
 
 
                                 onClick={handleClick}
                                 color="inherit"
                             >
-                            <Avatar alt="Cindy Baker" src={ProfilePicture} />
+                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
 
                             </IconButton>
                             <Menu
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                             </Menu>
 
-
                         </Box>
 
-
-
                     </Toolbar>
                 </AppBar>
                 <Drawer variant="permanent" open={open}>

psicoadmin/src/Pages/Puestos.js

-export function Puestos() {
-    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>
+import * as React from 'react';
+import { Row, Col } from 'react-bootstrap'
+
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+import ViewListIcon from '@mui/icons-material/ViewList';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
+    
+let data = [{
+    nombre : 'Nombre puesto',
+    description : 'MingMecca',
+    salario :  'Q 10,000',
+
+}]
+
+for( let _ of new Array(10) ){
+    data.push(data[0])
+}
+
+function ListMode() {
+
+    let actions = [
+        <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>,
+    ]
+
+    return(
+        <Row class="row">
+            <Col style={{ padding : 0 }} 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>
+                            {
+                                data.length ? 
+                                data.map( plaza => {
+                                    return (
+                                        <tr>
+                                            <td>{ plaza.nombre }</td>
+                                            <td>{ plaza.description }</td>
+                                            <td>{ plaza.salario }</td>
+                                            <td className="actions_butons_plaza"> { actions } </td>
+                                        </tr>
+                                    )
+                                }) : undefined
+                            }
+
+                        </tbody>
+                        <tfoot>
+                            <tr>
+                                <th>Nombre de la plaza</th>
+                                <th>Descripción</th>
+                                <th>Salario</th>
+                                <th>Acciones</th>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            </Col>
+        </Row>
+    )
+}
+
+
+function ModuleMode () {
+    return(
+        <React.Fragment> 
+            {
+                data.length ? 
+                    <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>
-                            <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 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="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 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>
-                                </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 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 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>
+                    : undefined
+
+            }
+        </React.Fragment>
+    )
+}
+
+export function Puestos() {
+
+    const [alignment, setAlignment] = React.useState('left');
+
+    const handleChange = (event, newAlignment) => {
+        setAlignment(newAlignment);
+    };
+
+    const children = [
+        <ToggleButton value="left" key="left">
+            <ViewListIcon />
+        </ToggleButton>,
+        <ToggleButton value="center" key="center">
+            <ViewModuleIcon/>
+        </ToggleButton>,
+        <ToggleButton value="right" key="right">
+            <ViewQuiltIcon/>
+        </ToggleButton>,
+    ];
+
+    const control = {
+        value: alignment,
+        onChange: handleChange,
+        exclusive: true,
+    };
+
+    return (
+        <div class="content-section">
+            <div class="main">
+                <div class="breadcrumb-header">
+                    <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
+                        <ToggleButtonGroup size="small" {...control}>
+                            {children}
+                        </ToggleButtonGroup>
+                    </Box>
+                </div>
+                <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>
-                            <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 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="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 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">
+                    <Row>
+                        <ModuleMode/>
+                    </Row>
+                </div>
+                <div class="main_list_products" id="list_view_products">
+                    <ListMode/>
+                </div>
             </div>
         </div>
     )