PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js

// material-ui
import {
    Grid, TextField, Typography, Button, Autocomplete, Stack, FormHelperText, OutlinedInput
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import * as yup from 'yup';
//import Checkbox from "@mui/material/Checkbox";
//import LoadingComponent from "../extra-pages/LoadingComponent";

import { useFormik,FormikProvider } from 'formik';
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";
//import axios from 'axios';

//import {useParams} from "react-router-dom";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const [editMode, setEditMode] = useState(false);
    const [locked, setLocked] = useState(false);

    const [idDocType, setIdDocType] = useState(null);
    const [district, setDistrict] = useState(null);
    const [country, setCountry] = useState(ComboData.country[0]);


    const from = useForm({defaultValues: userData});
    const {register,reset, handleSubmit} = from;




    const formik = useFormik({
        initialValues:(currentUserData),
        validationSchema:yup.object().shape({
            enName: yup.string().max(255).required('請輸入英文姓名'),
            chName: yup.string().max(255).required('請輸入中文姓名'),
            addressLine1: yup.string().max(255).required('請輸入第一行地址'),
            addressLine2: yup.string().max(255).required('請輸入第二行地址'),
            addressLine3: yup.string().max(255).required('請輸入第三行地址'),
            emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
            identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'),
            checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'),
            idDocType: yup.string().max(255).required('請輸入證件類別'),
            tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
            fax_countryCode: yup.string().min(3,'請輸入3位數字'),
            phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
            faxNumber: yup.string().min(8,'請輸入8位數字'),
        }),
    });



    useEffect(() => {
        let createDate = DateUtils.datetimeStr(userData.created);
        let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
        userData["createDate"] = createDate;
        userData["modifieDate"] = modifiedBy;
        userData["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet";

        userData["country"] = userData.address?.country;
        userData["district"] = userData.address?.district;
        userData["addressLine1"] = userData.address?.addressLine1;
        userData["addressLine2"] = userData.address?.addressLine2;
        userData["addressLine3"] = userData.address?.addressLine3;

        userData["phoneNumber"] = userData.contactTel?.phoneNumber;
        userData["tel_countryCode"] = userData.contactTel?.countryCode;

        userData["faxNumber"] = userData.faxNo?.faxNumber;
        userData["fax_countryCode"] = userData.faxNo?.countryCode;

        userData["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(userData.lastLogin):"";

        setIdDocType(userData.idDocType);
        setDistrict(userData.district);
        setCountry(userData.country);
        
        setCurrentUserData(userData);
    }, [userData]);

    useEffect(() => {
        reset(currentUserData);
        setLocked(currentUserData.locked);
    }, [currentUserData]);


    function onSubmitForm(_data) {

        HttpUtils.post({
            url: UrlUtils.POST_IND_USER+"/"+userData.id,
            params: {
                prefix: _data.prefix,
                enName: formik.values.enName,
                chName: _data.chName,
                idDocType: idDocType,
                contactTel: {
                    countryCode: _data.tel_countryCode,
                    phoneNumber: _data.phoneNumber
                },
                identification: formik.values.identification,
                checkDigit: formik.values.checkDigit,
                faxNo:{
                    countryCode: _data.fax_countryCode,
                    faxNumber: _data.faxNumber
                },
                emailAddress:_data.emailAddress,
                address:{
                    country:country,
                    district:district,
                    addressLine1: _data.addressLine1,
                    addressLine2: _data.addressLine2,
                    addressLine3: _data.addressLine3,
                },
            },
            onSuccess: function(){
                    loadDataFun();
            }
        });
    }

    const onEditClick = () => {
        setEditMode(true);
    };

    const onVerifiedClick = () => {
        HttpUtils.get({
            url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id,
            onSuccess: function(){
                loadDataFun();
            }
        });
    };
    
    const doLock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
            onSuccess: function(){
                    loadDataFun();
            }
        }); 
    };

    const doUnlock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
            onSuccess: function(){
                    loadDataFun();
            }
        }); 
    };

    const downloadFile = ()=>{
        HttpUtils.fileDownload({
            fileId: userFile.fileId,
            skey: userFile.skey,
            filename: userFile.filename
        });
    };

    return (
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>

                <FormikProvider value={formik}>
                <form onSubmit={handleSubmit(onSubmitForm)}>


                {/*top button*/}
                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-start">
                         
                    {editMode?
                    <>
                     <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                onClick={loadDataFun}
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Cancel Edit
                            </Button>
                        </Grid>
                        
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                color="success"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Save
                            </Button>
                        </Grid>
                        </>
                        :
                        <>
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={onEditClick}
                            >
                                Edit
                            </Button>
                        </Grid>
                        </>
                    }
                      
                    </Grid>
                </Grid>
                {/*end top button*/}
                               
                    <Grid container spacing={1}>
                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Username:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        id='username'
                                        disabled
                                        {...register("username")}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    English Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                <Stack>
                                <OutlinedInput
                                            id="enName"
                                            type="enName"
                                            {...register("enName")}
                                            value={formik.values.enName}
                                            disabled={!editMode}
                                            name="enName"
                                            onChange={formik.handleChange}
                                            placeholder="與身份證明文件相同"
                                            fullWidth
                                            error={Boolean(formik.touched.enName && formik.errors.enName)}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                            {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Created Date:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("createDate")}
                                        id='createDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Prefix:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("prefix")}
                                        id='prefix'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Chinese Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <OutlinedInput
                                            fullWidth
                                            disabled={!editMode}
                                            {...register("chName")}
                                            error={Boolean(formik.touched.chName && formik.errors.chName)}
                                            id="chName"
                                            type="text"
                                            value={formik.values.chName}
                                            name="chName"
                                            onChange={formik.handleChange}
                                            placeholder="與身份證明文件相同"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chName && formik.errors.chName && (
                                            <FormHelperText error id="helper-text-chName-signup">
                                            {formik.errors.chName}
                                            </FormHelperText>
                                        )}
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Updated:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("modifieDate")}
                                        id='modifieDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    ID Type:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>

                                    <Stack spacing={1}  sx={{mr:{md:1},mb:{xs:0.5}}}>
                                        <Autocomplete
                                            fullWidth
                                            disablePortal
                                            id="idDocType"
                                            {...register("idDocType")}
                                            disabled={!editMode}
                                            value={formik.values.idDocType}
                                            options={ComboData.idDocType}
                                            onBlur={formik.handleBlur}
                                            onChange={(event, newValue) => {
                                                setIdDocType(newValue);
                                            }}
                                            sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                            renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
                                        />
                                        {formik.touched.idDocType && (
                                            idDocType===null?
                                            <FormHelperText error id="helper-text-idDocType-signup">
                                                請輸入證件類別
                                            </FormHelperText>:''    
                                        )}
                                    </Stack>


                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Contact Tel:
                                </Grid>
                                <Grid item xs={2}>
                                    <TextField
                                        fullWidth
                                        {...register("tel_countryCode")}
                                        id='tel_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("phoneNumber")}
                                        id='phoneNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Verified:
                                </Grid>

                                
                                {
                                    currentUserData.verifiedBy || editMode?
                                    <Grid item xs={6}>
                                        <TextField
                                            fullWidth
                                            {...register("verifiedStatus")}
                                            id='verifiedStatus'
                                            disabled
                                        />
                                    </Grid>
                                    :
                                    <>
                                        <Grid item xs={4}>
                                            <TextField
                                                fullWidth
                                                {...register("verifiedStatus")}
                                                id='verifiedStatus'
                                                disabled
                                            />
                                        </Grid>
                                        <Grid item xs={1}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                                onClick={onVerifiedClick}
                                            >
                                                Verify
                                            </Button>
                                        </Grid>
                                    </>
                                }
                                
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    ID No.:
                                </Grid>

                                <Grid item lg={4}>
                                    <Grid container>
                                    {idDocType =="HKID"?
                                            <>
                                                <Grid item lg={8}>
                                                    <Stack fullWidth>
                                                        <OutlinedInput
                                                            disabled={!editMode}
                                                            {...register("identification")}
                                                            id="identification"
                                                            type="text"
                                                            value={formik.values.identification}
                                                            name="identification"
                                                            onChange={formik.handleChange}
                                                            placeholder="證件號碼"
                                                            //sx={{mr:1}}
                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                            onBlur={formik.handleBlur}
                                                            inputProps={{
                                                                maxLength: idDocType =='HKID'?7:18,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {formik.touched.identification && formik.errors.identification && (
                                                            <FormHelperText error id="helper-text-idNo-signup">
                                                            {formik.errors.identification}
                                                            </FormHelperText>
                                                        )}
                                                        {formik.touched.checkDigit && formik.errors.checkDigit && (
                                                            <FormHelperText error id="helper-text-checkDigit-signup">
                                                            {formik.errors.checkDigit}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                                <Grid item lg={4}>
                                                    <Stack fullWidth >
                                                        <OutlinedInput
                                                            disabled={!editMode}
                                                            {...register("checkDigit")}
                                                            id="checkDigit"
                                                            type="text"
                                                            value={formik.values.checkDigit}
                                                            name="checkDigit"
                                                            onChange={formik.handleChange}
                                                            placeholder="( )"
                                                            // sx={{height:"53px"}}
                                                            inputProps={{
                                                                maxLength: 1,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                            fullWidth
                                                            error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
                                                            onBlur={formik.handleBlur}
                                                        />
                                                    </Stack>
                                                </Grid>
                                            </>:
                                            <Grid item lg={4}>
                                                <Stack fullWidth>
                                                    <OutlinedInput
                                                        {...register("identification")}
                                                        disabled={!editMode}
                                                        id="identification"
                                                        type="text"
                                                        value={formik.values.identification}
                                                        name="identification"
                                                        onChange={formik.handleChange}
                                                        placeholder="證件號碼"
                                                        fullWidth
                                                        sx={{mr:1}}
                                                        error={Boolean(formik.touched.identification && formik.errors.identification)}
                                                        onBlur={formik.handleBlur}
                                                        inputProps={{
                                                            onKeyDown: (e) => {
                                                                if (e.key === 'Enter') {
                                                                    e.preventDefault();
                                                                }
                                                            },
                                                        }}
                                                    />
                                                    {formik.touched.identification && formik.errors.identification && (
                                                        <FormHelperText error id="helper-text-idNo-signup">
                                                        {formik.errors.identification}
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                        }
                                    
                                    </Grid>
                                </Grid>
                                <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button>


                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Fax No.:
                                </Grid>

                                <Grid item xs={2} >
                                    <TextField
                                        fullWidth
                                        {...register("fax_countryCode")}
                                        id='fax_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4} >
                                    <TextField
                                        fullWidth
                                        {...register("faxNumber")}
                                        id='faxNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Login:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>

                                      <TextField
                                             fullWidth
                                             {...register("lastLoginDate")}
                                             id='lastLoginDate'
                                             disabled
                                        >
                                        </TextField>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Country:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                    fullWidth
                                        disablePortal
                                        disabled={!editMode}
                                        id="country"
                                        value={country}
                                        options={ComboData.country}
                                        {...register("country")}
                                        onChange={(event, newValue) => {
                                            setCountry(newValue);
                                        }}
                                        
                                        sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                        renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>}
                                    />
                                </Grid>

                                
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Email:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("emailAddress")}
                                        id='emailAddress'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Status:
                                </Grid>

                                {
                                    editMode?
                                        <Grid item lg={7}>
                                            <TextField
                                                fullWidth
                                                {...register("status")}
                                                id='status'
                                                disabled
                                            />
                                        </Grid>
                                    :
                                    <>
                                    <Grid item lg={4}>
                                        <TextField
                                            fullWidth
                                            {...register("status")}
                                            id='status'
                                            disabled
                                        />
                                    </Grid>
                                    {locked?
                                        <Grid item lg={1}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                color="success"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                                onClick={doUnlock}
                                            >
                                                Active
                                            </Button>
                                        </Grid>
                                        :
                                        <Grid item lg={1}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                color="error"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                                onClick={doLock}
                                            >
                                                Lock
                                            </Button>
                                        </Grid>
                                        }
                                        </>
                                    }

                                                 
                                
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"top"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center top'}}>
                                    Address:
                                </Grid>

                                <Grid item xs={7} s={7} md={12} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("addressLine1",
                                            {
                                                value: currentUserData?.address?.addressLine1,
                                            })}
                                        id='addressLine1'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine2",
                                            {
                                                value: currentUserData?.address?.addressLine2,
                                            })}
                                        id='addressLine2'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine3",
                                            {
                                                value: currentUserData?.address?.addressLine3,
                                            })}
                                        id='addressLine3'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    District:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                      <Autocomplete
                                                    fullWidth
                                                    disablePortal
                                                    id="district"
                                                    {...register("district")}
                                                    value={district}
                                                    options={ComboData.district}
                                                    onChange={(event, newValue) => {
                                                        setDistrict(newValue);
                                                    }}
                                                    disabled={!editMode}
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#district":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
                                        />
                                       
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>



                </form>
                </FormikProvider>
            </MainCard>
    );
};

export default UserInformationCard_Individual;