[ADD] formik and yum start config

psicoadmin/package-lock.json

@@ -18,13 +18,15 @@
         "@testing-library/user-event": "^12.1.10",
         "bootstrap": "^5.1.3",
         "date-fns": "^2.27.0",
+        "formik": "^2.2.9",
         "js-cookie": "^3.0.1",
         "react": "^17.0.2",
         "react-bootstrap": "^2.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.0.2",
         "react-scripts": "4.0.3",
-        "web-vitals": "^1.0.1"
+        "web-vitals": "^1.0.1",
+        "yup": "^0.32.11"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -3285,6 +3287,11 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -9850,6 +9857,42 @@
         "node": ">= 0.12"
       }
     },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -12665,6 +12708,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -13244,6 +13292,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "license": "MIT"
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "node_modules/nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -15732,6 +15785,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -16157,6 +16215,11 @@
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
       "license": "MIT"
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -19246,6 +19309,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "license": "MIT"
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -19354,6 +19422,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -21238,6 +21311,23 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     }
   },
   "dependencies": {
@@ -23485,6 +23575,11 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -28278,6 +28373,32 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -30264,6 +30385,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -30673,6 +30799,11 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -32462,6 +32593,11 @@
         }
       }
     },
+    "property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -32773,6 +32909,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -34998,6 +35139,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -35074,6 +35220,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -36467,6 +36618,20 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }

psicoadmin/package.json

@@ -13,13 +13,15 @@
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^5.1.3",
     "date-fns": "^2.27.0",
+    "formik": "^2.2.9",
     "js-cookie": "^3.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

psicoadmin/src/App.css

@@ -117,3 +117,9 @@
 .css-12jypm1-MuiToolbar-root {
     padding-left : 20px !important;
 }
+.error_feedback{
+    color: #2ec5d3;
+    font-weight :bold;
+    padding : 15px;
+    margin: 0px;
+}

psicoadmin/src/Components/Actividades.js

@@ -130,7 +130,7 @@ export default function Actividades() {
                                         value={value}
                                         onChange={handleChange}
                                         renderInput={(params) => 
-                                        <TextField variant="standard" label="Standard warning" {...params} />}
+                                        <TextField fullWidth={true} variant="standard" label="Standard warning" {...params} />}
                                     />
                                 </LocalizationProvider>
                             </Col>
@@ -142,7 +142,7 @@ export default function Actividades() {
                                         value={value}
                                         onChange={handleChange}
                                         renderInput={(params) => 
-                                        <TextField variant="standard" label="Standard warning" {...params} />}
+                                        <TextField fullWidth={true} variant="standard" label="Standard warning" {...params} />}
                                     />
                                 </LocalizationProvider>
                             </Col>

psicoadmin/src/Components/FileInput.js

