first two steps in modal

src/Components/Modal/PasswordModal.jsx

@@ -13,16 +13,17 @@ import { Candidato } from '../Password/Steps/candidato'
 export function HelpModal(props) {
 
     let { visible, handleClose } = props
+    const now = React.useRef(new Date());
+
 
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
+
     const [password, setPassword] = React.useState({
-        firstName: '',
-        lastName: '',
-        puesto: '',
-        niveles_educativo: 0,
-        puesto_id: 20,
-        index_pruebas: []
+        puesto: [],
+        pwd: "",
+        deadpwd: now,
+        dateToActived: now,
     });
 
     const isStepSkipped = (step) => {
@@ -100,9 +101,9 @@ export function HelpModal(props) {
             <Modal.Body className="modal-body">
 
                 <Box sx={{ width: '100%' }}>
-                    <Stepper 
+                    <Stepper
                         sx={{
-                            flexWrap :'wrap'
+                            flexWrap: 'wrap'
                         }}
                         activeStep={activeStep}>
                         {steps.map((step, index) => {
@@ -113,8 +114,8 @@ export function HelpModal(props) {
                             }
                             return (
                                 <Step key={step.label} {...stepProps}>
-                                    <StepLabel 
-                                        sx={{ margin:1}}
+                                    <StepLabel
+                                        sx={{ margin: 1 }}
                                         {...labelProps}>{step.label}</StepLabel>
                                 </Step>
                             );

src/Components/Password/Steps/password.jsx

@@ -17,30 +17,35 @@ export function Password(props) {
         pwd: 
         Yup
         .string()
-        .required('Ingresa un nivel educativo válido')
+        .required('Ingresa un identificador válido')
         .min(5,"Ingresa un identificador válido")
         .max(50,"identificador demasiado largo"),
-        fecha_start: Yup.date("Ingresa una fecha válida"),
-        fecha_end: Yup.date("Ingresa una fecha válida"),
+        deadpwd: Yup.date("Ingresa una fecha válida"),
+        dateToActived: Yup.date("Ingresa una fecha válida"),
     });
 
     let {  handleNext, handleBack, password, setPassword } = props
-    console.log(password, setPassword)
 
     const formik = useFormik({
         initialValues: {
-            pwd: "",
-            fecha_start: new Date(),
-            fecha_end: new Date(),
+            pwd: password.pwd ,
+            deadpwd: password.deadpwd,
+            dateToActived: password.dateToActived,
         },
         onSubmit: (fields) => {
-            console.log(fields)
+            console.log('PASS::::',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 } = formik;
+    const {errors, touched, handleSubmit, getFieldProps, values,setValues } = formik;
 
     return (
         <FormikProvider style={{ padding : 25, paddingTop : 5 }} value={formik}>
@@ -64,11 +69,14 @@ export function Password(props) {
                                 label="Fecha de Activación"
                                 fullWidth
                                 inputFormat="dd/MM/yyyy"
-                                {...getFieldProps('fecha_start')}
-                                value={new Date()}
-                                onChange={() => console.log('fecha creacion')}
+                                {...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
@@ -80,19 +88,21 @@ export function Password(props) {
                         <LocalizationProvider
                             dateAdapter={DateFnsUtils}>
                             <DesktopDatePicker
-                                label="Fecha de caducidad"
+                                label="Fecha de Caducidad"
                                 fullWidth
                                 inputFormat="dd/MM/yyyy"
-                                {...getFieldProps('fecha_end')}
-                                value={new Date()}
-                                onChange={() => console.log('fecha creacion')}
+                                {...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"
+                                        label="Fecha de Caducidad"
                                         fullWidth
                                         {...params}
-                                        />}
+                                    />}
                                 />
                         </LocalizationProvider>
                     </Stack>

src/Components/Password/Steps/puesto.js

@@ -41,20 +41,19 @@ export function Puesto(props) {
     }
 
     let { data } = useQuery('puestos', getPuestos)
-    let puestos = data ? data.data.map( ({ nombrepuesto, id  }) => ({ label : nombrepuesto, id } )) : []
+    let puestos = data ? data.data.map( ({ nombrepuesto, id  }) => ({ nombrepuesto, id } )) : []
 
     let {  handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({
         initialValues: {
-            puesto: 
-            password.index_pruebas
+            puesto: password.puesto
         },
         onSubmit: (fields) => {
-            console.log('PRUEBAS :: -> ',fields)
+            console.log(fields)
             setPassword({
                 ...password,
-                index_pruebas : fields.puesto
+                puesto : fields.puesto
             })
             handleNext()
         },
@@ -74,13 +73,13 @@ export function Puesto(props) {
                                 puesto:current_list
                             })
                         }}
-                        isOptionEqualToValue={(option, value) => option.label === value.label}
+                        isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
                         multiple
                         id="checkboxes-tags-demo"
                         options={puestos}
                         disableCloseOnSelect
                         getOptionLabel={(option) => { 
-                            return option.label 
+                            return option.nombrepuesto 
                         }}
                         renderOption={(props, option, { selected }) => (
                             <li {...props}>
@@ -90,7 +89,7 @@ export function Puesto(props) {
                                     style={{ marginRight: 8 }}
                                     checked={selected}
                                     />
-                                {option.label}
+                                {option.nombrepuesto}
                             </li>
                         )}
                         renderInput={(params) => (