From bf166fcf82f643dd556e1eb9e37aa465aed4e5f4 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Fri, 3 Jul 2026 21:01:06 +0800
Subject: [PATCH 1/2] Update: Vue 2 to Vue 3 with Typescript, node 14 to node
 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)

---
 resources/views/partials/header.blade.php | 169 +++++++++++-----------
 1 file changed, 85 insertions(+), 84 deletions(-)

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index ac3c70fa..2c4632c9 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -30,7 +30,7 @@
                             </div>
 
                             <!-- Admin items container -->
-                            <div class="d-flex flex-nowrap align-items-center" id="admin-nav-container">
+                            <div v-if="authStore.isAdmin" class="d-flex flex-nowrap align-items-center" id="admin-nav-container">
                                 <div id="admin-nav-items" class="d-contents" style="display: contents;">
                                     <div class="col-auto p-r-20" data-nav-item data-original-index="0">
                                         <a href="{{route('payments')}}"><div class="text-white all-caps fs-12"> Payments</div></a>
@@ -120,97 +120,98 @@
             </div>
         </div>
     @endif
+</div>
+@push('scripts')
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    function adjustNavigation() {
+        var moreDropdown = document.getElementById('more-dropdown');
+        var moreMenu = document.getElementById('more-dropdown-menu');
+        var adminNavContainer = document.getElementById('admin-nav-container');
+        var adminNavItems = document.getElementById('admin-nav-items');
+        var headerRow = document.querySelector('.header-nav-row');
+        var leftSection = document.querySelector('.header-logo-section');
+        var rightSection = document.querySelector('.header-right-section');
 
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        function adjustNavigation() {
-            var moreDropdown = document.getElementById('more-dropdown');
-            var moreMenu = document.getElementById('more-dropdown-menu');
-            var adminNavContainer = document.getElementById('admin-nav-container');
-            var adminNavItems = document.getElementById('admin-nav-items');
-            var headerRow = document.querySelector('.header-nav-row');
-            var leftSection = document.querySelector('.header-logo-section');
-            var rightSection = document.querySelector('.header-right-section');
+        if (!moreDropdown || !moreMenu || !adminNavContainer || !adminNavItems || !headerRow || !leftSection || !rightSection) return;
 
-            if (!moreDropdown || !moreMenu || !adminNavContainer || !adminNavItems || !headerRow || !leftSection || !rightSection) return;
+        moreMenu.innerHTML = '';
 
-            moreMenu.innerHTML = '';
+        var items = adminNavContainer.querySelectorAll('[data-nav-item]');
 
-            var items = adminNavContainer.querySelectorAll('[data-nav-item]');
+        // Reset all items to visible
+        items.forEach(function(item) {
+            item.style.display = '';
+        });
 
-            // Reset all items to visible
-            items.forEach(function(item) {
-                item.style.display = '';
-            });
+        // Calculate available space
+        var headerRect = headerRow.getBoundingClientRect();
+        var leftRect = leftSection.getBoundingClientRect();
+        var rightRect = rightSection.getBoundingClientRect();
 
-            // Calculate available space
-            var headerRect = headerRow.getBoundingClientRect();
-            var leftRect = leftSection.getBoundingClientRect();
-            var rightRect = rightSection.getBoundingClientRect();
+        var availableWidth = headerRect.width - leftRect.width - rightRect.width - 360;
 
-            var availableWidth = headerRect.width - leftRect.width - rightRect.width - 360;
+        var totalWidth = 0;
+        items.forEach(function(item) {
+            item.style.visibility = 'hidden';
+            item.style.display = '';
+            totalWidth += item.offsetWidth + 20;
+        });
 
-            var totalWidth = 0;
-            items.forEach(function(item) {
-                item.style.visibility = 'hidden';
-                item.style.display = '';
-                totalWidth += item.offsetWidth + 20;
-            });
+        items.forEach(function(item) {
+            item.style.visibility = '';
+        });
 
-            items.forEach(function(item) {
-                item.style.visibility = '';
-            });
-
-            // If all items fit, no need for dropdown
-            if (totalWidth <= availableWidth) {
-                moreDropdown.style.display = 'none';
-                return;
-            }
-
-            // Items to hide - start from the last ones (maintaining original order for visible items)
-            var itemsToHide = [];
-
-            // Iterate from the end to find items that need to be hidden
-            for (var i = items.length - 1; i >= 0; i--) {
-                var item = items[i];
-                item.style.visibility = 'hidden';
-                var itemWidth = item.offsetWidth + 20;
-
-                if (totalWidth - itemWidth <= availableWidth) {
-                    // This item can be shown, stop hiding
-                    totalWidth -= itemWidth;
-                    item.style.visibility = '';
-                    break;
-                } else {
-                    // This item needs to be hidden
-                    itemsToHide.push(item);
-                    totalWidth -= itemWidth;
-                }
-                item.style.visibility = '';
-            }
-
-            // Reverse to get them in original order for dropdown
-            itemsToHide.reverse();
-
-            // Add hidden items to dropdown in their original order
-            itemsToHide.forEach(function(item) {
-                var link = item.querySelector('a');
-                if (link) {
-                    var menuItem = document.createElement('a');
-                    menuItem.href = link.href;
-                    menuItem.className = 'dropdown-item';
-                    menuItem.innerHTML = '<span class="all-caps fs-12">' + link.textContent.trim() + '</span>';
-                    moreMenu.appendChild(menuItem);
-                }
-                item.style.display = 'none';
-            });
-
-            moreDropdown.style.display = moreMenu.children.length > 0 ? 'block' : 'none';
+        // If all items fit, no need for dropdown
+        if (totalWidth <= availableWidth) {
+            moreDropdown.style.display = 'none';
+            return;
         }
 
-        adjustNavigation();
-        window.addEventListener('resize', adjustNavigation);
-        setTimeout(adjustNavigation, 500);
-    });
-    </script>
-</div>
+        // Items to hide - start from the last ones (maintaining original order for visible items)
+        var itemsToHide = [];
+
+        // Iterate from the end to find items that need to be hidden
+        for (var i = items.length - 1; i >= 0; i--) {
+            var item = items[i];
+            item.style.visibility = 'hidden';
+            var itemWidth = item.offsetWidth + 20;
+
+            if (totalWidth - itemWidth <= availableWidth) {
+                // This item can be shown, stop hiding
+                totalWidth -= itemWidth;
+                item.style.visibility = '';
+                break;
+            } else {
+                // This item needs to be hidden
+                itemsToHide.push(item);
+                totalWidth -= itemWidth;
+            }
+            item.style.visibility = '';
+        }
+
+        // Reverse to get them in original order for dropdown
+        itemsToHide.reverse();
+
+        // Add hidden items to dropdown in their original order
+        itemsToHide.forEach(function(item) {
+            var link = item.querySelector('a');
+            if (link) {
+                var menuItem = document.createElement('a');
+                menuItem.href = link.href;
+                menuItem.className = 'dropdown-item';
+                menuItem.innerHTML = '<span class="all-caps fs-12">' + link.textContent.trim() + '</span>';
+                moreMenu.appendChild(menuItem);
+            }
+            item.style.display = 'none';
+        });
+
+        moreDropdown.style.display = moreMenu.children.length > 0 ? 'block' : 'none';
+    }
+
+    adjustNavigation();
+    window.addEventListener('resize', adjustNavigation);
+    setTimeout(adjustNavigation, 500);
+});
+</script>
+@endpush

