From 832757fcddf6b5df434d0386756f7efc7f9b820c Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 22 Sep 2023 16:39:20 +0800
Subject: [PATCH] update ui

---
 .../ApplicationDetailCard.js                  | 434 +++++++++++-------
 .../ClientDetailCard.js                       |  72 +++
 .../GazetteDetailCard.js                      |  24 +
 3 files changed, 357 insertions(+), 173 deletions(-)

diff --git a/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js
index 3c7afdd..14ed3a3 100644
--- a/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js
@@ -1,8 +1,8 @@
 // material-ui
 import {
-    FormControl, 
+    FormControl,
     Button,
-    Grid, 
+    Grid,
     // InputAdornment, 
     Typography, FormLabel,
     OutlinedInput,
@@ -10,11 +10,11 @@ import {
 } from '@mui/material';
 // import MainCard from "../../components/MainCard";
 const MainCard = Loadable(lazy(() => import('components/MainCard')));
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import {
     useEffect,
     useState
-    } from "react";
+} from "react";
 // import Checkbox from "@mui/material/Checkbox";
 import Loadable from 'components/Loadable';
 
@@ -37,7 +37,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
-    {   applicationDetailData,
+    { applicationDetailData,
         setStatus,
         setReload,
         isEditMode,
@@ -45,13 +45,13 @@ const ApplicationDetailCard = (
         setiIsSave,
         // isNewRecord
     }
-    ) => {
+) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
     const [companyName, setCompanyName] = useState({});
     const [verified, setVerified] = useState(null);
     const [fileDetail, setfileDetail] = useState({});
-    const [onReady,setOnReady] = useState(false);
+    const [onReady, setOnReady] = useState(false);
     // const navigate = useNavigate()
     // const params = useParams();
 
@@ -60,18 +60,18 @@ const ApplicationDetailCard = (
         setEditMode(true);
         isEditMode(true);
     };
-    
+
     const onSaveClick = () => () => {
         //upload latest data to parent
         const values = getValues();
-        const objectData ={
+        const objectData = {
             ...values,
         }
-        setUpdateApplicationObject({objectData});
+        setUpdateApplicationObject({ objectData });
         setiIsSave(true)
     };
 
-    const {register, 
+    const { register,
         getValues
     } = useForm()
 
@@ -81,7 +81,7 @@ const ApplicationDetailCard = (
         if (Object.keys(applicationDetailData).length > 0) {
             setCurrentApplicationDetailData(applicationDetailData.data);
             setCompanyName(applicationDetailData.companyName);
-            setVerified(applicationDetailData.userData.verifiedBy?true:false)
+            setVerified(applicationDetailData.userData.verifiedBy ? true : false)
             setfileDetail(applicationDetailData.fileDetail);
         }
     }, [applicationDetailData]);
@@ -96,9 +96,9 @@ const ApplicationDetailCard = (
 
     const onDownloadClick = () => () => {
         HttpUtils.fileDownload({
-            fileId:fileDetail.id,
-            skey:fileDetail.skey,
-            filename:fileDetail.filename,
+            fileId: fileDetail.id,
+            skey: fileDetail.skey,
+            filename: fileDetail.filename,
         });
     };
 
@@ -107,84 +107,84 @@ const ApplicationDetailCard = (
         setEditMode(false)
     };
 
-    const acceptedClick = () => () =>{
+    const acceptedClick = () => () => {
         setStatus("accept")
     };
 
-    const rejectedClick = () => () =>{
+    const rejectedClick = () => () => {
         setStatus("reject")
     };
 
-    const complatedClick = () => () =>{
+    const complatedClick = () => () => {
         setStatus("complete")
     };
 
-    const withdrawnClick = () => () =>{
+    const withdrawnClick = () => () => {
         setStatus("withdraw")
     };
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                {verified && currentApplicationDetailData.status != "rejected"?
+                {verified && currentApplicationDetailData.status != "rejected" ?
                     <Grid container spacing={4} direction="row">
                         <Grid item xs={12} md={4} >
-                            <Stack 
+                            <Stack
                                 direction="row"
                                 justifyContent="space-between"
                                 alignItems="center"
                                 spacing={2}
                                 mb={2}
                             >
-                            {editMode?
-                                <>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        onClick={reloadHandle()}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        Reset & Back
-                                    </Button>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        onClick={onSaveClick()}
-                                        color="success"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        Save
-                                    </Button>
-                                </>:
-                                <>
-                                    <Grid item sx={{ml: 3, mr: 3}}>
+                                {editMode ?
+                                    <>
                                         <Button
-                                            // size="large"
+                                            size="large"
                                             variant="contained"
-                                            onClick={onEditClick()}
+                                            onClick={reloadHandle()}
                                             sx={{
                                                 textTransform: 'capitalize',
-                                                alignItems: 'end',
-                                            }}>
-                                            <BorderColorOutlinedIcon/>
-                                            <Typography ml={1}> Edit</Typography>
+                                                alignItems: 'end'
+                                            }}
+                                        >
+                                            Reset & Back
                                         </Button>
-                                    </Grid>
-                                </>
+                                        <Button
+                                            size="large"
+                                            variant="contained"
+                                            onClick={onSaveClick()}
+                                            color="success"
+                                            sx={{
+                                                textTransform: 'capitalize',
+                                                alignItems: 'end'
+                                            }}
+                                        >
+                                            Save
+                                        </Button>
+                                    </> :
+                                    <>
+                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                // size="large"
+                                                variant="contained"
+                                                onClick={onEditClick()}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end',
+                                                }}>
+                                                <BorderColorOutlinedIcon />
+                                                <Typography ml={1}> Edit</Typography>
+                                            </Button>
+                                        </Grid>
+                                    </>
                                 }
-                                
-                                {currentApplicationDetailData.status =="accepted"?
+
+                                {currentApplicationDetailData.status == "accepted" ?
                                     <Button
                                         // size="large"
                                         variant="contained"
@@ -193,92 +193,92 @@ const ApplicationDetailCard = (
                                             textTransform: 'capitalize',
                                             alignItems: 'end'
                                         }}>
-                                        <EditNoteIcon/>
+                                        <EditNoteIcon />
                                         <Typography ml={1}> Create Proof</Typography>
-                                    </Button>:
+                                    </Button> :
                                     null
                                 }
                             </Stack>
                         </Grid>
                         <Grid item xs={12} md={8} >
-                            <Stack 
+                            <Stack
                                 direction="row"
                                 justifyContent="space-between"
                                 alignItems="center"
                                 spacing={2}
                                 mb={2}
                             >
-                                {currentApplicationDetailData.status =="submitted"?
-                                <>
-                                    <Button
-                                        // size="large"
-                                        variant="contained"
-                                        onClick={acceptedClick()}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end',
-                                            backgroundColor:'#52b202'
-                                        }}>
-                                        <DoneIcon/>
-                                        <Typography ml={1}> Accept</Typography>
-                                    </Button>
-                                    <Button
-                                        // size="large"
-                                        variant="contained"
-                                        onClick={rejectedClick()}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end',
-                                            backgroundColor:'#ffa733'
-                                        }}>
-                                        <CloseIcon/>
-                                        <Typography ml={1}> Reject</Typography>
-                                    </Button>
-                                </>:
-                                currentApplicationDetailData.status =="paid"?
-                                <>
-                                    <Button
-                                        // size="large"
-                                        variant="contained"
-                                        onClick={complatedClick()}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end',
-                                            backgroundColor:'#52b202'
-                                        }}>
-                                        <DoneIcon/>
-                                        <Typography ml={1}> Complete</Typography>
-                                    </Button>
-                                    <Button
-                                        // size="large"
-                                        variant="contained"
-                                        onClick={withdrawnClick()}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end',
-                                            backgroundColor:'#ffa733'
-                                        }}>
-                                        <CloseIcon/>
-                                        <Typography ml={1}> Withdraw</Typography>
-                                    </Button>
-                                </>:null
+                                {currentApplicationDetailData.status == "submitted" ?
+                                    <>
+                                        <Button
+                                            // size="large"
+                                            variant="contained"
+                                            onClick={acceptedClick()}
+                                            sx={{
+                                                textTransform: 'capitalize',
+                                                alignItems: 'end',
+                                                backgroundColor: '#52b202'
+                                            }}>
+                                            <DoneIcon />
+                                            <Typography ml={1}> Accept</Typography>
+                                        </Button>
+                                        <Button
+                                            // size="large"
+                                            variant="contained"
+                                            onClick={rejectedClick()}
+                                            sx={{
+                                                textTransform: 'capitalize',
+                                                alignItems: 'end',
+                                                backgroundColor: '#ffa733'
+                                            }}>
+                                            <CloseIcon />
+                                            <Typography ml={1}> Reject</Typography>
+                                        </Button>
+                                    </> :
+                                    currentApplicationDetailData.status == "paid" ?
+                                        <>
+                                            <Button
+                                                // size="large"
+                                                variant="contained"
+                                                onClick={complatedClick()}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end',
+                                                    backgroundColor: '#52b202'
+                                                }}>
+                                                <DoneIcon />
+                                                <Typography ml={1}> Complete</Typography>
+                                            </Button>
+                                            <Button
+                                                // size="large"
+                                                variant="contained"
+                                                onClick={withdrawnClick()}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end',
+                                                    backgroundColor: '#ffa733'
+                                                }}>
+                                                <CloseIcon />
+                                                <Typography ml={1}> Withdraw</Typography>
+                                            </Button>
+                                        </> : null
                                 }
                             </Stack>
                         </Grid>
