Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/layout/MainLayout/Header/index.js

@@ -97,7 +97,7 @@ function Header(props) {
               <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>GFMIS Generate XML</Typography></Link>
             </li>
             <li>
-              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Create DN</Typography></Link>
+              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Create Demand Note</Typography></Link>
             </li>
             <li>
               <Link className="demandNote" to='/paymentPage/demandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Demand Note</Typography></Link>

src/pages/DemandNote/Create/DataGrid.js

@@ -50,7 +50,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Status',
             flex: 1,
             renderCell: (params) => {
-                return PublicNoteStatusUtils.getStatusByTextEng(params.row.status);
+                return PublicNoteStatusUtils.getStatusByTextEng(params.row.status, params.row.creditor);
             }
         },
         {

src/pages/DemandNote/Create/SearchForm.js

@@ -14,15 +14,23 @@ import * as DateUtils from "utils/DateUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
+import { notifyDownloadSuccess } from 'utils/CommonFunction';
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
+const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _publishCount }) => {
 
     const [isFailPopUp, setIsFailPopUp] = React.useState(false);
     const [failText, setFailText] = React.useState("");
 
+    const [isSuccessPopUp, setIsSuccessPopUp] = React.useState(false);
+    const [resultCount, setResultCount] = React.useState(0);
+
     const [issueSelected, setIssueSelected] = React.useState({});
+    const [paymentCount, setPaymentCount] = React.useState(0);
+    const [publishCount, setPublishCount] = React.useState(0);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const navigate = useNavigate()
 
@@ -48,7 +56,14 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
         }
     }, [issueComboData]);
 
-    
+    React.useEffect(() => {
+        setPaymentCount(_paymentCount);
+    }, [_paymentCount]);
+
+    React.useEffect(() => {
+        setPublishCount(_publishCount);
+    }, [_publishCount]);
+
     React.useEffect(() => {
         onPreView();
     }, [issueSelected]);
@@ -69,14 +84,33 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
         } else {
             HttpUtils.post({
                 url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
-                onSuccess: function () {
-                    navigate('/paymentPage/demandNote');
+                onSuccess: function (responseData) {
+                    setResultCount(responseData.count);
+                    setIsSuccessPopUp(true);
                 }
             });
         }
 
     };
 
+    const fileDownload = () => {
+        HttpUtils.fileDownload({
+            url: UrlUtils.DEMAND_NOTE_EXPORT,
+            params: {
+                "issueId": issueSelected.id
+            },
+            onSuccess: function () {
+                notifyDownloadSuccess();
+            }
+        });
+    }
+
+    const onNavigate = () => {
+        setIsSuccessPopUp(false);
+        if(resultCount > 0)
+            navigate('/paymentPage/demandNote');
+    };
+
     const onPreView = () => {
         if (!issueSelected?.id) {
             return;
@@ -104,7 +138,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb:1 }}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 1 }}>
                         <Autocomplete
                             disablePortal
                             id="issueId"
@@ -139,7 +173,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
                             <Typography variant="h5">Preview</Typography>
                         </Button>
                     </Grid> */}
-                    <Grid item sx={{ ml: 3, mr: 3}} >
+                    <Grid item sx={{ ml: 3, mr: 3 }} >
                         <Button
                             size="large"
                             variant="contained"
@@ -152,6 +186,14 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
                             <Typography variant="h5">Create</Typography>
                         </Button>
                     </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3 }} >
+                        <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3 }} >
+                        <Typography variant="h5">Pending Publish: {publishCount}</Typography>
+                    </Grid>
                 </Grid>
             </form>
             <div>
@@ -165,6 +207,35 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
                     </DialogActions>
                 </Dialog>
             </div>
