complete circle

src/App.css

 }
 
 #login_btn_fn:hover{
-    background-color: var(--second)
+    background-color: var(--main);
 }
 
 .btn_plaza_common{
 }
 
 .btn_plaza_common:hover{
-    color:var(--second) !important;
+    color:var(--main) !important;
 }
 .center_pagination_puestos{
     display :flex;

src/Components/AgregarManual.js

-import React from 'react';
-import * as Yup from 'yup';
-import { Formik, Field, Form } from 'formik';
-import { Row, Col, Modal, Button} from 'react-bootstrap'
-
-import NotFound from '../../Images/not_found.png';
-const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
-
-const NewPlazaSchema = Yup.object().shape({
-    nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
-    description : Yup.string().required('La description es requerida').min(5).max(20),
-    salario : Yup.number().required('El salario es requerido'),
-    imagen:  Yup.mixed().required('El imagen es requerido').test('fileSize', "El archivo es demasiado grande", value => {
-        if(!value || value.length <= 0) return false
-        return value[0].size < 200000
-    }).test('fileType', "El tipo del archivo no es válido", value => {
-        if(!value) return false
-        return SUPPORTED_FORMATS.includes(value[0].type)
-    })
-})
-
-export default function Manual ( props ) {
-
-    let [ filename, setFilename ] = React.useState('');
-    let [ file, setFile ] = React.useState(undefined);
-    let [ type, setType ] = React.useState(undefined);
-    let [ validType, setValidType ] = React.useState(false);
-
-    let { visible, onClose } = props
-    const hiddenFileInput = React.useRef(null);
-
-    const PickFile = event => hiddenFileInput.current.click();
-
-    React.useEffect(() => {
-        if( SUPPORTED_FORMATS.includes(type) ){
-            setValidType(true)
-        }else{
-            setValidType(false)
-        }
-
-    }, [type])
-
-
-    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">Agregar plaza</h4>
-            </Modal.Header>
-            <Modal.Body className="modal-body">
-
-                <Formik
-
-                    initialValues={{
-                        nombre: '',
-                        description: '',
-                        salario: '',
-                        imagen: '',
-                    }}
-
-                    validationSchema={NewPlazaSchema}
-                    onSubmit={ (values) => {
-                        // console.log('VALUES >> ',values)
-                        props.setManual(false)
-                    }} >
-
-
-                    { ({  errors, touched, validateField, validateForm, setFieldValue  }) => (
-                        <Form>
-                            <Row>
-
-                                <Col md="4">
-                                    <div className="img-container">
-                                        <img alt="agregar plaza manual" src={ validType ? file : NotFound}/>
-                                    </div>
-                                </Col>
-
-                                <Col md="8">
-
-                                    <input 
-                                        value={filename} 
-                                        type="text" 
-                                        className="file-upload-input" 
-                                        disabled="" 
-                                        placeholder="Ningún archivo seleccionado" readOnly
-                                    />
-
-                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={PickFile}>
-                                        SUBIR FOTO
-                                    </Button>
-
-                                    {errors.imagen && touched.imagen && <div className="error_feedback">{errors.imagen}</div>}
-                                    <input
-                                        multiple={false}
-                                        type="file"
-                                        ref={hiddenFileInput}
-                                        onChange={(event) => {
-                                            const files = event.target.files;
-                                            console.log('files crud ', files[0])
-                                            let myFiles =Array.from(files);
-                                            setFieldValue("imagen", myFiles);
-                                            setFilename(myFiles[0].name)
-                                            setType(myFiles[0].type)
-                                            const objectUrl = URL.createObjectURL(files[0])
-                                            setFile(objectUrl)
-                                        }}
-                                        style={{display: 'none'}}
-                                    />
-
-                                </Col>
-
-                            </Row>
-                            <div className="data_product">
-                                <Row>
-                                    <Col md="12">
-
-                                        {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
-                                        <Field name="nombre" placeholder="Nombre de la plaza"/>
-
-                                        {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
-                                        <Field name="description">
-                                            {({ field, form, meta }) => {
-                                                return(
-                                                    <textarea id="description" name="description" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
-                                                )
-                                            }}
-                                        </Field>
-
-                                        {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
-                                        <Field name="salario" type="number" placeholder="Salario"/>
-
-
-                                    </Col>
-                                    <div className="add_producto_confirm">
-                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
-                                    </div>
-                                </Row>
-                            </div>
-                        </Form>
-                    )}
-
-
-
-
-                </Formik>
-            </Modal.Body>
-        </Modal>
-    )
-}

src/Components/Modal/AgregarManual.js

 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
-import {  Button, Stack, TextField, } from '@mui/material';
+import {  Button, Stack, TextField, MenuItem,FormControl, InputLabel, Select } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
 import  useAuth from '../../Auth/useAuth';
 
+import { departamentos } from '../Password/Rows'
+
 
 export default function Manual ( props ) {
 
     const NewPlazaSchema = Yup.object().shape({
-        nombrepuesto : Yup.string().required('El nombre es requerido').min(5).max(100),
+        nombrepuesto : Yup.string().required('El nombre es requerido').min(5, "El nombre del  puesto debe ser mayor a 5 caracteres").max(100),
         puestosuperior : Yup.number("El puesto superior debe ser un número"),
         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),
     })
+    
+    const [departamento, setDepartamento] = React.useState('');
+
+    const changeDepartamento = (event) => {
+        setDepartamento(event.target.value);
+    };
+
 
     const [date, setDate] = React.useState(new Date());
     const auth = useAuth();
     const token = auth.getToken();
 
-    let { visible, onClose, success, error } = props
+    let { visible, onClose, Complete } = props
 
     const formik = useFormik({
         initialValues: {
-            nombrepuesto: "QA ENGINIER",
-            puestosuperior: 3,
+            nombrepuesto: "",
+            puestosuperior: "",
             aredepto: 1,
             fecha: date,
-            notas: "alguna nota ",
+            notas: "",
         },
-        onSubmit: (fields) => {
+        onSubmit: ( fields, { resetForm } ) => {
 
-            fields['fecha'] = "2023-06-11T00:22:15.211"//new Date(fields.fecha).toString() //getDate(fields.fecha);
+            fields['fecha'] =  new Date(fields.fecha).toISOString();
             fields['areadeptoplz_id'] = 1;
             fields['id'] = -1;
 
 
             Rest
             .post( fields, token )
-            .then(data => {
+            .then( _ => {
+                resetForm();
+                Complete(true);
                 onClose();
-                success();
-                console.log('data ', data)
             })
             .catch(err => {
-                error();
                 console.error(err)
+                Complete(false);
             })
 
         },
         validationSchema: NewPlazaSchema,
     });
 
-    const { errors, touched, handleSubmit, getFieldProps } = formik;
+    const { errors, touched, handleSubmit, getFieldProps} = formik;
 
     return (
 
                 <FormikProvider style={{ padding : 25 }} value={formik}>
                     <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                         <Stack spacing={3}>
+
                             <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
 
                                 <TextField
 
                             </Stack>
                             <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                                <TextField
-                                    label="Departamento"
-                                    fullWidth
-                                    type="text"
-                                    {...getFieldProps('aredepto')}
-                                    error={Boolean(touched.aredepto && errors.aredepto)}
-                                    helperText={touched.aredepto && errors.aredepto}
-                                />
+                                <FormControl fullWidth>
+                                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
+                                    <Select
+                                        labelId="demo-simple-select-label"
+                                        value={departamento}
+                                        label="Departamento"
+                                        onChange={changeDepartamento}
+                                        {...getFieldProps('aredepto')}
+                                        error={Boolean(touched.aredepto && errors.aredepto)} >
+                                        {
+                                        departamentos.map( ( nivel, index ) => {
+                                            return (
+                                                <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
+                                            )
+                                        })
+                                    }
+                                    </Select>
+                                </FormControl>
+
+
                                 <LocalizationProvider 
                                     dateAdapter={DateFnsUtils}>
                                     <DesktopDatePicker
                                 type="submit"
                                 className="registerBtn" 
                                 variant="contained"
-                                sx={{ mt: 1, mr: 1 }}
-                            >
+                                sx={{ mt: 1, mr: 1 }} >
                                 {'Guardar'}
                             </Button>
                         </Modal.Footer>
 
                     </Form>
                 </FormikProvider>
-
-
-
             </Modal.Body>
         </Modal>
     )

src/Components/Password/Rows.js

         label: 'Operacion',
     },
 ]
+
 export const niveles_educativos = [
     "Primaria",
     "Basico",
     "Certificacion",
     "Cursos"
 ]
+
+
+export const departamentos = [
+    "Jutiapa",
+    "Guatemala",
+    "Santa Rosa",
+]

src/Components/Puestos/GridMode.jsx

     HighlightOff as HighlightOffIcon,
 } from '@mui/icons-material';
 
+import { Grow } from '@mui/material';
+
 
 import { Row, Col } from 'react-bootstrap'
 
 export function GridMode(props){
 
-    let { setEdit, setDelete, setShow, setPuesto, data ,index} = props;
-    console.log('data reci', data,index)
+    let { setEdit, setDelete, setShow, setPuesto, data ,index, showing} = props;
 
     return(
         <React.Fragment> 
             {
-                data.length ? 
-                    data[index].map( plaza => {
+                data.length && showing === 'grid' ? 
+                    data[index].map( (plaza,i) => {
                         return(
-                            <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
+                        <Grow  
+                            in={true}
+                            style={{ transformOrigin: '0 0 0' }}
+                            timeout={500}
+                            key={plaza.id}
+                            >
+                            <Col  lg="4" md="6" sm="6" xs="12" >
                                 <div className="panel">
                                     <Row>
                                         <Col md="4">
                                         <Col md="8">
                                             <div className="info_details">
                                                 <p>{ plaza.nombre }</p>
-                                                <p>{ plaza.description }</p>
-                                                <p>{'100'}</p>
+                                                <p>{ plaza.description.slice(0,17) + "..." }</p>
                                             </div>
                                             <div className="btn_interactivos">
 
                                     </Row>
                                 </div>
                             </Col>
+                        </Grow>
                         )
-                }) : <div>no hay ni mierda</div>
+                }) : <div></div>
             }
         </React.Fragment>
     )

src/Components/Puestos/ListMode.jsx

 import {  Col, Button, Table } from 'react-bootstrap'
+import Zoom from '@mui/material/Zoom';
 
 export function ListMode(props) {
     
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
-    let { setEdit, setDelete, setShow, setPuesto, data, index } = props;
+    let { setEdit, setDelete, setShow, setPuesto, data, index, showing } = props;
 
     return(
         <Col md="12">
                         </tr>
                     </thead>
                     <tbody>
-
                         {
-                            data.length ? 
+                            data.length && showing === 'list' ? 
                                 data[index].map( (plaza) => {
                                     return (
-                                        <tr key={plaza.id}>
+                                    <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>
                                                 </Button>
                                             </td>
                                         </tr>
+                                    </Zoom>
                                     )
-                                }) : undefined
+                            }) : <h1>no data bro</h1>
                         }
-
                     </tbody>
                     <tfoot>
                         <tr>

src/Css/all.css

     float: right;
 }
 .btn_add_producto {
-    border: 1px solid var(--second);
-    background: var(--second);
-    border-radius: 10px;
+    border: 1px solid var(--main);
+    background: var(--main);
+    border-radius: 5px;
     color: #fff;
     font-size: 12px;
     margin : 3px;

src/Pages/Puestos.jsx

 import { GridMode } from '../Components/Puestos/GridMode'
 import { Add as AddIcon, } from '@mui/icons-material/'
 
-
-const Success =  () => toast.success('Plaza Agregada!!')
-const Error =  () => toast.error('Ups creo que ocurrio un error, intentalo nuevamente')
-
 function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 9;
+    const LONGITUD_PEDAZOS = 7;
     let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
 
 export function Puestos() {
 
+    const Complete =  (status) => {
+
+        if(!status){
+            toast.error('Ups creo que ocurrio un error, intentalo nuevamente')
+        }
+
+        let rest = new Service("/plaza/getall")
+        rest
+            .get(token)
+            .then(({data}) => {
+                let entries = data.map( e => {
+                    return {
+                        nombre : e.nombrepuesto,
+                        description : e.notas,
+                        id : e.id,
+                        created: e.create_day,
+                        data: e
+                    };
+                })
+                setData(Divide(entries))
+            })
+            .catch((error) => {
+                console.log('error fetching data  ', error );
+            })
+
+        toast.success('Puesto agregado exitosamente')
+    } 
+
     const auth = useAuth();
     const [data, setData] = useState([]);
     const [page, setPage] = useState(1);
     const token = auth.getToken();
-    
-    const changePage = ( _ , value) => {
-        let page_numer = value;
-        // let divided =  Divide(data)
-        setPage(page_numer);
-        // setData(divided)
-    };
+
+    const changePage = ( _ , value) => setPage(value);
 
     useEffect(() => {
 
         let rest = new Service("/plaza/getall")
-
         rest
-        .get(token)
-        .then(({data}) => {
-            let entries = data.map( e => {
-                return {
-                    nombre : e.nombrepuesto,
-                    description : e.notas,
-                    id : e.id,
-                    created: e.create_day,
-                    data: e
-                };
+            .get(token)
+            .then(({data}) => {
+                let entries = data.map( e => {
+                    return {
+                        nombre : e.nombrepuesto,
+                        description : e.notas,
+                        id : e.id,
+                        created: e.create_day,
+                        data: e
+                    };
+                })
+                setData(Divide(entries))
             })
-            setData(Divide(entries))
-        })
-        .catch((error) => {
-            console.log('error fetching data  ', error );
-        })
+            .catch((error) => {
+                console.log('error fetching data  ', error );
+            })
+
 
     },[token])
 
                         <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                             <Row>
                                 <GridMode
+                                    showing={alignment}
                                     data={data}
                                     index={page - 1}
                                     setPuesto={setPuesto}
                                     setEdit={setEdit}
                                     setDelete={setDelete}
                                     setShow={setShow}
-                                />
+                                    />
                             </Row>
                         </div>
                         <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                             <Row>
                                 <ListMode 
+                                    showing={alignment}
                                     data={data}
-                                    index={page -1}
+                                    index={page - 1}
                                     setPuesto={setPuesto}
                                     setEdit={setEdit}
                                     setDelete={setDelete}
                                     setShow={setShow}
-                                />
+                                    />
                             </Row>
                         </div>
 
-                            <Pagination 
-                                sx={{
-                                    "& ul" :{
-                                        "padding-top" : "20px",
-                                        "justify-content": "center"
-                                    }
-                                }}
-                                siblingCount={2} 
-                                boundaryCount={2}
-                                shape='rounded' 
-                                count={data.length} 
-                                page={page} 
-                                onChange={changePage} 
+                        <Pagination 
+                            sx={{
+                                "& ul" :{
+                                    paddingTop: "20px",
+                                    justifyContent: "center"
+                                }
+                            }}
+                            siblingCount={2} 
+                            boundaryCount={2}
+                            shape='rounded' 
+                            count={data.length} 
+                            page={page} 
+                            onChange={changePage} 
                             />
 
                     </Paper>
 
             </div>
 
-            <Express success={Success} setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
-            <Manual success={Success} error={Error} setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
+            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
+
+            <Manual Complete={Complete} visible={manual} onClose={() => setManual(false)}/>
 
             <Editar   puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />