fix broken dep en muilab

package.json

@@ -11,8 +11,8 @@
         "@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

@@ -1,15 +1,15 @@
 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

@@ -4,8 +4,9 @@ import { useFormik, Form, FormikProvider } from 'formik';
 import { Modal } from 'react-bootstrap'
 import toast, { Toaster } from 'react-hot-toast';
 
-import DateFnsUtils from '@date-io/date-fns';
-import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+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/Modal/EditPlaza.js

@@ -4,9 +4,11 @@ import { useForm, Controller } from "react-hook-form";
 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

@@ -16,9 +16,10 @@ import { Service } from '../../Utils/HTTP.js'
 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) {
 
@@ -57,14 +58,6 @@ function ModalEdit(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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { 
-  Table, TableBody,TableCell, TableContainer, TableHead,
+import {
+  Table, TableBody, TableCell, TableContainer, TableHead,
   TableRow, Paper, ButtonBase
 } from '@mui/material'
 
@@ -22,7 +22,7 @@ export function MailTable(props) {
           </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}
@@ -31,11 +31,11 @@ export function MailTable(props) {
               <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

@@ -51,9 +51,15 @@ export function Candidato(props) {
   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,
@@ -108,7 +114,7 @@ export function Candidato(props) {
             />
 
             <Button onClick={addToList}>
-              <AddCircle/>
+              <AddCircle style={{color:'var(--main)'}}/>
             </Button>
 
           </Stack>

src/Components/Password/Steps/password.jsx

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

src/temp.js

@@ -1,54 +1,51 @@
 import * as React from 'react';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
+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';
 
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
-}
+export default function MaterialUIPickers() {
+  const [value, setValue] = React.useState(dayjs('2014-08-18T21:11:54'));
 
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  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),
-];
+  const handleChange = (newValue) => {
+    setValue(newValue);
+  };
 
-export default function DenseTable() {
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Dessert (100g serving)</TableCell>
-            <TableCell align="right">Calories</TableCell>
-            <TableCell align="right">Fat&nbsp;(g)</TableCell>
-            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
-            <TableCell align="right">Protein&nbsp;(g)</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow
-              key={row.name}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell component="th" scope="row">
-                {row.name}
-              </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
-              <TableCell align="right">{row.carbs}</TableCell>
-              <TableCell align="right">{row.protein}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <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>
   );
 }