+            <div>
+                <Dialog open={isSuccessPopUp} onClose={() => setIsSuccessPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Create Result</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Grid container alignItems={"center"}>
+                            <Grid item md={12}>
+                                <Typography variant="h4" style={{ padding: '16px' }}>Created DN record: {resultCount}</Typography>
+                            </Grid>
+                            {resultCount == 0 ? <></> :
+                                <Grid item md={12}>
+                                    <Button
+                                        size="large"
+                                        onClick={fileDownload}
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end'
+                                        }}>
+                                        <Typography variant="h5">Click here to download GDNS xml file.</Typography>
+                                    </Button>
+                                </Grid>
+                            }
+
+                        </Grid>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => onNavigate()}><Typography variant="h5">OK</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
         </MainCard>
     );
 };

src/pages/DemandNote/Create/index.js

@@ -35,6 +35,9 @@ const Index = () => {
     const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
 
+    const [paymentCount, setPaymentCount] = React.useState(0);
+    const [publishCount, setPublishCount] = React.useState(0);
+
     React.useEffect(()=>{
         getIssueCombo();
     },[]);
@@ -51,7 +54,9 @@ const Index = () => {
         HttpUtils.get({
             url: UrlUtils.DEMAND_NOTE_PREVIEW+"/"+searchCriteria.issueId,
             onSuccess: function(responseData){
-                setRecord(responseData);
+                setRecord(responseData.records);
+                setPaymentCount(responseData.paymentCount);
+                setPublishCount(responseData.publishCount);
             }
         });
     }
@@ -79,7 +84,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Create DN</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">Create Demand Note</Typography>
                         </Stack>
                     </div>
                 </Grid>
@@ -88,6 +93,8 @@ const Index = () => {
                     <SearchForm 
                     applySearch={applySearch}
                     issueComboData={issueCombo}
+                    _paymentCount={paymentCount}
+                    _publishCount={publishCount}
                     />
                 </Grid>
                 {/*row 2*/}

src/pages/DemandNote/Search/index.js

@@ -18,6 +18,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
 const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { notifyDownloadSuccess } from 'utils/CommonFunction';
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -77,6 +78,7 @@ const UserSearchPage_Individual = () => {
             url: UrlUtils.DEMAND_NOTE_EXPORT,
             params: searchCriteria,
             onSuccess: function () {
+                notifyDownloadSuccess();
             }
         });
     }

src/pages/Payment/index.js

