From da6bcd39fb9ea13aae847e444a69eaa2401d7552 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Thu, 6 Jun 2024 12:20:14 +0800
Subject: [PATCH] fix bug

---
 src/components/FiDataGrid.js                  |   1 +
 src/pages/DemandNote/Search/DataGrid.js       |  35 ++-
 src/pages/DemandNote/Search/index.js          |   1 -
 src/pages/Proof/Reply_Public/ProofForm.js     | 255 +++++++++---------
 .../ApplyForm/PublicNoticeApplyForm.js        | 138 +++++-----
 5 files changed, 217 insertions(+), 213 deletions(-)

diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 17150dd..e62f4d9 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -127,6 +127,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         <DataGrid
             {...props}
             rows={_rows}
+            rowCount={rowCount?rowCount:0}
             columns={_columns}
             paginationMode="server"
             disableColumnMenu
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index cda2c44..078c416 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -28,7 +28,7 @@ import { ThemeProvider } from "@emotion/react";
 import { isGrantedAny } from "auth/utils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchDemandNote({ searchCriteria, applySearch }) {
+export default function SearchDemandNote({ applySearch, searchCriteria }) {
 
     const [isConfirmPopUp, setConfirmPopUp] = useState(false);
     const [isRevokePopUp, setRevokePopUp] = useState(false);
@@ -36,9 +36,9 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
     const [isErrorPopUp, setIsErrorPopUp] = useState(false);
     const [selectonWarning, setSelectonWarning] = useState(false);
     const [wait, setWait] = useState(false);
-
+    const [reload, setReload] = useState(new Date());
     const [rows, setRows] = useState([]);
-    const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
+    const [_searchCriteria, set_searchCriteria] = useState({});
     const [selectedRowItems, setSelectedRowItems] = useState([]);
     const navigate = useNavigate()
 
@@ -46,6 +46,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
         set_searchCriteria(searchCriteria);
     }, [searchCriteria]);
 
+
     const handleDnClick = (params) => () => {
         navigate('/paymentPage/demandNote/details/' + params.id);
     };
@@ -111,8 +112,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                 dnIdList: idList
             },
             onSuccess: () => {
-                searchCriteria.reload = new Date();
-                set_searchCriteria(searchCriteria);
+                setReload(new Date());
             }
         });
 
@@ -136,9 +136,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
             },
             files: [file],
             onSuccess() {
-                setWait(false);
-                searchCriteria.reload = new Date();
-                set_searchCriteria(searchCriteria);
+                setReload(new Date());
             },
         });
         document.getElementById("uploadFileBtn").value = "";
@@ -163,8 +161,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                 dnIdList: idList
             },
             onSuccess: () => {
-                searchCriteria.reload = new Date();
-                set_searchCriteria(searchCriteria);
+                setReload(new Date());
             }
         });
     }
@@ -188,8 +185,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                 dnIdList: idList
             },
             onSuccess: () => {
-                searchCriteria.reload = new Date();
-                set_searchCriteria(searchCriteria);
+                setReload(new Date());
             }
         });
     }
@@ -270,9 +266,11 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
             width: 300,
             renderCell: (params) => {
                 return (<table>
-                    <tr><td>Issue:</td><td>{DateUtils.dateStr(params?.row.issueDate)}</td></tr>
-                    <tr><td>Due:</td><td>{params?.value ? DateUtils.dateStr(params?.value) : "--"}</td></tr>
-                    <tr><td>Sent:</td><td>{params.row.sentDate ? <> {DateUtils.datetimeStr(params.row.sentDate)}  -  {params.row.sentBy} </> : <> To be sent</>}</td></tr>
+                    <tbody>
+                        <tr><td>Issue:</td><td>{DateUtils.dateStr(params?.row.issueDate)}</td></tr>
+                        <tr><td>Due:</td><td>{params?.value ? DateUtils.dateStr(params?.value) : "--"}</td></tr>
+                        <tr><td>Sent:</td><td>{params.row.sentDate ? DateUtils.datetimeStr(params.row.sentDate)  -  params.row.sentBy :  "To be sent"}</td></tr>
+                    </tbody>
                 </table>);
             }
         },
@@ -292,7 +290,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
             headerName: 'Status',
             width: 175,
             renderCell: (params) => {
-                return [StatusUtils.getStatus_Eng(params)]
+                return StatusUtils.getStatus_Eng(params)
             },
         },
     ];
@@ -330,6 +328,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                                 </Button>
                             </label>
                         </Grid>
