From 233bd4a08227fd3625f1140052cece0454cd94f3 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Wed, 17 Sep 2025 17:37:10 +0800
Subject: [PATCH] E-Invoice - UI/UX update based on feedback from PM

---
 .../elements/DownloadUploadComponent.vue      | 52 ++++++++++++++++++-
 .../elements/PaymentProofComponent.vue        | 14 ++++-
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue
index 32e62f4d..9f022947 100644
--- a/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue
@@ -6,13 +6,53 @@
                     <div class="row m-l-0 m-r-0 parentContainer">
                         <div class="col-12 col-md mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
                             <validation-wrapper-component :validator="$v.parameters.startDate">
-                                <label class="all-caps">Start Date</label>
+                               <label class="all-caps">
+                                    Start Date
+                                    <span
+                                        class="ml-2 text-primary"
+                                        data-toggle="tooltip"
+                                        data-placement="right"
+                                        data-html="true"
+                                        data-custom-class="tooltip-report-export"
+                                        title="
+                                            <div>
+                                                1. Sales Invoice Report → Filters by Payment Date<br/>
+                                                2. Customers Report → Filters by E-Invoice Requested Date<br/>
+                                                3. 01D - RECEIVE PAYMENT (FULL PAYMENT) [AR DEPOSIT ENTRY] → Filters by Payment Date<br/>
+                                                4. 01R - RECEIVE PAYMENT (FULL PAYMENT) [AR RECEIVE PAYMENT] → Filters by Payment Date<br/>
+                                                5. Credit Note Report → Filters by Credit Note Created Date<br/>
+                                                6. Wallet Top Up Report → Filters by Top Up Date<br/>
+                                            </div>
+                                        ">
+                                        <i class="fa fa-info-circle"></i>
+                                    </span>
+                                </label>
                                 <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-12 col-md mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
                             <validation-wrapper-component :validator="$v.parameters.endDate">
-                                <label class="all-caps">End Date</label>
+                                <label class="all-caps">
+                                    End Date
+                                    <span
+                                        class="ml-2 text-primary"
+                                        data-toggle="tooltip"
+                                        data-placement="right"
+                                        data-html="true"
+                                        data-custom-class="tooltip-report-export"
+                                        title="
+                                            <div>
+                                                1. Sales Invoice Report → Filters by Payment Date<br/>
+                                                2. Customers Report → Filters by E-Invoice Requested Date<br/>
+                                                3. 01D - RECEIVE PAYMENT (FULL PAYMENT) [AR DEPOSIT ENTRY] → Filters by Payment Date<br/>
+                                                4. 01R - RECEIVE PAYMENT (FULL PAYMENT) [AR RECEIVE PAYMENT] → Filters by Payment Date<br/>
+                                                5. Credit Note Report → Filters by Credit Note Created Date<br/>
+                                                6. Wallet Top Up Report → Filters by Top Up Date<br/>
+                                            </div>
+                                        ">
+                                        <i class="fa fa-info-circle"></i>
+                                    </span>
+                                </label>
                                 <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                             </validation-wrapper-component>
                         </div>
@@ -233,4 +273,12 @@ export default {
             transform: translate(-50%, -50%) rotate(360deg);
         }
     }
+
+</style>
+<style>
+    .tooltip-report-export .tooltip-inner {
+        white-space: nowrap;
+        max-width: none !important;
+        text-align: left;
+    }
 </style>
diff --git a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
index ff8452a5..1d8b9f4a 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
@@ -9,7 +9,17 @@
                                 <div class="col-auto">
                                     <div class="row m-b-10">
                                         <div class="col-auto">
-                                            <div class="font-heading fs-10 muted all-caps">Date</div>
+                                            <div class="font-heading fs-10 muted all-caps">Date
+                                                <span
+                                                    v-if="item.type === 3"
+                                                        class="ml-1 text-primary"
+                                                        data-toggle="tooltip"
+                                                        data-placement="right"
+                                                        data-html="true"
+                                                        title="Bill Updated Date">
+                                                    <i class="fa fa-info-circle fs-12 pointer"></i>
+                                                </span>
+                                            </div>
                                             <div class="font-heading fs-10">
                                                 {{item.updated_at}}
                                             </div>
@@ -95,7 +105,7 @@
                             </modal-component>
                             <button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="deletePaymentTransaction">
                                 <i class="fa fa-times text-white fa-fw"></i>
-                            </button>   
+                            </button>
                             <modal-component type="deletePaymentTransaction">
                                 <reject-payment-transaction-form-component :data="item" section="section" class="text-center"></reject-payment-transaction-form-component>
                             </modal-component>