@@ -29,6 +29,8 @@ import {
 // import FpsIcon from "assets/images/icons/fps.svg";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {ThemeProvider} from "@emotion/react";
+import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -424,10 +426,10 @@ const Index = () => {
             </Grid>
             <Grid item xs={12} md={12} width="100%">
                 <Stack direction="row" justifyContent="flex-end" alignItems="flex-start" spacing={2} mr={12} >
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Button
                             component="span"
                             variant="contained"
-                            size="large"
                             // color="error"
                             onClick={() => paymentClick()}
                             sx={{ mt: 4 }}
@@ -436,12 +438,12 @@ const Index = () => {
                     <Button
                             component="span"
                             variant="contained"
-                            size="large"
                             // color="error"
                             onClick={() => { navigate("/publicNotice") }}
                             sx={{ mt: 4 }}
                         >取消
                     </Button>
+                    </ThemeProvider>
                 </Stack>
             </Grid>
             {/*row 2*/}

src/pages/Proof/Payment/Pay.js

@@ -32,6 +32,8 @@ import {
     // useEffect,
     useState
 } from "react";
+import {PNSPS_BUTTON_THEME, PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
@@ -90,11 +92,11 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={8} >
-                                    <Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
+                                    <Typography variant="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
                                         公共啟事：校對完成及付款
                                     </Typography>
 
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                         我們已收到申請編號: {record?.appNo} 的稿件校對確定及可付印的指示。
                                         <br /><br />
                                         請於  <span style={{ color: "red" }}>{DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前</span>  完成繳費，我們將於收到繳費確認後處理刊出事宜。
@@ -102,36 +104,57 @@ const Index = () => {
                                         如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件校對確定後，於繳費期限前在「我的公共啟事」內合併付款。
                                     </Typography>
 
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                         請按以下完成繳費：
-                                        <Button
-                                            component="span"
-                                            variant="contained"
-                                            size="large"
-                                            sx={{ m: 4}}
-                                            onClick={() => { setIsPopUp(true) }}
-                                        ><Typography variant="h5">即時網上繳費</Typography></Button>
+                                    </Typography>
+
+                                    <Typography variant="h4" sx={{ml:8, textAlign: "left" }}>
+                                        <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
+                                            <Button
+                                                component="span"
+                                                variant="contained"
+                                                sx={{ ml: {md:4,lg:4}, mr:4}}
+                                                onClick={() => { setIsPopUp(true) }}
+                                            >
+                                                即時網上繳費
+                                            </Button>
+                                        </ThemeProvider>
 
                                         或
 
-                                        <Button
-                                            component="span"
-                                            variant="contained"
-                                            size="large"
-                                            sx={{ m: 4}}
-                                            onClick={()=>{
-                                                navigate("/publicNotice");
-                                            }}
-                                        ><Typography variant="h5">稍後繳費 - 返回「我的公共啟事」</Typography></Button>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                            <Button
+                                                component="span"
+                                                variant="contained"
+                                                sx={{ ml: {sm:4, md:4, lg:4}, mr: 4, mt:{xs:2,sm:2}, mb:{xs:2, sm:2}}}
+                                                onClick={()=>{
+                                                    navigate("/publicNotice");
+                                                }}
+                                            >
+                                                稍後繳費
+                                            </Button>
+                                            （返回「我的公共啟事」）
+                                        </ThemeProvider>
                                     </Typography>
                                 </Grid>
                             </center>
                         </Grid>
                     </Grid>
                     <div>
-                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                            <DialogTitle></DialogTitle>
-                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                        <Dialog
+                            open={isPopUp}
+                            onClose={() => setIsPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle>
+                                <Typography variant="h3" >確認付款</Typography>
+                            </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>

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>
                                                 :

src/pages/Proof/Reply_Public/ProofForm.js

@@ -22,6 +22,8 @@ import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils"
 import Loadable from 'components/Loadable';
 import { notifyActionSuccess } from 'utils/CommonFunction';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -135,7 +137,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}>
 
@@ -147,8 +149,8 @@ const FormPanel = ({ formData }) => {
 
                 {
                     formik.values.replyDate ?
-                        <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
-                            <Grid item xs={12} md={12} textAlign="left">
+                        <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}>
+                            <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left">
                                 <Typography variant="h5">校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)}</Typography>
                             </Grid>
                             <Grid item xs={12} md={12} textAlign="left">
@@ -158,7 +160,7 @@ const FormPanel = ({ formData }) => {
                                 formik.values.action ?
                                     null
                                     :
-                                    <Grid item xs={12} md={12} textAlign="left">
+                                    <Grid item xs={12} md={12} textAlign="left" sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}}>
                                         <FileList
                                             lang="ch"
                                             refId={params.id}
@@ -177,13 +179,13 @@ const FormPanel = ({ formData }) => {
                         :
                         (
                             isOverTime() ?
-                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
+                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
                                         <Typography variant="h5">回覆逾時，請重新申請。</Typography>
                                     </Grid>
                                 </Grid>
                                 :
-                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
+                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
 
                                     <Grid item xs={12} md={12}>
                                         <RadioGroup
@@ -217,31 +219,33 @@ const FormPanel = ({ formData }) => {
                                                         type="file"
                                                         accept=".pdf"
                                                         style={{ display: 'none' }}
-                                                        disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
+                                                        disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                         onChange={(event) => {
                                                             readFile(event)
                                                         }}
                                                     />
                                                     <label htmlFor="uploadFileBtn">
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
+                                                            color="save"
                                                             component="span"
                                                             variant="contained"
-                                                            size="large"
-                                                            disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
+                                                            disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                         >
-                                                            <Typography variant="h5">上載</Typography>
+                                                            上載
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </label>
                                                 </Grid>
 
 
-                                                <Grid item xs={12} md={12} textAlign="left">
+                                                <Grid item xs={12} md={12} textAlign="left" sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}} >
                                                     <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />
                                                 </Grid>
                                             </>
                                     }
 
-                                    <Grid item xs={12} md={12} lg={12}>
+                                    <Grid item xs={12} sm={12} md={12} lg={12}>
                                         <Stack direction="row" alignItems="center">
                                             <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>
                                                 <Typography variant="h5">簽署：</Typography>
@@ -261,7 +265,7 @@ const FormPanel = ({ formData }) => {
                                                             WebkitTextFillColor: "#000000",
                                                             background: "#f8f8f8",
                                                         },
-                                                        width: '50%'
+                                                        width: '70%'
                                                     }
                                                 }
                                             />
@@ -271,17 +275,15 @@ const FormPanel = ({ formData }) => {
 
 
                                     <Grid item xs={12} md={12} textAlign="left">
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             color="success"
                                             type="submit"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}>
-                                            <Typography variant="h5">提交回覆</Typography>
+                                        >
+                                            提交回覆
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
 
                                 </Grid>

src/pages/Proof/Reply_Public/UploadFileTable.js

@@ -10,15 +10,18 @@ import {useEffect} from "react";
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
-    Box,
-    Stack
+    Stack, useMediaQuery
 } from '@mui/material';
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
     
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel,setRowModesModel] = React.useState({});
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+
     // const theme = useTheme();
 
     // const navigate = useNavigate()
