src/Components/Modal/AgregarManual.js

   if (puesto.length < 2) return []
   let rest = new Service(`/plaza/keypuestosup?keyword=${puesto}`)
   let result = await rest.get(auth.token)
-  // console.log(result)
   if (result?.data?.length > 0) {
     result = result.data.map((item) => ({ 'title': item.nombre, id: item.id }))
     return result;
   });
 
   let setDialogValue = (value) => {
-    // console.log('llamada', value)
-    // setValues({...values, puestosuperior: value?.title })
+    if (value?.id !== undefined && isNaN(value?.id) === false) {
+      setValues({ ...values, puestosuperior: value?.id })
+    }
     setDialogValueHook(value)
   }
 
   };
 
   const handleCloseDialog = () => {
-    setDialogValue({
-      title: '',
-      id: '',
-    });
     toggleOpenDialog(false);
   };
 
 
   const handleSubmitDialog = async (event) => {
     event.preventDefault();
-    console.log('to save: ', dialogValue)
     let { id, nombre } = await savePuestoSuperior(dialogValue, auth)
     if (id) {
-      setDialogValue({
+      let to_set = {
         title: nombre,
         id: id,
-      });
+      }
+      if (to_set.id) {
+        setDialogValue(to_set);
+      }
     }
-
-    setDialogValue({
-      title: dialogValue.title,
-      id: dialogValue.id
-    });
     handleCloseDialog();
   };
 
   const AutoCompleteChange = (event, newValue) => {
-    console.log('newValue', newValue)
     setValues({ ...values, puestosuperior: newValue?.id })
 
     if (typeof newValue === 'string') {
   const changeTab = (_event, newValue) => setTab(newValue);
 
   const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
-  // console.log({ values })
 
   const addPrueba = (check, id) => {
     let { tests } = values
                             ...params.InputProps,
                             onChange: (event) => {
                               // let title = event.target.value;
-                              // console.log('titulo',title)
                               setOptions([]);
                               setDialogValue({
                                 title: event.target.value,

src/Components/Modal/EditPlaza.js

 import {
   Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
   Backdrop, CircularProgress,
-  Tabs, Tab, Box, Divider, FormGroup, FormControlLabel, Checkbox
+  Tabs, Tab, Box, Divider, FormGroup, FormControlLabel, Checkbox,
+  Dialog, DialogContent, DialogTitle, DialogActions,
+  DialogContentText,
 } from '@mui/material';
 
 import toast, { Toaster } from 'react-hot-toast';
 import { Service } from '../../Utils/HTTP';
 import { useSelector } from 'react-redux'
 import { useQuery, useMutation, useQueryClient } from 'react-query'
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+const filter = createFilterOptions();
+
+async function getPuestoSuperior(puesto, auth) {
+  if (puesto.length < 2) return []
+  let rest = new Service(`/plaza/keypuestosup?keyword=${puesto}`)
+  let result = await rest.get(auth.token)
+  if (result?.data?.length > 0) {
+    result = result.data.map((item) => ({ 'title': item.nombre, id: item.id }))
+    return result;
+  }
+  return [];
+}
+
+async function savePuestoSuperior(input, auth) {
+  let rest = new Service("/plaza/puestosuperior")
+  let body = {
+    "active": 1,
+    "nombre": input.title,
+    "decription": input.id,
+    "modifyday": "2023-02-12T23:55:26.007",
+    "createday": "2023-02-12T23:55:26.007",
+    "id": null,
+    "descripction": input.id,
+    "modify_day": "2023-02-12T23:55:26.007",
+  }
+  let result = await rest.post(body, auth.token);
+  let { id, nombre } = result;
+  return { id, nombre }
+}
+
 
 const plazeSchema = Yup.object({
   id: Yup.number(),
     resolver: yupResolver(plazeSchema),
     defaultValues: {
       nombrepuesto: 'mingtest',
-      puestosuperior: 0,
+      puestosuperior: null,
       fecha: '01/01/2019',
       notas: 'esto es un ejemplod e una nota',
       aredepto: 1,
   const [open, setOpen] = React.useState(false);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
+  const [openSugg, setOpenSugg] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const [openDialog, toggleOpenDialog] = React.useState(false);
+  const [dialogValue, setDialogValueHook] = React.useState({
+    title: '',
+    id: '',
+  });
+
+
+  const handleCloseDialog = () => {
+    toggleOpenDialog(false);
+  };
+
+  const handleSubmitDialog = async (event) => {
+    event.preventDefault();
+    let { id, nombre } = await savePuestoSuperior(dialogValue, auth)
+    if (id) {
+      let to_set = {
+        title: nombre,
+        id: id,
+      }
+      if (to_set.id) {
+        setDialogValue(to_set);
+      }
+    }
+    handleCloseDialog();
+  };
 
-  // const changePuestoSup = (event) => {
-  //   setPuestoSup(event.target.value);
-  // };
+  let setDialogValue = (value) => {
+    if (value?.id !== undefined && isNaN(value?.id) === false) {
+      // setValues({ ...values, puestosuperior: value?.id })
+      setValue('puestosuperior', value?.id)
+    }
+    setDialogValueHook(value)
+  }
+
+  const loading = openSugg && options.length === 0;
+
+  const AutoCompleteChange = (event, newValue) => {
+    console.log('newValue', newValue)
+    setValue('puestosuperior', newValue?.id)
+
+    if (typeof newValue === 'string') {
+      setTimeout(() => {
+        toggleOpenDialog(true);
+        setDialogValue({
+          title: newValue,
+          id: '',
+        });
+      });
+    } else if (newValue && newValue.inputValue) {
+      toggleOpenDialog(true);
+      setDialogValue({
+        title: newValue.inputValue,
+        id: '',
+      });
+    } else {
+      setDialogValue(newValue);
+    }
+  }
 
   const addPrueba = (check, id) => {
     let tests = getValues("tests")
   }
 
   const puestoMutation = useMutation(updatePuesto)
-
   const close = () => toggle("EDIT", { id: null });
 
   const { data: categories } = useQuery('categories', getCategories);
   const { data: testsCatalog } = useQuery('tests', getTest);
 
   useEffect(() => {
+
     if (visible == null) return;
     let rest = new Service(`/plaza/getthis/${visible}`)
     rest
       .getQuery(auth.token)
       .then(response => {
-        console.log('puesto edit: ',response.data)
-        let { areadeptoplz_id, fecha, tests } = 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)
+
+        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
+        })
+        // setDialogValue({ title: puestosuperior.nombre, id: puestosuperior.id })
+      })
+      .catch(e => console.log(e))
 
 
-        reset({ ...response.data, aredepto: areadeptoplz_id, fecha: new Date(fecha), tests: temp_test })
-      })
-      .catch(console.log)
-  }, [visible, auth, reset])
+    let active = true;
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      let puestos = await getPuestoSuperior(dialogValue.title, auth)
+      if (active) {
+        setOptions(puestos);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+
+
+
+  }, [visible, auth, reset, loading, dialogValue])
 
   const changeTab = (_event, newValue) => setTab(newValue);
 
           <Tab label="Pruebas" />
         </Tabs>
 
+        <Dialog open={openDialog} onClose={handleCloseDialog}>
+          <form onSubmit={handleSubmitDialog}>
+            <DialogTitle>Agrega un nuevo Puesto</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                Agrega la descripcion del puesto
+              </DialogContentText>
+
+              <TextField
+                autoFocus
+                margin="dense"
+                id="name"
+                value={dialogValue?.title}
+                onChange={(event) =>
+                  setDialogValue({
+                    ...dialogValue,
+                    title: event.target.value,
+                  })
+                }
+                label="Puesto"
+                type="text"
+                variant="standard"
+              />
+
+              <TextField
+                margin="dense"
+                id="name"
+                value={dialogValue?.id}
+                onChange={(event) =>
+                  setDialogValue({
+                    ...dialogValue,
+                    id: event.target.value,
+                  })
+                }
+                label="Descripción"
+                type="text"
+                variant="standard"
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={handleCloseDialog}>Cancelar</Button>
+              <Button type="submit">Agregar</Button>
+            </DialogActions>
+          </form>
+        </Dialog>
+
+
+
+
         <form onSubmit={handleSubmit(onSubmit)}>
           <TabPanel value={tab} index={1}>
             <Stack spacing={1}>
                   error={Boolean(errors?.nombrepuesto)}
                   {...register("nombrepuesto")} />
 
+
                 <FormControl fullWidth>
-                  <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
                   <Controller
                     helperText={errors.puestosuperior?.message}
-                    error={Boolean(errors?.puestosuperior)}
+                    error={errors?.puestosuperior}
                     name="puestosuperior"
                     control={control}
-                    render={({field}) => 
-                      <Select {...field}>
-                        {
-                          categories ?
-                            categories.data.map(cate => {
-                              return (
-                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                              )
-                            })
-                            : <MenuItem>Null</MenuItem>
-                        }
-                      </Select>
+                    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>
+                              ),
+                            }}
+                          />
+                        )}
+
+                      />
+
                     }