+
                         <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                             <Button
                                 variant="contained"
@@ -380,7 +379,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
             }
             <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
                 <FiDataGrid
-                    checkboxSelection = {isGrantedAny(["MAINTAIN_DEMANDNOTE"])}
+                    checkboxSelection={isGrantedAny(["MAINTAIN_DEMANDNOTE"])}
                     disableRowSelectionOnClick
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
@@ -395,7 +394,7 @@ export default function SearchDemandNote({ searchCriteria, applySearch }) {
                         callback: function (responseData) {
                             setRows(responseData?.records);
                         }
-                    }), [_searchCriteria])}
+                    }), [_searchCriteria, reload])}
                 />
             </Box>
             <div>
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index 7a61d27..10a8401 100644
--- a/src/pages/DemandNote/Search/index.js
+++ b/src/pages/DemandNote/Search/index.js
@@ -72,7 +72,6 @@ const UserSearchPage_Individual = () => {
         });
     }
 
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
diff --git a/src/pages/Proof/Reply_Public/ProofForm.js b/src/pages/Proof/Reply_Public/ProofForm.js
index 3ebc526..807abc5 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -319,86 +319,7 @@ const FormPanel = ({ formData }) => {
                                             isDummyLoggedIn() ?
                                                 <Grid item xs={12} sx={{ mb: 1, }}>
                                                     <table style={tabelStyle}>
-                                                        <tr style={tabelStyle}>
-                                                            <th style={tabelStyle} width="50" align="left"></th>
-                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
-                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
-                                                            <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
-                                                        </tr>
-                                                        <tr>
-                                                            <td style={tabelStyle}>
-                                                                <Checkbox
-                                                                    checked={paymentMethod == "demandNote"}
-                                                                    onChange={() => {
-                                                                        set_paymentMethod("demandNote")
-                                                                    }}
-                                                                />
-                                                            </td>
-                                                            <td style={tabelStyle}>
-                                                                <FormattedMessage id="payDn" />
-                                                                <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
-                                                                    setWarningTitle(intl.formatMessage({ id: "payDn" }))
-                                                                    setWarningText(
-                                                                        <><FormattedMessage id="paymentMethodMeans" />
-                                                                            <ul>
-                                                                                <li><FormattedMessage id="atm" /></li>
-                                                                                <li><FormattedMessage id="pps" /></li>
-                                                                                <li><FormattedMessage id="eBank" /></li>
-                                                                                <li><FormattedMessage id="phoneBank" /></li>
-                                                                                <li><FormattedMessage id="eCheque" /></li>
-                                                                                <li><FormattedMessage id="fps" /></li>
-                                                                                <li><FormattedMessage id="hkpo" /></li>
-                                                                                <li><FormattedMessage id="store" /></li>
-                                                                                <li><FormattedMessage id="post" /></li>
-                                                                            </ul>
-                                                                        </>
-                                                                    );
-                                                                    setIsWarningPopUp(true);
-                                                                }}><FormattedMessage id="viewDetail" /></a>
-                                                            </td>
-                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
-                                                            <td style={tabelStyle}>
-                                                                <FormattedMessage id="payDnRemark" values={{
-                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:00 p.m."
-                                                                }} />
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td style={tabelStyle}>
-                                                                <Checkbox
-                                                                    checked={paymentMethod == "office"}
-                                                                    onChange={() => {
-                                                                        set_paymentMethod("office")
-                                                                    }}
-                                                                />
-                                                            </td>
-                                                            <td style={tabelStyle}>
-                                                                <FormattedMessage id="payNPGO" />
-                                                                <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
-                                                                    setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
-                                                                    setWarningText(
-                                                                        <><FormattedMessage id="paymentMethodMeans" />
-                                                                            <ul>
-                                                                                <li><FormattedMessage id="cheque" /></li>
-                                                                                <li><FormattedMessage id="cash" /></li>
-                                                                            </ul>
-                                                                        </>
-                                                                    );
-                                                                    setIsWarningPopUp(true);
-                                                                }}><FormattedMessage id="viewDetail" /></a>
-                                                            </td>
-                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
-                                                            <td style={tabelStyle}>
-                                                                <FormattedMessage id="payNPGORemark" values={{
-                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
-                                                                }} />
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                </Grid> :
-                                                <>
-                                                    <Grid item xs={12} sx={{ mb: 1, }}>
-                                                        <table style={tabelStyle}>
+                                                        <tbody>
                                                             <tr style={tabelStyle}>
                                                                 <th style={tabelStyle} width="50" align="left"></th>
                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