@@ -74,7 +77,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
             id: 'name',
             field: 'name',
             headerName: '檔案名稱',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'size',
@@ -84,13 +88,14 @@ export default function UploadFileTable({recordList, setRecordList,}) {
                 // console.log(params)
                 return Math.ceil(params.value/1024)+" KB";
               },
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
     ];
 
     return (
-        <Box
-         style={{ height: '200px', width: '75%' }}
+        <div
+         style={{ height: '200px', width: '95%',overflowX: 'auto', }}
          >
             <DataGrid
                 rows={rows}
@@ -106,6 +111,6 @@ export default function UploadFileTable({recordList, setRecordList,}) {
                 disableColumnSelector
                 hideFooter
             />
-        </Box>
+        </div>
     );
 }

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 >
 
 

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -39,6 +39,7 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import * as React from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -142,26 +143,23 @@ const ApplicationDetailCard = (
                             spacing={2}
                             mb={2}
                         >
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             {
                                 currentApplicationDetailData.status == "confirmed" ?
                                     <Button
-                                        // size="large"
                                         variant="contained"
+                                        color="create"
                                         onClick={() => { checkExprityDate(true) }}
                                         disabled={currentApplicationDetailData.status == "rejected"
                                             || currentApplicationDetailData.status == "cancelled"
                                             || currentApplicationDetailData.status == "paid"
                                             || currentApplicationDetailData.creditor}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}>
-                                        <EditNoteIcon />
-                                        <Typography ml={1} variant="h5"> 支付</Typography>
+                                        startIcon={<EditNoteIcon />}
+                                    >
+                                        支付
                                     </Button>
                                     : null
                             }
-                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Button
                                 variant="contained"
                                 onClick={cancelledClick()}
