From bb917eb44120fba16fb99c0f6cd193b515a5c9dd Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Fri, 5 Jan 2024 18:02:53 +0800
Subject: [PATCH] update application form

---
 src/components/MainCard.js                    |  2 +-
 .../Details_GLD/ApplicationDetailCard.js      | 59 ++++++++++---------
 .../Details_GLD/GazetteDetailCard.js          | 22 +++----
 src/pages/PublicNotice/Details_GLD/index.js   | 14 ++---
 .../Details_GLD/tabTableDetail/PaymentTab.js  |  2 +-
 .../Details_GLD/tabTableDetail/ProofTab.js    |  2 +-
 .../tabTableDetail/StatusHistoryTab.js        |  2 +-
 .../Details_GLD/tabTableDetail/TabTable.js    |  8 +--
 8 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/src/components/MainCard.js b/src/components/MainCard.js
index 8b3124c..7b2ab3b 100644
--- a/src/components/MainCard.js
+++ b/src/components/MainCard.js
@@ -64,7 +64,7 @@ const MainCard = forwardRef(
             },
             // maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1850 },
             // minWidth: { xs: 600, sm: 800, md: 900, lg: 1000, xl: 1000 },
-            margin: { xs: 2.5, md: 3 },
+            margin: { xs: 2, md: 2 },
             // '& > *': {
             //   flexGrow: 1,
             //   flexBasis: '50%'
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index 96eb5b5..76da039 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -6,7 +6,7 @@ import {
     Typography, FormLabel,
     OutlinedInput,
     Stack,
-    Dialog, DialogTitle, DialogContent, DialogActions,
+    Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment,
 } from '@mui/material';
 const MainCard = Loadable(lazy(() => import('components/MainCard')));
 import { useForm } from "react-hook-form";
