create password steps

src/App.css

@@ -1,12 +1,10 @@
 .App {
     text-align: center;
 }
-
 .App-logo {
     height: 40vmin;
     pointer-events: none;
 }
-
 @media (prefers-reduced-motion: no-preference) {
     .App-logo {
         animation: App-logo-spin infinite 20s linear;

src/Components/Home/Actividades.js

@@ -5,7 +5,6 @@ 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'

src/Components/Modal/PasswordModal.jsx

@@ -0,0 +1,107 @@
+import { Modal } from 'react-bootstrap'
+import * as React from 'react';
+
+import { 
+    Box, Stepper, Step,
+    StepLabel, Button , Typography
+} from '@mui/material'
+
+const steps = ['Información del candidato', 'Seleccionar plaza', 'Seleccionar pruebas', 'Confirmar'];
+
+export function HelpModal (props) {
+
+    let { visible, handleClose } = props
+
+    const [activeStep, setActiveStep] = React.useState(0);
+    const [skipped, setSkipped] = React.useState(new Set());
+
+    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 = () => {
+        setActiveStep(0);
+    };
+
+
+    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 activeStep={activeStep}>
+                        {steps.map((label, index) => {
+                            const stepProps = {};
+                            const labelProps = {};
+                            if (isStepSkipped(index)) {
+                                stepProps.completed = false;
+                            }
+                            return (
+                                <Step key={label} {...stepProps}>
+                                    <StepLabel {...labelProps}>{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>
+
+                                <Typography sx={{ mt: 2, mb: 1 }}>
+                                    Paso numero: {activeStep + 1}
+                                </Typography>
+
+                                <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                                    <Button
+                                        color="inherit"
+                                        disabled={activeStep === 0}
+                                        onClick={handleBack}
+                                        sx={{ mr: 1 }}
+                                    >
+                                        Anterior
+                                    </Button>
+                                    <Box sx={{ flex: '1 1 auto' }} />
+                                    <Button onClick={handleNext}>
+                                        {activeStep === steps.length - 1 ? 'Guardar' : 'Siguiente'}
+                                    </Button>
+                                </Box>
+                            </React.Fragment>
+                        )}
+                </Box>
+
+            </Modal.Body>
+        </Modal>
+    )
+}

src/Components/Password/HeaderOperation.jsx

@@ -1,9 +1,11 @@
+import {useState} from 'react'
 import { 
     IconButton,Typography,Toolbar,
     Tooltip
 } from '@mui/material'
 
 import { alpha } from '@mui/material/styles';
+import { HelpModal } from '../Modal/PasswordModal'
 
 import {
     Delete as DeleteIcon,
@@ -12,7 +14,9 @@ import {
 } from '@mui/icons-material/'
 
 export const TableEncabezadoOperation = (props) => {
+
     const { numSelected } = props;
+    const [ visible, setVisible ] = useState(false);
 
     return (
         <Toolbar
@@ -59,12 +63,13 @@ export const TableEncabezadoOperation = (props) => {
                             </IconButton>
                         </Tooltip>
                         <Tooltip title="Agregar">
-                            <IconButton onClick={() => console.log('click')}>
+                            <IconButton onClick={() => setVisible(true) }>
                                 <AddIcon />
                             </IconButton>
                         </Tooltip>
                     </div>
                 )}
+            <HelpModal visible={visible} handleClose={() => setVisible(false)} />
         </Toolbar>
     );
 

src/Components/Password/Rows.js

@@ -42,10 +42,10 @@ export const encabezados = [
         label: 'Con CV',
     },
     {
-        id: 'replic',
+        id: 'estado',
         numeric: true,
         disablePadding: false,
-        label: 'Replicar',
+        label: 'Envido?',
     },
     {
         id: 'ope',

src/Components/Password/config.js

@@ -1,5 +1,7 @@
+import { Check } from '@mui/icons-material'
+
 export const rows = [
-    createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
+    createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', <Check/>),
 ]
 
 new Array(50).fill(50).forEach( (_,i) => {
@@ -18,7 +20,7 @@ export const action_icon =  {
     margin :5
 }
 
-export function createData( pass, nivel, puesto, cui, uso, picture, cv, replic, ope) {
+export function createData( pass, nivel, puesto, cui, uso, picture, cv, estado, ope) {
     return {
         pass,
         nivel,
@@ -27,7 +29,7 @@ export function createData( pass, nivel, puesto, cui, uso, picture, cv, replic,
         uso,
         picture,
         cv,
-        replic,
+        estado,
         ope,
     };
 }

src/Pages/Contras.jsx

@@ -1,18 +1,12 @@
 import * as React from 'react';
 
-import { EditSharp, MailSharp } from '@mui/icons-material'
-
 import { 
     rows,
     action_icon,
     Comparar,
     Cuerpo,
-    // TableEncabezadoOperation
 } from '../Components/Password/config.js';
 
-import { TableHeadCustom as TableHead } from '../Components/Password/Header'
-import { TableEncabezadoOperation as TableOperation } from '../Components/Password/HeaderOperation.jsx'
-
 import { 
     Table, TableBody, TableCell, TableContainer, 
     TableRow, TablePagination,
@@ -20,6 +14,11 @@ import {
     Checkbox,
 } from '@mui/material';
 
+import { EditSharp, MailSharp } from '@mui/icons-material'
+
+import { TableHeadCustom as TableHead } from '../Components/Password/Header'
+import { TableEncabezadoOperation as TableOperation } from '../Components/Password/HeaderOperation.jsx'
+
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
@@ -148,7 +147,7 @@ export function Contras() {
                                                 <TableCell align="right">{row.uso}</TableCell>
                                                 <TableCell align="right">{row.picture}</TableCell>
                                                 <TableCell align="right">{row.cv}</TableCell>
-                                                <TableCell align="right">{row.replic}</TableCell>
+                                                <TableCell align="right">{row.estado}</TableCell>
                                                 <TableCell align="center">
                                                     <EditSharp style={action_icon} />
                                                     <MailSharp style={action_icon}/>