src/Components/Modal/AgregarManual.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
-import { Dialog, DialogContent, DialogTitle, DialogActions } from '@mui/material'
 import toast from 'react-hot-toast';
 
 import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
@@ -11,14 +10,50 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import {
   Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
   Backdrop, CircularProgress, Box, Divider,
-  Tabs, Tab, FormGroup, Checkbox, FormControlLabel
+  Tabs, Tab, FormGroup, Checkbox, FormControlLabel,
+  Dialog, DialogContent, DialogTitle, DialogActions,
+  DialogContentText,
 } from '@mui/material';
 
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+
 import { Service } from '../../Utils/HTTP';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { TabPanel } from './TabPanel'
 import { useSelector } from 'react-redux';
 
+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)
+  // console.log(result)
+  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 }
+}
+
+
 function Manual(props) {
 
   const auth = useSelector((state) => state.token)
@@ -33,13 +68,14 @@ function Manual(props) {
     return await rest.getQuery(auth.token)
   }
 
+
   const { data } = useQuery('categories', getCategories);
   const { data: testsCatalog } = useQuery('tests', getTest);
   const queryClient = useQueryClient();
 
   const NewPlazaSchema = Yup.object().shape({
     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").required("El puesto es requerido"),
+    puestosuperior: Yup.number().required("El puesto superior 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, "Ingresa una nota válida").max(150),
@@ -47,11 +83,47 @@ function Manual(props) {
   })
 
   const [departamento, setDepartamento] = React.useState('');
-  const [puestoSup, setPuestoSup] = React.useState('');
   const [open, setOpen] = React.useState(false);
   const [date, setDate] = React.useState(new Date());
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
+  const [openDialog, toggleOpenDialog] = React.useState(false);
+  const [openSugg, setOpenSugg] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const [dialogValue, setDialogValueHook] = React.useState({
+    title: '',
+    id: '',
+  });
+
+  let setDialogValue = (value) => {
+    // console.log('llamada', value)
+    // setValues({...values, puestosuperior: value?.title })
+    setDialogValueHook(value)
+  }
+
+  const loading = openSugg && options.length === 0;
+
+  React.useEffect(() => {
+
+    let active = true;
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      let puestos = await getPuestoSuperior(dialogValue.title, auth)
+      if (active) {
+        setOptions(puestos);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+
+  }, [loading, dialogValue, auth]);
+
+
 
   const handleClose = () => false
 
@@ -59,23 +131,69 @@ function Manual(props) {
     setDepartamento(event.target.value);
   };
 
-  const changePuestoSup = (event) => {
-    setPuestoSup(event.target.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({
+        title: nombre,
+        id: id,
+      });
+    }
+
+    setDialogValue({
+      title: dialogValue.title,
+      id: dialogValue.id
+    });
+    handleCloseDialog();
+  };
+
+  const AutoCompleteChange = (event, newValue) => {
+    console.log('newValue', newValue)
+    // TODO : formik logic to validate autocomplete
+    setValues({ ...values, 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 agregarPuesto = async (puesto) => {
     let rest = new Service('/plaza/save');
     return await rest.postQuery(puesto, auth.token);
   }
 
   const puestoMutation = useMutation(agregarPuesto)
-
   let { visible, onClose } = props
 
   const formik = useFormik({
     initialValues: {
       nombrepuesto: "",
-      puestosuperior: 1,
+      puestosuperior: null,
       aredepto: 1,
       fecha: date,
       notas: "",
@@ -83,17 +201,15 @@ function Manual(props) {
     },
     onSubmit: (fields, { resetForm }) => {
 
-      if(fields.tests.length === 0){
+      if (fields.tests.length === 0) {
         toast.error("Recuerda que seleccionar al menos un test")
         setTab(1)
         return
       }
-
       setOpen(true)
       fields['fecha'] = new Date(fields.fecha).toISOString();
       fields['areadeptoplz_id'] = 1;
       fields['id'] = -1;
-
       puestoMutation.mutate(fields, {
         onSuccess: () => {
           setOpen(false)
@@ -111,12 +227,10 @@ function Manual(props) {
     validationSchema: NewPlazaSchema,
   });
 
-  const changeTab = (_event, newValue) => {
-    setTab(newValue);
-  };
-
+  const changeTab = (_event, newValue) => setTab(newValue);
 
   const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
+  // console.log({ values })
 
   const addPrueba = (check, id) => {
     let { tests } = values
@@ -139,9 +253,9 @@ function Manual(props) {
       aria-labelledby="contained-modal-title-vcenter"
       onClose={onClose}>
 
-      <DialogTitle>
+      <DialogTitle className="modal-title" style={{ color: '#252525' }}>
         <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
-        <h4 className="modal-title" style={{ color: '#252525' }}>Agregar Puesto</h4>
+        Agregar Puesto
       </DialogTitle>
 
       <DialogContent className="modal-body">
@@ -151,6 +265,54 @@ function Manual(props) {
           <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>
+
+
+
         <FormikProvider style={{ paddingTop: 25 }} value={formik}>
           <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
 
@@ -185,7 +347,6 @@ function Manual(props) {
 
               <Stack spacing={3}>
 
-
                 <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
                   <TextField
                     label="Nombre"
@@ -196,24 +357,77 @@ function Manual(props) {
                   />
 
                   <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
-                    <Select
-                      labelId="demo-simple-select-label"
-                      value={puestoSup}
-                      label="Puesto Superior"
-                      onChange={changePuestoSup}
-                      {...getFieldProps('puestosuperior')}
-                      error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
-                      {
-                        data ?
-                          data.data.map(cate => {
-                            return (
-                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                            )
-                          })
-                          : <MenuItem>Null</MenuItem>
-                      }
-                    </Select>
+
+                    <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}
+                          {...getFieldProps('puestosuperior')}
+                          error={Boolean(touched.puestosuperior && 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>
+                            ),
+                          }}
+                        />
+                      )}
+
+                    />
+
                   </FormControl>
 
                 </Stack>

src/Components/Puestos/Card.jsx

@@ -16,7 +16,7 @@ export function PuestoCard(props) {
     return (
         <Card sx={{ maxWidth: 345 }}>
             <CardMedia
-        className="cardmedia_puesto"
+                className="cardmedia_puesto"
                 component="img"
                 alt="green iguana"
                 height="140"

src/Components/Resultados/Config.jsx

@@ -0,0 +1,171 @@
+import { createTheme } from '@mui/material';
+
+export const TableStyle = () => createTheme({
+  components: {
+
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: 'var(--main)'
+        }
+      }
+    },
+
+    MUIDataTableSelectCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#FFF'
+        }
+      }
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: 'var(--main)'
+        }
+      }
+    },
+    MuiChecked: {
+      styleOverrides: {
+        root: {
+          color: 'red'
+        }
+      }
+    },
+    MUIDataTableToolbar: {
+      styleOverrides: {
+        root: {
+          paddingLeft: 15
+        }
+      }
+    },
+    MuiRowSelected: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none'
+        }
+      }
+
+    },
+    MUIDataTableSelectedCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MUITableCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MUIDataTableBodyRow: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MUIDataTableBodyCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        toolbar: {
+          paddingTop: 7,
+          alignItems: 'baseline'
+        }
+      }
+    }
+  }
+})
+
+export const Encabezados = [
+  {
+    name: 'id',
+    numeric: true,
+    label: 'ID',
+    options: {
+      display: false
+    }
+  },
+  {
+    name: 'pwd',
+    numeric: false,
+    disablePadding: true,
+    label: 'Contraseña',
+  },
+  {
+    name: 'users',
+    numeric: false,
+    disablePadding: true,
+    label: 'Usuarios',
+  },
+  {
+    name: 'asings',
+    numeric: false,
+    disablePadding: true,
+    label: 'Asignaciones',
+  },
+]
+
+
+export const TextLabels = {
+  body: {
+    noMatch: "No se encontró ningún elemento",
+    toolTip: "Ordenar",
+    columnHeaderTooltip: column => `Ordenar por ${column.label}`
+  },
+  pagination: {
+    next: "Siguiente Pagina",
+    previous: "Pagina Anterior",
+    rowsPerPage: "Elementos por Página",
+    displayRows: "de",
+  },
+  toolbar: {
+    search: "Buscar",
+    downloadCsv: "Descargar CSV",
+    print: "Imprimir",
+    viewColumns: "Seleccionar Columnas",
+    filterTable: "Filtrar Tabla",
+  },
+  filter: {
+    all: "Todos",
+    title: "FILTROS",
+    reset: "Limpiar",
+  },
+  viewColumns: {
+    title: "Mostrar Columnas",
+    titleAria: "Mostrar/Ocultar Columnas",
+  },
+  selectedRows: {
+    text: "Elemento(s) selecionado",
+    delete: "Eliminar",
+    deleteAria: "Eliminar Columnas Seleccionadas",
+  },
+}
+
+export const BuildColumns = (columns) => {
+  return columns.map((column) => {
+    return {
+      'id' : 0,
+      'pwd' : atob( column.pwd ),
+      'users' : "",
+      'asings' : "",
+    }
+  })
+
+}

src/Components/Resultados/TestDataTable.jsx

@@ -0,0 +1,46 @@
+// import { useEffect } from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { TableStyle, Encabezados, BuildColumns } from './Config'
+import { useSelector } from 'react-redux';
+import { useQuery } from 'react-query';
+import { Service } from '../../Utils/HTTP'
+import MUIDataTable from "mui-datatables";
+
+export const TestDataTable = () => {
+  
+  const auth = useSelector((state) => state.token)
+
+  const options = {
+    filterType: 'checkbox',
+    customToolbar: () => { },
+    // textLabels: TextLabels,
+    onRowClick: (test) => {
+      console.log(test)
+      // let [plaza, pwd] = password;
+      // setPassword({pwd,plz:plaza});
+      // setVisible(true);
+    },
+    elevation: 9
+  };
+
+  const getAllPwd = async () => {
+    let rest = new Service('/contrasenia/getallbyidUsr');
+    return await rest.getQuery(auth.token)
+  }
+
+  const { data, status } = useQuery('homepwd', getAllPwd);
+  console.log('DATA: ', data)
+
+
+  return (
+    <ThemeProvider theme={TableStyle}>
+      <MUIDataTable
+        sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
+        title={"Expedientes"}
+        data={BuildColumns( status === 'success' ? data.data : [])}
+        columns={Encabezados}
+        options={options}
+      />
+    </ThemeProvider>
+  )
+}

src/Components/Routes.js

@@ -63,6 +63,7 @@ export default function MyRoutes() {
           </RequireToken>
         }>
 
+        <Route path="" element={<Home />} />
         <Route path="home" element={<Home />} />
         <Route path="puestos" element={<Puestos />} />
         <Route path="perfil" element={<Profile />} />

src/Pages/Login.jsx

@@ -68,6 +68,7 @@ export function Login() {
           toast.success(`Bienvenido ${nombre} ${apelidos} !!`)
           token = token.replace("Bearer ", "")
           console.log("TOKEN: ", token)
+          window.token = token;
           let body_token = jwt_decode(token);
           let timestamp = body_token.exp * 1000;
           let restante = timestamp - Date.now();

src/Pages/Puestos.jsx

@@ -139,7 +139,7 @@ export function Puestos() {
             </Row>
             <div style={{ padding: 7 }}>
               <div className={` main_grid_plazas main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
-                <Row style={{ minHeight: '75vh' }}>
+                <Row style={{ minHeight: '57vh' }}>
                   <GridMode
                     toggle={toggle}
                     showing={alignment}
@@ -149,7 +149,7 @@ export function Puestos() {
                 </Row>
               </div>
               <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
-                <Row style={{ minHeight: '75vh' }}>
+                <Row style={{ minHeight: '57vh' }}>
                   <ListMode
                     toggle={toggle}
                     showing={alignment}

src/Pages/Resultados.jsx

@@ -4,11 +4,14 @@ import { Service } from '../Utils/HTTP';
 import { useSelector } from 'react-redux';
 import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
 import { Loading } from '../Components/Generics/loading'
+import { TestDataTable } from '../Components/Resultados/TestDataTable'
 import DownloadIcon from '@mui/icons-material/Download';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import '../pdf.css'
 // import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+//
+//
 import { 
   Button, Box, Paper,LinearProgress,
   Typography
@@ -55,12 +58,6 @@ const MyDocument = (props) => {
 
   const [progress, setProgress] = useState(10);
 
-  if(!pdf){
-    <Loading/>
-  }
-
-  console.log(progress)
-
   return (
     <div>
 
@@ -107,17 +104,19 @@ const MyDocument = (props) => {
 
       <div className="Example__container">
         <div className="Example__container__document">
-          <Document 
-            renderMode="canvas" 
-            file={pdf?.data} 
-            onLoadSuccess={onDocumentLoadSuccess} 
-            loading={Loading}
-            onLoadProgress={({loaded, total}) => {
-              setProgress((loaded / total) * 100)
-            }}
-          >
+          { pdf ?
+            (<Document 
+              renderMode="canvas" 
+              file={pdf?.data} 
+              onLoadSuccess={onDocumentLoadSuccess} 
+              loading={Loading}
+              onLoadProgress={({loaded, total}) => {
+                setProgress((loaded / total) * 100)
+              }}
+            >
               <Page loading={Loading} pageNumber={pageNumber} />
-          </Document>
+            </Document>) : null
+          }
         </div>
       </div>
     </div>
@@ -133,6 +132,10 @@ export function Resultados() {
 
   useEffect(() => {
 
+    if(!id) {
+      console.log('no hay id')
+      return
+    }
     let url = `/report/cleaverResult/${id}?output=pdf`
     let rest = new Service(url);
 
@@ -152,7 +155,12 @@ export function Resultados() {
           <Paper 
             elevation={2} 
             sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
-            <MyDocument token={auth.token} id={id} pdf={pdf} />
+            <h1>Reporte de Resultados</h1><hr/>
+            {
+              pdf ? 
+                ( <MyDocument token={auth.token} id={id} pdf={pdf} />) : null
+            }
+            <TestDataTable/>
           </Paper>
         </Box>
       </div>

src/temp.js

@@ -1,51 +1,126 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
-import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
 
-export default function MaterialUIPickers() {
-  const [value, setValue] = React.useState(dayjs('2014-08-18T21:11:54'));
+function sleep(delay = 0) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+export default function Asynchronous() {
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const loading = open && options.length === 0;
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      await sleep(1e3); // For demo purposes.
+
+      if (active) {
+        setOptions([...topFilms]);
+      }
+    })();
 
-  const handleChange = (newValue) => {
-    setValue(newValue);
-  };
+    return () => {
+      active = false;
+    };
+  }, [loading]);
+
+  React.useEffect(() => {
+    if (!open) {
+      setOptions([]);
+    }
+  }, [open]);
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <Stack spacing={3}>
-        <DesktopDatePicker
-          label="Date desktop"
-          inputFormat="MM/DD/YYYY"
-          value={value}
-          onChange={handleChange}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <MobileDatePicker
-          label="Date mobile"
-          inputFormat="MM/DD/YYYY"
-          value={value}
-          onChange={handleChange}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <TimePicker
-          label="Time"
-          value={value}
-          onChange={handleChange}
-          renderInput={(params) => <TextField {...params} />}
+    <Autocomplete
+      id="asynchronous-demo"
+      sx={{ width: 300 }}
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      isOptionEqualToValue={(option, value) => option.title === value.title}
+      getOptionLabel={(option) => option.title}
+      options={options}
+      loading={loading}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Asynchronous"
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <React.Fragment>
+                {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),
+          }}
         />
-        <DateTimePicker
-          label="Date&Time picker"
-          value={value}
-          onChange={handleChange}
-          renderInput={(params) => <TextField {...params} />}
-        />
-      </Stack>
-    </LocalizationProvider>
+      )}
+    />
   );
 }
+
+// Top films as rated by IMDb users. http://www.imdb.com/chart/top
+const topFilms = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+];