From 1030c8abe2f27dfac1e07202b83b13733281fd8d Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Thu, 18 Dec 2025 13:29:10 +0800
Subject: [PATCH] update layout

---
 src/pages/Proof/Payment/Pay_DN.js     | 25 ++++++++++++++++++++-----
 src/pages/Proof/Payment/Pay_Office.js | 25 +++++++++++++++++++++----
 src/pages/Proof/Payment/Pay_Online.js | 25 +++++++++++++++++++++----
 3 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/pages/Proof/Payment/Pay_DN.js b/src/pages/Proof/Payment/Pay_DN.js
index c60d425..ac24b48 100644
--- a/src/pages/Proof/Payment/Pay_DN.js
+++ b/src/pages/Proof/Payment/Pay_DN.js
@@ -48,12 +48,27 @@ const isAfter = checkIsOnlyOnlinePayment();
                     <Grid container justifyContent="flex-start" alignItems="center" >
                         <center>
                             <Grid item xs={12} md={8} >
-                                <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                    <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_demandNote2" : "proofPaymentHeader_demandNote"}
-                                    />
+                                {isAfter ? (
+                                <Typography
+                                    variant="h4"
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_demandNote2" />
                                 </Typography>
-
+                                ) : (
+                                <Typography
+                                    variant="h4"
+                                    sx={{
+                                    textAlign: "left",
+                                    ml: 4,
+                                    mr: 4,
+                                    mt: 4,
+                                    borderBottom: "1px solid black"
+                                    }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_demandNote" />
+                                </Typography>
+                                )}
 
                                 <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                     <div dangerouslySetInnerHTML={{
diff --git a/src/pages/Proof/Payment/Pay_Office.js b/src/pages/Proof/Payment/Pay_Office.js
index a3c4186..e75ace5 100644
--- a/src/pages/Proof/Payment/Pay_Office.js
+++ b/src/pages/Proof/Payment/Pay_Office.js
@@ -48,11 +48,28 @@ const isAfter = checkIsOnlyOnlinePayment();
                     <Grid container justifyContent="flex-start" alignItems="center" >
                         <center>
                             <Grid item xs={12} md={8} >
-                                <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                    <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_office2" : "proofPaymentHeader_office"}
-                                    />
+                                {isAfter ? (
+                                <Typography
+                                    variant="h4"
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_office2" />
                                 </Typography>
+                                ) : (
+                                <Typography
+                                    variant="h4"
+                                    sx={{
+                                    textAlign: "left",
+                                    ml: 4,
+                                    mr: 4,
+                                    mt: 4,
+                                    borderBottom: "1px solid black"
+                                    }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_office" />
+                                </Typography>
+                                )}
+
 
 
                                 <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
diff --git a/src/pages/Proof/Payment/Pay_Online.js b/src/pages/Proof/Payment/Pay_Online.js
index b961386..a4f8acf 100644
--- a/src/pages/Proof/Payment/Pay_Online.js
+++ b/src/pages/Proof/Payment/Pay_Online.js
@@ -154,11 +154,28 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={8} >
-                                    <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_online2" : "proofPaymentHeader_online"}
-                                    />
+                                    {isAfter ? (
+                                    <Typography
+                                        variant="h4"
+                                        sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                    >
+                                        <FormattedMessage id="proofPaymentHeader_online2" />
                                     </Typography>
+                                    ) : (
+                                    <Typography
+                                        variant="h4"
+                                        sx={{
+                                        textAlign: "left",
+                                        ml: 4,
+                                        mr: 4,
+                                        mt: 4,
+                                        borderBottom: "1px solid black"
+                                        }}
+                                    >
+                                        <FormattedMessage id="proofPaymentHeader_online" />
+                                    </Typography>
+                                    )}
+
                                     <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                         <div dangerouslySetInnerHTML={{
                                             __html: intl.formatMessage(