-                    </Grid>:null
+                    </Grid> : null
                 }
-                <Typography variant="h5" xs={12} md={12} sx={{mb: 2, borderBottom: "1px solid black"}}>
-                        Application Details
+                <Typography variant="h5" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                    Application Details
                 </Typography>
                 <form>
                     <Grid container direction="column">
                         <Grid item xs={12} md={12}>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Application No:</FormLabel>
                                         </Grid>
 
@@ -292,15 +292,21 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.appNo,
                                                         })}
                                                     id='appNo'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Status:</FormLabel>
                                         </Grid>
 
@@ -314,49 +320,61 @@ const ApplicationDetailCard = (
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Applicant:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
                                             <FormControl variant="outlined" fullWidth disabled >
-                                                { currentApplicationDetailData.orgId===null?
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                    {...register("contactPerson",
-                                                        {
-                                                            value: currentApplicationDetailData.contactPerson,
-                                                        })}
-                                                    id='contactPerson'
-                                                />:
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                    {...register("companyName",
-                                                        {
-                                                            value: companyName.enCompanyName,
-                                                        })}
-                                                    id='companyName'
-                                                />
+                                                {currentApplicationDetailData.orgId === null ?
+                                                    <OutlinedInput
+                                                        fullWidth
+                                                        size="small"
+                                                        {...register("contactPerson",
+                                                            {
+                                                                value: currentApplicationDetailData.contactPerson,
+                                                            })}
+                                                        id='contactPerson'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    /> :
+                                                    <OutlinedInput
+                                                        fullWidth
+                                                        size="small"
+                                                        {...register("companyName",
+                                                            {
+                                                                value: companyName.enCompanyName,
+                                                            })}
+                                                        id='companyName'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    />
                                                 }
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Contact Phone:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{width:'25%'}} disabled={!editMode} >
+                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled={!editMode} >
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactTelNo.countryCode",
@@ -364,9 +382,15 @@ const ApplicationDetailCard = (
                                                                 value: currentApplicationDetailData.contactTelNo.countryCode,
                                                             })}
                                                         id='countryCode'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
