E-Invoice - UI/UX update based on feedback from PM

This commit is contained in:
Dillon Ngo
2025-09-17 17:37:10 +08:00
parent cbb2f3186a
commit 233bd4a082
2 changed files with 62 additions and 4 deletions
@@ -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>
@@ -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>