@@ -0,0 +1,138 @@
+import React, { Component } from "react";
+import {  Typography, Icon, Avatar, withStyles  } from '@mui/material/'
+import classnames from "classnames";
+
+
+class CustomImageInput extends Component {
+    constructor(props) {
+        super(props);
+        this.fileUpload = React.createRef();
+        this.showFileUpload = this.showFileUpload.bind(this);
+        this.handleImageChange = this.handleImageChange.bind(this);
+    }
+
+    state = {
+        file: undefined,
+        imagePreviewUrl: undefined
+    };
+
+    showFileUpload() {
+        if (this.fileUpload) {
+            this.fileUpload.current.click();
+        }
+    }
+
+    handleImageChange(e) {
+        e.preventDefault();
+        let reader = new FileReader();
+        let file = e.target.files[0];
+        if (file) {
+            reader.onloadend = () => {
+                this.setState({
+                    file: file,
+                    imagePreviewUrl: reader.result
+                });
+            };
+            reader.readAsDataURL(file);
+            this.props.setFieldValue(this.props.field.name, file);
+        }
+    }
+
+    showPreloadImage() {
+        const { errorMessage, classes } = this.props;
+        const { file, imagePreviewUrl } = this.state;
+
+        let comp = null;
+
+        if (errorMessage) {
+            comp = <Icon style={{ fontSize: 36 }}>error_outline</Icon>;
+        } else if (file) {
+            comp = (
+                <img className={classes.avatarThumb} src={imagePreviewUrl} alt="..." />
+            );
+        } else {
+            comp = <Icon style={{ fontSize: 36 }}>folder</Icon>;
+        }
+        return comp;
+    }
+
+    componentDidMount() {
+        console.log(this.fileUpload.current);
+    }
+
+    render() {
+        const { errorMessage, title, classes } = this.props;
+        const { name, onBlur } = this.props.field;
+
+        const avatarStyle = classnames(
+            classes.bigAvatar,
+            this.state.file ? [classes.whiteBack] : [classes.primaryBack],
+            { [classes.errorBack]: errorMessage }
+        );
+
+        return (
+            <div className={classes.container}>
+                <input
+                    className={classes.hidden}
+                    id={name}
+                    name={name}
+                    type="file"
+                    onChange={this.handleImageChange}
+                    ref={this.fileUpload}
+                    onBlur={onBlur}
+                    //className="form-control"
+                />
+                <Typography className={classes.title} variant="h5">
+                    {title}
+                </Typography>
+                <Avatar className={avatarStyle} onClick={this.showFileUpload}>
+                    {this.showPreloadImage()}
+                </Avatar>
+
+                {errorMessage ? (
+                    <Typography variant="caption" color="error">
+                        {errorMessage}
+                    </Typography>
+                ) : null}
+            </div>
+        );
+    }
+}
+
+const customImageInputStyle = theme => ({
+    hidden: { display: "none" },
+
+    container: {
+        margin: "auto"
+    },
+    title: {
+        margin: "auto",
+        display: "flex",
+        justifyContent: "center",
+        //fontFamily: 'Roboto Slab',
+        //fontWeight:'bold',
+        padding: theme.spacing.unit
+    },
+    bigAvatar: {
+        margin: "auto",
+        width: 80,
+        height: 80,
+        borderColor: theme.palette.primary.main,
+        borderStyle: "solid",
+        borderSize: "1px"
+    },
+    avatarThumb: {
+        maxWidth: 80,
+        maxHeight: 80
+    },
+    primaryBack: {
+        background: theme.palette.primary.main
+    },
+    whiteBack: {
+        background: "white"
+    },
+
+    errorBack: { background: theme.palette.error.main }
+});
+
+export default withStyles(customImageInputStyle)(CustomImageInput);

psicoadmin/src/Css/all.css

