feedback update

src/App.js

 import { Container } from 'react-bootstrap'
 import { AuthProvider } from './Auth/AuthProvider'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
 
 import Routes from './Components/Routes'
 const queryClient = new QueryClient({
                     </API_GATEWAY.Provider>
                 </AuthProvider>
             </Router>
-            <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
     );
 }

src/Components/Generics/loading.jsx

 import React from "react";
 import '../../Css/loading.css'
 
-export function Loading( props ) {
+export function Loading( ) {
 
-    let { type } = props
-
-    let types = [
-        "dot-elastic","dot-flashing", "dot-collision", "dot-revolution", "dot-carousel", "dot-fire",
-        "dot-spin","dot-falling", "dot-stretching"
+    const types = [
+        "dot-pulse","dot-elastic","dot-flashing", "dot-collision", "dot-revolution", "dot-carousel", 
+        "dot-fire","dot-spin","dot-falling", "dot-stretching"
     ];
 
-    console.log(type, types)
-
     return(
         <div className="loading_or_content">
             <div className="snippet" data-title=".dot-pulse">
                 <div className="stage">
-                    <div className="dot-pulse"></div>
+                    <div className={types[0]}></div>
                 </div>
             </div>
         </div>

src/Components/Modal/AgregarManual.js

 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 import { Modal } from 'react-bootstrap'
+import toast, { Toaster } from 'react-hot-toast';
 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
         puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
         aredepto: Yup.number().required('Escoge alguna área'),
         fecha: Yup.date("Ingresa una fecha válida"),
-        notas: Yup.string("Ingresa una nota válida").min(5).max(150),
+        notas: Yup.string("Ingresa una nota válida").min(5,"Ingresa una nota válida").max(150),
     })
 
     const [departamento, setDepartamento] = React.useState('');
                     resetForm();
                     onClose();
                     queryClient.invalidateQueries('puestos')
+                    toast.success("Puesto Agregado")
+                },
+                onError:() =>{
+                    setOpen(false)
+                    toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
                 }
             })
         },
                 onClick={handleClose} >
                 <CircularProgress color="inherit" />
             </Backdrop>
-
+            <Toaster position="top-right" />
         </Modal>
     )
 }

src/Components/Modal/EditPlaza.js

 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 import { Modal } from 'react-bootstrap'
+import toast, { Toaster } from 'react-hot-toast';
 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
     let { visible, toggle, puesto } = props
 
     const [departamento, setDepartamento] = React.useState('');
