From 186dca383df3afb4452152b863721c2f33f7ced1 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Fri, 3 Jul 2026 20:35:14 +0800
Subject: [PATCH] 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 | 190 ++++++++++++++++------
 resources/views/partials/menu.blade.php   |  26 ++-
 2 files changed, 163 insertions(+), 53 deletions(-)

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 214b361c..ac3c70fa 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -2,8 +2,8 @@
     <div class="row bg-primary-complete-gradient align-items-center justify-content-center" >
         <div class="col">
             <div class="container-fluid container-fixed-lg no-padding">
-                <div class="row align-items-center justify-content-between">
-                    <div class="col-auto d-xs-none bg-complete-light p-t-10 p-b-10 p-l-30 p-r-30">
+                <div class="row align-items-center justify-content-between header-nav-row">
+                    <div class="col-auto d-xs-none bg-complete-light p-t-10 p-b-10 p-l-30 p-r-30 header-logo-section">
                         <a href="{{route('dashboard')}}"><div class="row">
                             <div class="col">
                                 <img src="{{asset('images/logo-light.png')}}" alt="logo" height="22">
@@ -17,68 +17,61 @@
                         </a>
                     </div>
                     <div class="col text-right p-r-30 d-none d-md-inline">
-                        <div class="row justify-content-end">
-                            <div class="col text-left">
-                                <div class="row justify-content-end">
-                                    <div class="col-auto p-r-20">
-                                        <a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
+                        <div class="row justify-content-end align-items-center">
+                            <!-- Always visible items -->
+                            <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>
+                            </div>
+
+                            <!-- Admin items container -->
+                            <div 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>
                                     </div>
-                                    <div class="col-auto p-r-20"  v-if="authStore.isAdmin">
-                                        <a href="{{route('payments')}}">
-                                            <div class="text-white all-caps fs-12">Payments</div>
-                                        </a>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="1">
+                                        <a href="{{route('billings')}}"><div class="text-white all-caps fs-12">Billings</div></a>
                                     </div>
-                                    <div class="col-auto p-r-20"  v-if="authStore.isAdmin">
-                                        <a href="{{route('billings')}}">
-                                            <div class="text-white all-caps fs-12">Billings</div>
-                                        </a>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="2">
+                                        <a href="{{route('currency_orders')}}"><div class="text-white all-caps fs-12">Currency Orders</div></a>
                                     </div>
-                                    <div class="col-auto p-r-20"  v-if="authStore.isAdmin">
-                                        <a href="{{route('currency_orders')}}">
-                                            <div class="text-white all-caps fs-12">Currency Orders</div>
-                                        </a>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="3">
+                                        <a href="{{route('supplier.payments')}}"><div class="text-white all-caps fs-12">Supplier Currency Orders</div></a>
                                     </div>
-                                    <div class="col-auto p-r-20"  v-if="authStore.isAdmin">
-                                        <a href="{{route('supplier.payments')}}">
-                                            <div class="text-white all-caps fs-12">Supplier Currency Orders</div>
-                                        </a>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="4">
+                                        <a href="{{route('bookings')}}"><div class="text-white all-caps fs-12">Transfers</div></a>
                                     </div>
-                                    <div class="col-auto p-r-20 dropdown-hover" v-if="authStore.isAdmin">
-                                        <div class="text-white all-caps fs-12 pointer 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">
-                                            <a href="{{route('bookings')}}" class="dropdown-item">
-                                                <span class="all-caps fs-12">Transfers</span>
-                                            </a>
-                                            <a href="{{route('bookings.urgent')}}" class="dropdown-item">
-                                                <span class="all-caps fs-12">Urgent List</span>
-                                            </a>
-                                            <a href="{{route('customers')}}" class="dropdown-item">
-                                                <span class="all-caps fs-12">Customers</span>
-                                            </a>
-                                            <a href="{{route('wallet.wallets')}}" class="dropdown-item">
-                                                <span class="all-caps fs-12">Wallets</span>
-                                            </a>
-                                            <a href="{{route('admin.download')}}" class="dropdown-item">
-                                                <span class="all-caps fs-12">Downloads</span>
-                                            </a>
-                                        </div>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="5">
+                                        <a href="{{route('bookings.urgent')}}"><div class="text-white all-caps fs-12">Urgent List</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 class="col-auto p-r-20" data-nav-item data-original-index="6">
+                                        <a href="{{route('customers')}}"><div class="text-white all-caps fs-12">Customers</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>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="7">
+                                        <a href="{{route('wallet.wallets')}}"><div class="text-white all-caps fs-12">Wallets</div></a>
+                                    </div>
+                                    <div class="col-auto p-r-20" data-nav-item data-original-index="8">
+                                        <a href="{{route('admin.download')}}"><div class="text-white all-caps fs-12">Downloads</div></a>
+                                    </div>
+                                </div>
+                                <!-- More dropdown -->
+                                <div class="col-auto p-r-20 dropdown-hover" id="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="more-dropdown-menu">
                                     </div>
