password multiple users form config

src/Components/Generics/loading.jsx

@@ -1,20 +1,20 @@
 import React from "react";
 import '../../Css/loading.css'
 
-export function Loading( ) {
+export function Loading() {
 
-    const types = [
-        "dot-pulse","dot-elastic","dot-flashing", "dot-collision", "dot-revolution", "dot-carousel", 
-        "dot-fire","dot-spin","dot-falling", "dot-stretching"
-    ];
+  const types = [
+    "dot-pulse", "dot-elastic", "dot-flashing", "dot-collision", "dot-revolution", "dot-carousel",
+    "dot-fire", "dot-spin", "dot-falling", "dot-stretching"
+  ];
 
-    return(
-        <div className="loading_or_content">
-            <div className="snippet" data-title=".dot-pulse">
-                <div className="stage">
-                    <div className={types[0]}></div>
-                </div>
-            </div>
+  return (
+    <div className="loading_or_content">
+      <div className="snippet" data-title=".dot-pulse">
+        <div className="stage">
+          <div className={types[0]}></div>
         </div>
-    )
+      </div>
+    </div>
+  )
 }

src/Components/Modal/PasswordModal.jsx

@@ -2,8 +2,8 @@ import { Modal } from 'react-bootstrap'
 import * as React from 'react';
 
 import {
-    Box, Stepper, Step,
-    StepLabel, Button, Typography
+  Box, Stepper, Step, Fade,
+  StepLabel, Button, Typography
 } from '@mui/material'
 
 import { Puesto } from '../Password/Steps/puesto'
@@ -13,160 +13,160 @@ import { Resume } from '../Password/Steps/resume'
 
 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({
-        puesto: [],
-        pwd: "",
-        deadpwd: now.current,
-        dateToActived: now.current,
-        nombres:"",
-        apellidos:"",
-        mail:"",
-        sendmail:true,
-        nombrepuesto:null,
-        nombreEmpresa:null,
-    });
-
-    const isStepSkipped = (step) => {
-        return skipped.has(step);
-    };
-
-    const handleNext = () => {
-        let newSkipped = skipped;
-        if (isStepSkipped(activeStep)) {
-            newSkipped = new Set(newSkipped.values());
-            newSkipped.delete(activeStep);
-        }
-
-        setActiveStep((prevActiveStep) => prevActiveStep + 1);
-        setSkipped(newSkipped);
-    };
-
-    const handleBack = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    };
-
-    const handleReset = () => {
-        setPassword({
-            puesto: [],
-            pwd: "",
-            deadpwd: now.current,
-            dateToActived: now.current,
-            nombres:"",
-            apellidos:"",
-            mail:"",
-            sendmail:true,
-            nombrepuesto:null,
-            nombreEmpresa:null,
-        })
-        setActiveStep(0);
-    };
-
-
-    const steps = [
-        {
-            label: 'Puesto',
-            operation:
-                <Puesto
-                    handleNext={handleNext}
-                    handleBack={handleBack}
-                    password={password}
-                    setPassword={setPassword}
-                />
-        },
-        {
-            label: 'Contraseña',
-            operation:
-                <Password
-                    handleNext={handleNext}
-                    handleBack={handleBack}
-                    password={password}
-                    setPassword={setPassword}
-                />
-        },
-        {
-            label: 'Candidato',
-            operation:
-                <Candidato
-                    handleNext={handleNext}
-                    handleBack={handleBack}
-                    password={password}
-                    setPassword={setPassword}
-                />
-        },
-        {
-            label: 'Confirmar',
-            operation: 
-                <Resume
-                    handleBack={handleBack}
-                    password={password}
-                    handleClose={handleClose}
-                    handleReset={handleReset}
-                />
-        },
-    ];
-
-
-    return (
-        <Modal size="lg"
-            aria-labelledby="contained-modal-title-vcenter"
-            centered show={visible}
-            onHide={handleClose}
-        >
-            <Modal.Header>
-                <button type="button" className="close" onClick={handleClose}>&times;</button>
-                <h4 className="modal-title">Crear Contraseña</h4>
-            </Modal.Header>
-            <Modal.Body className="modal-body">
-
-                <Box sx={{ width: '100%' }}>
-                    <Stepper
-                        sx={{
-                            flexWrap: 'wrap'
-                        }}
-                        activeStep={activeStep}>
-                        {steps.map((step, index) => {
-                            const stepProps = {};
-                            const labelProps = {};
-                            if (isStepSkipped(index)) {
-                                stepProps.completed = false;
-                            }
-                            return (
-                                <Step key={step.label} {...stepProps}>
-                                    <StepLabel
-                                        sx={{ margin: 1 }}
-                                        {...labelProps}>{step.label}</StepLabel>
-                                </Step>
-                            );
-                        })}
-                    </Stepper>
-                    {activeStep === steps.length ? (
-                        <React.Fragment>
-                            <Typography sx={{ mt: 2, mb: 1 }}>
-                                All steps completed - you&apos;re finished
-                            </Typography>
-                            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-                                <Box sx={{ flex: '1 1 auto' }} />
-                                <Button onClick={handleReset}>Reiniciar</Button>
-                            </Box>
-                        </React.Fragment>
-                    ) : (
-                        <React.Fragment>
-
-                            <Box style={{ padding: 18, marginTop: 2 }}>
-                                {steps[activeStep].operation}
-                            </Box>
-
-                        </React.Fragment>
-                    )}
-                </Box>
-
-            </Modal.Body>
-        </Modal>
-    )
+  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({
+    puesto: [],
+    pwd: "",
+    deadpwd: now.current,
+    dateToActived: now.current,
+    nombres: "",
+    apellidos: "",
+    mail: "",
+    sendmail: true,
+    nombrepuesto: null,
+    nombreEmpresa: null,
+  });
+
+  const isStepSkipped = (step) => {
+    return skipped.has(step);
+  };
+
+  const handleNext = () => {
+    let newSkipped = skipped;
+    if (isStepSkipped(activeStep)) {
+      newSkipped = new Set(newSkipped.values());
+      newSkipped.delete(activeStep);
+    }
+
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    setSkipped(newSkipped);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleReset = () => {
+    setPassword({
+      puesto: [],
+      pwd: "",
+      deadpwd: now.current,
+      dateToActived: now.current,
+      nombres: "",
+      apellidos: "",
+      mail: "",
+      sendmail: true,
+      nombrepuesto: null,
+      nombreEmpresa: null,
+    })
+    setActiveStep(0);
+  };
+
+
+  const steps = [
+    {
+      label: 'Puesto',
+      operation:
+        <Puesto
+          handleNext={handleNext}
+          handleBack={handleBack}
+          password={password}
+          setPassword={setPassword}
+        />
+    },
+    {
+      label: 'Contraseña',
+      operation:
+        <Password
+          handleNext={handleNext}
+          handleBack={handleBack}
+          password={password}
+          setPassword={setPassword}
+        />
+    },
+    {
+      label: 'Candidatos',
+      operation:
+        <Candidato
+          handleNext={handleNext}
+          handleBack={handleBack}
+          password={password}
+          setPassword={setPassword}
+        />
+    },
+    {
+      label: 'Confirmar',
+      operation:
+        <Resume
+          handleBack={handleBack}
+          password={password}
+          handleClose={handleClose}
+          handleReset={handleReset}
+        />
+    },
+  ];
+
+
+  return (
+    <Modal size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered show={visible}
+      onHide={handleClose}
+    >
+      <Modal.Header>
+        <button type="button" className="close" onClick={handleClose}>&times;</button>
+        <h4 className="modal-title">Crear Contraseña</h4>
+      </Modal.Header>
+      <Modal.Body className="modal-body">
+
+        <Box sx={{ width: '100%' }}>
+          <Stepper
+            sx={{
+              flexWrap: 'wrap'
+            }}
+            activeStep={activeStep}>
+            {steps.map((step, index) => {
+              const stepProps = {};
+              const labelProps = {};
+              if (isStepSkipped(index)) {
+                stepProps.completed = false;
+              }
+              return (
+                <Step key={step.label} {...stepProps}>
+                  <StepLabel
+                    sx={{ margin: 1 }}
+                    {...labelProps}>{step.label}</StepLabel>
+                </Step>
+              );
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <React.Fragment>
+              <Typography sx={{ mt: 2, mb: 1 }}>
+                All steps completed - you&apos;re finished
+              </Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Box sx={{ flex: '1 1 auto' }} />
+                <Button onClick={handleReset}>Reiniciar</Button>
+              </Box>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+
+              <Box style={{ padding: 18, marginTop: 2 }}>
+                {steps[activeStep].operation}
+              </Box>
+
+            </React.Fragment>
+          )}
+        </Box>
+
+      </Modal.Body>
+    </Modal>
+  )
 }

src/Components/Password/CustomToolbar.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    IconButton, Tooltip
+  IconButton, Tooltip
 } from '@mui/material';
 
 import { Add as AddIcon } from '@mui/icons-material'
