using new wave to validate my form

package.json

@@ -7,6 +7,7 @@
         "@date-io/date-fns": "^2.16.0",
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
+        "@hookform/resolvers": "^2.9.10",
         "@iconify/icons-eva": "^1.1.0",
         "@iconify/react": "^3.1.3",
         "@mui/icons-material": "^5.1.0",
@@ -27,6 +28,7 @@
         "react": "^17.0.2",
         "react-bootstrap": "2.4.0",
         "react-dom": "^17.0.2",
+        "react-hook-form": "^7.39.4",
         "react-hot-toast": "^2.2.0",
         "react-query": "^3.34.12",
         "react-redux": "^8.0.4",

src/Components/Generics/loading.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import '../../Css/loading.css'
 
+import { Paper, Box } from '@mui/material'
+
 export function Loading() {
 
   const types = [
@@ -9,12 +11,25 @@ export function Loading() {
   ];
 
   return (
-    <div className="loading_or_content">
-      <div className="snippet" data-title=".dot-pulse">
-        <div className="stage">
-          <div className={types[0]}></div>
-        </div>
+    <div className="content-section">
+      <div className="main">
+        <Box>
+          <Paper sx={{ mb: 2, padding: 2, }}>
+
+            <div className="content-section">
+              <div className="loading_or_content">
+                <div className="snippet" data-title=".dot-pulse">
+                  <div className="stage">
+                    <div className={types[0]}></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </Paper>
+        </Box>
       </div>
     </div>
+
   )
 }

src/Components/Modal/EditPlaza.js

@@ -1,24 +1,26 @@
-import React, { memo, useCallback, useMemo, useEffect } from 'react';
-import * as Yup from 'yup';
-import { useFormik, Form, FormikProvider } from 'formik';
+import React, { memo, useMemo, useEffect } from 'react';
 import { Modal } from 'react-bootstrap'
-import toast, { Toaster } from 'react-hot-toast';
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 import { TabPanel } from './TabPanel'
 
 import {
-    Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
-    Backdrop, CircularProgress,
-    Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
+  Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
+  Backdrop, CircularProgress,
+  Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
 } from '@mui/material';
 
+import toast, { Toaster } from 'react-hot-toast';
+
 import { Service } from '../../Utils/HTTP';
 import { useSelector } from 'react-redux'
 import { useQuery, useMutation, useQueryClient } from 'react-query'
 
-const NewPlazaSchema = Yup.object().shape({
+const plazeSchema = Yup.object({
   id: Yup.number(),
   nombrepuesto:
   Yup.string().required('El nombre es requerido')
@@ -29,30 +31,38 @@ const NewPlazaSchema = Yup.object().shape({
   fecha: Yup.date("Ingresa una fecha válida"),
   notas: Yup.string("Ingresa una nota válida").min(5).max(150),
   tests: Yup.array()
-})
-
+}).required();
 
 
 function Edit(props) {
 
+  const {
+    reset,control,register, handleSubmit, formState: { errors } } = useForm({
+    resolver : yupResolver(plazeSchema),
+    defaultValues: {
+      nombrepuesto: 'mingtest',
+      puestosuperior: 77,
+      fecha: '01/01/2019',
+      notas: 'esto es un ejemplod e una nota',
+      aredepto : 1,
+    }
+  });
+
+  const onSubmit = data => {
+    console.log("SUBMIT: ",data)
+  }
+
   const now = useMemo(() => new Date(), [])
   const auth = useSelector((state) => state.token)
-  const queryClient = useQueryClient()
+  // const queryClient = useQueryClient()
   let { visible, toggle } = props
 
-  const [departamento, setDepartamento] = React.useState('');
   const [open, setOpen] = React.useState(false);
-
-  const changeDepartamento = useCallback((event) => {
-    setDepartamento(event.target.value);
-  }, []);
-
-  const [date, setDate] = React.useState(now);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
 
   const addPrueba = (check,id) => {
-    let { tests } = values
+    let { tests } = { tests : []}
     let temp ;
     if(check){
       temp = [...tests, {id}]
@@ -60,7 +70,7 @@ function Edit(props) {
       temp = tests.filter( test => test.id !== id);
     }
     setChecklist(temp.map( test => test.id) )
-    setValues({...values, tests: temp})
+    // setValues({...values, tests: temp})
   };
 
   const getCategories = async () => {
@@ -82,62 +92,22 @@ function Edit(props) {
 
   const close = () => toggle("EDIT", {id : null});
 
-  const { data } = useQuery('categories', getCategories);
+  const { data: categories } = useQuery('categories', getCategories);
   const { data: testsCatalog } = useQuery('tests', getTest);
 
-  const formik = useFormik({
-    initialValues: {
-      id: 1,
-      nombrepuesto: "",
-      puestosuperior: 1,
-      aredepto: 1,
-      fecha: now,
-      notas: "",
-      tests : []
-    },
-    onSubmit: (fields, { resetForm }) => {
-      setOpen(true);
-      fields['fecha'] = new Date(fields.fecha).toISOString();
-
-      puestoMutation.mutate(fields, {
-        onSuccess: () => {
-          close();
-          setOpen(false)
-          toast.success("Puesto Actualizado!!")
-          queryClient.invalidateQueries('puestos')
-        },
-        onError:() => {
-          close();
-          setOpen(false)
-          toast.error("Lo sentimos ocurrió error inténtalo más tarde")
-        }
+  useEffect(() => {
+    if(visible == null) return;
+    let rest = new Service(`/plaza/getthis/${visible}`)
+    rest
+      .getQuery(auth.token)
+      .then( response => {
+        let { areadeptoplz_id, fecha } = response.data;
+        reset({...response.data, areadepto : areadeptoplz_id, fecha : new Date(fecha)  })
       })
+      .catch(console.log)
+  },[visible])
 
-      resetForm();
-    },
-    validationSchema: NewPlazaSchema,
-  });
-
-  const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
-
-  useEffect(() => {
-    console.info('use effect edit', props)
-  },[props])
-
-  // useEffect(() => {
-  //   if (puesto) {
-  //     setValues({
-  //       id: puesto.id,
-  //       nombrepuesto: puesto.nombrepuesto,
-  //       puestosuperior: puesto.puestosuperior,
-  //       aredepto: puesto.areadeptoplz_id,
-  //       fecha: new Date(puesto.create_day),
-  //       notas: puesto.notas,
-  //       tests : puesto.tests
-  //     })
-  //     setChecklist(puesto.tests.map(( {id} ) => id))
-  //   }
-  // }, [puesto, now, setValues])
+  console.log("RENDER", props)
 
   const changeTab = (_event, newValue) => {
     setTab(newValue);
@@ -157,135 +127,119 @@ function Edit(props) {
           <Tab label="Pruebas" />
         </Tabs>
 
-        <FormikProvider style={{ padding: 25 }} value={formik}>
-          <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-
-
-            <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>
-                    {
-                    testsCatalog ?
-                      testsCatalog.data.map( test => (
-                        <FormControlLabel 
-                          key={test.id}
-                          control={
-                          <Checkbox 
-                            checked={checklist.includes((test.id))}
-                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
-                            />
-                        } 
-                          label={test.nombre} 
-                          />
-                      )): null
-                  }
-                  </FormGroup>
-                </Box>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <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>
+                  {
+                  testsCatalog ?
+                    testsCatalog.data.map( test => (
+                      <FormControlLabel 
+                        label={test.nombre} 
+                        key={test.id}
+                        control={
+                        <Checkbox 
+                          checked={checklist.includes((test.id))}
+                          onChange={(event)=> addPrueba(event.target.checked,test.id)} /> } 
+                        />
+                    )): null
+                }
+                </FormGroup>
+              </Box>
+            </Stack>
+          </TabPanel>
+
+          <TabPanel value={tab} index={0} >
+            <Stack spacing={3}>
+
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                <TextField
+                  name="nombrepuesto"
+                  label="Nombre"
+                  fullWidth
+                  helperText={errors.nombrepuesto?.message}
+                  error={Boolean(errors?.nombrepuesto)}
+                  {...register("nombrepuesto")} />
+
+                <TextField
+                  name="puestosuperior"
+                  label="Puesto superior"
+                  fullWidth
+                  {...register("puestosuperior")} />
+
               </Stack>
-            </TabPanel>
-
-
-            <TabPanel value={tab} index={0} >
-              <Stack spacing={3}>
-
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                  <TextField
-                    label="Nombre"
-                    fullWidth
-                    {...getFieldProps('nombrepuesto')}
-                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                    helperText={touched.nombrepuesto && errors.nombrepuesto}
-                    />
-
-                  <TextField
-                    label="Puesto Superior"
-                    fullWidth
-                    {...getFieldProps('puestosuperior')}
-                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
-                    helperText={touched.puestosuperior && errors.puestosuperior}
-                    />
-
-                </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"
-                      fullWidth
-                      inputFormat="dd/MM/yyyy"
-                      {...getFieldProps('fecha')}
-                      xd
-                      value={date}
-                      onChange={setDate}
-                      renderInput={(params) =>
-                        <TextField
-                          disabled={true}
-                          label="Fecha Creación"
-                          fullWidth
-                          {...params}
-                          />}
-                      />
-                  </LocalizationProvider>
-
-                </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>
+
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                <FormControl fullWidth>
+                  <InputLabel>Departamento</InputLabel>
+                  <Controller
+                    name="aredepto"
+                    control={control}
+                    render={ ({field}) =>
+                      <Select {...field}>
+                        {
+                        categories ?
+                          categories.data.map(cate => {
+                            return (
+                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                            )
+                          })
+                          : <MenuItem value={1}>hola</MenuItem>
+                      }
+                      </Select>
+                  }>
+                  </Controller>
+                </FormControl>
+
+                <LocalizationProvider dateAdapter={DateFnsUtils}>
+                  <Controller
+                    name="fecha"
+                    control={control}
+                    render={({field}) => 
+                      <DesktopDatePicker
+                        {...field}
+                        label="Fecha Creación"
+                        fullWidth
+                        inputFormat="dd/MM/yyyy"
+                        renderInput={(params) => <TextField {...params} />}
+                        />
+                  } >
+                  </Controller>
+                </LocalizationProvider>
               </Stack>
-            </TabPanel>
 
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                <TextField
+                  name="notas"
+                  multiline
+                  rows={4}
+                  label="Notas"
+                  fullWidth
+                  type="text"
+                  {...register("notas")}
+                  />
+              </Stack>
+            </Stack>
+          </TabPanel>
 
-            <Modal.Footer>
-              <Button
-                type="submit"
-                className="registerBtn"
-                variant="contained"
-                sx={{ mt: 1, mr: 1 }} >
-                {'Actualizar'}
-              </Button>
-            </Modal.Footer>
+          <Modal.Footer>
+            <Button
+              type="submit"
+              className="registerBtn"
+              variant="contained"
+              sx={{ mt: 1, mr: 1 }} >
+              {'Actualizar'}
+            </Button>
+          </Modal.Footer>
+
+        </form>
 
-          </Form>
-        </FormikProvider>
       </Modal.Body>
       <Backdrop
         sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
@@ -299,5 +253,4 @@ function Edit(props) {
   )
 }
 
-
 export default memo(Edit);

src/Components/Navigation/MenuMovil.jsx

@@ -9,15 +9,14 @@ import {
     SwipeableDrawer
 } from '@mui/material/'
 
-import { useSelector } from 'react-redux';
+// import { useSelector } from 'react-redux';
 
 // import useAuth from '../../Auth/useAuth'
 
 export function MenuMovil(props) {
 
   let { anchor, control } = props;
-  const auth = useSelector((state) => state.token)
-  console.log(auth.token)
+  // const auth = useSelector((state) => state.token)
 
   return (
     <React.Fragment >

src/Pages/Puestos.jsx

@@ -88,6 +88,13 @@ export function Puestos() {
     }
   }, [edit, del, show])
 
+  if(isLoading){
+    return(
+      <Loading/>
+    )
+  }
+
+  /*
   if (isLoading) {
     return (
       <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
@@ -107,6 +114,7 @@ export function Puestos() {
       </Paper>
     )
   }
+    */
 
   const total_items = Divide(result.data).length
 

src/temp.js

@@ -0,0 +1,323 @@
+import React, { memo, useCallback, useMemo, useEffect } from 'react';
+import * as Yup from 'yup';
+// import { useFormik, Form, FormikProvider } from 'formik';
+import { Modal } from 'react-bootstrap'
+import toast, { Toaster } from 'react-hot-toast';
+import { useForm, Controller } from "react-hook-form";
+
+import DateFnsUtils from '@date-io/date-fns';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+import { TabPanel } from './TabPanel'
+
+import {
+    Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
+    Backdrop, CircularProgress,
+    Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
+} from '@mui/material';
+
+import { Service } from '../../Utils/HTTP';
+import { useSelector } from 'react-redux'
+import { useQuery, useMutation, useQueryClient } from 'react-query'
+
+const NewPlazaSchema = Yup.object().shape({
+  id: Yup.number(),
+  nombrepuesto:
+  Yup.string().required('El nombre es requerido')
+  .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
+  .max(100),
+  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).max(150),
+  tests: Yup.array()
+})
+
+
+
+function Edit(props) {
+
+  const { control,register, handleSubmit, watch, formState: { errors } } = useForm({
+    defaultValues: {
+      departamento: 1,
+    }
+  });
+
+  console.log(errors)
+
+  const onSubmit = data => console.log(data);
+  console.log(watch("departamento")); // watch input value by passing the name of it
+  //
+  const now = useMemo(() => new Date(), [])
+  const auth = useSelector((state) => state.token)
+  const queryClient = useQueryClient()
+  let { visible, toggle } = props
+
+  // const [departamento, setDepartamento] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+
+  // const changeDepartamento = useCallback((event) => {
+  //   setDepartamento(event.target.value);
+  // }, []);
+
+  const [date, setDate] = React.useState(now);
+  const [tab, setTab] = React.useState(0);
+  const [checklist, setChecklist] = React.useState([]);
+
+  const addPrueba = (check,id) => {
+    let { tests } = { tests : []}
+    let temp ;
+    if(check){
+      temp = [...tests, {id}]
+    }else{
+      temp = tests.filter( test => test.id !== id);
+    }
+    setChecklist(temp.map( test => test.id) )
+    // setValues({...values, tests: temp})
+  };
+
+  const getCategories = async () => {
+    let rest = new Service("/categoria/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const updatePuesto = async (fields) => {
+    let rest = new Service('/plaza/edit');
+    return rest.putQuery(fields, auth.token)
+  }
+
+  const getTest = async () => {
+    let rest = new Service("/tests/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const puestoMutation = useMutation(updatePuesto)
+
+  const close = () => toggle("EDIT", {id : null});
+
+  const { data: categories } = useQuery('categories', getCategories);
+  const { data: testsCatalog } = useQuery('tests', getTest);
+  /*
+  const formik = useFormik({
+    initialValues: {
+      id: 1,
+      nombrepuesto: "",
+      puestosuperior: 1,
+      aredepto: 1,
+      fecha: now,
+      notas: "",
+      tests : []
+    },
+    onSubmit: (fields, { resetForm }) => {
+      setOpen(true);
+      fields['fecha'] = new Date(fields.fecha).toISOString();
+
+      puestoMutation.mutate(fields, {
+        onSuccess: () => {
+          close();
+          setOpen(false)
+          toast.success("Puesto Actualizado!!")
+          queryClient.invalidateQueries('puestos')
+        },
+        onError:() => {
+          close();
+          setOpen(false)
+          toast.error("Lo sentimos ocurrió error inténtalo más tarde")
+        }
+      })
+
+      resetForm();
+    },
+    validationSchema: NewPlazaSchema,
+  });
+*/
+
+  // const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
+
+  useEffect(() => {
+    console.info('use effect edit', props)
+  },[props])
+
+  // useEffect(() => {
+  //   if (puesto) {
+  //     setValues({
+  //       id: puesto.id,
+  //       nombrepuesto: puesto.nombrepuesto,
+  //       puestosuperior: puesto.puestosuperior,
+  //       aredepto: puesto.areadeptoplz_id,
+  //       fecha: new Date(puesto.create_day),
+  //       notas: puesto.notas,
+  //       tests : puesto.tests
+  //     })
+  //     setChecklist(puesto.tests.map(( {id} ) => id))
+  //   }
+  // }, [puesto, now, setValues])
+
+  const changeTab = (_event, newValue) => {
+    setTab(newValue);
+  };
+
+  return (
+
+    <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
+      <Modal.Header>
+        <button onClick={close} type="button" className="close" data-dismiss="modal">&times;</button>
+        <h4 className="modal-title" style={{ color: '#252525' }}>Editar puesto</h4>
+      </Modal.Header>
+      <Modal.Body className="modal-body">
+
+        <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
+          <Tab label="Información" />
+          <Tab label="Pruebas" />
+        </Tabs>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <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>
+                    {
+                    testsCatalog ?
+                      testsCatalog.data.map( test => (
+                        <FormControlLabel 
+                          key={test.id}
+                          control={
+                          <Checkbox 
+                            checked={checklist.includes((test.id))}
+                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
+                            />
+                        } 
+                          label={test.nombre} 
+                          />
+                      )): null
+                  }
+                  </FormGroup>
+                </Box>
+              </Stack>
+            </TabPanel>
+
+
+            <TabPanel value={tab} index={0} >
+              <Stack spacing={3}>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                  <TextField
+                    label="Nombre"
+                    fullWidth
+                    {...register("nombre")}
+                    // {...getFieldProps('nombrepuesto')}
+                    // error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                    // helperText={touched.nombrepuesto && errors.nombrepuesto}
+                    />
+
+                  <TextField
+                    label="Puesto Superior"
+                    fullWidth
+                    {...register("puesto_superior")}
+                    //{...getFieldProps('puestosuperior')}
+                    //error={Boolean(touched.puestosuperior && errors.puestosuperior)}
+                    //helperText={touched.puestosuperior && errors.puestosuperior}
+                    />
+
+                </Stack>
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                  <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
+                    <Select
+                      {...register("departamento")}
+                      labelId="departamento"
+                      id="departamento"
+                      label="Departamento"
+                      name={"departamento"}
+                      constrol={control}
+                      value={1}
+                      //value={departamento}
+                      //{...getFieldProps('puestosuperior')}
+                      // onChange={changeDepartamento}
+                      // {...getFieldProps('aredepto')}
+                      // error={Boolean(touched.aredepto && errors.aredepto)} 
+                      >
+                      {
+                      categories ?
+                        categories.data.map(cate => {
+                          return (
+                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                          )
+                        })
+                        : <MenuItem value={1}>hola</MenuItem>
+                    }
+                    </Select>
+                  </FormControl>
+
+
+                  <LocalizationProvider
+                    dateAdapter={DateFnsUtils}>
+                    <DesktopDatePicker
+                      label="Fecha Creación"
+                      fullWidth
+                      inputFormat="dd/MM/yyyy"
+                      // {...getFieldProps('fecha')}
+                      {...register("fecha")}
+                      value={date}
+                      onChange={setDate}
+                      renderInput={(params) =>
+                        <TextField
+                          disabled={true}
+                          label="Fecha Creación"
+                          fullWidth
+                          {...params}
+                          />}
+                      />
+                  </LocalizationProvider>
+
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                  <TextField
+                    id="filled-multiline-static"
+                    multiline
+                    rows={4}
+                    variant="filled"
+                    label="Notas"
+                    fullWidth
+                    type="text"
+                    {...register("notas")}
+                    // {...getFieldProps('notas')}
+                    // error={Boolean(touched.notas && errors.notas)}
+                    // helperText={touched.notas && errors.notas}
+                    />
+                </Stack>
+              </Stack>
+            </TabPanel>
+
+
+            <Modal.Footer>
+              <Button
+                type="submit"
+                className="registerBtn"
+                variant="contained"
+                sx={{ mt: 1, mr: 1 }} >
+                {'Actualizar'}
+              </Button>
+            </Modal.Footer>
+
+          </form>
+
+      </Modal.Body>
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={() => console.log('backdrop')} >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <Toaster position="top-right" />
+
+    </Modal>
+  )
+}
+
+
+export default memo(Edit);