multiple users in password creation

src/Components/Modal/PasswordModal.jsx

     sendmail: true,
     nombrepuesto: null,
     nombreEmpresa: null,
-    candidatos : [{
+    candidatos : [
+      {
       'nombres': 'ming',
       'apellidos': 'mecca',
-      'mail': 'ming@gmail.com',
-    }]
+      'mail': 'ming@gmail.com', }
+    ]
   });
 
   const isStepSkipped = (step) => {
       sendmail: true,
       nombrepuesto: null,
       nombreEmpresa: null,
+      candidatos : []
     })
     setActiveStep(0);
   };
     {
       label: 'Puesto',
       operation:
-        <Puesto
-          handleNext={handleNext}
-          handleBack={handleBack}
-          password={password}
-          setPassword={setPassword}
+      <Puesto
+        handleNext={handleNext}
+        handleBack={handleBack}
+        password={password}
+        setPassword={setPassword}
         />
     },
     {
       label: 'Contraseña',
       operation:
-        <Password
-          handleNext={handleNext}
-          handleBack={handleBack}
-          password={password}
-          setPassword={setPassword}
+      <Password
+        handleNext={handleNext}
+        handleBack={handleBack}
+        password={password}
+        setPassword={setPassword}
         />
     },
     {
       label: 'Candidatos',
       operation:
-        <Candidato
-          handleNext={handleNext}
-          handleBack={handleBack}
-          password={password}
-          setPassword={setPassword}
+      <Candidato
+        handleNext={handleNext}
+        handleBack={handleBack}
+        password={password}
+        setPassword={setPassword}
         />
     },
     {
       label: 'Confirmar',
       operation:
-        <Resume
-          handleBack={handleBack}
-          password={password}
-          handleClose={handleClose}
-          handleReset={handleReset}
+      <Resume
+        handleBack={handleBack}
+        password={password}
+        handleClose={handleClose}
+        handleReset={handleReset}
         />
     },
   ];
               </Box>
             </React.Fragment>
           ) : (
-            <React.Fragment>
+              <React.Fragment>
 
-              <Box style={{ padding: 18, marginTop: 2 }}>
-                {steps[activeStep].operation}
-              </Box>
+                <Box style={{ padding: 18, marginTop: 2 }}>
+                  {steps[activeStep].operation}
+                </Box>
 
-            </React.Fragment>
-          )}
+              </React.Fragment>
+            )}
         </Box>
 
       </Modal.Body>

src/Components/Password/Rows.js

 
 export function Build(pwds) {
   return pwds.map(password => {
-    let { pwd, deadpwd, dateToActived, plaza_id } = password
+    let { pwd, plaza_id } = password
     return {
-      name: pwd,
+      name: atob( pwd ),
       activacion: new Date().toUTCString(),//dateToActived, 
       dead: new Date().toUTCString(), //deadpwd,
       op: <Operation plz={plaza_id} pwd={pwd} />

src/Components/Password/Steps/MailTable.jsx

           </TableRow>
         </TableHead>
         <TableBody>
-          {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}
                 <DisabledByDefault onClick={() => remove(row.mail)} color="primary"/>
               </TableCell>
             </TableRow>
-          ))}
+          ) ) :  null }
         </TableBody>
       </Table>
     </TableContainer>

src/Components/Password/Steps/candidato.jsx

 
 import { AddCircle } from '@mui/icons-material/';
 import { MailTable } from './MailTable';
