tab insted of stepper

src/App.css

@@ -253,3 +253,9 @@
     align-items:baseline;
     justify-content:space-between;
 }
+
+.css-19kzrtu{
+    padding:0px !important;
+    padding-top : 25px !important;
+}
+

src/Components/Modal/AgregarManual.js

@@ -9,12 +9,14 @@ import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
 import {
     Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
-    Backdrop, CircularProgress
+    Backdrop, CircularProgress,Box,Divider,
+    Tabs, Tab, FormGroup, Checkbox,FormControlLabel
 } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import useAuth from '../../Auth/useAuth';
+import { TabPanel } from './TabPanel'
 
 function Manual(props) {
 
@@ -26,7 +28,13 @@ function Manual(props) {
         return await rest.getQuery(token)
     }
 
+    const getTest = async () => {
+        let rest = new Service("/tests/getAll")
+        return await rest.getQuery(token)
+    }
+
     const { data } = useQuery('categories', getCategories);
+    const { data: tests } = useQuery('tests', getTest);
     const queryClient = useQueryClient();
 
     const NewPlazaSchema = Yup.object().shape({
@@ -34,11 +42,14 @@ function Manual(props) {
         puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
         aredepto: Yup.number().required('Escoge alguna área'),
         fecha: Yup.date("Ingresa una fecha válida"),
-        notas: Yup.string("Ingresa una nota válida").min(5,"Ingresa una nota válida").max(150),
+        notas: Yup.string("Ingresa una nota válida").min(5, "Ingresa una nota válida").max(150),
     })
 
     const [departamento, setDepartamento] = React.useState('');
     const [open, setOpen] = React.useState(false);
+    const [date, setDate] = React.useState(new Date());
+    const [tab, setTab] = React.useState(0);
+
     const handleClose = () => false
 
     const changeDepartamento = (event) => {
@@ -52,8 +63,6 @@ function Manual(props) {
 
     const puestoMutation = useMutation(agregarPuesto)
 
-
-    const [date, setDate] = React.useState(new Date());
     let { visible, onClose } = props
 
     const formik = useFormik({
@@ -71,15 +80,15 @@ function Manual(props) {
             fields['areadeptoplz_id'] = 1;
             fields['id'] = -1;
 
-            puestoMutation.mutate(fields,{
-                onSuccess:() =>{
+            puestoMutation.mutate(fields, {
+                onSuccess: () => {
                     setOpen(false)
                     resetForm();
                     onClose();
                     queryClient.invalidateQueries('puestos')
                     toast.success("Puesto Agregado")
                 },
-                onError:() =>{
+                onError: () => {
                     setOpen(false)
                     toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
                 }
@@ -88,99 +97,133 @@ function Manual(props) {
         validationSchema: NewPlazaSchema,
     });
 
+    const changeTab = (_event, newValue) => {
+        setTab(newValue);
+    };
+
     const { errors, touched, handleSubmit, getFieldProps } = formik;
 
     return (
 
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
+
             <Modal.Header>
                 <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
                 <h4 className="modal-title" style={{ color: '#252525' }}>Agregar plaza</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
 
-                <FormikProvider style={{ padding: 25 }} value={formik}>
+                <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
+                    <Tab label="Información" />
+                    <Tab label="Pruebas" />
+                </Tabs>
+
+
+
+                <FormikProvider style={{ paddingTop: 25 }} value={formik}>
                     <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-                        <Stack spacing={3}>
 
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                        <TabPanel value={tab} index={1}>
+                            <Stack spacing={1}>
+                                <Box style={{ paddingTop :5, paddingLeft :15 }}>
+                                    <Divider/>
+                                        <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
+                                    <Divider/>
+                                    <FormGroup>
+                                        {
+                                            tests ?
+                                            tests.data.map( test => (
+                                                <FormControlLabel control={<Checkbox defaultChecked />} label={test.nombre} />
+                                            )): null
+                                        }
+                                    </FormGroup>
+                                </Box>
+                            </Stack>
+                        </TabPanel>
 
-                                <TextField
-                                    label="Nombre"
-                                    fullWidth
-                                    {...getFieldProps('nombrepuesto')}
-                                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                                    helperText={touched.nombrepuesto && errors.nombrepuesto}
-                                    />
+                        <TabPanel value={tab} index={0}>
 
-                                <TextField
-                                    label="Puesto Superior"
-                                    fullWidth
-                                    {...getFieldProps('puestosuperior')}
-                                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
-                                    helperText={touched.puestosuperior && errors.puestosuperior}
+                            <Stack spacing={3}>
+                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+                                    <TextField
+                                        label="Nombre"
+                                        fullWidth
+                                        {...getFieldProps('nombrepuesto')}
+                                        error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                                        helperText={touched.nombrepuesto && errors.nombrepuesto}
                                     />
 
-                            </Stack>
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                                <FormControl fullWidth>
-                                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
-                                    <Select
-                                        labelId="demo-simple-select-label"
-                                        value={departamento}
-                                        label="Departamento"
-                                        onChange={changeDepartamento}
-                                        {...getFieldProps('aredepto')}
-                                        error={Boolean(touched.aredepto && errors.aredepto)} >
-                                        {
-                                        data ?
-                                            data.data.map(cate => {
-                                                return (
-                                                    <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                                                )
-                                            })
-                                            : <MenuItem>Null</MenuItem>
-                                    }
-                                    </Select>
-                                </FormControl>
-
-
-                                <LocalizationProvider
-                                    dateAdapter={DateFnsUtils}>
-                                    <DesktopDatePicker
-                                        label="Fecha Creación"
+                                    <TextField
+                                        label="Puesto Superior"
                                         fullWidth
-                                        inputFormat="dd/MM/yyyy"
-                                        {...getFieldProps('fecha')}
-                                        value={date}
-                                        onChange={setDate}
-                                        renderInput={(params) =>
-                                            <TextField
-                                                disabled={true}
-                                                label="Fecha Creación"
-                                                fullWidth
-                                                {...params}
+                                        {...getFieldProps('puestosuperior')}
+                                        error={Boolean(touched.puestosuperior && errors.puestosuperior)}
+                                        helperText={touched.puestosuperior && errors.puestosuperior}
+                                    />
+                                </Stack>
+
+                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+
+                                    <FormControl fullWidth>
+                                        <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
+                                        <Select
+                                            labelId="demo-simple-select-label"
+                                            value={departamento}
+                                            label="Departamento"
+                                            onChange={changeDepartamento}
+                                            {...getFieldProps('aredepto')}
+                                            error={Boolean(touched.aredepto && errors.aredepto)} >
+                                            {
+                                                data ?
+                                                    data.data.map(cate => {
+                                                        return (
+                                                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                                                        )
+                                                    })
+                                                    : <MenuItem>Null</MenuItem>
+                                            }
+                                        </Select>
+                                    </FormControl>
+
+
+                                    <LocalizationProvider
+                                        dateAdapter={DateFnsUtils}>
+                                        <DesktopDatePicker
+                                            label="Fecha Creación"
+                                            fullWidth
+                                            inputFormat="dd/MM/yyyy"
+                                            {...getFieldProps('fecha')}
+                                            value={date}
+                                            onChange={setDate}
+                                            renderInput={(params) =>
+                                                <TextField
+                                                    disabled={true}
+                                                    label="Fecha Creación"
+                                                    fullWidth
+                                                    {...params}
                                                 />}
                                         />
-                                </LocalizationProvider>
+                                    </LocalizationProvider>
 
-                            </Stack>
+                                </Stack>
 
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-                                <TextField
-                                    id="filled-multiline-static"
-                                    multiline
-                                    rows={4}
-                                    variant="filled"
-                                    label="Notas"
-                                    fullWidth
-                                    type="text"
-                                    {...getFieldProps('notas')}
-                                    error={Boolean(touched.notas && errors.notas)}
-                                    helperText={touched.notas && errors.notas}
+                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+                                    <TextField
+                                        id="filled-multiline-static"
+                                        multiline
+                                        rows={4}
+                                        variant="filled"
+                                        label="Notas"
+                                        fullWidth
+                                        type="text"
+                                        {...getFieldProps('notas')}
+                                        error={Boolean(touched.notas && errors.notas)}
+                                        helperText={touched.notas && errors.notas}
                                     />
+                                </Stack>
                             </Stack>
-                        </Stack>
+
+                        </TabPanel>
 
 
                         <Modal.Footer>

src/Components/Modal/TabPanel.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box } from '@mui/material'
+
+export function TabPanel(props) {
+
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{  p :  3 }}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}