@@ -8,36 +8,33 @@ import { HelpModal as PasswordModal } from '../../Components/Modal/PasswordModal
 
 export default class CustomToolbar extends React.Component {
 
-    constructor(props){
-        super(props);
-        this.state = {
-            visible : false
-        }
-    }
-
-    setVisible = () => this.setState({ visible : false});
-
-    handleClick = () => {
-        console.log("is visible  :",  this.state.visible );
-        this.setState({ visible : !this.state.visible })
-    }
-
-
-    render() {
-
-        let { visible } = this.state;
-
-        return (
-            <React.Fragment>
-                <Tooltip title={"custom icon"}>
-                    <IconButton onClick={this.handleClick}>
-                        <AddIcon />
-                    </IconButton>
-                </Tooltip>
-                <PasswordModal visible={visible} handleClose={this.setVisible} />
-            </React.Fragment>
-        );
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false
     }
+  }
+
+  setVisible = () => this.setState({ visible: false });
+
+  handleClick = () => {
+    console.log("is visible  :", this.state.visible);
+    this.setState({ visible: !this.state.visible })
+  }
+
+  render() {
+    let { visible } = this.state;
+    return (
+      <React.Fragment>
+        <Tooltip title={"custom icon"}>
+          <IconButton onClick={this.handleClick}>
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+        <PasswordModal visible={visible} handleClose={this.setVisible} />
+      </React.Fragment>
+    );
+  }
 
 }
 

src/Components/Password/Operation.jsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 
 import { Edit as EditIcon, Send as SendIcon } from '@mui/icons-material'
 import {
-    Button, Dialog, DialogActions, DialogContent, //DialogTitle,
-    FormControlLabel, Checkbox,
-    TextField, Stack,
-    // Autocomplete
+  Button, Dialog, DialogActions, DialogContent, //DialogTitle,
+  FormControlLabel, Checkbox,
+  TextField, Stack,
+  // Autocomplete
 } from '@mui/material'
 
 import toast, { Toaster } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-import { useQuery, useQueryClient   } from 'react-query'
+import { useQuery, useQueryClient } from 'react-query'
 import { Service } from '../../Utils/HTTP.js'
-import useAuth from '../../Auth/useAuth.js';
+import { useSelector } from 'react-redux'
 
 import { useFormik, Form, FormikProvider } from 'formik';
 