-                                                <FormControl variant="outlined" sx={{width:'100%'}} disabled={!editMode} >
+                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled={!editMode} >
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactTelNo.phoneNumber",
@@ -374,24 +398,30 @@ const ApplicationDetailCard = (
                                                                 value: currentApplicationDetailData.contactTelNo.phoneNumber,
                                                             })}
                                                         id='phoneNumber'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
                                             </Stack>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                            </Grid> 
+                            </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Contect Person:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  disabled={!editMode}>
+                                            <FormControl variant="outlined" fullWidth disabled={!editMode}>
                                                 <OutlinedInput
                                                     fullWidth
                                                     size="small"
@@ -400,21 +430,27 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactPerson,
                                                         })}
                                                     id='contactPerson'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Contact Fax:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{width:'25%'}} disabled={!editMode}>
+                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled={!editMode}>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactFaxNo.countryCode",
@@ -422,9 +458,15 @@ const ApplicationDetailCard = (
                                                                 value: currentApplicationDetailData.contactFaxNo.countryCode,
                                                             })}
                                                         id='countryCode'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
-                                                <FormControl variant="outlined" sx={{width:'100%'}} disabled={!editMode}>
+                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled={!editMode}>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactFaxNo.faxNumber",
@@ -432,6 +474,12 @@ const ApplicationDetailCard = (
                                                                 value: currentApplicationDetailData.contactFaxNo.faxNumber,
                                                             })}
                                                         id='faxNumber'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
                                             </Stack>