@@ -408,43 +329,12 @@ const FormPanel = ({ formData }) => {
                                                             <tr>
                                                                 <td style={tabelStyle}>
                                                                     <Checkbox
-                                                                        checked={paymentMethod == "online"}
+                                                                        checked={paymentMethod == "demandNote"}
                                                                         onChange={() => {
-                                                                            set_paymentMethod("online")
+                                                                            set_paymentMethod("demandNote")
                                                                         }}
                                                                     />
                                                                 </td>
-                                                                <td style={tabelStyle}>
-                                                                    <FormattedMessage id="payOnline" />
-                                                                    <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
-                                                                        setWarningTitle(intl.formatMessage({ id: "payOnline" }))
-                                                                        setWarningText(
-                                                                            <><FormattedMessage id="paymentMethodMeans" />
-                                                                                <ul>
-                                                                                    <li><FormattedMessage id="fps" /></li>
-                                                                                    <li><FormattedMessage id="card" /></li>
-                                                                                    <li><FormattedMessage id="pps" /></li>
-                                                                                </ul>
-                                                                            </>
-                                                                        );
-                                                                        setIsWarningPopUp(true);
-                                                                    }}><FormattedMessage id="viewDetail" /></a>
-                                                                </td>
-                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}</td>
-                                                                <td style={tabelStyle}>{DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}</td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td style={tabelStyle}>
-                                                                    {isOverDnReviseDeadline() ?
-                                                                        <></> :
-                                                                        <Checkbox
-                                                                            checked={paymentMethod == "demandNote"}
-                                                                            onChange={() => {
-                                                                                set_paymentMethod("demandNote")
-                                                                            }}
-                                                                        />
-                                                                    }
-                                                                </td>
                                                                 <td style={tabelStyle}>
                                                                     <FormattedMessage id="payDn" />
                                                                     <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
@@ -467,7 +357,6 @@ const FormPanel = ({ formData }) => {
                                                                         setIsWarningPopUp(true);
                                                                     }}><FormattedMessage id="viewDetail" /></a>
                                                                 </td>
-
                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
                                                                 <td style={tabelStyle}>
                                                                     <FormattedMessage id="payDnRemark" values={{
@@ -475,19 +364,14 @@ const FormPanel = ({ formData }) => {
                                                                     }} />
                                                                 </td>
                                                             </tr>
-
                                                             <tr>
                                                                 <td style={tabelStyle}>
-                                                                    {
-                                                                        isOverNpgoReviseDeadline() ?
-                                                                            <></> :
-                                                                            <Checkbox
-                                                                                checked={paymentMethod == "office"}
-                                                                                onChange={() => {
-                                                                                    set_paymentMethod("office")
-                                                                                }}
-                                                                            />
-                                                                    }
+                                                                    <Checkbox
+                                                                        checked={paymentMethod == "office"}
+                                                                        onChange={() => {
+                                                                            set_paymentMethod("office")
+                                                                        }}
+                                                                    />
                                                                 </td>
                                                                 <td style={tabelStyle}>
                                                                     <FormattedMessage id="payNPGO" />
@@ -511,7 +395,126 @@ const FormPanel = ({ formData }) => {
                                                                     }} />
                                                                 </td>
                                                             </tr>