@@ -22,226 +22,225 @@ import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
 export function Operation(props) {
 
-    let [open, setOpen] = React.useState(false);
-    const handleOpen = (status) => setOpen(status);
-
-    return (
-        <div>
-            <div className="operation_buttons">
-                <EditIcon onClick={() => setOpen(true)} className="icon_op" />
-                <SendIcon className="icon_op" />
-            </div>
-            {
-                open ?
-                    <ModalEdit
-                        password={props}
-                        open={open}
-                        handleOpen={handleOpen}
-                    />
-                    : null
-            }
-        </div>
-    )
+  let [open, setOpen] = React.useState(false);
+  const handleOpen = (status) => setOpen(status);
+
+  return (
+    <div>
+      <div className="operation_buttons">
+        <EditIcon onClick={() => setOpen(true)} className="icon_op" />
+        <SendIcon className="icon_op" />
+      </div>
+      {
+        open ?
+          <ModalEdit
+            password={props}
+            open={open}
+            handleOpen={handleOpen}
+          />
+          : null
+      }
+    </div>
+  )
 }
 
 function ModalEdit(props) {
 
-    let { password, open, handleOpen } = props
-    const now = React.useRef(new Date());
-    let { pwd, plz } = password
-    const auth = useAuth();
-    const token = React.useRef(auth.getToken());
-    const getPassword = async () => {
-        let rest = new Service(`/contrasenia/${pwd}/${plz}`)
-        return await rest.getQuery(token.current)
-    }
-
-    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,
-        pwd: result?.data?.pwd,
-        deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
-        state: result?.data?.state,
-        dateToActived: result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
-        plaza_id: result?.data?.plaza_id,
-        candidato_id : result?.data?.candidato_id
-    }
-
-    return (
-        <Dialog
-            open={open}
-            onClose={() => handleOpen(false)}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-        >
-            <DialogContent>
-                <ModalForm
-                    //puestos={puestos}
-                    initialValues={initialValues}
-                    handleOpen={handleOpen}
-                    token={token.current}
-                />
-            </DialogContent>
-        </Dialog>
-    )
+  let { password, open, handleOpen } = props
+  const now = React.useRef(new Date());
+  let { pwd, plz } = password
+  const auth = useSelector((state) => state.token)
+  const getPassword = async () => {
+    let rest = new Service(`/contrasenia/${pwd}/${plz}`)
+    return await rest.getQuery(auth.token)
+  }
+
+  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,
+    pwd: result?.data?.pwd,
+    deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
+    state: result?.data?.state,
+    dateToActived: result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
+    plaza_id: result?.data?.plaza_id,
+    candidato_id: result?.data?.candidato_id
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => handleOpen(false)}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogContent>
+        <ModalForm
+          //puestos={puestos}
+          initialValues={initialValues}
+          handleOpen={handleOpen}
+          token={auth.token}
+        />
+      </DialogContent>
+    </Dialog>
+  )
 }
 
 function ModalForm(props) {
 
-    const pwdSchema = Yup.object().shape({
-        id: Yup.number(),
-        pwd: Yup.string().required("Escoge un nombre valido"),
-        deadpwd: Yup.date().required("Escoge una fecha valida"),
-        state: Yup.number(),
-        dateToActived: Yup.date('Escoge una fecha valida').required("Escoge una fecha valida"),
-        //plaza_id: Yup.array().required("Escoge una plaza valida")
-        //plaza_id: Yup.array().required("Escoge una plaza valida")
-    })
-
-    const queryClient = useQueryClient();
-
-    const formik = useFormik({
-        initialValues: {
-            state: 1,
-            pwd:"",
-            deadpwd:"",
-            dateToActived:"",
-            // plaza_id:[],
-        },
-        onSubmit: (fields) => {
-
-            let rest = new Service('/contrasenia/create');
-            let { deadpwd,dateToActived,pwd } = fields
-            
-            fields['pwd'] = btoa(pwd);
-            fields['deadpwd'] = new Date(deadpwd).toISOString();
-            fields['dateToActived'] = new Date(dateToActived).toISOString();
-            fields['candidato_id'] = props.initialValues.candidato_id
-            fields['plaza_id'] = props.initialValues.plaza_id
-
-            rest.put(fields, props.token)
-                .then(result => {
-                    queryClient.invalidateQueries('passwords')
-                    console.log(result)
-                    setTimeout(()=>{
-                        props.handleOpen(false)
-                    },1000)
-                    toast.success("Contraseña Actualizada")
-                })
-                .catch(bad => {
-                    console.log('ERROR',bad)
-                    toast.error("Ocurrio un error")
-                })
-        },
-        validationSchema: pwdSchema,
-    })
+  const pwdSchema = Yup.object().shape({
+    id: Yup.number(),
+    pwd: Yup.string().required("Escoge un nombre valido"),
+    deadpwd: Yup.date().required("Escoge una fecha valida"),
+    state: Yup.number(),
+    dateToActived: Yup.date('Escoge una fecha valida').required("Escoge una fecha valida"),
+    //plaza_id: Yup.array().required("Escoge una plaza valida")
+    //plaza_id: Yup.array().required("Escoge una plaza valida")
+  })
+
+  const queryClient = useQueryClient();
+
+  const formik = useFormik({
+    initialValues: {
+      state: 1,
+      pwd: "",
+      deadpwd: "",
+      dateToActived: "",
+      // plaza_id:[],
+    },
+    onSubmit: (fields) => {
+
+      let rest = new Service('/contrasenia/create');
+      let { deadpwd, dateToActived, pwd } = fields
+
+      fields['pwd'] = btoa(pwd);
+      fields['deadpwd'] = new Date(deadpwd).toISOString();
+      fields['dateToActived'] = new Date(dateToActived).toISOString();
+      fields['candidato_id'] = props.initialValues.candidato_id
+      fields['plaza_id'] = props.initialValues.plaza_id
+
+      rest.put(fields, props.token)
+        .then(result => {
+          queryClient.invalidateQueries('passwords')
+          console.log(result)
+          setTimeout(() => {
+            props.handleOpen(false)
+          }, 1000)
+          toast.success("Contraseña Actualizada")
+        })
+        .catch(bad => {
+          console.log('ERROR', bad)
+          toast.error("Ocurrio un error")
+        })
+    },
+    validationSchema: pwdSchema,
+  })
 
-    const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
+  const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
-    React.useEffect(() => {
-        setValues({ 
-            ...props.initialValues,
-            pwd : props.initialValues.pwd ? atob( props.initialValues.pwd ) : 'loading'
-        })
-    }, [props, setValues])
-
-    return (
-        <FormikProvider value={formik}>
-            <Form style={{ padding: 20, maxWidth: 950 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
-                <Stack spacing={4}>
-                    <TextField
-                        value={btoa( values.pwd )}
-                        variant="filled"
-                        disabled
-                        fullWidth
-                        type="text"
-                        label="Contraseña Cifrada"
-                        />
-
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                        <TextField
-                            type="text"
-                            label="Contraseña"
-                            {...getFieldProps('pwd')}
-                            error={Boolean(touched.pwd && errors.pwd)}
-                            helperText={touched.pwd && errors.pwd}
-                        />
-
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={values.state === 1}
-                                    onChange={(event) => {
-                                        let check = event.target.checked;
-                                        setValues({
-                                            ...values,
-                                            state: check ? 1 : 0
-                                        })
-                                    }}
-                                />
-                            }
-                            label="Activa"
-                        />
-
-                    </Stack>
-                        
-
-                    <LocalizationProvider
-                        dateAdapter={DateFnsUtils}>
-                        <DesktopDatePicker
-                            label="Fecha de Activación"
-                            fullWidth
-                            inputFormat="dd/MM/yyyy"
-                            value={values.dateToActived}
-                            onChange={(val) => setValues({ ...values, dateToActived: val }) }
-                            renderInput={(params) =>
-                                <TextField
-                                    {...getFieldProps('dateToActived')}
-                                    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 Vencimiento"
-                            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 Vencimiento"
-                                    fullWidth
-                                    {...params}
-                                />}
-                        />
-                    </LocalizationProvider>
-
-
-                    {/*
+  React.useEffect(() => {
+    setValues({
+      ...props.initialValues,
+      pwd: props.initialValues.pwd ? atob(props.initialValues.pwd) : 'loading'
+    })
+  }, [props, setValues])
+
+  return (
+    <FormikProvider value={formik}>
+      <Form style={{ padding: 20, maxWidth: 950 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
+        <Stack spacing={4}>
+          <TextField
+            value={btoa(values.pwd)}
+            variant="filled"
+            disabled
+            fullWidth
+            type="text"
+            label="Contraseña Cifrada"
+          />
+
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+            <TextField
+              type="text"
+              label="Contraseña"
+              {...getFieldProps('pwd')}
+              error={Boolean(touched.pwd && errors.pwd)}
+              helperText={touched.pwd && errors.pwd}
+            />
+
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={values.state === 1}
+                  onChange={(event) => {
+                    let check = event.target.checked;
+                    setValues({
+                      ...values,
+                      state: check ? 1 : 0
+                    })
+                  }}
+                />
+              }
+              label="Activa"
+            />
+
+          </Stack>
+
+
+          <LocalizationProvider
+            dateAdapter={DateFnsUtils}>
+            <DesktopDatePicker
+              label="Fecha de Activación"
+              fullWidth
+              inputFormat="dd/MM/yyyy"
+              value={values.dateToActived}
+              onChange={(val) => setValues({ ...values, dateToActived: val })}
+              renderInput={(params) =>
+                <TextField
+                  {...getFieldProps('dateToActived')}
+                  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 Vencimiento"
+              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 Vencimiento"
+                  fullWidth
+                  {...params}
+                />}
+            />
+          </LocalizationProvider>
+
+
+          {/*
                     <Autocomplete
                         {...getFieldProps('plaza_id')}
                         onChange={(_a,current_list,_c,_individual,_f) => {
@@ -269,24 +268,24 @@ function ModalForm(props) {
                     />
 */}
 
-                    <DialogActions>
-                        <Button onClick={() => props.handleOpen(false)}>
-                            Cerrar
-                        </Button>
-                        <Button
-                            type="submit"
-                            className="registerBtn"
-                            style={{ color: 'white' }}
-                            >
-                            Guardar
-                        </Button>
-                    </DialogActions>
-
-                </Stack>
-            </Form>
-            <Toaster position="bottom-right" />
-        </FormikProvider >
-    )
+          <DialogActions>
+            <Button onClick={() => props.handleOpen(false)}>
+              Cerrar
+            </Button>
+            <Button
+              type="submit"
+              className="registerBtn"
+              style={{ color: 'white' }}
+            >
+              Guardar
+            </Button>
+          </DialogActions>
+
+        </Stack>
+      </Form>
+      <Toaster position="bottom-right" />
+    </FormikProvider >
+  )
 
 }
 

