new apis fixes

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,20 @@ 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();
+
 function Manual(props) {
 
   const auth = useSelector((state) => state.token)
@@ -39,7 +44,7 @@ function Manual(props) {
 
   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.string().required("El puesto es requerido").min(5, "El nombre del  puesto debe ser mayor a 5 caracteres").max(15),
     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,7 +52,7 @@ function Manual(props) {
   })
 
   const [departamento, setDepartamento] = React.useState('');
-  const [puestoSup, setPuestoSup] = React.useState('');
+  const [puestoSup, setPuestoSup] = React.useState('The Godfather');
   const [open, setOpen] = React.useState(false);
   const [date, setDate] = React.useState(new Date());
   const [tab, setTab] = React.useState(0);
@@ -63,6 +68,52 @@ function Manual(props) {
     setPuestoSup(event.target.value);
   };
 
+  const [valueDialog, setValueDialog] = React.useState(null);
+  const [openDialog, toggleOpenDialog] = React.useState(false);
+
+  const handleCloseDialog = () => {
+    setDialogValue({
+      title: '',
+      year: '',
+    });
+    toggleOpenDialog(false);
+  };
+
+  const [dialogValue, setDialogValue] = React.useState({
+    title: '',
+    year: '',
+  });
+
+  const handleSubmitDialog = (event) => {
+    event.preventDefault();
+    setValueDialog({
+      title: dialogValue.title,
+      year: parseInt(dialogValue.year, 10),
+    });
+    handleCloseDialog();
+  };
+
+  const AutoCompleteChange = (event, newValue) => {
+    if (typeof newValue === 'string') {
+      // timeout to avoid instant validation of the dialog's form.
+      setTimeout(() => {
+        toggleOpenDialog(true);
+        setDialogValue({
+          title: newValue,
+          year: '',
+        });
+      });
+    } else if (newValue && newValue.inputValue) {
+      toggleOpenDialog(true);
+      setDialogValue({
+        title: newValue.inputValue,
+        year: '',
+      });
+    } else {
+      setValueDialog(newValue);
+    }
+  }
+
   const agregarPuesto = async (puesto) => {
     let rest = new Service('/plaza/save');
     return await rest.postQuery(puesto, auth.token);
@@ -75,7 +126,7 @@ function Manual(props) {
   const formik = useFormik({
     initialValues: {
       nombrepuesto: "",
-      puestosuperior: 1,
+      puestosuperior: "The Godfather",
       aredepto: 1,
       fecha: date,
       notas: "",
@@ -83,7 +134,7 @@ 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
@@ -139,9 +190,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 +202,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.year}
+                onChange={(event) =>
+                  setDialogValue({
+                    ...dialogValue,
+                    year: 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 +284,6 @@ function Manual(props) {
 
               <Stack spacing={3}>
 
-
                 <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
                   <TextField
                     label="Nombre"
@@ -196,24 +294,84 @@ 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>
+                      <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={valueDialog}
+                      onChange={AutoCompleteChange}
+                      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={top100Films}
+                      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} label="Puesto Superior" />}
+                    />
+
+
+
+                    {/*
+                      <Autocomplete
+                        id="grouped-demo"
+                        value={puestoSup}
+                        label="Puesto Superior"
+                        freeSolo
+                        options={top100Films.map((option) => option.title)}
+                        renderInput={(params) =>
+                          <TextField
+                            onChange={changePuestoSup}
+                            error={Boolean(touched.puestosuperior && errors.puestosuperior)}
+                            {...getFieldProps('puestosuperior')}
+                            {...params}
+                            label="Puesto Superior" />
+                        }
+                      />
+*/}
+
                   </FormControl>
 
                 </Stack>
@@ -306,3 +464,131 @@ function Manual(props) {
   )
 }
 export default memo(Manual);
+
+const top100Films = [
+  { 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 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+

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,269 @@
 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';
-
-export default function MaterialUIPickers() {
-  const [value, setValue] = React.useState(dayjs('2014-08-18T21:11:54'));
-
-  const handleChange = (newValue) => {
-    setValue(newValue);
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+
+const filter = createFilterOptions();
+
+export default function FreeSoloCreateOptionDialog() {
+  const [value, setValue] = React.useState(null);
+  const [open, toggleOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setDialogValue({
+      title: '',
+      year: '',
+    });
+    toggleOpen(false);
+  };
+
+  const [dialogValue, setDialogValue] = React.useState({
+    title: '',
+    year: '',
+  });
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setValue({
+      title: dialogValue.title,
+      year: parseInt(dialogValue.year, 10),
+    });
+    handleClose();
   };
 
   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} />}
-        />
-        <DateTimePicker
-          label="Date&Time picker"
-          value={value}
-          onChange={handleChange}
-          renderInput={(params) => <TextField {...params} />}
-        />
-      </Stack>
-    </LocalizationProvider>
+    <React.Fragment>
+      <Autocomplete
+        value={value}
+        onChange={(event, newValue) => {
+
+          if (typeof newValue === 'string') {
+            // timeout to avoid instant validation of the dialog's form.
+            setTimeout(() => {
+              toggleOpen(true);
+              setDialogValue({
+                title: newValue,
+                year: '',
+              });
+            });
+          } else if (newValue && newValue.inputValue) {
+            toggleOpen(true);
+            setDialogValue({
+              title: newValue.inputValue,
+              year: '',
+            });
+          } else {
+            setValue(newValue);
+          }
+        }}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+
+          if (params.inputValue !== '') {
+            filtered.push({
+              inputValue: params.inputValue,
+              title: `Add "${params.inputValue}"`,
+            });
+          }
+
+          return filtered;
+        }}
+        id="free-solo-dialog-demo"
+        options={top100Films}
+        getOptionLabel={(option) => {
+          // e.g value selected with enter, right from the input
+          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>}
+        sx={{ width: 300 }}
+        freeSolo
+        renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
+      />
+      <Dialog open={open} onClose={handleClose}>
+        <form onSubmit={handleSubmit}>
+          <DialogTitle>Add a new film</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Did you miss any film in our list? Please, add it!
+            </DialogContentText>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              value={dialogValue.title}
+              onChange={(event) =>
+                setDialogValue({
+                  ...dialogValue,
+                  title: event.target.value,
+                })
+              }
+              label="title"
+              type="text"
+              variant="standard"
+            />
+            <TextField
+              margin="dense"
+              id="name"
+              value={dialogValue.year}
+              onChange={(event) =>
+                setDialogValue({
+                  ...dialogValue,
+                  year: event.target.value,
+                })
+              }
+              label="year"
+              type="number"
+              variant="standard"
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button type="submit">Add</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </React.Fragment>
   );
 }
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { 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 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];