@@ -567,9 +565,20 @@ const ApplicationDetailCard = (
                         </Grid>
                     </Grid>
                     <div>
-                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                            <DialogTitle></DialogTitle>
-                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                        <Dialog
+                            open={isPopUp}
+                            onClose={() => setIsPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle>
+                                <Typography variant="h3" >確認付款</Typography>
+                            </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -83,7 +83,7 @@ const CustomFormWizard = (props) => {
 
     const responseToData = () => {
         //let rd = JSON.parse("{\"emailAddress\":\"[email protected]\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}");
-        let rd = location.state?.responseData;
+        let rd = JSON.parse(location.state?.responseData.data);
         let data = {
             "enName": rd?.enName?.UnstructuredName ?? "",
             "chName": rd?.chName?.ChineseName ?? "",

src/pages/iAmSmart/AuthCallback/index.js

@@ -18,10 +18,10 @@ const Index = () => {
     const navigate = useNavigate()
 
     React.useEffect(() => {
-        getPrfile();
+        goLogin();
     }, []);
 
-    function getPrfile(){
+    function goLogin(){
         dispatch(handleLogoutFunction());
 
         let params = new URLSearchParams(window.location.search)
@@ -32,10 +32,8 @@ const Index = () => {
                     code: params.get("code")
                 },
                 onSuccess: (responseData) => {
-
-                    //navigate('/iAmSmartRegisterFrom', { state: { responseData: responseData } });
-
-                        console.log(response)
+                    console.log("responseData");
+                    console.log(responseData);
                         const userData = {
                           id: responseData.id,
                           fullenName: responseData.name,
@@ -48,17 +46,17 @@ const Index = () => {
                           //avatar: require('src/assets/images/users/avatar-3.png').default,
                         }
                         const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken }
-                        // setSuccess(true)
                         dispatch(handleLogin(data))
                         navigate('/dashboard');
-                        location.reload()
-
                 },
-                onFail: ()=>{
-                    window.location.assign("/login");
+                onFail: (response)=>{
+                    console.log("Fail");
+                    console.log(response);
+                    window.location.assign("/iamsmart/loginFail");
                 },
-                onError:()=>{
-                    window.location.assign("/login");
+                onError:(error)=>{
+                    console.log(error);
+                    //window.location.assign("/iamsmart/loginFail");
                 }
             });
         }

src/routes/LoginRoutes.js

@@ -57,10 +57,6 @@ const LoginRoutes = {
       path: 'error',
       element: <ErrorPage/>
     },
-    {
-      path: 'iamsmart/fallcallback',
-      element: <IAmSmart_AuthCallback/>
-    },
     {
       path: 'iamsmart/authcallback',
       element: <IAmSmart_AuthCallback/>
@@ -70,7 +66,7 @@ const LoginRoutes = {
       element: <IAmSmart_RegistryCallback/>
     },
     {
-      path: 'iamsmart/loginFall',
+      path: 'iamsmart/loginFail',
       element: <IAmSmart_FailCallback/>
     },
     {

src/utils/statusUtils/PublicNoteStatusUtils.js

@@ -28,9 +28,9 @@ export function getStatusByText(status, creditor) {
         case "resubmit":
             return getStatusTag({ color: "#757373", text: "需重新提交" })
         case "cancelled":
-            return getStatusTag({ color: "#f5a83d", text: "已取消" })
+            return getStatusTag({ color: "#909497", text: "已取消" })
         case "withdrawn":
-            return getStatusTag({ color: "#8a8784", text: "已撤銷" })
+            return getStatusTag({ color: "#909497", text: "已撤銷" })
         default:
             return getStatusTag({ text: status })
     }
@@ -42,18 +42,18 @@ export function getStatusEng(params) {
 export function getStatusByTextEng(status, creditor) {
     switch (status) {
         case "submitted":
-            return getStatusTag({ color: "#f5a83d", text: "Submitted" })
+            return getStatusTag({ color: "#F1C40F", text: "Submitted" })
         case "reviewed":
             return getStatusTag({ color: "#0C489E", text: "Reviewed" })
         case "confirmed":
             if (creditor)
-                return getStatusTag({ color: "#22a13f", text: "Pending Publish" })
+                return getStatusTag({ color: "#3498DB", text: "Pending Publish" })
             else
-                return getStatusTag({ color: "#22a13f", text: "Pending Payment" })
+                return getStatusTag({ color: "#F39C12", text: "Pending Payment" })
         case "published":
-            return getStatusTag({ color: "#22a13f", text: "Pending Payment" })
+            return getStatusTag({ color: "#F39C12", text: "Pending Payment" })
         case "paid":
-            return getStatusTag({ color: "#22a13f", text: "Pending Publish" })
+            return getStatusTag({ color: "#3498DB", text: "Pending Publish" })
         case "complated":
             return getStatusTag({ color: "#8a8784", text: "Completed" })
         case "notAccepted":