-                    >
-                    
+                  >
                   </Controller>
                 </FormControl>
+
               </Stack>
 
               <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>

src/Pages/Login.jsx

           sm={4}
           md={7}
           sx={{
-            backgroundImage: 'url(https://source.unsplash.com/random)',
+            backgroundImage: 'url(https://images.squarespace-cdn.com/content/v1/5c0ec3e30dbda3392d9c9d2d/1548101170354-A2I9LZIEE5CLJ1V5ZGAG/Psychometrictesting.jpg?format=2500w)',
             backgroundRepeat: 'no-repeat',
             backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
             backgroundSize: 'cover',

src/Pages/Puestos.jsx

     cacheTime: 0,
   });
 
-
-console.log(isLoading,result, error)
-
   const changePage = useCallback((_, value) => setPage(value), []);
   const [alignment, setAlignment] = React.useState('grid');
   const handleChange = useCallback((_event, newAlignment) => setAlignment(newAlignment), [])
                       index={page - 1}
                     /> : undefined
                   }
-                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
+                  {!result && !isLoading && <center><h1>No tienes ningún puesto</h1></center>}
                 </Row>
               </div>
               <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                       index={page - 1}
                     /> : undefined
                   }
-                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
+                  {!result && !isLoading && <center><h1>No tienes nigún puesto</h1></center>}
                 </Row>
               </div>