crud full modal fixes

psicoadmin/src/Components/Modal/EditPlaza.js

 import React from 'react';
 import { Modal } from 'react-bootstrap'
+import NotFound from '../../Images/not_found.png';
 
 export default function Edit(props) {
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
             <Modal.Header>
-                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
+                <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
                 <h4 className="modal-title">Editar plaza</h4>
             </Modal.Header>
-            <Modal.Body className="modal-body">
-                <h1>Editar Plaza </h1>
+            <Modal.Body classNameName="modal-body">
+
+                <div className="row">
+                    <div className="col-md-4">
+                        <div className="img-container">
+                            <img alt='not found version' src={NotFound} />
+                        </div>
+                    </div>
+                    <div className="col-md-8">
+                        <div className="custom-file-upload">
+                            <input type="file" id="file" name="myfiles[]" multiple disabled />
+                        </div>
+                    </div>
+                </div>
+                <div className="data_product">
+                    <div className="row">
+                        <div className="col-md-12">
+                            <input type="text" name="nombre" placeholder="Nombre de la plaza"/>
+                            <textarea placeholder="Descripción"></textarea>
+                            <input type="number" name="sku" placeholder="3500"/>
+                        </div>
+                    </div>
+                    <div className="add_producto_confirm">
+                        <div className="btn_add_producto_confirm">
+                            <a href="/" type="submit">Actualizar plaza</a>
+                        </div>
+                    </div> 
+                </div>
+
             </Modal.Body>
         </Modal>
     )

psicoadmin/src/Components/Modal/EliminarPlaza.js

 import React from 'react';
-import { Modal } from 'react-bootstrap'
+import { Modal, Row, Col } from 'react-bootstrap'
 
 export default function Eliminar(props) {
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
             <Modal.Header>
-                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
-                <h4 className="modal-title">Eliminar plaza</h4>
+                <button onClick={onClose} type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4 class="modal-title">¡Atención!</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
-                <h1>Eliminar Plaza </h1>
+
+                <h1 class="alert">¿Estás seguro que deseas eliminar esta plaza?</h1>
+                <p class="text-alert">Una vez eliminado no será posible recuperarla</p>
+                <Row>
+                    <Col md="6">
+                        <div class="cancel_producto_confirm">
+                            <div class="btn_cancelar">
+                                <a href="/" type="submit">Cancelar</a>
+                            </div>
+                        </div>
+                    </Col>
+                    <Col md="6">
+                        <div class="delet_producto_confirm">
+                            <div class="btn_delete_producto_confirm">
+                                <a href="/" type="submit">Eliminar</a>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
             </Modal.Body>
         </Modal>
     )

psicoadmin/src/Components/Modal/MostrarPlaza.js

 import React from 'react';
 import { Modal } from 'react-bootstrap'
+import NotFound from '../../Images/not_found.png';
 
 export default function Mostrar(props) {
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
             <Modal.Header>
-                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
+                <button  onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
                 <h4 className="modal-title">Mostrar plaza</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
-                <h1>Mostrar Plaza </h1>
+
+                <div class="data_product">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="img-container">
+                                <img alt='not found cooo' src={NotFound}/>
+                            </div>
+                        </div>
+                        <div class="col-md-8">
+                            <input type="text" name="nombre" placeholder="Nombre de la plaza" readOnly/>
+                            <input type="text" name="descript" placeholder="Descripción" readOnly/>
+                            <input type="number" name="sku" placeholder="3500" readOnly/>
+                        </div>
+                    </div>
+                </div>
+
             </Modal.Body>
         </Modal>
     )

psicoadmin/src/Pages/Puestos.js

 
 function ListMode(props) {
     
-    let { setEdit, setDelete, setShow } = props;
-
-    let actions = [
-        <Button onClick={ ()  => setShow(true)} className="ver_producto">Ver</Button>,
-        <Button onClick={() => setEdit(true)} className="editar_producto">Editar</Button>,
-        <Button onClick={ ()  => setDelete(true) } className="eliminar_producto">Eliminar</Button>,
-    ]
+    let { setEdit, setDelete, setShow, setPuesto } = props;
 
     return(
         <Col md="12">
                                 data.slice( 0,23 ).map( (plaza, i) => {
                                     return (
                                         <tr key={plaza.id}>
-                                            <td className="text-center">{ plaza.nombre }</td>
+                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
                                             <td className="text-center">{ plaza.description }</td>
                                             <td className="text-center">{ plaza.salario }</td>
-                                            <td className="actions_butons_plaza"> { actions } </td>
+                                            <td className="actions_butons_plaza"> 
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setShow(true)
+                                                    }} 
+                                                    className="ver_producto">Ver
+                                                </Button>
+
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setEdit(true)
+                                                    }} 
+                                                    className="editar_producto">Editar
+                                                </Button>
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setDelete(true) 
+                                                    }} 
+                                                    className="eliminar_producto">Eliminar
+                                                </Button>
+                                            </td>
                                         </tr>
                                     )
                                 }) : undefined
         exclusive: true,
     };
 
+    let [puesto, setPuesto] = React.useState(false);
+
     let [manual, setManual] = React.useState(false);
     let [expres, setExpress] = React.useState(false);
 
     let [del, setDelete] = React.useState(false);
     let [show, setShow] = React.useState(false);
 
+    React.useEffect(() => {
+        console.log('puesto >>>', puesto.id)
+    }, [puesto])
+
     return (
         <div className="content-section">
 
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                     <Row>
                         <ListMode 
+                            setPuesto={setPuesto}
                             setEdit={setEdit}
                             setDelete={setDelete}
                             setShow={setShow}