fix broken dep en muilab

package.json

         "@iconify/icons-eva": "^1.1.0",
         "@iconify/react": "^3.1.3",
         "@mui/icons-material": "^5.1.0",
-        "@mui/lab": "^5.0.0-alpha.59",
         "@mui/material": "^5.1.0",
+        "@mui/x-date-pickers": "^5.0.17",
         "@reduxjs/toolkit": "^1.8.6",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^11.2.7",

src/Components/Home/Actividades.js

 import React, { useState } from 'react'
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
-import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
 
 import TextField from '@mui/material/TextField';
 import { Col, Row } from 'react-bootstrap';
-
-import DateFnsUtils from '@date-io/date-fns';
-
 import { HelpModal } from './HelpAcividades.jsx'
 import { LastActivitys } from './LastActivitys.jsx'
 
+import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
 export default function Actividades() {
 
     const [value, setValue] = React.useState(new Date());

src/Components/Modal/AgregarManual.js

 import { Modal } from 'react-bootstrap'
 import toast, { Toaster } from 'react-hot-toast';
 
-import DateFnsUtils from '@date-io/date-fns';
+import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
-import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 import {
   Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,

src/Components/Modal/EditPlaza.js

 import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
 
-import DateFnsUtils from '@date-io/date-fns';
+
-import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 import { TabPanel } from './TabPanel'
+import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 import {
   Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,

src/Components/Password/Operation.jsx

 import { useSelector } from 'react-redux'
 
 import { useFormik, Form, FormikProvider } from 'formik';
+import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
-import DateFnsUtils from '@date-io/date-fns';
-import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
 export function Operation(props) {
 
 
   let { data: result } = useQuery('contra', getPassword);
   console.log('PWD INFO ', result)
-  //
-  // const getPuestos = async () => {
-  //     let rest = new Service('/plaza/getall')
-  //     return rest.getQuery(token.current);
-  // }
-  //
-  // let { data } = useQuery('puestos', getPuestos)
-  // let puestos = data ? data.data.map(({ nombrepuesto, id }) => ({ nombrepuesto, id })) : []
 
   let initialValues = {
     id: result?.data?.id,

src/Components/Password/Steps/MailTable.jsx

 import * as React from 'react';
-import { 
+import {
-  Table, TableBody,TableCell, TableContainer, TableHead,
+  Table, TableBody, TableCell, TableContainer, TableHead,
   TableRow, Paper, ButtonBase
 } from '@mui/material'
 
           </TableRow>
         </TableHead>
         <TableBody>
-          {users ? users.map((row,i) => (
+          {users ? users.map((row, i) => (
             <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
               <TableCell component="th" scope="row">
                 {row.mail}
               <TableCell align="right">{row.apellidos}</TableCell>
               <TableCell align="right">
                 <ButtonBase>
-                  <DisabledByDefault onClick={() => remove(row.mail)} color="primary"/>
+                  <DisabledByDefault onClick={() => remove(row.mail)} style={{color:'var(--main)'}} />
                 </ButtonBase>
               </TableCell>
             </TableRow>
-          ) ) :  null }
+          )) : null}
         </TableBody>
       </Table>
     </TableContainer>

src/Components/Password/Steps/candidato.jsx

   const { errors, touched, handleSubmit, getFieldProps, values, resetForm,isValid } = formik;
 
   const addToList = () => {
+
+    if(!values.nombres || !values.apellidos || !values.mail){
+      return toast.error("Completa la informacion del candidato")
+    }
+
     if(!isValid) {
       return toast.error("Completa la informacion del candidato")
     }
+
     let user = {
       'nombres': values.nombres,
       'apellidos': values.apellidos,
             />
 
             <Button onClick={addToList}>
-              <AddCircle/>
+              <AddCircle style={{color:'var(--main)'}}/>
             </Button>
 
           </Stack>

src/Components/Password/Steps/password.jsx

 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 
-import {  
+import {
-    Box, Button,
+  Box, Button,
-    Stack, TextField, 
+  Stack, TextField,
 } from '@mui/material';
 
-import DateFnsUtils from '@date-io/date-fns';
+import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
-import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 export function Password(props) {
-    
-    // console.log(props.password)
 
-    const [uid,setUID] = React.useState(null);
+  const [uid, setUID] = React.useState(null);
 
-    const PasswordSchema = Yup.object().shape({
+  const PasswordSchema = Yup.object().shape({
-        pwd: 
+    pwd:
-        Yup
+      Yup
         .string()
         .required('Ingresa un identificador válido')
-        .min(5,"Ingresa un identificador válido")
+        .min(5, "Ingresa un identificador válido")
-        .max(50,"identificador demasiado largo"),
+        .max(50, "identificador demasiado largo"),
-        deadpwd: Yup.date("Ingresa una fecha válida"),
+    deadpwd: Yup.date("Ingresa una fecha válida"),
-        dateToActived: Yup.date("Ingresa una fecha válida"),
+    dateToActived: Yup.date("Ingresa una fecha válida"),
-    });
+  });
-
+
-    let {  handleNext, handleBack, password, setPassword } = props
+  let { handleNext, handleBack, password, setPassword } = props
-
+
-    const formik = useFormik({
+  const formik = useFormik({
-        initialValues: {
+    initialValues: {
-            pwd: password.pwd ,
+      pwd: password.pwd,
-            deadpwd: password.deadpwd,
+      deadpwd: password.deadpwd,
-            dateToActived: password.dateToActived,
+      dateToActived: password.dateToActived,
-        },
+    },
-        onSubmit: (fields) => {
+    onSubmit: (fields) => {
-            fields['deadpwd'] = new Date(fields.deadpwd).toISOString();
+      fields['deadpwd'] = new Date(fields.deadpwd).toISOString();
-            fields['dateToActived'] = new Date(fields.dateToActived).toISOString();
+      fields['dateToActived'] = new Date(fields.dateToActived).toISOString();
-            setPassword({
+      setPassword({
-                ...password,
+        ...password,
-                ...fields
+        ...fields
-            })
+      })
-            handleNext()
+      handleNext()
-        },
+    },
-        validationSchema: PasswordSchema,
+    validationSchema: PasswordSchema,
-    });
+  });
-
+
-    const {errors, touched, handleSubmit, getFieldProps, values,setValues } = formik;
+  const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
-
+
-    return (
+  return (
-        <FormikProvider style={{ padding : 25, paddingTop : 5 }} value={formik}>
+    <FormikProvider style={{ padding: 25, paddingTop: 5 }} value={formik}>
-            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-                <Stack spacing={3}>
+        <Stack spacing={3}>
-
+
-                    <TextField
+          <TextField
-                        fullWidth
+            value={uid ? uid : btoa(values.pwd)}
-                        type="text"
+            disabled
-                        label="Nombre o identificador"
+            fullWidth
-                        {...getFieldProps('pwd')}
+            type="text"
-                        onChange={(event)=>{
+            label="Identificador Codificado"
-                            let value = event.target.value
+            variant="standard"
-                            setUID(btoa(value));
+          />
-                            setValues({
+
-                                ...values,
+          <TextField
-                                pwd:value
+            fullWidth
-                            })
+            type="text"
-                        }}
+            label="Nombre o identificador"
-                        error={Boolean(touched.pwd && errors.pwd)}
+            {...getFieldProps('pwd')}
-                        helperText={touched.pwd && errors.pwd}
+            onChange={(event) => {
-                        />
+              let value = event.target.value
-                    
+              setUID(btoa(value));
-                    <TextField
+              setValues({
-                        value={uid? uid: btoa(values.pwd)}
+                ...values,
-                        disabled
+                pwd: value
-                        fullWidth
+              })
-                        type="text"
+            }}
-                        label="Identificador Codificado"
+            error={Boolean(touched.pwd && errors.pwd)}
-                        variant="filled"
+            helperText={touched.pwd && errors.pwd}
-                        />
+          />
-
+
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
-
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                        <LocalizationProvider
+
-                            dateAdapter={DateFnsUtils}>
+            <LocalizationProvider dateAdapter={DateFnsUtils}>
-                            <DesktopDatePicker
+
-                                label="Fecha de Activación"
+              <DesktopDatePicker
-                                fullWidth
+                label="Fecha de Activación"
-                                inputFormat="dd/MM/yyyy"
+                fullWidth
-                                {...getFieldProps('dateToActived')}
+                inputFormat="dd/MM/yyyy"
-                                value={values.dateToActived}
+                {...getFieldProps('dateToActived')}
-                                onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })
+                value={values.dateToActived}
-                                }
+                onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })}
-                                renderInput={(params) =>
+                renderInput={(params) =>
-                                    <TextField
+                  <TextField
-                                        error={Boolean(touched.dateToActived && errors.dateToActived)}
+                    error={Boolean(touched.dateToActived && errors.dateToActived)}
-                                        helperText={touched.dateToActived && errors.dateToActived}
+                    helperText={touched.dateToActived && errors.dateToActived}
-                                        disabled={true}
+                    disabled={true}
-                                        label="Fecha de Activación"
+                    label="Fecha de Activación"
-                                        fullWidth
+                    fullWidth
-                                        {...params}
+                    {...params}
-                                        />}
+                  />}
-                                />
+              />
-                        </LocalizationProvider>
+
-
+              <DesktopDatePicker
-                        <LocalizationProvider
+                label="Fecha de Caducidad"
-                            dateAdapter={DateFnsUtils}>
+                fullWidth
-                            <DesktopDatePicker
+                inputFormat="dd/MM/yyyy"
-                                label="Fecha de Caducidad"
+                {...getFieldProps('deadpwd')}
-                                fullWidth
+                value={values.deadpwd}
-                                inputFormat="dd/MM/yyyy"
+                onChange={(val) => setValues({ ...values, deadpwd: new Date(val) })}
-                                {...getFieldProps('deadpwd')}
+                renderInput={(params) =>
-                                value={values.deadpwd}
+                  <TextField
-                                onChange={(val) => setValues({ ...values, deadpwd: new Date(val) }) }
+                    error={Boolean(touched.deadpwd && errors.deadpwd)}
-                                renderInput={(params) =>
+                    helperText={touched.deadpwd && errors.deadpwd}
-                                    <TextField
+                    disabled={true}
-                                        error={Boolean(touched.deadpwd && errors.deadpwd)}
+                    label="Fecha de Caducidad"
-                                        helperText={touched.deadpwd && errors.deadpwd}
+                    fullWidth
-                                        disabled={true}
+                    {...params}
-                                        label="Fecha de Caducidad"
+                  />}
-                                        fullWidth
+              />
-                                        {...params}
+
-                                    />}
+            </LocalizationProvider>
-                                />
+
-                        </LocalizationProvider>
+
-                    </Stack>
+          </Stack>
-
+
-                    <Box sx={{ mb: 2 }}>
+          <Box sx={{ mb: 2 }}>
-                        <div style={{ paddingTop  : 15}}>
+            <div style={{ paddingTop: 15 }}>
-                            <Button
+              <Button
-                                type="submit"
+                type="submit"
-                                className="registerBtn" 
+                className="registerBtn"
-                                variant="contained"
+                variant="contained"
-                                sx={{ mt: 1, mr: 1 }}
+                sx={{ mt: 1, mr: 1 }}
-                            >
+              >
-                                {'Siguiente'}
+                {'Siguiente'}
-                            </Button>
+              </Button>
-                            <Button
+              <Button
-                                disabled={false}
+                disabled={false}
-                                onClick={handleBack}
+                onClick={handleBack}
-                                sx={{ mt: 1, mr: 1 }}
+                sx={{ mt: 1, mr: 1 }}
-                            >
+              >
-                                Regresar
+                Regresar
-                            </Button>
+              </Button>
-                        </div>
+            </div>
-                    </Box>
+          </Box>
-
+
-                </Stack>
+        </Stack>
-            </Form>
+      </Form>
-        </FormikProvider>
+    </FormikProvider>
-    );
+  );
 }

src/temp.js

 import * as React from 'react';
-import Table from '@mui/material/Table';
+import dayjs from 'dayjs';
-import TableBody from '@mui/material/TableBody';
+import Stack from '@mui/material/Stack';
-import TableCell from '@mui/material/TableCell';
+import TextField from '@mui/material/TextField';
-import TableContainer from '@mui/material/TableContainer';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import TableHead from '@mui/material/TableHead';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import TableRow from '@mui/material/TableRow';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import Paper from '@mui/material/Paper';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 
-function createData(name, calories, fat, carbs, protein) {
+export default function MaterialUIPickers() {
-  return { name, calories, fat, carbs, protein };
+  const [value, setValue] = React.useState(dayjs('2014-08-18T21:11:54'));
-}
 
-const rows = [
+  const handleChange = (newValue) => {
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+    setValue(newValue);
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  };
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
 
-export default function DenseTable() {
   return (
-    <TableContainer component={Paper}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
+      <Stack spacing={3}>
-        <TableHead>
+        <DesktopDatePicker
-          <TableRow>
+          label="Date desktop"
-            <TableCell>Dessert (100g serving)</TableCell>
+          inputFormat="MM/DD/YYYY"
-            <TableCell align="right">Calories</TableCell>
+          value={value}
-            <TableCell align="right">Fat&nbsp;(g)</TableCell>
+          onChange={handleChange}
-            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+          renderInput={(params) => <TextField {...params} />}
-            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+        />
-          </TableRow>
+        <MobileDatePicker
-        </TableHead>
+          label="Date mobile"
-        <TableBody>
+          inputFormat="MM/DD/YYYY"
-          {rows.map((row) => (
+          value={value}
-            <TableRow
+          onChange={handleChange}
-              key={row.name}
+          renderInput={(params) => <TextField {...params} />}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+        />
-            >
+        <TimePicker
-              <TableCell component="th" scope="row">
+          label="Time"
-                {row.name}
+          value={value}
-              </TableCell>
+          onChange={handleChange}
-              <TableCell align="right">{row.calories}</TableCell>
+          renderInput={(params) => <TextField {...params} />}
-              <TableCell align="right">{row.fat}</TableCell>
+        />
-              <TableCell align="right">{row.carbs}</TableCell>
+        <DateTimePicker
-              <TableCell align="right">{row.protein}</TableCell>
+          label="Date&Time picker"
-            </TableRow>
+          value={value}
-          ))}
+          onChange={handleChange}
-        </TableBody>
+          renderInput={(params) => <TextField {...params} />}
-      </Table>
+        />
-    </TableContainer>
+      </Stack>
+    </LocalizationProvider>
   );
 }