start config in puestos consum ws

src/Components/Modal/PasswordModal.jsx

 export function HelpModal (props) {
 
     let { visible, handleClose } = props
-    console.log('props >>.', props )
 
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());

src/Components/Password/CustomToolbar.jsx

 
 
     render() {
-        let { visible, setVisible } = this.state;
+
+        let { visible } = this.state;
+
         return (
             <React.Fragment>
                 <Tooltip title={"custom icon"}>

src/Css/all.css

 .main .panel {
     background: #ffffff;
     color: #25344f;
-    /* margin-bottom: 30px; */
-    margin-bottom: 5px;
+    margin-bottom: 20px;
     border-radius: 2px;
     width: 100%;
     float: left;
     border: 1px solid #dcdcdc;
-    padding : 10px;
+    /* padding : 10px; */
 }
 .footerinfo p {
     font-size: 14px;

src/Pages/Login.jsx

             request
             .post({})
             .then( response => {
-                console.log("Service Response :: ", response)
+                // console.log("Service Response :: ", response)
                 let { token, nombre, apelidos } = response;
                 toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
                 token = token.replace("Bearer ", "")
                 let user_permissions = jwt_decode(token);
-                console.log("TOKEN >> ", token, 'decrypt', user_permissions )
+                Object.keys(user_permissions);
+                console.log("Bearer ", token)
                 setTimeout( () => {
                     setOpen(false)
                     auth.login(token)

src/Pages/Puestos.jsx

-import React  from 'react';
+import React, { useState }  from 'react';
 import { Row, Col } from 'react-bootstrap'
-import { Box } from '@mui/material';
 import toast, { Toaster } from 'react-hot-toast';
 
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { 
+    ToggleButton, 
+    ToggleButtonGroup, 
+    Box, Paper
+} from '@mui/material';
 
-import ViewListIcon from '@mui/icons-material/ViewList';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { 
+    ViewList as ViewListIcon,
+    ViewModule as ViewModuleIcon,
+    RemoveRedEye as RemoveRedEyeIcon,
+    Edit as EditIcon,
+    HighlightOff as HighlightOffIcon,
+} from '@mui/icons-material';
 
-import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
-import EditIcon from '@mui/icons-material/Edit';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { default as useAuth } from '../Auth/useAuth';
+import { Service } from '../Utils/HTTP';
 
-import NotFound from '../Images/not_found.png';
 
+import NotFound from '../Images/not_found.png';
 import Express from '../Components/Modal/AgregarExpress';
 import Manual from '../Components/Modal/AgregarManual';
 
 
     return(
         <React.Fragment> 
+
             {
                 data.length ? 
                 data.slice(23).map( plaza => {
 }
 
 export function Puestos() {
+    const auth = useAuth();
+    
+    useState(() => {
+        let rest = new Service("/plaza/getall")
+        let token = auth.getToken();
+
+        rest
+        .get(token)
+        .then(({data}) => {
+            console.log('data > ', data)
+        })
+        .catch((error) => {
+            console.log('error fetching data  ', error );
+        })
+    },[])
 
     const [alignment, setAlignment] = React.useState('list');
 
-    const handleChange = (event, newAlignment) => setAlignment(newAlignment);
+    const handleChange = (_event, newAlignment) => setAlignment(newAlignment);
 
     const children = [
         <ToggleButton value="list" key="list">
 
     return (
         <div className="content-section">
-
             <div className="main">
-
-                <h1>Puestos</h1>
+                <Box sx={{ width: '100%' }}>
+                <Paper sx={{ width: '100%', mb: 2, padding : 2 }}>
 
                 <Row>
                     <Col md="2" sm="2" xs="2">
                         />
                     </Row>
                 </div>
+
+                </Paper>
+                </Box>
+
             </div>
 
             <Express success={Success} setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
             <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
             <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
-            <Toaster
-                position="bottom-right"
-                reverseOrder={false}
-            />
+            <Toaster position="bottom-right" reverseOrder={false} />
 
         </div>
     )