From bd5a6eff6909959338086bfd0c7e691839ad31b0 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Fri, 3 Jul 2026 21:17:22 +0800
Subject: [PATCH 2/2] Update: Vue 2 to Vue 3 with Typescript, node 14 to node
 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)

---
 resources/views/partials/header.blade.php | 119 ++++++++++++++++++++--
 1 file changed, 110 insertions(+), 9 deletions(-)

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 2c4632c9..37a158bb 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -22,11 +22,24 @@
                             <div class="col-auto p-r-20">
                                 <a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
                             </div>
-                            <div v-if="authStore.isCustomer" class="col-auto p-r-20">
-                                <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
-                            </div>
-                            <div v-if="authStore.isCustomer" class="col-auto p-r-20">
-                                <a href="https://www.cief-malaysia.com/foreign-payment-service-e-invoice" target="_blank"><div class="text-white all-caps fs-12">E-Invoice Guideline</div></a>
+                            <!-- Customer items container -->
+                            <div v-if="authStore.isCustomer" class="d-flex flex-nowrap align-items-center" id="customer-nav-container">
+                                <div id="customer-nav-items" class="d-contents" style="display: contents;">
+                                    <div class="col-auto p-r-20" data-nav-item>
+                                        <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
+                                    </div>
+                                    <div class="col-auto p-r-20" data-nav-item>
+                                        <a href="https://www.cief-malaysia.com/foreign-payment-service-e-invoice" target="_blank"><div class="text-white all-caps fs-12">E-Invoice Guideline</div></a>
+                                    </div>
+                                </div>
+                                <!-- More dropdown for customers -->
+                                <div class="col-auto p-r-20 dropdown-hover" id="customer-more-dropdown" style="display: none;">
+                                    <div class="text-white all-caps fs-12 pointer x-dropdown-hover-trigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        More <i class="fa fa-caret-down"></i>
+                                    </div>
+                                    <div class="dropdown-menu dropdown-menu-right dropdown-hover-menu" id="customer-more-dropdown-menu">
+                                    </div>
+                                </div>
                             </div>
 
                             <!-- Admin items container -->
