[add

psicoadmin/src/App.css

@@ -91,7 +91,7 @@
 .actions_butons_plaza{
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-content: center;
     justify-content: space-around;
     align-items: flex-start;

psicoadmin/src/Css/all.css

@@ -287,7 +287,7 @@ li.nav-item {
     width: 100%;
     float: left;
     border: 1px solid #dcdcdc;
-    padding : 10px;
+    /* padding : 10px; */
 }
 .footerinfo p {
     font-size: 14px;
@@ -805,7 +805,7 @@ table.dataTable tbody th, table.dataTable tbody td {
     color: #fff;
     transition: all 0.3s;
 }
-.btn_add_producto a {
+.btn_add_producto span {
     display: block;
     padding: 10px;
 }

psicoadmin/src/Pages/Puestos.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Row, Col, Modal } from 'react-bootstrap'
+import { Row, Col, Modal, Button } from 'react-bootstrap'
 
 import Box from '@mui/material/Box';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -41,9 +41,9 @@ for ( var _ of new Array(23) ){
 function ListMode() {
 
     let actions = [
-        <a href="/" className="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a>,
-        <a href="/" className="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a>,
-        <a href="/" className="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a>,
+        <Button className="ver_producto">Ver</Button>,
+        <Button className="editar_producto">Editar</Button>,
+        <Button className="eliminar_producto">Eliminar</Button>,
     ]
 
     return(
@@ -94,19 +94,19 @@ function GridMode () {
 
     let buttons = [
         <div className="botones_interactivos">
-            <a href="/" tooltip-location="top" tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto">
+            <span tooltip-location="top" tooltip="Ver plaza">
                 <RemoveRedEyeIcon className="grid_btn"/>
-            </a>
+            </span>
         </div>,
         <div className="botones_interactivos">
-            <a href="/" tooltip-location="top" tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto">
+            <span tooltip-location="top" tooltip="Editar plaza">
                 <EditIcon className="grid_btn"/>
-            </a>
+            </span>
         </div>,
         <div className="botones_interactivos">
-            <a href="/" tooltip-location="top" tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto">
+            <span tooltip-location="top" tooltip="Eliminar plaza">
                 <HighlightOffIcon className="grid_btn"/>
-            </a>
+            </span>
         </div>
     ]
 
@@ -115,8 +115,9 @@ function GridMode () {
             {
                 data.length ? 
                 data.map( ( plaza, i ) => {
+                    console.log(plaza)
                     return(
-                        <Col key={i} md="3">
+                        <Col key={plaza.id} md="3">
                             <div className="panel">
                                 <Row>
                                     <Col md="4">
@@ -174,7 +175,7 @@ function Manual ( props ) {
                         </Col>
                         <div className="add_producto_confirm">
                             <div className="btn_add_producto_confirm">
-                                <a href="/" type="submit">Agregar plaza</a>
+                                <span style={{ margin : 15 }} type="submit">Agregar plaza</span>
                             </div>
                         </div>
                     </Row>
@@ -200,7 +201,7 @@ function Express (props) {
                         </div>
                         <div className="add_producto_confirm">
                             <div className="btn_add_producto_confirm">
-                                <a href="/" type="submit">Agregar plaza</a>
+                                <Button type="submit">Agregar plaza</Button>
                             </div>
                         </div>
                     </div>
@@ -242,7 +243,7 @@ export function Puestos() {
         <div className="content-section">
             <div className="main">
                 <Row>
-                    <Col md="6">
+                    <Col md="2" sm="2">
                         <div className="breadcrumb-header">
                             <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
                                 <ToggleButtonGroup size="small" {...control}>
@@ -251,12 +252,12 @@ export function Puestos() {
                             </Box>
                         </div>
                     </Col>
-                    <Col md="6">
+                    <Col md="10" sm='10'>
                         <div className="add_producto">
-                            <div onClick={() => setManual(true) } className="btn_add_producto"> <a href="/">Agregar manual</a> </div>
+                            <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
                         </div>
                         <div onClick={showExpress} className="add_producto">
-                            <div className="btn_add_producto"> <a href="/">Agregar express</a> </div>
+                            <div className="btn_add_producto"> <span >Agregar express</span> </div>
                         </div>
                     </Col>
                 </Row>