src/Components/Password/Rows.js

@@ -1,58 +1,58 @@
 import { Operation } from './Operation'
 
 export const Encabezados = [
-    {
-        name: 'name',
-        numeric: false,
-        disablePadding: true,
-        label: 'Nombre',
-    },
-    {
-        name: 'activacion',
-        numeric: false,
-        disablePadding: true,
-        label: 'Fecha Activación',
-    },
-    {
-        name: 'dead',
-        numeric: false,
-        disablePadding: true,
-        label: 'Fecha vencimiento',
-    },
-    {
-        name: 'op',
-        numeric: false,
-        disablePadding: true,
-        label: 'Operación',
-        options: {
-            filter: false,
-            sort: false,
-        }
-    },
+  {
+    name: 'name',
+    numeric: false,
+    disablePadding: true,
+    label: 'Nombre',
+  },
+  {
+    name: 'activacion',
+    numeric: false,
+    disablePadding: true,
+    label: 'Fecha Activación',
+  },
+  {
+    name: 'dead',
+    numeric: false,
+    disablePadding: true,
+    label: 'Fecha vencimiento',
+  },
+  {
+    name: 'op',
+    numeric: false,
+    disablePadding: true,
+    label: 'Operación',
+    options: {
+      filter: false,
+      sort: false,
+    }
+  },
 ]
 
 export const niveles_educativos = [
-    "Primaria",
-    "Basico",
-    "Diversificado",
-    "Tecnico",
-    "Pregrado / Licenciatura",
-    "Postgrado / Maestria",
-    "Doctorado",
-    "Diplomado",
-    "Certificacion",
-    "Cursos"
+  "Primaria",
+  "Basico",
+  "Diversificado",
+  "Tecnico",
+  "Pregrado / Licenciatura",
+  "Postgrado / Maestria",
+  "Doctorado",
+  "Diplomado",
+  "Certificacion",
+  "Cursos"
 ]
 
 export function Build(pwds) {
-    return pwds.map(password => {
-        let {pwd , deadpwd, dateToActived, plaza_id} = password
-        return {
-            name:pwd, //user.nombre,
-            activacion:dateToActived, //user.apellidos,
-            daed: deadpwd,//,user.mail,
-            op: <Operation plz={plaza_id} pwd={pwd} />
-        }
-    })
+  return pwds.map(password => {
+    let { pwd, deadpwd, dateToActived, plaza_id } = password
+    return {
+      name: pwd,
+      activacion: new Date().toUTCString(),//dateToActived, 
+      dead: new Date().toUTCString(), //deadpwd,
+      op: <Operation plz={plaza_id} pwd={pwd} />
+    }
+  })
 }
 

src/Components/Password/Steps/MailTable.jsx

@@ -0,0 +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 { RemoveSharp, DisabledByDefault } from '@mui/icons-material'
+
+function createData(name, calories, fat) {
+  return { name, calories, fat, icon : <DisabledByDefault color="primary"/>};
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, ),
+  createData('Ice cream sandwich', 237, 9.0),
+  createData('Eclair', 262, 16.0, ),
+  createData('Cupcake', 305, 3.7,),
+  createData('Gingerbread', 356,21),
+];
+
+export function MailTable() {
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Correo</TableCell>
+            <TableCell align="right">Nombres</TableCell>
+            <TableCell align="right">Apellidos</TableCell>
+            <TableCell align="right"></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.icon}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/Components/Password/Steps/candidato.jsx

@@ -3,152 +3,123 @@ import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 
 import {
-    Box, Button, FormControlLabel, Checkbox,
-    Stack, TextField, FormGroup,
+  Box, Button, FormControlLabel, Checkbox,
+  Stack, TextField, FormGroup, Divider, Typography,
 } from '@mui/material';
 