-
+                                                        </tbody>
+                                                    </table>
+                                                </Grid> :
+                                                <>
+                                                    <Grid item xs={12} sx={{ mb: 1, }}>
+                                                        <table style={tabelStyle}>
+                                                            <tbody>
+                                                                <tr style={tabelStyle}>
+                                                                    <th style={tabelStyle} width="50" align="left"></th>
+                                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
+                                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
+                                                                    <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
+                                                                </tr>
+                                                                <tr>
+                                                                    <td style={tabelStyle}>
+                                                                        <Checkbox
+                                                                            checked={paymentMethod == "online"}
+                                                                            onChange={() => {
+                                                                                set_paymentMethod("online")
+                                                                            }}
+                                                                        />
+                                                                    </td>
+                                                                    <td style={tabelStyle}>
+                                                                        <FormattedMessage id="payOnline" />
+                                                                        <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
+                                                                            setWarningTitle(intl.formatMessage({ id: "payOnline" }))
+                                                                            setWarningText(
+                                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                                    <ul>
+                                                                                        <li><FormattedMessage id="fps" /></li>
+                                                                                        <li><FormattedMessage id="card" /></li>
+                                                                                        <li><FormattedMessage id="pps" /></li>
+                                                                                    </ul>
+                                                                                </>
+                                                                            );
+                                                                            setIsWarningPopUp(true);
+                                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                                    </td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}</td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}</td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <td style={tabelStyle}>
+                                                                        {isOverDnReviseDeadline() ?
+                                                                            <></> :
+                                                                            <Checkbox
+                                                                                checked={paymentMethod == "demandNote"}
+                                                                                onChange={() => {
+                                                                                    set_paymentMethod("demandNote")
+                                                                                }}
+                                                                            />
+                                                                        }
+                                                                    </td>
+                                                                    <td style={tabelStyle}>
+                                                                        <FormattedMessage id="payDn" />
+                                                                        <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
+                                                                            setWarningTitle(intl.formatMessage({ id: "payDn" }))
+                                                                            setWarningText(
+                                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                                    <ul>
+                                                                                        <li><FormattedMessage id="atm" /></li>
+                                                                                        <li><FormattedMessage id="pps" /></li>
+                                                                                        <li><FormattedMessage id="eBank" /></li>
+                                                                                        <li><FormattedMessage id="phoneBank" /></li>
+                                                                                        <li><FormattedMessage id="eCheque" /></li>
+                                                                                        <li><FormattedMessage id="fps" /></li>
+                                                                                        <li><FormattedMessage id="hkpo" /></li>
+                                                                                        <li><FormattedMessage id="store" /></li>
+                                                                                        <li><FormattedMessage id="post" /></li>
+                                                                                    </ul>
+                                                                                </>
+                                                                            );
+                                                                            setIsWarningPopUp(true);
+                                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                                    </td>
+
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
+                                                                    <td style={tabelStyle}>
+                                                                        <FormattedMessage id="payDnRemark" values={{
+                                                                            date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:00 p.m."
+                                                                        }} />
+                                                                    </td>
+                                                                </tr>
+
+                                                                <tr>
+                                                                    <td style={tabelStyle}>
+                                                                        {
+                                                                            isOverNpgoReviseDeadline() ?
+                                                                                <></> :
+                                                                                <Checkbox
+                                                                                    checked={paymentMethod == "office"}
+                                                                                    onChange={() => {
+                                                                                        set_paymentMethod("office")
+                                                                                    }}
+                                                                                />
+                                                                        }
+                                                                    </td>
+                                                                    <td style={tabelStyle}>
+                                                                        <FormattedMessage id="payNPGO" />
+                                                                        <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
+                                                                            setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
+                                                                            setWarningText(
+                                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                                    <ul>
+                                                                                        <li><FormattedMessage id="cheque" /></li>
+                                                                                        <li><FormattedMessage id="cash" /></li>
+                                                                                    </ul>
+                                                                                </>
+                                                                            );
+                                                                            setIsWarningPopUp(true);
+                                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                                    </td>
+                                                                    <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
+                                                                    <td style={tabelStyle}>
+                                                                        <FormattedMessage id="payNPGORemark" values={{
+                                                                            date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
+                                                                        }} />
+                                                                    </td>
+                                                                </tr>
+                                                            </tbody>
 
                                                         </table>
                                                     </Grid>
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 67feee4..55d42f6 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -328,74 +328,76 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
 
                                     <Grid item xs={12} alignItems={"center"} sx={{ p: 2 }}>
                                         <table style={tabelStyle}>