@@ -446,31 +494,31 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={12} lg={12}>
                                             <Grid container direction="row">
                                                 <Grid item xs={12} md={3} lg={3}
-                                                    sx={{display: 'flex', alignItems: 'center'}}>
+                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel>Manuscript File:</FormLabel>
                                                 </Grid>
-                                                <Grid item xs={12} md={9} lg={9} sx={{display: 'flex', alignItems: 'center'}}>
+                                                <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <Grid container direction="row" justifyContent="flex-start">
-                                                        <Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
+                                                        <Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                                             <FormControl variant="outlined" fullWidth  >
                                                                 <Typography
                                                                     fullWidth
                                                                     id='fileName'
                                                                 >
-                                                                {fileDetail.filename}
+                                                                    {fileDetail.filename}
                                                                 </Typography>
                                                             </FormControl>
                                                         </Grid>
-                                                        <Grid item  md={2} lg={2}>
+                                                        <Grid item md={2} lg={2}>
                                                             <Button
-                                                                    size="small"
-                                                                    variant="contained"
-                                                                    onClick={onDownloadClick()}
-                                                                    sx={{
-                                                                        textTransform: 'capitalize',
-                                                                        alignItems: 'end',
-                                                                    }}>
-                                                                    <DownloadIcon/>
+                                                                size="small"
+                                                                variant="contained"
+                                                                onClick={onDownloadClick()}
+                                                                sx={{
+                                                                    textTransform: 'capitalize',
+                                                                    alignItems: 'end',
+                                                                }}>
+                                                                <DownloadIcon />
                                                             </Button>
                                                         </Grid>
                                                     </Grid>
@@ -479,7 +527,47 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                            </Grid> 
+                            </Grid>
+                            <Grid container direction="row" justifyContent="space-between"
+                                alignItems="center">
+                                <Grid item xs={12} md={6} lg={6} mt={1}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={12} md={12} lg={12}>
+                                            <Grid container direction="row">
+                                                <Grid item xs={12} md={3} lg={3}
+                                                    sx={{ display: 'flex', alignItems: 'center top' }}>
+                                                    <FormLabel>Remarks:</FormLabel>
+                                                </Grid>
+                                                <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                    <Grid container direction="row" justifyContent="flex-start">
+                                                        <FormControl variant="outlined" fullWidth disabled={!editMode}>
+                                                            <OutlinedInput
+                                                                fullWidth
+                                                                multiline={true}
+                                                                maxRows={4}
+                                                                minRows={4}
+                                                                rows={4}
+                                                                size="small"
+                                                                {...register("remarks",
+                                                                    {
+                                                                        value: currentApplicationDetailData.remarks,
+                                                                    })}
+                                                                id='remarks'
+                                                                sx={{
+                                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                                        WebkitTextFillColor: "#000000",
+                                                                        background: "#f8f8f8",
+                                                                    },
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
                         </Grid>
                     </Grid>
                 </form>
diff --git a/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js b/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js
index 2fa2fe5..3a8b41c 100644
--- a/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js
+++ b/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js
@@ -145,6 +145,12 @@ const ClientDetailCard = (
                                             value: currentApplicationDetailData.type,
                                         })}
                                     id='type'