-
+import toast, { Toaster } from 'react-hot-toast';
 
 export function Candidato(props) {
 
-
   const CandidatoSchema = Yup.object().shape({
     nombres:
       Yup.string()
     initialValues: {
       nombres: "",
       apellidos: "",
-      sendmail: "",
+      sendmail: true,
       mail: "",
-      nombrepuesto: password.nombrepuesto ? password.nombrepuesto : password.puesto[0].nombrepuesto,
+      nombrepuesto: '',// password.nombrepuesto ? password.nombrepuesto : password.puesto[0].nombrepuesto,
       nombreEmpresa: 'test'//password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
       // nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
     },
     onSubmit: () => {
+      console.log(password.candidatos)
+      if(password.candidatos.length <= 0){
+        toast.error("Seleciona almenos un destino")
+        // alert("seleciona almenos un destino")
+        return;
+      }
       //setPassword({ ...password, ...fields })
       handleNext()
     },
           </Box>
 
         </Stack>
+        <Toaster position="top-right" />
       </Form>
     </FormikProvider>
   );

src/Components/Password/Steps/password.jsx

 
 
 export function Password(props) {
+    
+    // console.log(props.password)
 
     const [uid,setUID] = React.useState(null);
 

src/Components/Password/Steps/puesto.js

 
 import { useQuery } from 'react-query';
 import { Service } from '../../../Utils/HTTP.js'
-// import useAuth from '../../../Auth/useAuth'
 import { useSelector } from 'react-redux'
 
 const delete_icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 
 export function Puesto(props) {
 
+  // console.log(props.password)
+
   const auth = useSelector((state) => state.token);
-  // const token = auth.getToken();
 
   const PlazaScheme = Yup.object().shape({
     puesto: 

src/Components/Password/Steps/resume.jsx

 
 import { Table } from 'react-bootstrap';
 import {
-    Box, Button, LinearProgress,
-    Backdrop, CircularProgress
+  Box, Button, LinearProgress,
+  Backdrop, CircularProgress
 } from '@mui/material';
 
 import toast, { Toaster } from 'react-hot-toast';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 let theme = createTheme({
-    status: {
-        success: '#fd4b4b'
+  status: {
+    success: '#fd4b4b'
+  },
+  palette: {
+    primary: {
+      main: '#fd4b4b',
     },
-    palette: {
-        primary: {
-            main: '#fd4b4b',
-        },
-        secondary: {
-            main: '#fd4b4b',
-        },
+    secondary: {
+      main: '#fd4b4b',
     },
+  },
 });
 
 export function Resume(props) {
 
-  let { handleBack, password: key, handleClose,handleReset } = props
+  let { handleBack, password: key, handleClose, handleReset } = props
+
+  console.log(key)
 
   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 pwdMutation = useMutation('password', savePassword);
   const candiMutation = useMutation('candidato', saveCandidato);
+  console.log(candiMutation)
 
   const saveStepper = () => {
 
     setLoading(true);
 
-    let {
-      deadpwd, dateToActived, puesto, 
-      pwd,nombreEmpresa,nombrepuesto, candidatos
-    } = key;
+    let { deadpwd, dateToActived } = key;
 
     let pwdBody = {
       id: -1,
-      pwd: btoa(pwd),
+      pwd: btoa(key.pwd),
       link: "www.psicoadmin.com",
       deadpwd: new Date(deadpwd).toISOString(),
       state: 1,
       dateToActived: new Date(dateToActived).toISOString(),
-      plaza_id: puesto[0].id
+      plaza_id: key.puesto[0].id
     }
 
+    console.log("PWD BODY: ", pwdBody)
+
     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) => {
+      onSuccess: (result) => {
+
+        let { id: idContrasenia } = result.data;
+
+
+        let candidatos_body = key.candidatos.map((candi) => ({
+          "id": -1,
+          "nombres": candi.nombres,
+          "apellidos": candi.apellidos,
+          "mail": candi.mail,
+          "sendmail": 0,
+          "idContrasenia": idContrasenia,
+          "nombrepuesto": 'Senior Software',
+          "nombreEmpresa": 'Google'
+        }))
+
+        console.log(candidatos_body)
+
+        // setLoading(false);
+        // return;
 
+        queryClient.invalidateQueries('passwords')
+              setLoading(false);
+              handleClose();
+              handleReset();
+        /*
+
+        candiMutation.mutate(candidatos_body, {
+          onSuccess: (data) => {
             queryClient.invalidateQueries('passwords')
             toast.success("Contraseña agregada exitosamente!!")
             setTimeout(() => {
-              console.log("OK LETS GO >> ", data,pwdID)
+              console.log("OK LETS GO >> ", data)
               setLoading(false);
               handleClose();
               handleReset();
             }, 1000)
-
           },
           onError: () => {
             toast.error("Ups!! error al crear el candidato")
             setLoading(false);
           }
         })
-
+*/
 
       },
       onError: () => {
     })
   }
 
-  const getLi = (user) => {
-    return ( 
-      <li style={{ listStyleType: 'none'}}>
+  const getLi = (user, i) => {
+    return (
+      <li key={i} style={{ listStyleType: 'none' }}>
         {user.nombres + " " + user.apellidos} - {user.mail}
-      </li> 
+      </li>
     )
-   }
+  }
 
   return (
     <React.Fragment>
           <thead>
             <tr className="table_password">
               <th>{"Contraseña: "}</th>
-              <th>{ key.pwd } - {btoa(key.pwd)}</th>
+              <th>{key.pwd} - {btoa(key.pwd)}</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td className="title_td">{"Candidatos:"}</td>
               <td colSpan={2}>
-                <ul style={{ margin:0, padding:0}}>
-                  {key.candidatos.map(u => getLi(u))}
+                <ul style={{ margin: 0, padding: 0 }}>
+                  {key.candidatos ? key.candidatos.map((u, i) => getLi(u, i)) : null}
                 </ul>
-                </td>
+              </td>
             </tr>
             <tr>
               <td className="title_td">{"Puesto:"}</td>

src/Pages/ContrasV2.jsx

 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() {
 
   }
 
   const { data, status  } = useQuery('passwords', getAllPwd );
-  console.log(data,status)
-
-  if(status === 'loading'){
-    return <Loading/>
-  }
-
   const options = {
     filterType: 'checkbox',
     customToolbar: () => {