From 93c3fc3d858904c4de821fe5f67c4f064eb29f21 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Mon, 25 Aug 2025 22:07:47 +0800
Subject: [PATCH] update header

---
 src/layout/MainLayout/Header/index.js | 56 +++++++++++++++++++--------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index fa6572f..aedac8c 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -403,14 +403,26 @@ function Header(props) {
                 isORGLoggedIn() ?
                   haveOrgPaymentRecord() ?
                     <>
-                      <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                        <FormattedMessage id="onlinePaymentHistory" />
-                      </Typography></Link>
-                      {haveOrgDnRecord()?
-                        <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                          <FormattedMessage id="paymentInfoRecord" />
-                        </Typography></Link>:null
-                      }
+                      <Link className="paymentRecord">
+                        <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                          <FormattedMessage id="paymentHistory" />
+                        </Typography>
+                        <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+                      </Link>
+                      <ul className='dropdown'>
+                        <li>
+                          <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                            <FormattedMessage id="onlinePaymentHistory" />
+                          </Typography></Link>
+                        </li>
+                        {haveOrgDnRecord()?
+                          <li>
+                            <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                              <FormattedMessage id="paymentInfoRecord" />
+                            </Typography></Link>
+                          </li>:null
+                        }
+                      </ul>
                     </>
                     :
                     <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
@@ -418,14 +430,26 @@ function Header(props) {
                     </Typography></Link>
                   :
                   <>
-                    <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                      <FormattedMessage id="onlinePaymentHistory" />
-                    </Typography></Link>
-                    {haveOrgDnRecord()?
-                      <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                        <FormattedMessage id="paymentInfoRecord" />
-                      </Typography></Link>:null
-                    }
+                    <Link className="paymentRecord">
+                      <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                        <FormattedMessage id="paymentHistory" />
+                      </Typography>
+                      <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+                    </Link>
+                    <ul className='dropdown'>
+                      <li>
+                        <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                          <FormattedMessage id="onlinePaymentHistory" />
+                        </Typography></Link>
+                      </li>
+                      {haveOrgDnRecord()?
+                        <li>
+                          <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                            <FormattedMessage id="paymentInfoRecord" />
+                          </Typography></Link>
+                        </li>:null
+                      }
+                    </ul>
                   </>
               }
             </li>