Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
30 kB
6
Indexable
import React, { useState, useEffect } from "react";
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import { Link } from "react-router-dom";
import CircularProgress from '@material-ui/core/CircularProgress';
import { useBeforeunload } from 'react-beforeunload';
import { Insurances } from '../../constants/Insurances'

const NewPatient = () => {

    const [loading, setLoading] = useState(false);
    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
    const [email, setEmail] = useState('');
    const [phone, setPhone] = useState('');
    const [address, setAddress] = useState('');
    const [zip, setZip] = (useState)('');
    const [street, setStreet] = useState('');
    const [city, setCity] = useState('');
    const [state, setState] = useState(' ')
    const [birth, setBirth] = useState('');
    const [notes, setNotes] = useState('');
    const [gender, setGender] = useState('');
    const [insurance, setInsurance] = useState([]);
    const [selectedInsurence, setSelectedInsurance] = useState('');
    const [praxis, setBranch] = useState('');
    const [doctor, setDoctor] = useState('');
    const [relationship, setRelation] = useState('');
    const [relation, setRelationship] = useState([]);
    const [doctors, setDoctors] = useState([]);

    const genders = [{ "id": "Male", "value": "Male" }, { "id": "Female", "value": "Female" }, { "id": "Other", "value": "Other" },];
    const branches = [{ "id": 0, "value": "First Branch" }, { "id": 1, "value": "Second Branch" }, { "id": 2, "value": "Third Branch" }, { "id": 3, "value": "Fourth Branch" },];
    const countrys = [
        { "name": "Albania", "code": "AL" },
        { "name": "Åland Islands", "code": "AX" },
        { "name": "Algeria", "code": "DZ" },
        { "name": "American Samoa", "code": "AS" },
        { "name": "Andorra", "code": "AD" },
        { "name": "Angola", "code": "AO" },
        { "name": "Anguilla", "code": "AI" },
        { "name": "Antarctica", "code": "AQ" },
        { "name": "Antigua and Barbuda", "code": "AG" },
        { "name": "Argentina", "code": "AR" },
        { "name": "Armenia", "code": "AM" },
        { "name": "Aruba", "code": "AW" },
        { "name": "Australia", "code": "AU" },
        { "name": "Austria", "code": "AT" },
        { "name": "Azerbaijan", "code": "AZ" },
        { "name": "Bahamas (the)", "code": "BS" },
        { "name": "Bahrain", "code": "BH" },
        { "name": "Bangladesh", "code": "BD" },
        { "name": "Barbados", "code": "BB" },
        { "name": "Belarus", "code": "BY" },
        { "name": "Belgium", "code": "BE" },
        { "name": "Belize", "code": "BZ" },
        { "name": "Benin", "code": "BJ" },
        { "name": "Bermuda", "code": "BM" },
        { "name": "Bhutan", "code": "BT" },
        { "name": "Bolivia (Plurinational State of)", "code": "BO" },
        { "name": "Bonaire, Sint Eustatius and Saba", "code": "BQ" },
        { "name": "Bosnia and Herzegovina", "code": "BA" },
        { "name": "Botswana", "code": "BW" },
        { "name": "Bouvet Island", "code": "BV" },
        { "name": "Brazil", "code": "BR" },
        { "name": "British Indian Ocean Territory (the)", "code": "IO" },
        { "name": "Brunei Darussalam", "code": "BN" },
        { "name": "Bulgaria", "code": "BG" },
        { "name": "Burkina Faso", "code": "BF" },
        { "name": "Burundi", "code": "BI" },
        { "name": "Cabo Verde", "code": "CV" },
        { "name": "Cambodia", "code": "KH" },
        { "name": "Cameroon", "code": "CM" },
        { "name": "Canada", "code": "CA" },
        { "name": "Cayman Islands (the)", "code": "KY" },
        { "name": "Central African Republic (the)", "code": "CF" },
        { "name": "Chad", "code": "TD" },
        { "name": "Chile", "code": "CL" },
        { "name": "China", "code": "CN" },
        { "name": "Christmas Island", "code": "CX" },
        { "name": "Cocos (Keeling) Islands (the)", "code": "CC" },
        { "name": "Colombia", "code": "CO" },
        { "name": "Comoros (the)", "code": "KM" },
        { "name": "Congo (the Democratic Republic of the)", "code": "CD" },
        { "name": "Congo (the)", "code": "CG" },
        { "name": "Cook Islands (the)", "code": "CK" },
        { "name": "Costa Rica", "code": "CR" },
        { "name": "Croatia", "code": "HR" },
        { "name": "Cuba", "code": "CU" },
        { "name": "Curaçao", "code": "CW" },
        { "name": "Cyprus", "code": "CY" },
        { "name": "Czechia", "code": "CZ" },
        { "name": "Côte d'Ivoire", "code": "CI" },
        { "name": "Denmark", "code": "DK" },
        { "name": "Djibouti", "code": "DJ" },
        { "name": "Dominica", "code": "DM" },
        { "name": "Dominican Republic (the)", "code": "DO" },
        { "name": "Ecuador", "code": "EC" },
        { "name": "Egypt", "code": "EG" },
        { "name": "El Salvador", "code": "SV" },
        { "name": "Equatorial Guinea", "code": "GQ" },
        { "name": "Eritrea", "code": "ER" },
        { "name": "Estonia", "code": "EE" },
        { "name": "Eswatini", "code": "SZ" },
        { "name": "Ethiopia", "code": "ET" },
        { "name": "Falkland Islands (the) [Malvinas]", "code": "FK" },
        { "name": "Faroe Islands (the)", "code": "FO" },
        { "name": "Fiji", "code": "FJ" },
        { "name": "Finland", "code": "FI" },
        { "name": "France", "code": "FR" },
        { "name": "French Guiana", "code": "GF" },
        { "name": "French Polynesia", "code": "PF" },
        { "name": "French Southern Territories (the)", "code": "TF" },
        { "name": "Gabon", "code": "GA" },
        { "name": "Gambia (the)", "code": "GM" },
        { "name": "Georgia", "code": "GE" },
        { "name": "Germany", "code": "DE" },
        { "name": "Ghana", "code": "GH" },
        { "name": "Gibraltar", "code": "GI" },
        { "name": "Greece", "code": "GR" },
        { "name": "Greenland", "code": "GL" },
        { "name": "Grenada", "code": "GD" },
        { "name": "Guadeloupe", "code": "GP" },
        { "name": "Guam", "code": "GU" },
        { "name": "Guatemala", "code": "GT" },
        { "name": "Guernsey", "code": "GG" },
        { "name": "Guinea", "code": "GN" },
        { "name": "Guinea-Bissau", "code": "GW" },
        { "name": "Guyana", "code": "GY" },
        { "name": "Haiti", "code": "HT" },
        { "name": "Heard Island and McDonald Islands", "code": "HM" },
        { "name": "Holy See (the)", "code": "VA" },
        { "name": "Honduras", "code": "HN" },
        { "name": "Hong Kong", "code": "HK" },
        { "name": "Hungary", "code": "HU" },
        { "name": "Iceland", "code": "IS" },
        { "name": "India", "code": "IN" },
        { "name": "Indonesia", "code": "ID" },
        { "name": "Iran (Islamic Republic of)", "code": "IR" },
        { "name": "Iraq", "code": "IQ" },
        { "name": "Ireland", "code": "IE" },
        { "name": "Isle of Man", "code": "IM" },
        { "name": "Israel", "code": "IL" },
        { "name": "Italy", "code": "IT" },
        { "name": "Jamaica", "code": "JM" },
        { "name": "Japan", "code": "JP" },
        { "name": "Jersey", "code": "JE" },
        { "name": "Jordan", "code": "JO" },
        { "name": "Kazakhstan", "code": "KZ" },
        { "name": "Kenya", "code": "KE" },
        { "name": "Kiribati", "code": "KI" },
        { "name": "Korea (the Democratic People's Republic of)", "code": "KP" },
        { "name": "Korea (the Republic of)", "code": "KR" },
        { "name": "Kuwait", "code": "KW" },
        { "name": "Kyrgyzstan", "code": "KG" },
        { "name": "Lao People's Democratic Republic (the)", "code": "LA" },
        { "name": "Latvia", "code": "LV" },
        { "name": "Lebanon", "code": "LB" },
        { "name": "Lesotho", "code": "LS" },
        { "name": "Liberia", "code": "LR" },
        { "name": "Libya", "code": "LY" },
        { "name": "Liechtenstein", "code": "LI" },
        { "name": "Lithuania", "code": "LT" },
        { "name": "Luxembourg", "code": "LU" },
        { "name": "Macao", "code": "MO" },
        { "name": "Madagascar", "code": "MG" },
        { "name": "Malawi", "code": "MW" },
        { "name": "Malaysia", "code": "MY" },
        { "name": "Maldives", "code": "MV" },
        { "name": "Mali", "code": "ML" },
        { "name": "Malta", "code": "MT" },
        { "name": "Marshall Islands (the)", "code": "MH" },
        { "name": "Martinique", "code": "MQ" },
        { "name": "Mauritania", "code": "MR" },
        { "name": "Mauritius", "code": "MU" },
        { "name": "Mayotte", "code": "YT" },
        { "name": "Mexico", "code": "MX" },
        { "name": "Micronesia (Federated States of)", "code": "FM" },
        { "name": "Moldova (the Republic of)", "code": "MD" },
        { "name": "Monaco", "code": "MC" },
        { "name": "Mongolia", "code": "MN" },
        { "name": "Montenegro", "code": "ME" },
        { "name": "Montserrat", "code": "MS" },
        { "name": "Morocco", "code": "MA" },
        { "name": "Mozambique", "code": "MZ" },
        { "name": "Myanmar", "code": "MM" },
        { "name": "Namibia", "code": "NA" },
        { "name": "Nauru", "code": "NR" },
        { "name": "Nepal", "code": "NP" },
        { "name": "Netherlands (the)", "code": "NL" },
        { "name": "New Caledonia", "code": "NC" },
        { "name": "New Zealand", "code": "NZ" },
        { "name": "Nicaragua", "code": "NI" },
        { "name": "Niger (the)", "code": "NE" },
        { "name": "Nigeria", "code": "NG" },
        { "name": "Niue", "code": "NU" },
        { "name": "Norfolk Island", "code": "NF" },
        { "name": "Northern Mariana Islands (the)", "code": "MP" },
        { "name": "Norway", "code": "NO" },
        { "name": "Oman", "code": "OM" },
        { "name": "Pakistan", "code": "PK" },
        { "name": "Palau", "code": "PW" },
        { "name": "Palestine, State of", "code": "PS" },
        { "name": "Panama", "code": "PA" },
        { "name": "Papua New Guinea", "code": "PG" },
        { "name": "Paraguay", "code": "PY" },
        { "name": "Peru", "code": "PE" },
        { "name": "Philippines (the)", "code": "PH" },
        { "name": "Pitcairn", "code": "PN" },
        { "name": "Poland", "code": "PL" },
        { "name": "Portugal", "code": "PT" },
        { "name": "Puerto Rico", "code": "PR" },
        { "name": "Qatar", "code": "QA" },
        { "name": "Republic of North Macedonia", "code": "MK" },
        { "name": "Romania", "code": "RO" },
        { "name": "Russian Federation (the)", "code": "RU" },
        { "name": "Rwanda", "code": "RW" },
        { "name": "Réunion", "code": "RE" },
        { "name": "Saint Barthélemy", "code": "BL" },
        { "name": "Saint Helena, Ascension and Tristan da Cunha", "code": "SH" },
        { "name": "Saint Kitts and Nevis", "code": "KN" },
        { "name": "Saint Lucia", "code": "LC" },
        { "name": "Saint Martin (French part)", "code": "MF" },
        { "name": "Saint Pierre and Miquelon", "code": "PM" },
        { "name": "Saint Vincent and the Grenadines", "code": "VC" },
        { "name": "Samoa", "code": "WS" },
        { "name": "San Marino", "code": "SM" },
        { "name": "Sao Tome and Principe", "code": "ST" },
        { "name": "Saudi Arabia", "code": "SA" },
        { "name": "Senegal", "code": "SN" },
        { "name": "Serbia", "code": "RS" },
        { "name": "Seychelles", "code": "SC" },
        { "name": "Sierra Leone", "code": "SL" },
        { "name": "Singapore", "code": "SG" },
        { "name": "Sint Maarten (Dutch part)", "code": "SX" },
        { "name": "Slovakia", "code": "SK" },
        { "name": "Slovenia", "code": "SI" },
        { "name": "Solomon Islands", "code": "SB" },
        { "name": "Somalia", "code": "SO" },
        { "name": "South Africa", "code": "ZA" },
        { "name": "South Georgia and the South Sandwich Islands", "code": "GS" },
        { "name": "South Sudan", "code": "SS" },
        { "name": "Spain", "code": "ES" },
        { "name": "Sri Lanka", "code": "LK" },
        { "name": "Sudan (the)", "code": "SD" },
        { "name": "Suriname", "code": "SR" },
        { "name": "Svalbard and Jan Mayen", "code": "SJ" },
        { "name": "Sweden", "code": "SE" },
        { "name": "Switzerland", "code": "CH" },
        { "name": "Syrian Arab Republic", "code": "SY" },
        { "name": "Taiwan (Province of China)", "code": "TW" },
        { "name": "Tajikistan", "code": "TJ" },
        { "name": "Tanzania, United Republic of", "code": "TZ" },
        { "name": "Thailand", "code": "TH" },
        { "name": "Timor-Leste", "code": "TL" },
        { "name": "Togo", "code": "TG" },
        { "name": "Tokelau", "code": "TK" },
        { "name": "Tonga", "code": "TO" },
        { "name": "Trinidad and Tobago", "code": "TT" },
        { "name": "Tunisia", "code": "TN" },
        { "name": "Turkey", "code": "TR" },
        { "name": "Turkmenistan", "code": "TM" },
        { "name": "Turks and Caicos Islands (the)", "code": "TC" },
        { "name": "Tuvalu", "code": "TV" },
        { "name": "Uganda", "code": "UG" },
        { "name": "Ukraine", "code": "UA" },
        { "name": "United Arab Emirates (the)", "code": "AE" },
        { "name": "United Kingdom of Great Britain and Northern Ireland (the)", "code": "GB" },
        { "name": "United States Minor Outlying Islands (the)", "code": "UM" },
        { "name": "United States of America (the)", "code": "US" },
        { "name": "Uruguay", "code": "UY" },
        { "name": "Uzbekistan", "code": "UZ" },
        { "name": "Vanuatu", "code": "VU" },
        { "name": "Venezuela (Bolivarian Republic of)", "code": "VE" },
        { "name": "Viet Nam", "code": "VN" },
        { "name": "Virgin Islands (British)", "code": "VG" },
        { "name": "Virgin Islands (U.S.)", "code": "VI" },
        { "name": "Wallis and Futuna", "code": "WF" },
        { "name": "Western Sahara", "code": "EH" },
        { "name": "Yemen", "code": "YE" },
        { "name": "Zambia", "code": "ZM" },
        { "name": "Zimbabwe", "code": "ZW" }
    ]

    const fetchDataDoctors = async () => {
        var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }

        const res = await fetch(
            process.env.REACT_APP_API_URL + '/citations/getDoctors', requestOptions
        );
        const json = await res.json();
        setDoctors(json.clinicDoctors);
    };

    const fetchDataPatients = async () => {
        var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }
        const res = await fetch(
            process.env.REACT_APP_API_URL + '/citations/getPatients', requestOptions
        );
        const json = await res.json();

        setRelationship(json['clinicPatients']);
    };

    useEffect(() => {
        const fetchDataInsurances = async () => {
            var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }
            const res = await fetch(
                process.env.REACT_APP_API_URL + '/insurances/index', requestOptions
            );
            const json = await res.json();

            console.log('INSURANCES: ', json)

            setInsurance(json['insurances']);
        };
        fetchDataDoctors();
        fetchDataPatients();
        fetchDataInsurances();
    }, []);

    // Handle autocomplete for relationship

    const handleRelationChange = (e, value) => {

        var fieldValue = value;
        if (!fieldValue) {
            fieldValue = null;
        } else
            setRelation(value.id)

    }

    const handleDoctorChange = (e, value) => {

        var fieldValue = value;
        if (!fieldValue) {
            fieldValue = null;
        } else
            setDoctor(value.id)

    }

    const handleCountryChange = (e, value) => {

        var fieldValue = value;
        if (!fieldValue) {
            fieldValue = null;
        } else
            setAddress(value.name)

    }

    const handleInsurance = (e, value) => {
        var fieldValue = value;
        
        if (!fieldValue) {
            fieldValue = null;
        } else {
            setSelectedInsurance(value.id)
        }
    }

    useBeforeunload((event) => {
        if (loading !== true) {
            event.preventDefault();
        }

    });
    // Post method 
    const handleSubmit = (e) => {
        setLoading(true);
        e.preventDefault();
        const patient = { firstname, lastname, email, phone, address, zip, street, city, state, birth, notes, gender, insurance: selectedInsurence, praxis, relationship, doctor };
        fetch(process.env.REACT_APP_API_URL + '/patients/create', {

            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "api-key": process.env.REACT_APP_API_KEY
            },
            body: JSON.stringify(patient)

        }).then(() => {
            window.location.href = "/patients";
        })
    }

    return (
        <>

            <div className="frame">
                <h4 className="main-title mt-2">New Patient</h4>
                <div className="patients-table">

                    <form onSubmit={handleSubmit} className="row">
                        <div className="col-5">

                            <div className="form-group">
                                <label htmlFor="firstname" className="title-inputs">First Name</label>
                                <br />
                                <br />
                                <TextField
                                    required
                                    type="text"
                                    value={firstname}
                                    onChange={(e) => setFirstname(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="firstname" className="title-inputs">Last Name</label>
                                <br />
                                <br />
                                <TextField
                                    required
                                    type="text"
                                    value={lastname}
                                    onChange={(e) => setLastname(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="email" className="title-inputs">Email</label>
                                <br />
                                <br />
                                <TextField
                                    required
                                    type="text"
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="phone" className="title-inputs">Phone</label>
                                <br />
                                <br />
                                <TextField
                                    required
                                    type="text"
                                    value={phone}
                                    onChange={(e) => setPhone(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="gender" className="title-inputs">Country</label>
                                <br />
                                <Autocomplete
                                    noOptionsText={'Not Found'}
                                    options={countrys}
                                    onChange={(e, value) => handleCountryChange(e, value)}
                                    getOptionLabel={(option) => option.name}
                                    renderInput={(params) => <TextField {...params} required />}
                                    style={{ width: '100%' }}
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="address" className="title-inputs">State</label>
                                <br />
                                <br />
                                <TextField

                                    type="text"
                                    value={state}
                                    onChange={(e) => setState(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                            <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 0.5fr' }}>
                                <div className="form-group" style={{ paddingRight: '5px' }}>
                                    <label htmlFor="address" className="title-inputs">City</label>
                                    <br />
                                    <br />
                                    <TextField
                                        required
                                        type="text"
                                        value={city}
                                        onChange={(e) => setCity(e.target.value)}
                                        className="input-control"
                                        variant="outlined"
                                        size="small"
                                    />
                                </div>

                                <div className="form-group" style={{ paddingLeft: '5px' }}>
                                    <label htmlFor="address" className="title-inputs">Zip</label>
                                    <br />
                                    <br />
                                    <TextField
                                        required
                                        type="text"
                                        value={zip}
                                        onChange={(e) => setZip(e.target.value)}
                                        className="input-control"
                                        variant="outlined"
                                        size="small"
                                    />
                                </div>
                            </div>


                            <div className="form-group">
                                <label htmlFor="address" className="title-inputs">Street</label>
                                <br />
                                <br />
                                <TextField
                                    required
                                    type="text"
                                    value={street}
                                    onChange={(e) => setStreet(e.target.value)}
                                    className="input-control"
                                    variant="outlined"
                                    size="small"
                                />
                            </div>

                        </div>

                        <div className="col-5">

                            <div className="form-group mt-4">
                                <label htmlFor="notes" className="title-inputs">Relationship</label>
                                <br />
                                <Autocomplete
                                    noOptionsText={'Patient not found'}
                                    options={relation}
                                    onChange={(e, value) => handleRelationChange(e, value)}
                                    getOptionLabel={(option) => (option['lastname'] + ', ' + option['firstname'])}
                                    inputValue={relation['id']}
                                    renderInput={(params) => <TextField {...params} />}
                                    style={{ width: '100%' }}
                                />
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="gender" className="title-inputs">Gender</label>
                                <br />
                                <Select
                                    required
                                    type="text"
                                    onChange={(e) => setGender(e.target.value)}
                                    style={{ width: '100%' }}
                                    defaultValue=""
                                >
                                    {genders.map((item, index) => {
                                        return <MenuItem key={index} value={item['id']}>{item['value']}</MenuItem>;
                                    })}
                                </Select>
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="group" className="title-inputs">Insurance</label>
                                <br />
                                <Autocomplete
                                    noOptionsText={'Not Found'}
                                    options={insurance}
                                    // options={Insurances}
                                    onChange={(e, value) => handleInsurance(e, value)}
                                    getOptionLabel={(option) => option.title}
                                    // getOptionLabel={(option) => option.name}

                                    renderInput={(params) => <TextField {...params} required />}
                                    style={{ width: '100%' }}
                                />
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="doctor" className="title-inputs">Therapist</label>
                                <br />
                                <Autocomplete
                                    noOptionsText={'Therapist not found'}
                                    options={doctors}
                                    onChange={(e, value) => handleDoctorChange(e, value)}
                                    getOptionLabel={(option) => option.name}
                                    renderInput={(params) => <TextField {...params} />}
                                    style={{ width: '100%' }}
                                />
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="gender" className="title-inputs">Branch</label>
                                <br />
                                <Select
                                    type="text"
                                    onChange={(e) => setBranch(e.target.value)}
                                    style={{ width: '100%' }}
                                    defaultValue=""
                                >
                                    {branches.map((item, index) => {
                                        return <MenuItem key={index} value={item['id']}>{item['value']}</MenuItem>;
                                    })}
                                </Select>
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="birth" className="title-inputs">Birth</label>
                                <br />

                                <input
                                    required
                                    type="date"
                                    value={birth}
                                    onChange={(e) => setBirth(e.target.value)}
                                    className="input-control"
                                />
                            </div>

                            <div className="form-group mt-5">
                                <label htmlFor="notes" className="title-inputs">Notes</label>
                                <TextareaAutosize
                                    type="text"
                                    value={notes}
                                    onChange={(e) => setNotes(e.target.value)}
                                    aria-label="minimum height"
                                    minRows={3}
                                    className="input-control"
                                />
                            </div>

                            {loading ? <><div className="d-flex justify-content-center"><CircularProgress color="secondary" /></div></> : <>

                                <div className="mt-5">
                                    <Link to="/patients" className="btn-cancel">CANCEL</Link>
                                    <button className="blue-btn">SAVE</button>
                                </div>

                            </>}


                        </div>



                    </form>

                </div>


            </div>
        </>
    );
}

export default NewPatient;