[add] full puestos dashboard

psicoadmin/src/App.css

     opacity: 0;
     pointer-events:none;
 }
+.grid_btn{
+    font-size : 20px !important;
+    color: #b9c3ce;
+    transition: all 0.3s;
+    cursor: pointer;
+}
 
 

psicoadmin/src/Css/all.css

     width: 100%;
     float: left;
     border: 1px solid #dcdcdc;
+    padding : 10px;
 }
 .footerinfo p {
     font-size: 14px;

psicoadmin/src/Pages/Puestos.js

 import * as React from 'react';
-import classnames from 'classnames';
 import { Row, Col } from 'react-bootstrap'
 
 import Box from '@mui/material/Box';
 
 import ViewListIcon from '@mui/icons-material/ViewList';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
+
+import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
+import EditIcon from '@mui/icons-material/Edit';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+
+import NotFound from '../Images/not_found.png';
     
 let data = [{
     nombre : 'Nombre puesto',
 
 }]
 
-for( let _ of new Array(10) ){
+for( let _ of new Array(23) ){
     data.push(data[0])
 }
 
 }
 
 
-function ModuleMode () {
+function GridMode () {
+
+    let buttons = [
+        <div className="botones_interactivos">
+            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto">
+                <RemoveRedEyeIcon className="grid_btn"/>
+            </a>
+        </div>,
+        <div className="botones_interactivos">
+            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto">
+                <EditIcon className="grid_btn"/>
+            </a>
+        </div>,
+        <div className="botones_interactivos">
+            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto">
+                <HighlightOffIcon className="grid_btn"/>
+            </a>
+        </div>
+    ]
+
     return(
         <React.Fragment> 
             {
                 data.length ? 
-                    <div className="col-md-3">
-                        <div className="panel">
-                            <div className="row">
-                                <div className="col-md-4">
-                                    <div className="img-container">
-                                        <img src="images/not_found.png"/>
-                                    </div>
-                                </div>
-                                <div className="col-md-8">
-                                    <div className="info_details">
-                                        <p>Nombre de la plaza</p>
-                                        <p>Descripción</p>
-                                        <p>Salario</p>
-                                        <div className="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i className="far fa-eye"></i></a>
-                                        </div>
-                                        <div className="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i className="far fa-edit"></i></a>
+                data.map( plaza => {
+
+                    return(
+                        <Col md="3">
+                            <div className="panel">
+                                <Row>
+                                    <Col md="4">
+                                        <div className="img-container">
+                                            <img src={NotFound}/>
                                         </div>
-                                        <div className="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i className="far fa-times-circle"></i></a>
+                                    </Col>
+                                    <Col md="8">
+                                        <div className="info_details">
+                                            <p>{ plaza.nombre }</p>
+                                            <p>{ plaza.description }</p>
+                                            <p>{ plaza.salario }</p>
+                                            { buttons }
                                         </div>
-                                    </div>
-                                </div>
+                                    </Col>
+                                </Row>
                             </div>
-                        </div>
-                    </div>
-                    : undefined
+                        </Col>
+                    )
+                }) : undefined
             }
         </React.Fragment>
     )
                 </Row>
                 <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                     <Row>
-                        <ModuleMode/>
+                        <GridMode/>
                     </Row>
                 </div>
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">