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

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);
             }
         });
     }
@@ -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

@@ -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}>
 

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>