-    // const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
 
     const changeDepartamento = useCallback((event) => {
         setDepartamento(event.target.value);
             notas: ""
         },
         onSubmit: (fields, { resetForm }) => {
+            setOpen(true);
             fields['fecha'] = new Date(fields.fecha).toISOString();
 
             puestoMutation.mutate(fields, {
                 onSuccess: () => {
                     close();
+                    setOpen(false)
+                    toast.success("Puesto Actualizado!!")
                     queryClient.invalidateQueries('puestos')
+                },
+                onError:() => {
+                    close();
+                    setOpen(false)
+                    toast.error("Lo sentimos ocurrió error inténtalo más tarde")
                 }
             })
 
                 </FormikProvider>
             </Modal.Body>
             <Backdrop
-            // sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-            // open={open}
-            // onClick={() => console.log('backdrop')} >
-            >
+                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={open}
+                onClick={() => console.log('backdrop')} >
                 <CircularProgress color="inherit" />
             </Backdrop>
+            <Toaster position="top-right" />
 
         </Modal>
     )

src/Components/Navigation/listItems.js

         <List>
             <ListSubheader inset>MENÚ</ListSubheader>
             {
-                MainItems.map( ({ icon, title, route}) =>  (
-                    <NavItem icon={icon} title={title} route={route} />
+                MainItems.map( ({ icon, title, route}, i) =>  (
+                    <NavItem key={i} icon={icon} title={title} route={route} />
                 ))
             }
             <ListItem selected={open} onClick={showPruebas}>
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
                     {
-                        PruebaItems.map( ({ route, title}) => 
-                            ( <NavItem setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
+                        PruebaItems.map( ({ route, title},i) => 
+                            ( <NavItem key={i} setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
                         )
                     }
                 </List>

src/Components/Puestos/ListMode.jsx

 export function ListMode(props) {
     
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
-    let { setEdit, setDelete, setShow, setPuesto, data, index, showing } = props;
+    let {  data, index, showing } = props;
 
     const isMovil = Size('(min-width:770px)');
 
     return(
         <Col md="12">
-            <div className="body-table">
-                <Table responsive borderless id="tablaproductos">
+            <div className={!isMovil ? "body-table-responsive" : "body-table"}>
+                <Table responsive borderless id="tablaproductos" style={{ color : 'white' }}>
                     <thead>
                         <tr >
-                            <th className="text-center">Nombre de la plaza</th>
+                            <th className="text-center">Nombre</th>
                             <th className="text-center">Descripción</th>
                             <th className="text-center">Creacion</th>
-                            <th className="text-center">Acciones</th>
+                            <th className="text-center">Acción</th>
                         </tr>
                     </thead>
                     <tbody>
                                     return (
                                     <Zoom key={plaza.id} in={true}>
                                         <tr >
-                                            <td className="text-center">{ plaza.nombre }</td>
-                                            <td className="text-center">{ plaza.description }</td>
-                                            <td className="text-center">{ new Date( plaza.created ).toLocaleDateString('es-GT',opciones) }</td>
+                                            <td className="text-center">{ plaza.nombrepuesto }</td>
+                                            <td className="text-center">{ plaza.notas }</td>
+                                            <td className="text-center">{ new Date( plaza.createday ).toLocaleDateString('es-GT',opciones) }</td>
                                             <TableCell
                                                 sx={{
                                                     "display":'flex',
                                                 className="actions_butons_plaza"> 
                                                 <Button 
                                                     onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setShow(true)
+                                                        console.log("VER")
                                                     }} 
                                                     className="ver_producto">
                                                     {!isMovil ? <ShowI/> : "Ver"}
                                                 </Button>
                                                 <Button 
                                                     onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setEdit(true)
+                                                        console.log("EDITAR")
                                                     }} 
                                                     className="editar_producto">
                                                     {!isMovil ? <EditI/> : "Editar"}
                                                 </Button>
                                                 <Button 
                                                     onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setDelete(true) 
+                                                        console.log("ELIMINAR")
                                                     }} 
                                                     className="eliminar_producto">
                                                     {!isMovil ? <Deletei/> : "Eliminar"}

src/Css/all.css

     border-radius: 2px;
     box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 -1px 0 rgba(0,0,0,.02); 
 }
+.body-table-responsive {
+    font-size:13px;
+    padding: 2px;
+    background: #24344d;
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 -1px 0 rgba(0,0,0,.02); 
+}
 .body-table th {
     font-size: 14px;
     color: #fff;
     background: #2ec5d3;
     border: 1px solid transparent;
     color: #fff;
-    padding: 8px 20px;
+    padding: 3px 7px;
     border-radius: 20px;
     transition: all 0.3s;
 }
     background: #5893df!important;
     border: 1px solid transparent;
     color: #fff;
-    padding: 8px 20px;
+    padding: 3px 7px;
     border-radius: 20px;
     transition: all 0.3s;
 }
     background: #ec5e69!important;
     border: 1px solid transparent;
     color: #fff;
-    padding: 8px 20px;
+    padding: 3px 7px;
     border-radius: 20px;
     transition: all 0.3s;
 }

src/Pages/Puestos.jsx

 import { useQuery } from 'react-query';
 
 export function Puestos() {
-    console.log("render puestos")
 
     const auth = useAuth();
     const token = auth.getToken();
                 setEdit(!edit)
                 break;
             }
+            case "DEL": {
+                setDelete(!del)
+                break;
+            }
             default: break;
         }
-        console.table(edit,del,show)
     },[edit,del,show])
 
     if (isLoading){
         <div className="content-section">
             <div className="main">
                 <Box sx={{}}>
-                    <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
+                    <Paper sx={{ mb: 2, padding: 2, }}>
 
                         <Row style={{ paddingBottom: 15 }}>
                             <Col md="2" sm="2" xs="2">
                         </Row>
 
                         <div >
-                            <div className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
+                            <div  className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
                                 <Row>
                                     <GridMode
                                         toggle={toggle}
                             <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                                 <Row>
                                     <ListMode
+                                        toggle={toggle}
                                         showing={alignment}
                                         data={Divide( result.data )}
                                         index={page - 1}

src/Utils/Paginate.js

 export function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 6;
+    const LONGITUD_PEDAZOS = 9;
     let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);