From f3edc59062a1830f69922b3cadac409bb1615ce9 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Tue, 9 Jan 2024 16:58:09 +0800
Subject: [PATCH] update proof reply

---
 .../Proof/Reply_Public/ApplicationDetails.js  | 52 +++++++------
 src/pages/Proof/Reply_Public/ProofForm.js     |  2 +-
 src/pages/Proof/Reply_Public/index.js         | 78 ++++++++-----------
 3 files changed, 64 insertions(+), 68 deletions(-)

diff --git a/src/pages/Proof/Reply_Public/ApplicationDetails.js b/src/pages/Proof/Reply_Public/ApplicationDetails.js
index 5ddffdc..e0e65bd 100644
--- a/src/pages/Proof/Reply_Public/ApplicationDetails.js
+++ b/src/pages/Proof/Reply_Public/ApplicationDetails.js
@@ -119,7 +119,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </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: {xs:0, sm:0, md:1, lg:1} }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
@@ -147,7 +147,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </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: {xs:0, sm:0, md:1, lg:1} }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
@@ -178,29 +178,36 @@ const ApplicationDetailCard = ({ formData, }) => {
                             </Grid>
                         </Grid>
 
-                        <Grid container direction="row" justifyContent="space-between"
-                            alignItems="center">
+                        <Grid container
+                              direction="row"
+                              justifyContent="space-between"
+                              alignItems="center"
+                              width="auto"
+                        >
 
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
+                            <Grid item xs={12} sm={12} md={6} lg={6} sx={{mb: 1}}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center',wordBreak: 'break-word' }}>
                                         <Typography><Typography variant="h5">請下載下列印刷稿檔案，並仔細校對：</Typography></Typography>
                                     </Grid>
+                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}}>
+                                        <FileList
+                                            lang="ch"
+                                            refId={params.id}
+                                            refType={"proof"}
+                                            dateHideable={true}
+                                            disablePagination
+                                            disableSelectionOnClick
+                                            disableColumnMenu
+                                            disableColumnSelector
+                                            hideFooter
+                                        />
+                                    </Grid>
                                 </Grid>
-                                <FileList
-                                    lang="ch"
-                                    refId={params.id}
-                                    refType={"proof"}
-                                    dateHideable={true}
-                                    disablePagination
-                                    disableSelectionOnClick
-                                    disableColumnMenu
-                                    disableColumnSelector
-                                    hideFooter
-                                />
+
                             </Grid>
 
-                            <Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
@@ -209,17 +216,16 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">&emsp;{DateUtils.datetimeStr_Cht(data.returnBeforeDate)} 前</Typography>
                                     </Grid>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">應繳費用:</Typography>
                                     </Grid>
-                                    <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h2" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
+                                    <Grid item xs={12} sm={9} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h4" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
                                     </Grid>
-                                    <Grid item xs={0} md={3} lg={3} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}></Grid>
                                     <Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         {
-                                            formik.values.groupType == "Private Bill"
+                                            formik.values.groupType === "Private Bill"
                                                 ?
                                                 <Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography>
                                                 :
diff --git a/src/pages/Proof/Reply_Public/ProofForm.js b/src/pages/Proof/Reply_Public/ProofForm.js
index d99e197..8352580 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -135,7 +135,7 @@ const FormPanel = ({ formData }) => {
 
 
     return (
-        <MainCard xs={12} md={12} lg={12}
+        <MainCard xs={12} sm={12} md={12} lg={12}
             border={false}
             content={false}>
 
diff --git a/src/pages/Proof/Reply_Public/index.js b/src/pages/Proof/Reply_Public/index.js
index f1b3578..43f6e22 100644
--- a/src/pages/Proof/Reply_Public/index.js
+++ b/src/pages/Proof/Reply_Public/index.js
@@ -3,7 +3,6 @@ import {
     Grid,
     Typography,
     Stack,
-    Box,
     Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
@@ -20,6 +19,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
 const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import MainCard from "../../../components/MainCard";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -39,22 +39,6 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [onReady, setOnReady] = React.useState(false);
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     React.useEffect(() => {
         loadForm();
     }, []);
@@ -98,7 +82,7 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
@@ -106,38 +90,44 @@ const Index = () => {
                             </Stack>
                         </div>
                     </Grid>
-                    <Grid item xs={12} width="95%">
-                        <Button title="返回" sx={{ ml: 1.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/proof/search") }}>
+                    <Grid item xs={12} width="100%">
+                        <Button title="返回" sx={{ mt: 2.5, ml: 3 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/proof/search") }}>
                             <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                         </Button>
                     </Grid>
                     {/*row 1*/}
-                    <Grid item xs={12} md={12} >
-                        <Grid container justifyContent="flex-start" alignItems="center" >
-                            <center>
-                                <Grid item xs={12} md={12} sx={{ pt: 2 }}>
-                                    <Box xs={12} md={12} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx }}>
-                                        <ApplicationDetails
-                                            formData={record}
-                                            style={{
-                                                display: "flex",
-                                                height: "100%",
-                                                flex: 1
-                                            }}
-                                        />
-                                    </Box>
-                                </Grid>
-                                <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}>
-                                    <Box xs={12} md={12} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx }}>
-                                        <ProofForm
-                                            formData={record}
-                                        />
-                                    </Box>
-                                </Grid>
-                            </center>
-                        </Grid>
+                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt:2, mb: -3}}>
+                        <MainCard
+                            sx={{
+                                mr:2,
+                                boxShadow: 1,
+                                border: 1,
+                                borderColor: '#DDD',
+                            }}
+                            border= '1px groove grey'
+                        >
+                            <ApplicationDetails
+                                formData={record}
+                            />
+                        </MainCard>
                     </Grid>
+
                     {/*row 2*/}
+                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt: 2, mb: 2}}>
+                        <MainCard
+                            sx={{
+                                boxShadow: 1,
+                                border: 1,
+                                borderColor: '#DDD',
+                            }}
+                            border= '1px groove grey'
+                            // sx={..._sx}
+                        >
+                            <ProofForm
+                                formData={record}
+                            />
+                        </MainCard>
+                    </Grid>
                 </Grid >