@@ -141,17 +141,17 @@ const ApplicationDetailCard = (
                 border={false}
                 content={false}
             >
-                {verified && currentApplicationDetailData.status != "notAccepted" ?
+                {verified && currentApplicationDetailData.status !== "notAccepted" ?
                     <Grid container spacing={4} direction="row">
                         <Grid item xs={12} md={4} >
                             <Stack
                                 direction="row"
-                                justifyContent="space-between"
+                                justifyContent="flex-start"
                                 alignItems="center"
                                 spacing={2}
                                 mb={2}
                             >
-                                {currentApplicationDetailData.status == "reviewed" ?
+                                {currentApplicationDetailData.status === "reviewed" ?
                                     <Button
                                         // size="large"
                                         variant="contained"
@@ -170,12 +170,12 @@ const ApplicationDetailCard = (
                         <Grid item xs={12} md={8} >
                             <Stack
                                 direction="row"
-                                justifyContent="space-between"
+                                justifyContent="flex-start"
                                 alignItems="center"
                                 spacing={2}
                                 mb={2}
                             >
-                                {currentApplicationDetailData.status == "submitted" || currentApplicationDetailData.status == "reviewed" ?
+                                {currentApplicationDetailData.status === "submitted" || currentApplicationDetailData.status == "reviewed" ?
                                     <>
                                         <Button
                                             // size="large"
@@ -237,16 +237,16 @@ const ApplicationDetailCard = (
                 <form>
                     <Grid container direction="column">
                         <Grid item xs={12} md={12}>
-                            <Grid container direction="row" justifyContent="space-between"
+                            <Grid container direction="row" justifyContent="flex-start"
                                 alignItems="center">
                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 <OutlinedInput
                                                     fullWidth
@@ -267,14 +267,14 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} sm={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined">
                                                 {StatusUtils.getStatusByTextEng(currentApplicationDetailData.status)}
                                             </FormControl>
@@ -282,16 +282,16 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid container direction="row" justifyContent="space-between"
+                            <Grid container direction="row" justifyContent="flex-start"
                                 alignItems="center">
                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 {currentApplicationDetailData.orgId === null ?
                                                     <OutlinedInput
@@ -329,7 +329,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -351,13 +351,15 @@ const ApplicationDetailCard = (
                                                                 WebkitTextFillColor: "#000000",
                                                                 background: "#f8f8f8",
                                                             },
+                                                            mr:1
                                                         }}
                                                         inputProps={{
                                                             maxLength: 3,
                                                         }}
+                                                        endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                     />
                                                 </FormControl>
-                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                                <FormControl variant="outlined" sx={{ width: '75%' }} disabled >
                                                     <OutlinedInput
                                                         size="small"
                                                         type="tel"
@@ -382,16 +384,16 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid container direction="row" justifyContent="space-between"
+                            <Grid container direction="row" justifyContent="flex-start"
                                 alignItems="center">
                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Contect Person:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled>
                                                 <OutlinedInput
                                                     fullWidth
@@ -412,7 +414,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -434,15 +436,16 @@ const ApplicationDetailCard = (
                                                                 WebkitTextFillColor: "#000000",
                                                                 background: "#f8f8f8",
                                                             },
+                                                            mr:1,
                                                         }}
                                                         inputProps={{
                                                             maxLength: 3,
                                                             type: "tel"
                                                         }}
-
+                                                        endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                     />
                                                 </FormControl>
-                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
+                                                <FormControl variant="outlined" sx={{ width: '75%' }} disabled>
                                                     <OutlinedInput
                                                         size="small"
                                                         type="tel"
@@ -467,19 +470,19 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid container direction="row" justifyContent="space-between"
+                            <Grid container direction="row" justifyContent="flex-start"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} mt={1}>
+                                <Grid item xs={12} md={12} lg={12} 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}
+                                                <Grid item xs={12} md={2} lg={2}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="h5" >Manuscript File:</Typography></FormLabel>
                                                 </Grid>
-                                                <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                <Grid item xs={12} md={8} lg={8} 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={10} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
                                                             <FormControl variant="outlined" fullWidth  >
                                                                 <Typography
                                                                     // fullWidth
diff --git a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
index 5ad79d0..5c0b7a8 100644
--- a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
@@ -140,12 +140,12 @@ const GazetteDetailCard = (
                                 alignItems="center">
                                 <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{display: 'flex', alignItems: 'center'}}>
                                             <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 <OutlinedInput
                                                     fullWidth
@@ -167,14 +167,14 @@ const GazetteDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{display: 'flex', alignItems: 'center'}}>
                                             <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 <OutlinedInput
                                                     fullWidth
@@ -198,15 +198,15 @@ const GazetteDetailCard = (
                                 </Grid>
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
-                                alignItems="center">
+                                alignItems="center" sx={{mb:{lg:-3}}}>
                                 <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{display: 'flex', alignItems: 'center'}}>
                                             <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 <OutlinedInput
                                                     fullWidth
@@ -228,14 +228,14 @@ const GazetteDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={3} lg={3}
+                                        <Grid item xs={12} md={4} lg={4}
                                             sx={{display: 'flex', alignItems: 'center'}}>
                                             <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={9} lg={9}>
+                                        <Grid item xs={12} md={8} lg={8}>
                                             <FormControl variant="outlined" fullWidth disabled >
                                                 <OutlinedInput
                                                     fullWidth
diff --git a/src/pages/PublicNotice/Details_GLD/index.js b/src/pages/PublicNotice/Details_GLD/index.js
index ddf39df..abdd7c7 100644
--- a/src/pages/PublicNotice/Details_GLD/index.js
+++ b/src/pages/PublicNotice/Details_GLD/index.js
@@ -301,7 +301,7 @@ const PublicNoticeDetail_GLD = () => {
   }, [getUploadStatus]);
 
   return (
-    <Grid container sx={{ maxHeight: '500vh',width:"100%", backgroundColor: 'backgroundColor.default' }} direction="column">
+    <Grid container sx={{ width:"100%", backgroundColor: 'backgroundColor.default' }} direction="column">
       <StatusChangeDialog open={open}
         handleClose={handleClose}
         setReason={setReason}
@@ -323,7 +323,7 @@ const PublicNoticeDetail_GLD = () => {
           </Stack>
         </div>
       </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} sm={12} md={12} lg={12}>
           <Stack direction="row">
           <Button title="Back" sx={{ml:3.5, mt:2.5}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}>
             <ForwardIcon style={{height: 30, width: 50, transform : "rotate(180deg)"}}/>
@@ -336,12 +336,12 @@ const PublicNoticeDetail_GLD = () => {
           <Typography ml={4} mt={3} variant="h4">{title}</Typography>
         </Stack>
       </Grid> */}
-      <Grid item xs={12} >
+      <Grid item xs={12} sm={12} md={12} lg={12} xl={12} >
         <Grid container direction="row">
           <Grid item xs={12} md={12} lg={9} xl={9}>
             <Grid container direction="column">
               <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
-                <Box xs={12}  sx={{ ml:2 , mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12}  sx={{ ml:2 , mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   {isLoading && editMode ?
                     <LoadingComponent /> :
                     <ApplicationDetailCard
@@ -358,7 +358,7 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={12} lg={12} xl={12}>
-                <Box xs={12} sx={{ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} sx={{ml:2, mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <GazetteDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
@@ -369,7 +369,7 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={12} lg={12} xl={12}>
-                <Box xs={12} sx={{ml:2, mt:3, mr:{sm:2}, p: 0, borderRadius: '10px',width: {xs:'92vw', sm:'96.5vw', md:"auto"}, backgroundColor: '#ffffff' }}>
+                <Box xs={12} sx={{ml:2, mt:3, mr:{sm:2}, borderRadius: '10px',width: {xs:'92vw', sm:'96.5vw', md:"auto"}, backgroundColor: '#ffffff' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
@@ -383,7 +383,7 @@ const PublicNoticeDetail_GLD = () => {
           <Grid item xs={12} md={12} lg={3} xl={3}>
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <ClientDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
index c1b0539..f9aba55 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
@@ -66,7 +66,7 @@ export default function SubmittedTab({ rows }) {
 
     return (
         <>
-            <div style={{ height:'20%', width: '100%' }}>
+            <div style={{ height:'20%', width: '98%' }}>
                 <FiDataGrid
                     rows={rows}
                     columns={columns}
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
index 3567d96..759829e 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
@@ -105,7 +105,7 @@ export default function ProofTab({rows}) {
     ];
 
     return (
-        <div style={{height:'20%', width: '100%'}}>
+        <div style={{height:'20%', width: '98%'}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
index 2f9322f..4cd4dc4 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
@@ -48,7 +48,7 @@ export default function StatusHistoryTab({rows}) {
     ];
 
     return (
-        <div style={{height:'20%', width: '100%'}}>
+        <div style={{height:'20%', width: '98%'}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
index 6e241be..140ab29 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
@@ -70,7 +70,7 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '40vh' }}>
+            <Grid container sx={{ minHeight: '40vh'}}>
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
@@ -81,19 +81,19 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
                                 <Tab label={"Status History(" + statusHistoryList.length + ") "} value="3" />
                             </TabList>
                         </Box>
-                        <TabPanel value="1">
+                        <TabPanel value="1" sx={{p:0}}>
                             <ProofTab
                                 rows={_proofList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>
-                        <TabPanel value="2">
+                        <TabPanel value="2" sx={{p:0}}>
                             <PaymentTab
                                 rows={_paymentList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>
-                        <TabPanel value="3">
+                        <TabPanel value="3" sx={{p:0}}>
                             <StatusHistoryTab
                                 rows={statusHistoryList}
                                 reloadFunction={reloadPage}