-                                    <!-- <div v-if="authStore.isCustomer" class="col-auto p-r-20">
-                                        <a href="{{route('rewards')}}"><div class="text-white all-caps fs-12">Vouchers</div></a>
-                                    </div> -->
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-auto pr-1 pr-md-4">
+                    <div class="col-auto pr-1 pr-md-4 header-right-section">
                         <div class="row no-margin">
                             <div class="col-auto m-r-20 d-none d-md-inline">
                                 <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
@@ -127,4 +120,97 @@
             </div>
         </div>
     @endif
+
+    <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;
+
+            moreMenu.innerHTML = '';
+
+            var items = adminNavContainer.querySelectorAll('[data-nav-item]');
+
+            // 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();
+
+            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;
+            });
+
+            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';
+        }
+
+        adjustNavigation();
+        window.addEventListener('resize', adjustNavigation);
+        setTimeout(adjustNavigation, 500);
+    });
+    </script>
 </div>
diff --git a/resources/views/partials/menu.blade.php b/resources/views/partials/menu.blade.php
index 110f93b6..f13767b5 100644
--- a/resources/views/partials/menu.blade.php
+++ b/resources/views/partials/menu.blade.php
@@ -34,7 +34,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col padding-25">
+            <div class="col padding-25 overflow-auto" style="max-height: calc(100vh - 200px);">
                 <div class="row m-b-15">
                     <div class="col">
                         <small class="all-caps fs-12 muted hint-text">Main Menu</small>
@@ -86,6 +86,30 @@
                                 <a href="{{route('currency_orders')}}"><h6 class="no-margin light fs-18 all-caps">Currency Orders</h6></a>
                             </div>
                         </div>
+                        <div class="row p-t-15 p-b-15 align-items-center justify-content-center" v-if="authStore.isAdmin">
+                            <div class="col-auto p-r-0">
+                                <i class="fa fa-truck fs-20 text-dark"></i>
+                            </div>
+                            <div class="col">
+                                <a href="{{route('supplier.payments')}}"><h6 class="no-margin light fs-18 all-caps">Supplier Currency Orders</h6></a>
+                            </div>
+                        </div>
+                        <div class="row p-t-15 p-b-15 align-items-center justify-content-center" v-if="authStore.isAdmin">
+                            <div class="col-auto p-r-0">
+                                <i class="fa fa-credit-card fs-20 text-dark"></i>
+                            </div>
+                            <div class="col">
+                                <a href="{{route('wallet.wallets')}}"><h6 class="no-margin light fs-18 all-caps">Wallets</h6></a>
+                            </div>
+                        </div>
+                        <div class="row p-t-15 p-b-15 align-items-center justify-content-center" v-if="authStore.isAdmin">
+                            <div class="col-auto p-r-0">
+                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M86,12.9c-1.18741,0 -2.15,0.96259 -2.15,2.15v59.7832l-17.0625,-11.375c-1.05859,-0.70313 -2.40234,-0.70313 -3.46094,0l-17.0625,11.375v-59.7832c0,-1.18741 -0.96259,-2.15 -2.15,-2.15c-1.18741,0 -2.15,0.96259 -2.15,2.15v73.1h4.3v-68.8h64.5v68.8h4.3v-73.1c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM85.98242,150.5c-1.18741,0 -2.15,0.96259 -2.15,2.15v10.75c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15v-10.75c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM85.98242,138.08789c-1.18741,0 -2.15,0.96259 -2.15,2.15v10.75c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15v-10.75c0,-1.18741 -0.96259,-2.15 -2.15,-2.15z"></path></g></g></svg>
+                            </div>
+                            <div class="col">
+                                <a href="{{route('admin.download')}}"><h6 class="no-margin light fs-18 all-caps">Downloads</h6></a>
+                            </div>
+                        </div>
                         <div class="row p-t-15 p-b-15 align-items-center justify-content-center" v-if="authStore.isAdmin">
                             <div class="col-auto p-r-0">
                                 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"