+                                    sx={{
+                                        "& .MuiInputBase-input.Mui-disabled": {
+                                            WebkitTextFillColor: "#000000",
+                                            background: "#f8f8f8",
+                                        },
+                                    }}
                                 />
                             </FormControl>
                         </Grid>
@@ -166,6 +172,12 @@ const ClientDetailCard = (
                                                 value: companyName.enCompanyName ,
                                             })}
                                         id='enCompanyName'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -185,6 +197,12 @@ const ClientDetailCard = (
                                                 value: companyName.chCompanyName,
                                             })}
                                         id='chCompanyName'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -204,6 +222,12 @@ const ClientDetailCard = (
                                                 value: currentApplicationDetailData.contactPerson,
                                             })}
                                         id='contactPerson'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -224,6 +248,12 @@ const ClientDetailCard = (
                                                     value: currentApplicationDetailData.contactTel.countryCode,
                                                 })}
                                             id='countryCode'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
                                         />
                                     </FormControl>
                                     <FormControl variant="outlined" sx={{width:'100%'}} disabled>
@@ -234,6 +264,12 @@ const ClientDetailCard = (
                                                     value: currentApplicationDetailData.contactTel.phoneNumber,
                                                 })}
                                             id='phoneNumber'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
                                         />
                                     </FormControl>
                                 </Stack>
@@ -254,6 +290,12 @@ const ClientDetailCard = (
                                                 value: currentApplicationDetailData.emailBus,
                                             })}
                                         id='emailBus'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -275,6 +317,12 @@ const ClientDetailCard = (
                                                 value: currentApplicationDetailData.enName,
                                             })}
                                         id='enName'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -294,6 +342,12 @@ const ClientDetailCard = (
                                                 value: currentApplicationDetailData.chName,
                                             })}
                                         id='chName'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
@@ -314,6 +368,12 @@ const ClientDetailCard = (
                                                     value: currentApplicationDetailData.mobileNumber.countryCode,
                                                 })}
                                             id='countryCode'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
                                         />
                                     </FormControl>
                                     <FormControl variant="outlined" sx={{width:'100%'}} disabled>
@@ -324,6 +384,12 @@ const ClientDetailCard = (
                                                     value: currentApplicationDetailData.mobileNumber.phoneNumber,
                                                 })}
                                             id='phoneNumber'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
                                         />
                                     </FormControl>
                                 </Stack>
@@ -344,6 +410,12 @@ const ClientDetailCard = (
                                                 value: currentApplicationDetailData.emailAddress,
                                             })}
                                         id='emailAddress'
+                                        sx={{
+                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                WebkitTextFillColor: "#000000",
+                                                background: "#f8f8f8",
+                                            },
+                                        }}
                                     />
                                 </FormControl>
                             </Grid>
diff --git a/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js b/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js
index 6a03d03..ce0d2df 100644
--- a/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js
+++ b/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js
@@ -104,6 +104,12 @@ const GazetteDetailCard = (
                                                             value: issueNum,
                                                         })}
                                                     id='issueNum'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
@@ -126,6 +132,12 @@ const GazetteDetailCard = (
                                                             value: gazetteCode,
                                                         })}
                                                     id='gazetteCode'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
@@ -151,6 +163,12 @@ const GazetteDetailCard = (
                                                             value: issueDate,
                                                         })}
                                                     id='issueDate'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
@@ -173,6 +191,12 @@ const GazetteDetailCard = (
                                                             value: groupTitle,
                                                         })}
                                                     id='groupTitle'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>