-import useAuth from '../../../Auth/useAuth';
+import { MailTable } from './MailTable';
 
 
 export function Candidato(props) {
 
-    const auth = useAuth();
-
-    const CandidatoSchema = Yup.object().shape({
-        nombres:
-            Yup.string()
-                .min(2, 'Demasiado corto!')
-                .max(50, 'Demasiado largo!')
-                .required("Ingresa un nombre válido"),
-        apellidos:
-            Yup.string()
-                .required("Ingresa un apellido válido")
-                .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
-        mail:
-            Yup.string()
-                .email("Correo no valido")
-                .required("Ingrea un puesto válido"),
-        sendmail:
-            Yup.bool()
-                .required('Ingresa un nivel educativo válido'),
-        nombrepuesto:
-            Yup.string('Ingresa un valor válido')
-                .required('Ingresa un nombre válido'),
-        nombreEmpresa:
-            Yup.string('Ingresa un valor válido')
-                .required('Ingresa un nombre válido'),
-    });
-
-    let { handleNext, handleBack, password, setPassword } = props
-
-    const formik = useFormik({
-        initialValues: {
-            nombres: password.nombres,
-            apellidos: password.apellidos,
-            sendmail: password.sendmail,
-            mail : password.mail,
-            nombrepuesto: password.nombrepuesto ? password.nombrepuesto: password.puesto[0].nombrepuesto,
-            nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
-        },
-        onSubmit: (fields) => {
-            setPassword({ ...password, ...fields })
-            handleNext()
-        },
-        validationSchema: CandidatoSchema,
-    });
-
-    const { errors, touched, handleSubmit, getFieldProps } = formik;
-
-    return (
-        <FormikProvider style={{ padding: 25 }} value={formik}>
-            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-                <Stack spacing={3}>
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                        <TextField
-                            label="Nombre"
-                            fullWidth
-                            {...getFieldProps('nombres')}
-                            error={Boolean(touched.nombres && errors.nombres)}
-                            helperText={touched.nombres && errors.nombres}
-                        />
-
-                        <TextField
-                            label="Apellidos"
-                            fullWidth
-                            {...getFieldProps('apellidos')}
-                            error={Boolean(touched.apellidos && errors.apellidos)}
-                            helperText={touched.apellidos && errors.apellidos}
-                        />
-                    </Stack>
-
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                        <TextField
-                            fullWidth
-                            type="email"
-                            label="Correo Electronico"
-                            {...getFieldProps('mail')}
-                            error={Boolean(touched.mail && errors.mail)}
-                            helperText={touched.mail && errors.mail}
-                        />
-                        <FormGroup>
-
-                            <FormControlLabel
-                                control={
-                                    <Checkbox
-                                        {...getFieldProps('sendmail')}
-                                        defaultChecked
-                                        color="default"
-                                    />
-                                }
-                                label="Enviar Correo"
-                            />
-                        </FormGroup>
-                    </Stack>
-
-
-
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
-                        <TextField
-                            fullWidth
-                            type="text"
-                            label="Puesto"
-                            {...getFieldProps('nombrepuesto')}
-                            error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                            helperText={touched.nombrepuesto && errors.nombrepuesto}
-                        />
-                        <TextField
-                            fullWidth
-                            type="text"
-                            label="Empresa"
-                            {...getFieldProps('nombreEmpresa')}
-                            error={Boolean(touched.nombreEmpresa && errors.nombreEmpresa)}
-                            helperText={touched.nombreEmpresa && errors.nombreEmpresa}
-                        />
-                    </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>
-    );
+  const CandidatoSchema = Yup.object().shape({
+    nombres:
+      Yup.string()
+        .min(2, 'Demasiado corto!')
+        .max(50, 'Demasiado largo!')
+        .required("Ingresa un nombre válido"),
+    apellidos:
+      Yup.string()
+        .required("Ingresa un apellido válido")
+        .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
+    mail:
+      Yup.string()
+        .email("Correo no valido")
+        .required("Ingrea un puesto válido"),
+    sendmail:
+      Yup.bool()
+        .required('Ingresa un nivel educativo válido'),
+    nombrepuesto:
+      Yup.string('Ingresa un valor válido')
+        .required('Ingresa un nombre válido'),
+    nombreEmpresa:
+      Yup.string('Ingresa un valor válido')
+        .required('Ingresa un nombre válido'),
+  });
+
+  let { handleNext, handleBack, password, setPassword } = props
+
+  const formik = useFormik({
+    initialValues: {
+      nombres: password.nombres,
+      apellidos: password.apellidos,
+      sendmail: password.sendmail,
+      mail: password.mail,
+      nombrepuesto: password.nombrepuesto ? password.nombrepuesto : password.puesto[0].nombrepuesto,
+      // nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
+      nombreEmpresa: 'test'//password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
+    },
+    onSubmit: (fields) => {
+      setPassword({ ...password, ...fields })
+      handleNext()
+    },
+    validationSchema: CandidatoSchema,
+  });
+
+  const { errors, touched, handleSubmit, getFieldProps } = formik;
+
+  return (
+    <FormikProvider style={{ padding: 25 }} value={formik}>
+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+
+        <Typography style={{ paddingBottom :15 }}>Ingresa uno o mas destinos</Typography>
+        <Divider/>
+
+        <Stack spacing={3}>
+          <Stack style={{paddingTop: 15}} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+            <TextField
+              label="Nombre"
+              fullWidth
+              {...getFieldProps('nombres')}
+              error={Boolean(touched.nombres && errors.nombres)}
+              helperText={touched.nombres && errors.nombres}
+            />
+
+            <TextField
+              label="Apellidos"
+              fullWidth
+              {...getFieldProps('apellidos')}
+              error={Boolean(touched.apellidos && errors.apellidos)}
+              helperText={touched.apellidos && errors.apellidos}
+            />
+          </Stack>
+
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+            <TextField
+              fullWidth
+              type="email"
+              label="Correo Electronico"
+              {...getFieldProps('mail')}
+              error={Boolean(touched.mail && errors.mail)}
+              helperText={touched.mail && errors.mail}
+            />
+
+          </Stack>
+
+          <MailTable />
+
+          <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/Components/Password/Steps/puesto.js

@@ -15,116 +15,116 @@ import {
 
 import { useQuery } from 'react-query';
 import { Service } from '../../../Utils/HTTP.js'
-import useAuth from '../../../Auth/useAuth'
+// import useAuth from '../../../Auth/useAuth'
+import { useSelector } from 'react-redux'
 
 const delete_icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 
-
 export function Puesto(props) {
 
-    const auth = useAuth();
-    const token = auth.getToken();
-
-    const PlazaScheme = Yup.object().shape({
-        puesto: 
-        Yup.array()
-        .required('Escoge un puesto valido')
-        .min(1,"Debes escoger por lo menos un puesto")
-        .max(1,"Debes escoger un solo puesto")
-    });
-    
-    const getPuestos = async () => {
-        let rest = new Service('/plaza/getall')
-        return rest.getQuery(token);
-    }
-
-    let { data } = useQuery('puestos', getPuestos)
-    let puestos = data ? data.data.map( ({ nombrepuesto, id  }) => ({ nombrepuesto, id } )) : []
-
-    let {  handleNext, handleBack, password, setPassword } = props
-
-    const formik = useFormik({
-        initialValues: {
-            puesto: password.puesto
-        },
-        onSubmit: (fields) => {
-            setPassword({
-                ...password,
-                puesto : fields.puesto
-            })
-            handleNext()
-        },
-        validationSchema: PlazaScheme,
-    });
-
-    const { errors, touched,handleSubmit, getFieldProps,setValues } = formik;
-
-    return (
-        <FormikProvider style={{ padding : 25 }} value={formik}>
-            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-                <Stack spacing={2}>
-                    <Autocomplete
-                        disableCloseOnSelect={false}
-                        {...getFieldProps('puesto')}
-                        onChange={(_a,current_list,_c,_individual,_f) => {
-                            setValues({
-                                puesto:current_list
-                            })
-                        }}
-                        isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
-                        multiple
-                        id="checkboxes-tags-demo"
-                        options={puestos}
-                        getOptionLabel={(option) => { 
-                            return option.nombrepuesto 
-                        }}
-                        renderOption={(props, option, { selected }) => (
-                            <li {...props}>
-                                <Checkbox
-                                    icon={delete_icon}
-                                    checkedIcon={checkedIcon}
-                                    style={{ marginRight: 8 }}
-                                    checked={selected}
-                                    />
-                                {option.nombrepuesto}
-                            </li>
-                        )}
-                        renderInput={(params) => (
-                            <TextField 
-                                // {...getFieldProps('puesto')}
-                                error={Boolean(touched.puesto && errors.puesto)}
-                                helperText={touched.puesto && errors.puesto}
-                                {...params} 
-                                label="Escribe el nombre del puesto" 
-                                placeholder="Puesto" 
-                            />
-                        )}
-                    />
-
-                    <Box sx={{ mb: 2 }}>
-                        <div style={{ paddingTop  : 15}}>
-                            <Button
-                                type="submit"
-                                className="registerBtn" 
-                                variant="contained"
-                                sx={{ mt: 1, mr: 1 }}
-                            >
-                                {'Siguiente'}
-                            </Button>
-                            <Button
-                                disabled={true}
-                                onClick={handleBack}
-                                sx={{ mt: 1, mr: 1 }}
-                            >
-                                Regresar
-                            </Button>
-                        </div>
-                    </Box>
-
-                </Stack>
-            </Form>
-        </FormikProvider>
-    );
+  const auth = useSelector((state) => state.token);
+  // const token = auth.getToken();
+
+  const PlazaScheme = Yup.object().shape({
+    puesto: 
+    Yup.array()
+    .required('Escoge un puesto valido')
+    .min(1,"Debes escoger por lo menos un puesto")
+    .max(1,"Debes escoger un solo puesto")
+  });
+
+  const getPuestos = async () => {
+    let rest = new Service('/plaza/getall')
+    return rest.getQuery(auth.token);
+  }
+
+  let { data } = useQuery('puestos', getPuestos)
+  let puestos = data ? data.data.map( ({ nombrepuesto, id  }) => ({ nombrepuesto, id } )) : []
+
+  let {  handleNext, handleBack, password, setPassword } = props
+
+  const formik = useFormik({
+    initialValues: {
+      puesto: password.puesto
+    },
+    onSubmit: (fields) => {
+      setPassword({
+        ...password,
+        puesto : fields.puesto
+      })
+      handleNext()
+    },
+    validationSchema: PlazaScheme,
+  });
+
+  const { errors, touched,handleSubmit, getFieldProps,setValues } = formik;
+
+  return (
+    <FormikProvider style={{ padding : 25 }} value={formik}>
+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+        <Stack spacing={2}>
+          <Autocomplete
+            disableCloseOnSelect={false}
+            {...getFieldProps('puesto')}
+            onChange={(_a,current_list,_c,_individual,_f) => {
+              setValues({
+                puesto:current_list
+              })
+            }}
+            isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
+            multiple
+            id="checkboxes-tags-demo"
+            options={puestos}
+            getOptionLabel={(option) => { 
+              return option.nombrepuesto 
+            }}
+            renderOption={(props, option, { selected }) => (
+              <li {...props}>
+                <Checkbox
+                  icon={delete_icon}
+                  checkedIcon={checkedIcon}
+                  style={{ marginRight: 8 }}
+                  checked={selected}
+                  />
+                {option.nombrepuesto}
+              </li>
+            )}
+            renderInput={(params) => (
+              <TextField 
+                // {...getFieldProps('puesto')}
+                error={Boolean(touched.puesto && errors.puesto)}
+                helperText={touched.puesto && errors.puesto}
+                {...params} 
+                label="Escribe el nombre del puesto" 
+                placeholder="Puesto" 
+                />
+            )}
+            />
+
+          <Box sx={{ mb: 2 }}>
+            <div style={{ paddingTop  : 15}}>
+              <Button
+                type="submit"
+                className="registerBtn" 
+                variant="contained"
+                sx={{ mt: 1, mr: 1 }}
+              >
+                {'Siguiente'}
+              </Button>
+              <Button
+                disabled={true}
+                onClick={handleBack}
+                sx={{ mt: 1, mr: 1 }}
+              >
+                Regresar
+              </Button>
+            </div>
+          </Box>
+
+        </Stack>
+      </Form>
+    </FormikProvider>
+  );
 }

src/Components/Password/Steps/puestoV2.js

@@ -9,95 +9,94 @@ import {
 
 import { useQuery } from 'react-query';
 import { Service } from '../../../Utils/HTTP.js'
-import useAuth from '../../../Auth/useAuth'
+import { useSelector } from 'react-query';
 
 
 export function Puesto(props) {
-    
-    const auth = useAuth();
-    const token = auth.getToken();
-
-    const PlazaScheme = Yup.object().shape({
-        puesto_id: 
-        Yup.number()
-        .positive('Escoge un puesto válido')
-        .required('Escoge un puesto válido')
-    });
-
-
-    const getPuestos = async () => {
-        let rest = new Service('/plaza/getall')
-        return rest.getQuery(token);
-    }
-
-    let { data } = useQuery('puetos', getPuestos)
-    console.log("puestos >>", data )
-
-    let {  handleNext, handleBack, password, setPassword } = props
-
-    const formik = useFormik({
-        initialValues: {
-            puesto_id: password.puesto_id
-        },
-        onSubmit: (fields) => {
-            setPassword({...password, ...fields})
-            handleNext()
-        },
-        validationSchema: PlazaScheme,
-    });
-
-    const [age, setAge] = React.useState('');
-
-    const handleChange = (event) => setAge(event.target.value);
-
-    const { handleSubmit, touched, errors, getFieldProps } = formik;
-
-    return (
-        <FormikProvider style={{ padding : 25 }} value={formik}>
-            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-                <Stack spacing={2}>
-
-                    <FormControl fullWidth>
-                        <InputLabel id="demo-simple-select-label">Puestos</InputLabel>
-                        <Select
-                            labelId="demo-simple-select-label"
-                            id="demo-simple-select"
-                            value={age}
-                            label="Puestos"
-                            onChange={handleChange}
-                            {...getFieldProps('puesto_id')}
-                            error={Boolean(touched.puesto_id && errors.puesto_id)}
-                        >
-                            <MenuItem value={10}>Full Stack</MenuItem>
-                            <MenuItem value={20}>Web Developer</MenuItem>
-                            <MenuItem value={30}>Database Administrator</MenuItem>
-                        </Select>
-                    </FormControl>
-                    <label className="feedback_error">
-                        {touched.puesto_id && errors.puesto_id}
-                    </label>
-                    <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>
-    );
+
+  const auth = useSelector((state) => state.token)
+
+  const PlazaScheme = Yup.object().shape({
+    puesto_id: 
+    Yup.number()
+    .positive('Escoge un puesto válido')
+    .required('Escoge un puesto válido')
+  });
+
+
+  const getPuestos = async () => {
+    let rest = new Service('/plaza/getall')
+    return rest.getQuery(auth.token);
+  }
+
+  let { data } = useQuery('puetos', getPuestos)
+  console.log("puestos >>", data )
+
+  let {  handleNext, handleBack, password, setPassword } = props
+
+  const formik = useFormik({
+    initialValues: {
+      puesto_id: password.puesto_id
+    },
+    onSubmit: (fields) => {
+      setPassword({...password, ...fields})
+      handleNext()
+    },
+    validationSchema: PlazaScheme,
+  });
+
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event) => setAge(event.target.value);
+
+  const { handleSubmit, touched, errors, getFieldProps } = formik;
+
+  return (
+    <FormikProvider style={{ padding : 25 }} value={formik}>
+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+        <Stack spacing={2}>
+
+          <FormControl fullWidth>
+            <InputLabel id="demo-simple-select-label">Puestos</InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={age}
+              label="Puestos"
+              onChange={handleChange}
+              {...getFieldProps('puesto_id')}
+              error={Boolean(touched.puesto_id && errors.puesto_id)}
+            >
+              <MenuItem value={10}>Full Stack</MenuItem>
+              <MenuItem value={20}>Web Developer</MenuItem>
+              <MenuItem value={30}>Database Administrator</MenuItem>
+            </Select>
+          </FormControl>
+          <label className="feedback_error">
+            {touched.puesto_id && errors.puesto_id}
+          </label>
+          <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/Components/Password/Steps/resume.jsx

@@ -11,6 +11,7 @@ import toast, { Toaster } from 'react-hot-toast';
 import { useMutation, useQueryClient } from 'react-query';
 import { Service } from '../../../Utils/HTTP.js'
 import useAuth from '../../../Auth/useAuth.js'
+import { useSelector } from 'react-query';
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -30,164 +31,164 @@ let theme = createTheme({
 
 export function Resume(props) {
 
-    let { handleBack, password: key, handleClose,handleReset } = props
-    const fmt = React.useRef({ weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-    const [pwdID, setPwdID] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    const auth = useAuth();
-    const token = auth.getToken();
-    const queryClient = useQueryClient();
-
-    const savePassword = async (body) => {
-        let rest = new Service('/contrasenia/create')
-        return await rest.postQuery(body, token)
+  let { handleBack, password: key, handleClose,handleReset } = props
+  const fmt = React.useRef({ weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
+  const [pwdID, setPwdID] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const auth = useSelector((state) => state.token)
+  // const token = auth.getToken();
+  const queryClient = useQueryClient();
+
+  const savePassword = async (body) => {
+    let rest = new Service('/contrasenia/create')
+    return await rest.postQuery(body, auth.token)
+  }
+
+  const saveCandidato = async (body) => {
+    let rest = new Service('/passwordcandidato/candidato')
+    return await rest.postQuery(body, auth.token)
+  }
+
+  const pwdMutation = useMutation('password', savePassword);
+  const candiMutation = useMutation('candidato', saveCandidato);
+
+  const saveStepper = () => {
+
+    setLoading(true);
+
+    let {
+      deadpwd, dateToActived, puesto, pwd,
+      nombres, apellidos, sendmail, nombrepuesto, nombreEmpresa,mail
+    } = key;
+    console.log("KEY: ", key)
+
+    let pwdBody = {
+      id: -1,
+      pwd: btoa(pwd),
+      link: "www.psicoadmin.com",
+      deadpwd: new Date(deadpwd).toISOString(),
+      state: 1,
+      dateToActived: new Date(dateToActived).toISOString(),
+      plaza_id: puesto[0].id
     }
 
-    const saveCandidato = async (body) => {
-        let rest = new Service('/passwordcandidato/candidato')
-        return await rest.postQuery(body, token)
-    }
-
-    const pwdMutation = useMutation('password', savePassword);
-    const candiMutation = useMutation('candidato', saveCandidato);
-
-    const saveStepper = () => {
-
-        setLoading(true);
-
-        let {
-            deadpwd, dateToActived, puesto, pwd,
-            nombres, apellidos, sendmail, nombrepuesto, nombreEmpresa,mail
-        } = key;
-        console.log("KEY: ", key)
-
-        let pwdBody = {
-            id: -1,
-            pwd: btoa(pwd),
-            link: "www.psicoadmin.com",
-            deadpwd: new Date(deadpwd).toISOString(),
-            state: 1,
-            dateToActived: new Date(dateToActived).toISOString(),
-            plaza_id: puesto[0].id
+    pwdMutation.mutate(pwdBody, {
+      onSuccess: (data) => {
+
+        let { id: password_id } = data.data;
+        setPwdID(password_id);
+
+        let candidatoBody = {
+          id: -1,
+          nombres,
+          apellidos,
+          sendmail: sendmail ? 1 : 0,
+          mail,
+          idContrasenia: password_id,
+          nombrepuesto,
+          nombreEmpresa
         }
 
-        pwdMutation.mutate(pwdBody, {
-            onSuccess: (data) => {
-
-                let { id: password_id } = data.data;
-                setPwdID(password_id);
-
-                let candidatoBody = {
-                    id: -1,
-                    nombres,
-                    apellidos,
-                    sendmail: sendmail ? 1 : 0,
-                    mail,
-                    idContrasenia: password_id,
-                    nombrepuesto,
-                    nombreEmpresa
-                }
-
-                candiMutation.mutate(candidatoBody, {
-                    onSuccess: (data) => {
-
-                        queryClient.invalidateQueries('passwords')
-                        toast.success("Contraseña agregada exitosamente!!")
-                        setTimeout(() => {
-                            console.log("OK LETS GO >> ", data,pwdID)
-                            setLoading(false);
-                            handleClose();
-                            handleReset();
-                        }, 1000)
-
-                    },
-                    onError: () => {
-                        toast.error("Ups!! error al crear el candidato")
-                        setLoading(false);
-                    }
-                })
-
-
-            },
-            onError: () => {
-                console.log("No se pudo guardar pwd")
-                setLoading(false);
-                toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
-            }
+        candiMutation.mutate(candidatoBody, {
+          onSuccess: (data) => {
+
+            queryClient.invalidateQueries('passwords')
+            toast.success("Contraseña agregada exitosamente!!")
+            setTimeout(() => {
+              console.log("OK LETS GO >> ", data,pwdID)
+              setLoading(false);
+              handleClose();
+              handleReset();
+            }, 1000)
+
+          },
+          onError: () => {
+            toast.error("Ups!! error al crear el candidato")
+            setLoading(false);
+          }
         })
-    }
 
-    return (
-        <React.Fragment>
-            <ThemeProvider theme={theme}>
-                {loading ? (
-                    <Box sx={{ paddingBottom: 3 }}>
-                        <LinearProgress color="inherit" />
-                    </Box>
-                ) : null}
-                <Table>
-                    <thead>
-                        <tr>
-                            <th>{key.pwd}</th>
-                            <th>{btoa(key.pwd)}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="title_td">{"Candidato"}</td>
-                            <td colSpan={2}>{key.nombres + " " + key.apellidos} - {key.mail}</td>
-                        </tr>
-                        <tr>
-                            <td className="title_td">{"Puesto"}</td>
-                            <td colSpan={2}>{key.puesto.length > 0 ? key.puesto[0].nombrepuesto : ''}</td>
-                        </tr>
-                        <tr>
-                            <td className="title_td">{"Empresa"}</td>
-                            <td colSpan={2}>{key.nombreEmpresa}</td>
-                        </tr>
-                        <tr>
-                            <td className="title_td">{"Fecha Activación"}</td>
-                            <td colSpan={2}>{new Date(key.dateToActived).toLocaleDateString('es-GT', fmt.current)}</td>
-                        </tr>
-                        <tr>
-                            <td className="title_td">{"Fecha de Vencimiento"}</td>
-                            <td colSpan={2}>{new Date(key.deadpwd).toLocaleDateString('es-GT', fmt.current)}</td>
-                        </tr>
-                    </tbody>
-                </Table>
-
-
-                <Box sx={{ mb: 2 }}>
-                    <div style={{ paddingTop: 15 }}>
-                        <Button
-                            disabled={loading}
-                            style={{
-                                color: loading ? 'white' : ''
-                            }}
-                            onClick={saveStepper}
-                            className="registerBtn"
-                            variant="contained"
-                            sx={{ mt: 1, mr: 1 }}
-                        >
-                            {'Guardar'}
-                        </Button>
-                        <Button
-                            disabled={loading}
-                            onClick={handleBack}
-                            sx={{ mt: 1, mr: 1 }}
-                        >
-                            Regresar
-                        </Button>
-                    </div>
-                </Box>
-            </ThemeProvider>
-            <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={loading}
-                onClick={() => console.log("close fetching")} >
-                <CircularProgress color="inherit" />
-            </Backdrop>
-            <Toaster position="bottom-right" />
-        </React.Fragment>
-    )
+
+      },
+      onError: () => {
+        console.log("No se pudo guardar pwd")
+        setLoading(false);
+        toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
+      }
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <ThemeProvider theme={theme}>
+        {loading ? (
+          <Box sx={{ paddingBottom: 3 }}>
+            <LinearProgress color="inherit" />
+          </Box>
+        ) : null}
+        <Table>
+          <thead>
+            <tr>
+              <th>{key.pwd}</th>
+              <th>{btoa(key.pwd)}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="title_td">{"Candidato"}</td>
+              <td colSpan={2}>{key.nombres + " " + key.apellidos} - {key.mail}</td>
+            </tr>
+            <tr>
+              <td className="title_td">{"Puesto"}</td>
+              <td colSpan={2}>{key.puesto.length > 0 ? key.puesto[0].nombrepuesto : ''}</td>
+            </tr>
+            <tr>
+              <td className="title_td">{"Empresa"}</td>
+              <td colSpan={2}>{key.nombreEmpresa}</td>
+            </tr>
+            <tr>
+              <td className="title_td">{"Fecha Activación"}</td>
+              <td colSpan={2}>{new Date(key.dateToActived).toLocaleDateString('es-GT', fmt.current)}</td>
+            </tr>
+            <tr>
+              <td className="title_td">{"Fecha de Vencimiento"}</td>
+              <td colSpan={2}>{new Date(key.deadpwd).toLocaleDateString('es-GT', fmt.current)}</td>
+            </tr>
+          </tbody>
+        </Table>
+
+
+        <Box sx={{ mb: 2 }}>
+          <div style={{ paddingTop: 15 }}>
+            <Button
+              disabled={loading}
+              style={{
+                color: loading ? 'white' : ''
+              }}
+              onClick={saveStepper}
+              className="registerBtn"
+              variant="contained"
+              sx={{ mt: 1, mr: 1 }}
+            >
+              {'Guardar'}
+            </Button>
+            <Button
+              disabled={loading}
+              onClick={handleBack}
+              sx={{ mt: 1, mr: 1 }}
+            >
+              Regresar
+            </Button>
+          </div>
+        </Box>
+      </ThemeProvider>
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+        onClick={() => console.log("close fetching")} >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <Toaster position="bottom-right" />
+    </React.Fragment>
+  )
 }

src/Pages/ContrasV2.jsx

@@ -9,6 +9,7 @@ import { TableStyle, TextLabels } from '../Components/Password/TableStyle'
 import { useQuery } from 'react-query';
 import { Service } from '../Utils/HTTP.js'
 import { useSelector } from 'react-redux';
+import  { Loading } from '../Components/Generics/loading'
 
 export function Contrasv2() {
 
@@ -23,7 +24,7 @@ export function Contrasv2() {
   console.log(data,status)
 
   if(status === 'loading'){
-    return <h1>loading...</h1>
+    return <Loading/>
   }
 
   const options = {