-                                            <tr style={tabelStyle}>
-                                                <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
-                                                <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
-                                                <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
-                                            </tr>
-                                            <tr>
-                                                <td style={tabelStyle}>
-                                                    <FormattedMessage id="payOnline" />
-                                                    <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
-                                                        setWarningTitle(intl.formatMessage({ id: "payOnline" }))
-                                                        setWarningText(
-                                                            <><FormattedMessage id="paymentMethodMeans" />
-                                                                <ul>
-                                                                    <li><FormattedMessage id="fps" /></li>
-                                                                    <li><FormattedMessage id="card" /></li>
-                                                                    <li><FormattedMessage id="pps" /></li>
-                                                                </ul>
-                                                            </>
-                                                        );
-                                                        setIsWarningPopUp(true);
-                                                    }}><FormattedMessage id="viewDetail" /></a>
-                                                </td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:30 p.m.</td>
-                                            </tr>
-                                            <tr>
-                                                <td style={tabelStyle}><FormattedMessage id="payDn" />
-                                                    <br /><a href="#payDnDetails" onClick={() => {
-                                                        setWarningTitle(intl.formatMessage({ id: "payDn" }))
-                                                        setWarningText(
-                                                            <><FormattedMessage id="paymentMethodMeans" />
-                                                                <ul>
-                                                                    <li><FormattedMessage id="atm" /></li>
-                                                                    <li><FormattedMessage id="pps" /></li>
-                                                                    <li><FormattedMessage id="eBank" /></li>
-                                                                    <li><FormattedMessage id="phoneBank" /></li>
-                                                                    <li><FormattedMessage id="eCheque" /></li>
-                                                                    <li><FormattedMessage id="fps" /></li>
-                                                                    <li><FormattedMessage id="hkpo" /></li>
-                                                                    <li><FormattedMessage id="store" /></li>
-                                                                    <li><FormattedMessage id="post" /></li>
-                                                                </ul>
-                                                            </>
-                                                        );
-                                                        setIsWarningPopUp(true);
-                                                    }}><FormattedMessage id="viewDetail" /></a>
-                                                </td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
-                                            </tr>
-                                            <tr>
-                                                <td style={tabelStyle}><FormattedMessage id="payNPGO" />
-                                                    <br /><a href="#payNPGODetails" onClick={() => {
-                                                        setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
-                                                        setWarningText(
-                                                            <><FormattedMessage id="paymentMethodMeans" />
-                                                                <ul>
-                                                                    <li><FormattedMessage id="cheque" /></li>
-                                                                    <li><FormattedMessage id="cash" /></li>
-                                                                </ul>
-                                                            </>
-                                                        );
-                                                        setIsWarningPopUp(true);
-                                                    }}><FormattedMessage id="viewDetail" /></a>
-                                                </td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
-                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:30 p.m.</td>
-                                            </tr>
+                                            <tbody>
+                                                <tr style={tabelStyle}>
+                                                    <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
+                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
+                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
+                                                </tr>
+                                                <tr>
+                                                    <td style={tabelStyle}>
+                                                        <FormattedMessage id="payOnline" />
+                                                        <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
+                                                            setWarningTitle(intl.formatMessage({ id: "payOnline" }))
+                                                            setWarningText(
+                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                    <ul>
+                                                                        <li><FormattedMessage id="fps" /></li>
+                                                                        <li><FormattedMessage id="card" /></li>
+                                                                        <li><FormattedMessage id="pps" /></li>
+                                                                    </ul>
+                                                                </>
+                                                            );
+                                                            setIsWarningPopUp(true);
+                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                    </td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:30 p.m.</td>
+                                                </tr>
+                                                <tr>
+                                                    <td style={tabelStyle}><FormattedMessage id="payDn" />
+                                                        <br /><a href="#payDnDetails" onClick={() => {
+                                                            setWarningTitle(intl.formatMessage({ id: "payDn" }))
+                                                            setWarningText(
+                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                    <ul>
+                                                                        <li><FormattedMessage id="atm" /></li>
+                                                                        <li><FormattedMessage id="pps" /></li>
+                                                                        <li><FormattedMessage id="eBank" /></li>
+                                                                        <li><FormattedMessage id="phoneBank" /></li>
+                                                                        <li><FormattedMessage id="eCheque" /></li>
+                                                                        <li><FormattedMessage id="fps" /></li>
+                                                                        <li><FormattedMessage id="hkpo" /></li>
+                                                                        <li><FormattedMessage id="store" /></li>
+                                                                        <li><FormattedMessage id="post" /></li>
+                                                                    </ul>
+                                                                </>
+                                                            );
+                                                            setIsWarningPopUp(true);
+                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                    </td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
+                                                </tr>
+                                                <tr>
+                                                    <td style={tabelStyle}><FormattedMessage id="payNPGO" />
+                                                        <br /><a href="#payNPGODetails" onClick={() => {
+                                                            setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
+                                                            setWarningText(
+                                                                <><FormattedMessage id="paymentMethodMeans" />
+                                                                    <ul>
+                                                                        <li><FormattedMessage id="cheque" /></li>
+                                                                        <li><FormattedMessage id="cash" /></li>
+                                                                    </ul>
+                                                                </>
+                                                            );
+                                                            setIsWarningPopUp(true);
+                                                        }}><FormattedMessage id="viewDetail" /></a>
+                                                    </td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
+                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:30 p.m.</td>
+                                                </tr>
+                                            </tbody>
                                         </table>
 
                                     </Grid>