@@ -124,7 +137,88 @@
 @push('scripts')
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    function adjustNavigation() {
+    function adjustCustomerNavigation() {
+        var customerNavContainer = document.getElementById('customer-nav-container');
+        var customerMoreDropdown = document.getElementById('customer-more-dropdown');
+        var customerMoreMenu = document.getElementById('customer-more-dropdown-menu');
+        var headerRow = document.querySelector('.header-nav-row');
+        var leftSection = document.querySelector('.header-logo-section');
+        var rightSection = document.querySelector('.header-right-section');
+
+        if (!customerNavContainer || !customerMoreDropdown || !customerMoreMenu || !headerRow || !leftSection || !rightSection) return;
+
+        var customerItems = customerNavContainer.querySelectorAll('[data-nav-item]');
+        if (customerItems.length === 0) return;
+
+        // Reset all items to visible
+        customerItems.forEach(function(item) {
+            item.style.display = '';
+        });
+
+        // Calculate available space
+        var headerRect = headerRow.getBoundingClientRect();
+        var leftRect = leftSection.getBoundingClientRect();
+        var rightRect = rightSection.getBoundingClientRect();
+        var availableWidth = headerRect.width - leftRect.width - rightRect.width - 360;
+
+        var totalWidth = 0;
+        customerItems.forEach(function(item) {
+            item.style.visibility = 'hidden';
+            item.style.display = '';
+            totalWidth += item.offsetWidth + 20;
+        });
+
+        customerItems.forEach(function(item) {
+            item.style.visibility = '';
+        });
+
+        // If all items fit, no need for dropdown
+        if (totalWidth <= availableWidth) {
+            customerMoreDropdown.style.display = 'none';
+            return;
+        }
+
+        // Items to hide - start from the last ones
+        var itemsToHide = [];
+
+        for (var i = customerItems.length - 1; i >= 0; i--) {
+            var item = customerItems[i];
+            item.style.visibility = 'hidden';
+            var itemWidth = item.offsetWidth + 20;
+
+            if (totalWidth - itemWidth <= availableWidth) {
+                totalWidth -= itemWidth;
+                item.style.visibility = '';
+                break;
+            } else {
+                itemsToHide.push(item);
+                totalWidth -= itemWidth;
+            }
+            item.style.visibility = '';
+        }
+
+        // Reverse to get them in original order for dropdown
+        itemsToHide.reverse();
+
+        // Add hidden items to dropdown
+        customerMoreMenu.innerHTML = '';
+        itemsToHide.forEach(function(item) {
+            var link = item.querySelector('a');
+            if (link) {
+                var menuItem = document.createElement('a');
+                menuItem.href = link.href;
+                menuItem.target = link.target || '';
+                menuItem.className = 'dropdown-item';
+                menuItem.innerHTML = '<span class="all-caps fs-12">' + link.textContent.trim() + '</span>';
+                customerMoreMenu.appendChild(menuItem);
+            }
+            item.style.display = 'none';
+        });
+
+        customerMoreDropdown.style.display = customerMoreMenu.children.length > 0 ? 'block' : 'none';
+    }
+
+    function adjustAdminNavigation() {
         var moreDropdown = document.getElementById('more-dropdown');
         var moreMenu = document.getElementById('more-dropdown-menu');
         var adminNavContainer = document.getElementById('admin-nav-container');
@@ -209,9 +303,16 @@ document.addEventListener('DOMContentLoaded', function() {
         moreDropdown.style.display = moreMenu.children.length > 0 ? 'block' : 'none';
     }
 
-    adjustNavigation();
-    window.addEventListener('resize', adjustNavigation);
-    setTimeout(adjustNavigation, 500);
+    adjustCustomerNavigation();
+    adjustAdminNavigation();
+    window.addEventListener('resize', function() {
+        adjustCustomerNavigation();
+        adjustAdminNavigation();
+    });
+    setTimeout(function() {
+        adjustCustomerNavigation();
+        adjustAdminNavigation();
+    }, 500);
 });
 </script>
 @endpush