src/Components/Modal/AgregarManual.js

   });
 
   let setDialogValue = (value) => {
-    if (value?.id !== undefined && isNaN(value?.id) === false) {
-      setValues({ ...values, puestosuperior: value?.id })
-    }
+    // console.log('setDialogValue',value)
+    // if (value?.id !== undefined && isNaN(value?.id) === false) {
+    //   console.log('first if')
+    setValues({ ...values, puestosuperior: value?.id })
+    // }
     setDialogValueHook(value)
+    // console.log(values)
   }
 
   const loading = openSugg && options.length === 0;
 
   }, [loading, dialogValue, auth]);
 
-
-
   const handleClose = () => false
 
   const changeDepartamento = (event) => {
   };
 
   const AutoCompleteChange = (event, newValue) => {
+    // FIX: este set es el que realmente agrega al estado
     setValues({ ...values, puestosuperior: newValue?.id })
-
     if (typeof newValue === 'string') {
       setTimeout(() => {
         toggleOpenDialog(true);
               </DialogContentText>
 
               <TextField
+                fullWidth
                 autoFocus
                 margin="dense"
                 id="name"
                 variant="standard"
               />
 
-              <TextField
-                margin="dense"
-                id="name"
-                value={dialogValue?.id}
-                onChange={(event) =>
-                  setDialogValue({
-                    ...dialogValue,
-                    id: event.target.value,
+              {/*
+                <TextField
+                  margin="dense"
+                  id="name"
+                  value={dialogValue?.id}
+                  onChange={(event) =>
+                      setDialogValue({
+                        ...dialogValue,
+                        id: event.target.value,
                   })
-                }
-                label="Descripción"
-                type="text"
-                variant="standard"
+                  }
+                  label="Descripción"
+                  type="text"
+                  variant="standard"
               />
+              */}
             </DialogContent>
             <DialogActions>
               <Button onClick={handleCloseDialog}>Cancelar</Button>
                         if (params.inputValue !== '') {
                           filtered.push({
                             inputValue: params.inputValue,
-                            title: `Add "${params.inputValue}"`,
+                            title: `Agregar "${params.inputValue}"`,
                           });
                         }
 
                       selectOnFocus
                       clearOnBlur
                       handleHomeEndKeys
-                      renderOption={(props, option) => <li {...props}>{option.title}</li>}
+                      renderOption={(props, option) => <li key={option.id} {...props}>{option.title}</li>}
                       freeSolo
                       renderInput={(params) => (
                         <TextField

src/Components/Modal/EditPlaza.js

-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useCallback, useRef } from 'react';
 import { Modal } from 'react-bootstrap'
-import { useForm, Controller } from "react-hook-form";
-import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
+import { useFormik, Form, FormikProvider } from 'formik';
 
 
 import { TabPanel } from './TabPanel'
 const filter = createFilterOptions();
 
 async function getPuestoSuperior(puesto, auth) {
+  // console.log('P:', puesto)
   if (puesto.length < 2) return []
   let rest = new Service(`/plaza/keypuestosup?keyword=${puesto}`)
   let result = await rest.get(auth.token)
   return { id, nombre }
 }
 
-
 const plazeSchema = Yup.object({
   id: Yup.number(),
   nombrepuesto:
 
 function Edit(props) {
 
-  const { setValue, getValues, reset, control, register, handleSubmit, formState: { errors } } = useForm({
-    resolver: yupResolver(plazeSchema),
-    defaultValues: {
-      nombrepuesto: 'mingtest',
-      puestosuperior: null,
-      fecha: '01/01/2019',
-      notas: 'esto es un ejemplod e una nota',
+  const [date, setDate] = React.useState(new Date());
+
+  const formik = useFormik({
+    initialValues: {
+      id: 0,
+      nombrepuesto: "",
+      puestosuperior: 0,
       aredepto: 1,
+      fecha: date,
+      notas: "",
       tests: []
-    }
+    },
+    onSubmit: (fields, { resetForm }) => {
+      console.log('submit values', fields)
+      saveEditPlaza(fields)
+    },
+    validationSchema: plazeSchema,
   });
 
-  const onSubmit = data => {
+
+  const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
+
+  const saveEditPlaza = data => {
 
     let body = {
       ...data,
-      fecha: new Date(data.fecha).toISOString()
+      fecha: new Date(data.fecha).toISOString(),
     }
 
     puestoMutation.mutate(body, {
         queryClient.invalidateQueries('puestos')
       },
       onError: () => {
-        //close();
-        //setOpen(false)
         toast.error("Lo sentimos ocurrió error inténtalo más tarde")
       }
     })
   const auth = useSelector((state) => state.token)
   const queryClient = useQueryClient()
   let { visible, toggle } = props
-  // const [puestoSup, setPuestoSup] = React.useState('');
 
   const [open, setOpen] = React.useState(false);
+  const [departamento, setDepartamento] = React.useState('');
+  const puestoref = useRef(null);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
   const [openSugg, setOpenSugg] = React.useState(false);
   };
 
   const handleSubmitDialog = async (event) => {
+    // console.log('handlesubmit', dialogValue)
     event.preventDefault();
     let { id, nombre } = await savePuestoSuperior(dialogValue, auth)
     if (id) {
         id: id,
       }
       if (to_set.id) {
+        // console.log("TO SET", to_set)
         setDialogValue(to_set);
+        setValues({...values, puestosuperior: to_set.id})
       }
     }
     handleCloseDialog();
   };
 
-  let setDialogValue = (value) => {
-    if (value?.id !== undefined && isNaN(value?.id) === false) {
-      // setValues({ ...values, puestosuperior: value?.id })
-      setValue('puestosuperior', value?.id)
+  let setDialogValue = useCallback((value) => {
+    // console.log('value receivied', value)
+    let id = value?.id || 0;
+    if (id !== 0) {
+      console.log('setting value', id)
+
     }
     setDialogValueHook(value)
-  }
+  }, [])
+
+  const changeDepartamento = (event) => {
+    setDepartamento(event.target.value);
+  };
 
   const loading = openSugg && options.length === 0;
 
   const AutoCompleteChange = (event, newValue) => {
-    console.log('newValue', newValue)
-    setValue('puestosuperior', newValue?.id)
+    setValues({ ...values, puestosuperior: newValue?.id })
 
     if (typeof newValue === 'string') {
+      // console.log('if1')
       setTimeout(() => {
         toggleOpenDialog(true);
         setDialogValue({
         });
       });
     } else if (newValue && newValue.inputValue) {
+      // console.log('if2')
       toggleOpenDialog(true);
       setDialogValue({
         title: newValue.inputValue,
         id: '',
       });
     } else {
+      // console.log('if3')
       setDialogValue(newValue);
     }
   }
 
   const addPrueba = (check, id) => {
-    let tests = getValues("tests")
-    console.log(tests)
+    let { tests } = values
     let temp;
     if (check) {
       temp = [...tests, { id }]
       temp = tests.filter(test => test.id !== id);
     }
     setChecklist(temp.map(test => test.id))
-    setValue('tests', temp)
+    // setValue('tests', temp)
+    setValues({ ...values, tests: temp })
   };
 
   const getCategories = async () => {
 
   useEffect(() => {
 
+    let current_id = values.id; // getValues('id')
+
     if (visible == null) return;
-    let rest = new Service(`/plaza/getthis/${visible}`)
-    rest
-      .getQuery(auth.token)
-      .then(response => {
-        let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
-        let temp_test = tests.map(t => ({ id: t.id }))
-        setChecklist(temp_test.map(t => t.id))
-        console.log('puesto sup', puestosuperior)
-
-        let temp_puesto = {
-          title: puestosuperior.nombre,
-          id: puestosuperior.id
-        }
-        // setDialogValue(temp_puesto)
-        reset({
-          ...response.data,
-          aredepto: areadeptoplz_id,
-          fecha: new Date(fecha),
-          tests: temp_test,
-          puestosuperior: puestosuperior.id
+
+    if (current_id !== visible) {
+      let rest = new Service(`/plaza/getthis/${visible}`)
+      rest
+        .getQuery(auth.token)
+        .then(response => {
+        console.log('plz to edit: ', response.data)
+          let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
+          let temp_test = tests.map(t => ({ id: t.id }))
+          setChecklist(temp_test.map(t => t.id))
+          // console.log('puesto sup', puestosuperior)
+          setDialogValue({
+            title: puestosuperior.nombre,
+            id: puestosuperior.id
+          })
+          setValues({
+            ...response.data,
+            aredepto: areadeptoplz_id,
+            fecha: new Date(fecha),
+            tests: temp_test,
+            puestosuperior: puestosuperior.id
+          })
+          // console.log("INITIAL:", getValues())
         })
-        // setDialogValue({ title: puestosuperior.nombre, id: puestosuperior.id })
-      })
-      .catch(e => console.log(e))
+        .catch(e => console.log(e))
 
+    }
 
     let active = true;
     if (!loading) {
       active = false;
     };
 
-
-
-  }, [visible, auth, reset, loading, dialogValue])
+  }, [visible, auth, loading, dialogValue, setDialogValue,setValues,values.id])
 
   const changeTab = (_event, newValue) => setTab(newValue);
 
                 margin="dense"
                 id="name"
                 value={dialogValue?.title}
-                onChange={(event) =>
+                onChange={(event) => {
+                  // console.log('aa', event.target.value)
                   setDialogValue({
                     ...dialogValue,
                     title: event.target.value,
                   })
                 }
+                }
                 label="Puesto"
                 type="text"
                 variant="standard"
                 margin="dense"
                 id="name"
                 value={dialogValue?.id}
-                onChange={(event) =>
+                onChange={(event) => {
+                  // console.log('ev', event.target.value)
                   setDialogValue({
                     ...dialogValue,
                     id: event.target.value,
                   })
                 }
+                }
                 label="Descripción"
                 type="text"
                 variant="standard"
           </form>
         </Dialog>
 
-
-
-
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <TabPanel value={tab} index={1}>
-            <Stack spacing={1}>
-              <Box style={{ paddingTop: 5, paddingLeft: 15 }}>
-                <Divider />
-                <h4 style={{ paddingTop: 10, paddingBottom: 10 }}>Seleciona los test a realizar</h4>
-                <Divider />
-                <FormGroup>
-                  {
-                    testsCatalog ?
-                      testsCatalog.data.map(test => (
-                        <FormControlLabel
-                          label={test.nombre}
-                          key={test.id}
-                          control={
-                            <Checkbox
-                              checked={checklist.includes((test.id))}
-                              onChange={(event) => addPrueba(event.target.checked, test.id)} />}
-                        />
-                      )) : null
-                  }
-                </FormGroup>
-              </Box>
-            </Stack>
-          </TabPanel>
-
-          <TabPanel value={tab} index={0} >
-            <Stack spacing={3}>
-
-              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                <TextField
-                  name="nombrepuesto"
-                  label="Nombre"
-                  fullWidth
-                  helperText={errors.nombrepuesto?.message}
-                  error={Boolean(errors?.nombrepuesto)}
-                  {...register("nombrepuesto")} />
-
-
-                <FormControl fullWidth>
-                  <Controller
-                    helperText={errors.puestosuperior?.message}
-                    error={errors?.puestosuperior}
-                    name="puestosuperior"
-                    control={control}
-                    render={({ field }) =>
-                      <Autocomplete
-                        fullWidth
-                        value={dialogValue}
-                        onChange={AutoCompleteChange}
-                        open={openSugg}
-                        onOpen={() => {
-                          setOpenSugg(true);
-                        }}
-                        onClose={() => {
-                          setOpenSugg(false);
-                        }}
-                        isOptionEqualToValue={(option, value) => option.title === value.title}
-                        filterOptions={(options, params) => {
-                          const filtered = filter(options, params);
-
-                          if (params.inputValue !== '') {
-                            filtered.push({
-                              inputValue: params.inputValue,
-                              title: `Add "${params.inputValue}"`,
-                            });
-                          }
-
-                          return filtered;
-                        }}
-                        id="puesto_superior_autocomplete"
-                        options={options}
-                        loading={loading}
-                        getOptionLabel={(option) => {
-                          if (typeof option === 'string') {
-                            return option;
-                          }
-                          if (option.inputValue) {
-                            return option.inputValue;
-                          }
-                          return option.title;
-                        }}
-                        selectOnFocus
-                        clearOnBlur
-                        handleHomeEndKeys
-                        renderOption={(props, option) => <li {...props}>{option.title}</li>}
-                        freeSolo
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            {...register('puestosuperior')}
-                            error={Boolean(errors.puestosuperior)}
-                            label="Puesto Superior"
-                            InputProps={{
-                              ...params.InputProps,
-                              onChange: (event) => {
-                                // let title = event.target.value;
-                                // console.log('titulo',title)
-                                setOptions([]);
-                                setDialogValue({
-                                  title: event.target.value,
-                                  id: '',
-                                });
-                              },
-                              endAdornment: (
-                                <React.Fragment>
-                                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                                  {params.InputProps.endAdornment}
-                                </React.Fragment>
-                              ),
-                            }}
+        <FormikProvider style={{ paddingTop: 25 }} value={formik}>
+          <Form onSubmit={handleSubmit}>
+            <TabPanel value={tab} index={1}>
+              <Stack spacing={1}>
+                <Box style={{ paddingTop: 5, paddingLeft: 15 }}>
+                  <Divider />
+                  <h4 style={{ paddingTop: 10, paddingBottom: 10 }}>Seleciona los test a realizar</h4>
+                  <Divider />
+                  <FormGroup>
+                    {
+                      testsCatalog ?
+                        testsCatalog.data.map(test => (
+                          <FormControlLabel
+                            label={test.nombre}
+                            key={test.id}
+                            control={
+                              <Checkbox
+                                checked={checklist.includes((test.id))}
+                                onChange={(event) => addPrueba(event.target.checked, test.id)} />}
                           />
-                        )}
-
-                      />
-
+                        )) : null
                     }
-                  >
-                  </Controller>
-                </FormControl>
-
+                  </FormGroup>
+                </Box>
               </Stack>
-
-              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                <FormControl fullWidth>
-                  <InputLabel id="demo-simple-select-label2">Departamento</InputLabel>
-                  <Controller
-                    helperText={errors.aredepto?.message}
-                    error={Boolean(errors?.aredepto)}
-                    name="aredepto"
-                    control={control}
-                    render={({ field }) =>
-                      <Select {...field}>
-                        {
-                          categories ?
-                            categories.data.map(cate => {
-                              return (
-                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                              )
-                            })
-                            : <MenuItem value={1}>hola</MenuItem>
+            </TabPanel>
+
+            <TabPanel value={tab} index={0} >
+              <Stack spacing={3}>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                  <TextField
+                    name="nombrepuesto"
+                    label="Nombre"
+                    fullWidth
+                    helperText={errors.nombrepuesto?.message}
+                    error={Boolean(errors?.nombrepuesto)}
+                    {...getFieldProps("nombrepuesto")} />
+
+
+                  <FormControl fullWidth>
+                    <Autocomplete
+                      fullWidth
+                      value={dialogValue}
+                      onChange={AutoCompleteChange}
+                      open={openSugg}
+                      onOpen={() => {
+                        setOpenSugg(true);
+                      }}
+                      onClose={() => {
+                        setOpenSugg(false);
+                      }}
+                      isOptionEqualToValue={(option, value) => option.title === value.title}
+                      filterOptions={(options, params) => {
+                        const filtered = filter(options, params);
+
+                        if (params.inputValue !== '') {
+                          filtered.push({
+                            inputValue: params.inputValue,
+                            title: `Agregar "${params.inputValue}"`,
+                          });
                         }
-                      </Select>
-                    }>
-                  </Controller>
-                </FormControl>
-
-                <LocalizationProvider dateAdapter={DateFnsUtils}>
-                  <Controller
-                    name="fecha"
-                    control={control}
-                    render={({ field }) =>
-                      <DesktopDatePicker
-                        {...field}
-                        helperText={errors.fecha?.message}
-                        error={Boolean(errors?.fecha)}
-                        label="Fecha Creación"
-                        fullWidth
-                        inputFormat="dd/MM/yyyy"
-                        renderInput={(params) => <TextField {...params} helperText={errors.fecha?.message} />} />}
-                  >
-                  </Controller>
-                </LocalizationProvider>
-              </Stack>
 
-              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-                <TextField
-                  helperText={errors.notas?.message}
-                  error={Boolean(errors?.notas)}
-                  name="notas"
-                  multiline
-                  rows={4}
-                  label="Notas"
-                  fullWidth
-                  type="text"
-                  {...register("notas")}
-                />
+                        return filtered;
+                      }}
+                      id="puesto_superior_autocomplete"
+                      options={options}
+                      loading={loading}
+                      getOptionLabel={(option) => {
+                        if (typeof option === 'string') {
+                          return option;
+                        }
+                        if (option.inputValue) {
+                          return option.inputValue;
+                        }
+                        return option.title;
+                      }}
+                      selectOnFocus
+                      // clearOnBlur
+                      // handleHomeEndKeys
+                      renderOption={(props, option) => <li key={option.id} {...props}>{option.title}</li>}
+                      freeSolo
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          {...getFieldProps('puestosuperior')}
+                          error={Boolean(errors.puestosuperior)}
+                          label="Puesto Superior"
+                          InputProps={{
+                            ...params.InputProps,
+                            onChange: (event) => {
+                              let title = event.target.value;
+                              // console.log('titulo', title)
+                              setOptions([]);
+                              setDialogValue({
+                                title: title,
+                                id: '',
+                              });
+                            },
+                            endAdornment: (
+                              <React.Fragment>
+                                {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                                {params.InputProps.endAdornment}
+                              </React.Fragment>
+                            ),
+                          }}
+                        />
+                      )}
+
+                    />
+                  </FormControl>
+
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                  <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label2">Departamento</InputLabel>
+                    <Select
+                      value={departamento}
+                      label="Departamento"
+                      onChange={changeDepartamento}
+                      {...getFieldProps('aredepto')}
+                      error={Boolean(touched.aredepto && errors.aredepto)}>
+                      {
+                        categories ?
+                          categories.data.map(cate => {
+                            return (
+                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                            )
+                          })
+                          : <MenuItem value={1}>hola</MenuItem>
+                      }
+                    </Select>
+                  </FormControl>
+
+                  <LocalizationProvider dateAdapter={DateFnsUtils}>
+                    <DesktopDatePicker
+                      {...getFieldProps('fecha')}
+                      helperText={errors.fecha?.message}
+                      error={Boolean(errors?.fecha)}
+                      label="Fecha Creación"
+                      fullWidth
+                      value={date}
+                      onChange={setDate}
+                      inputFormat="dd/MM/yyyy"
+                      renderInput={ (params) => 
+                        <TextField 
+                        disabled={true}
+                        {...params} 
+                        helperText={errors.fecha?.message} 
+                        />
+                      }
+                    />
+                  </LocalizationProvider>
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                  <TextField
+                    helperText={errors.notas?.message}
+                    error={Boolean(errors?.notas)}
+                    name="notas"
+                    multiline
+                    rows={4}
+                    label="Notas"
+                    fullWidth
+                    type="text"
+                    {...getFieldProps("notas")}
+                  />
+                </Stack>
               </Stack>
-            </Stack>
-          </TabPanel>
-
-          <Modal.Footer>
-            <Button
-              type="submit"
-              className="registerBtn"
-              variant="contained"
-              sx={{ mt: 1, mr: 1 }} >
-              {'Actualizar'}
-            </Button>
-          </Modal.Footer>
-
-        </form>
+            </TabPanel>
+
+            <Modal.Footer>
+              <Button
+                ref={puestoref}
+                type="submit"
+                className="registerBtn"
+                variant="contained"
+                sx={{ mt: 1, mr: 1 }} >
+                {'Actualizar'}
+              </Button>
+            </Modal.Footer>
+
+          </Form>
+        </FormikProvider>
 
       </Modal.Body>
       <Backdrop

src/Components/Password/Steps/TypePwd.jsx

 } from '@mui/material'
 import toast, { Toaster } from 'react-hot-toast';
 
-import { Simple as Loading } from '../../Generics/loading.jsx'
+// import { Simple as Loading } from '../../Generics/loading.jsx'
 
 const ROLE = {
   ADMIN: 1,
 function PermisosList(props) {
 
   let { recursos, selectedRole, setSelectedRole } = props
+  console.log("recursos len", recursos.data.length)
+  if(recursos.data.length === 0) return (<></>);
 
   return (
     <FormControl className="rolelist" >
       >
         {
 
-          recursos.data.length === 0 ? <Loading /> :
+
+            recursos.data &&
             recursos.data.map((r) => {
               return (
                 <FormControlLabel
       return rest.getQuery(auth.token);
     }
     const groupRecursos = (recursos) => {
+      console.log("resource:",recursos)
       let groups = {};
       recursos.forEach((r) => {
         if (groups[r.grupo]) {
           groups[r.grupo] = [r]
         }
       })
+      console.log('grupos: ', groups)
 
       assignRecursos(groups)
     }
       let templete = {
         1: { "label": 'Puestos', data: [] },
         2: { "label": 'Varios', data: [] },
-        3: { "label": 'General', data: [] }
+        3: { "label": 'General', data: [] },
+        4: { "label": 'Contraseñas', data: [] },
+        5: { "label": 'Reportes', data: [] }
       }
 
       Object.keys(recursos_api)
         .forEach((k) => {
-          templete[k].data = recursos_api[k];
+          if(templete[k]){
+            templete[k].data = recursos_api[k];
+          }
         })
 
       setRecursos(templete)
   }, [auth.token])
 
   return (
-    <div class="gapwdrole">
+    <div className="gapwdrole">
 
       <div className="typepwdlist control_flow_role">
         <TipoUsuarios type={userType} setType={setUserType} />