@@ -215,7 +215,7 @@ a.article:hover {
 }
 .content-section {
     background-color : #f1f1f1;
-    padding: 70px 15px;
+    padding: 70px 50px;
 }
 .nav-item a i{
     color: #212529;
@@ -1853,7 +1853,7 @@ li.cabecera_li {
 }
 .filtros_history .col-md-4 input {
     width: 100%;
-    border: 1px solid #eceff1;
+    /*border: 1px solid #eceff1*/
     font-size: 14px;
     padding: 1px 10px;
 }

psicoadmin/src/Pages/Puestos.js

@@ -1,7 +1,8 @@
 import React, {  } from 'react';
 import { Row, Col, Modal, Button, Table } from 'react-bootstrap'
-import { Box, Typography, Button as MuiButton, ListItem, withStyles } from '@mui/material';
-
+import { Box } from '@mui/material';
+import { Formik, Field, Form } from 'formik';
+import * as Yup from 'yup';
 
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -13,12 +14,13 @@ import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
 import EditIcon from '@mui/icons-material/Edit';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 
-///import { makeStyles, useTheme } from "@material-ui/core/styles";
-import { makeStyles, useTheme } from "@mui/material/styles";
-import TextField from "@mui/material/TextField";
-import ButtonBase from "@mui/material/ButtonBase";
-
 import NotFound from '../Images/not_found.png';
+
+const NewPlazaSchema = Yup.object().shape({
+    nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
+    description : Yup.string().required('La description es requerida').min(5).max(20),
+    salario : Yup.number().required('El salario es requerido')
+})
     
 let data = [{
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
@@ -35,7 +37,7 @@ function* idMaker() {
 
 var ID = idMaker(); // "Generator { }"
 
-for ( var _ of new Array(23) ){
+for ( var _ of new Array(46) ){
     data.push({
         ...data[0],
         id : ID.next().value,
@@ -66,7 +68,7 @@ function ListMode() {
 
                         {
                             data.length ? 
-                                data.map( (plaza, i) => {
+                                data.slice(0,23).map( (plaza, i) => {
                                     return (
                                         <tr key={plaza.id}>
                                             <td className="text-center">{ plaza.nombre }</td>
@@ -118,7 +120,7 @@ function GridMode () {
         <React.Fragment> 
             {
                 data.length ? 
-                data.map( plaza => {
+                data.slice(23).map( plaza => {
                     return(
                         <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
                             <div className="panel">
@@ -134,7 +136,7 @@ function GridMode () {
                                             <p>{ plaza.description }</p>
                                             <p>{ plaza.salario }</p>
                                         </div>
-                                        <div class="btn_interactivos">
+                                        <div className="btn_interactivos">
                                             { buttons }
                                         </div>
                                     </Col>
@@ -166,11 +168,12 @@ function Manual ( props ) {
     // to handle the user-selected file 
     const handleChange = event => {
         const fileUploaded = event.target.files[0];
-        console.log( "FILE >> ", fileUploaded )
+        // console.log( "FILE >> ", fileUploaded )
         setFilename( fileUploaded.name )
         //props.handleFile(fileUploaded);
     };
 
+    const validateEmail = (value) => value === "Edgar";
 
     return (
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
@@ -179,47 +182,85 @@ function Manual ( props ) {
                 <h4 className="modal-title">Agregar plaza</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
-                <Row>
-                    <Col md="4">
-                        <div className="img-container">
-                            <img alt="agregar plaza manual" src={NotFound}/>
-                        </div>
-                    </Col>
-                    <Col md="8">
-
-                        <input 
-                            value={ filename ? filename : "" } 
-                            type="text" 
-                            class="file-upload-input" 
-                            disabled="" 
-                            placeholder="Ningún archivo seleccionado"/>
-
-                        <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={handleClick}>
-                            SUBIR FOTO
-                        </Button>
-                        <input
-                            type="file"
-                            ref={hiddenFileInput}
-                            onChange={handleChange}
-                            style={{display: 'none'}}
-                        />
 
-                    </Col>
-                </Row>
-                <div className="data_product">
-                    <Row>
-                        <Col md="12">
-                            <input type="text" name="nombre" placeholder="Nombre de la plaza"/>
-                            <textarea placeholder="Descripción general de la plaza"></textarea>
-                            <input type="number" name="salario" placeholder="Salario"/>
-                        </Col>
-                        <div className="add_producto_confirm">
-                            <div className="btn_add_producto_confirm">
-                                <span type="submit">Agregar plaza</span>
+                <Formik
+                    initialValues={{
+                        nombre: '',
+                        description: '',
+                        salario: '',
+                    }}
+                    validationSchema={NewPlazaSchema}
+                    onSubmit={async (values) => {
+                        console.log('VALUES >> ',values)
+                    }} >
+
+
+                    { ({  errors, touched, validateField, validateForm }) => (
+                        <Form>
+                            <Row>
+
+                                <Col md="4">
+                                    <div className="img-container">
+                                        <img alt="agregar plaza manual" src={NotFound}/>
+                                    </div>
+                                </Col>
+
+                                <Col md="8">
+
+                                    <input 
+                                        value={ filename ? filename : "" } 
+                                        type="text" 
+                                        className="file-upload-input" 
+                                        disabled="" 
+                                        placeholder="Ningún archivo seleccionado"/>
+
+                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={handleClick}>
+                                        SUBIR FOTO
+                                    </Button>
+
+                                    <input
+                                        type="file"
+                                        ref={hiddenFileInput}
+                                        onChange={handleChange}
+                                        style={{display: 'none'}}
+                                    />
+
+                                </Col>
+
+                            </Row>
+                            <div className="data_product">
+                                <Row>
+                                    <Col md="12">
+
+                                        {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
+                                        <Field name="nombre" placeholder="Nombre de la plaza" validate={validateEmail}/>
+
+                                        {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
+                                        <Field name="description">
+                                            {({ field, form, meta }) => {
+                                                return(
+                                                    <textarea id="description" name="description" defaultValue="" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
+                                                )
+                                            }}
+                                        </Field>
+
+                                        {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
+                                        <Field name="salario" type="number" name="salario" placeholder="Salario"/>
+
+
+                                    </Col>
+                                    <div className="add_producto_confirm">
+                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
+                                    </div>
+                                </Row>
                             </div>
-                        </div>
-                    </Row>
-                </div>
+                        </Form>
+                    )}
+
+
+
+
+                </Formik>
             </Modal.Body>
         </Modal>
     )

psicoadmin/yarn.lock

@@ -1131,7 +1131,7 @@
     "core-js-pure" "^3.0.0"
     "regenerator-runtime" "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   "integrity" "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz"
   "version" "7.16.3"
@@ -2107,6 +2107,11 @@
   "resolved" "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   "version" "0.0.29"
 
+"@types/lodash@^4.14.175":
+  "integrity" "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+  "resolved" "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz"
+  "version" "4.14.178"
+
 "@types/minimatch@*":
   "integrity" "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
   "resolved" "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz"
@@ -4453,6 +4458,11 @@
   "resolved" "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
   "version" "0.1.3"
 
+"deepmerge@^2.1.1":
+  "integrity" "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+  "resolved" "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz"
+  "version" "2.2.1"
+
 "deepmerge@^4.2.2":
   "integrity" "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
   "resolved" "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
@@ -5615,6 +5625,19 @@
     "combined-stream" "^1.0.6"
     "mime-types" "^2.1.12"
 
+"formik@^2.2.9":
+  "integrity" "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA=="
+  "resolved" "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz"
+  "version" "2.2.9"
+  dependencies:
+    "deepmerge" "^2.1.1"
+    "hoist-non-react-statics" "^3.3.0"
+    "lodash" "^4.17.21"
+    "lodash-es" "^4.17.21"
+    "react-fast-compare" "^2.0.1"
+    "tiny-warning" "^1.0.2"
+    "tslib" "^1.10.0"
+
 "forwarded@~0.1.2":
   "integrity" "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
   "resolved" "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz"
@@ -5982,7 +6005,7 @@
     "minimalistic-assert" "^1.0.0"
     "minimalistic-crypto-utils" "^1.0.1"
 
-"hoist-non-react-statics@^3.3.1", "hoist-non-react-statics@^3.3.2":
+"hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.1", "hoist-non-react-statics@^3.3.2":
   "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
   "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   "version" "3.3.2"
@@ -7529,6 +7552,11 @@
   dependencies:
     "p-locate" "^4.1.0"
 
+"lodash-es@^4.17.21":
+  "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+  "resolved" "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  "version" "4.17.21"
+
 "lodash._reinterpolate@^3.0.0":
   "integrity" "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
   "resolved" "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
@@ -7564,7 +7592,7 @@
   "resolved" "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   "version" "4.5.0"
 
-"lodash@^4.17.11", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.17.19", "lodash@^4.17.20", "lodash@^4.17.5", "lodash@>=3.5 <5":
+"lodash@^4.17.11", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.17.19", "lodash@^4.17.20", "lodash@^4.17.21", "lodash@^4.17.5", "lodash@>=3.5 <5":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
@@ -7953,6 +7981,11 @@
     "dns-packet" "^1.3.1"
     "thunky" "^1.0.2"
 
+"nanoclone@^0.2.1":
+  "integrity" "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+  "resolved" "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz"
+  "version" "0.2.1"
+
 "nanoid@^3.1.20":
   "integrity" "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz"
@@ -9467,6 +9500,11 @@
     "object-assign" "^4.1.1"
     "react-is" "^16.8.1"
 
+"property-expr@^2.0.4":
+  "integrity" "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+  "resolved" "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz"
+  "version" "2.0.4"
+
 "proxy-addr@~2.0.5":
   "integrity" "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw=="
   "resolved" "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz"
@@ -9701,6 +9739,11 @@
   "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   "version" "6.0.9"
 
+"react-fast-compare@^2.0.1":
+  "integrity" "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+  "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
+  "version" "2.0.4"
+
 "react-is@^16.3.2":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -11321,6 +11364,11 @@
   "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   "version" "0.3.0"
 
+"tiny-warning@^1.0.2":
+  "integrity" "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+  "resolved" "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
+  "version" "1.0.3"
+
 "tmpl@1.0.x":
   "integrity" "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
   "resolved" "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"
@@ -11373,6 +11421,11 @@
   "resolved" "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
   "version" "1.0.0"
 
+"toposort@^2.0.2":
+  "integrity" "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+  "resolved" "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz"
+  "version" "2.0.2"
+
 "tough-cookie@^2.3.3", "tough-cookie@~2.5.0":
   "integrity" "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g=="
   "resolved" "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"
@@ -11417,6 +11470,11 @@
     "minimist" "^1.2.0"
     "strip-bom" "^3.0.0"
 
+"tslib@^1.10.0":
+  "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+  "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  "version" "1.14.1"
+
 "tslib@^1.8.1":
   "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -12328,3 +12386,16 @@
   "integrity" "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
   "resolved" "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   "version" "0.1.0"
+
+"yup@^0.32.11":
+  "integrity" "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg=="
+  "resolved" "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz"
+  "version" "0.32.11"
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    "lodash" "^4.17.21"
+    "lodash-es" "^4.17.21"
+    "nanoclone" "^0.2.1"
+    "property-expr" "^2.0.4"
+    "toposort" "^2.0.2"