mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
Dillon Ngo
323 lines
22 KiB
Vue
323 lines
22 KiB
Vue
<template>
|
|
<div class="row m-b-15 m-l-5 m-r-10 parentContainer">
|
|
<div class="col bg-white rounded">
|
|
<div class="row">
|
|
<div class="col padding-20">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Marking</p>
|
|
<div class="no-margin">
|
|
<div v-if="item.order">
|
|
<a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a>/<a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a>
|
|
<p>{{item.loading_days_ago}}</p>
|
|
</div>
|
|
<div v-else class="text-danger">Unclaimed Packing List</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Container</p>
|
|
<div v-if="item.container"> {{item.container.container_reference}}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Invoice Date</p>
|
|
<div v-if="!item.shipping_transaction">n/a</div>
|
|
<div v-if="item.shipping_transaction"> {{ item.shipping_transaction.updated_at }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<div v-if="item.order">
|
|
<p class="no-margin fs-10 all-caps">Address</p>
|
|
<div>{{ item.order.address.post_code_area}}</div>
|
|
<div>{{ item.order.address.district.name +' '+item.order.address.postcode+' '+item.order.address.state.name }}</div>
|
|
</div>
|
|
<div v-else class="text-danger">Unclaimed</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Status</p>
|
|
<div class="all-caps">{{ invoice_status }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Amount</p>
|
|
<div v-if="!item.shipping_transaction">n/a</div>
|
|
<div v-if="item.shipping_transaction">MYR {{ item.shipping_transaction.amount.toFixed(2) }}</div>
|
|
</div>
|
|
<div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
|
|
<div v-if="item.shipping_transaction">
|
|
<div v-if="item.shipping_transaction.documents.length">
|
|
<div v-for="file in item.shipping_transaction.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
|
|
<document-file-viewer-component :file="file">
|
|
<template slot="button">
|
|
<div class="btn bg-grey no-border muted">
|
|
<i class="fa fa-file-pdf-o"></i>
|
|
</div>
|
|
</template>
|
|
</document-file-viewer-component>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="btn bg-grey no-border muted invisible">
|
|
<i class="fa fa-file-pdf-o"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row text-center parentContainer m-b-10" v-if="['Pending Invoice'].includes(invoice_status) && !item.receive_packing_list" >
|
|
<div class="col">
|
|
<div class="requestModal pointer btn btn-primary btn-xs" data-type="addWarehouseTransport">
|
|
Add Warehouse Transport
|
|
</div>
|
|
<modal-component class="animate_animated animatefast animate_fadeIn" styleType="fill-in" type="addWarehouseTransport">
|
|
<create-warehouse-transport-form-component :packinglistId="item.id" :section="section"></create-warehouse-transport-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="btn bg-grey no-border" @click="expanded = !expanded" v-if="['Pending Approval', 'Pending Payment'].includes(invoice_status)">
|
|
<i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
|
|
</div>
|
|
<div v-if="!item.shipping_transaction">
|
|
<div v-if="item.order">
|
|
<div v-if="!item.order.company_module.billingAddress">
|
|
<div class="btn btn-primary btn-xs pointer requestModal btn-block" data-type="billingAddressComponent">Add Billing Address</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" size="extra-large" styleType="fill-in" type="billingAddressComponent">
|
|
<address-form-component :id="item.order.company_module.id" :section="section" :type=1></address-form-component>
|
|
</modal-component>
|
|
</div>
|
|
<div class="row" v-if="item.order.company_module.billingAddress">
|
|
<div class="col">
|
|
<div class="col-auto requestModal pointer" data-type="editBillingAddress">
|
|
<i class="fa fa-edit pointer fa-fw m-l-5"></i> Edit billing Address
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" size="extra-large" styleType="fill-in" type="editBillingAddress">
|
|
<div class="row">
|
|
<div class="col bg-white">
|
|
<address-form-component :id="item.order.company_module.id" :data="item.order.company_module.billingAddress" section="editBillingAddress"></address-form-component>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
<div v-if="!item.order.address.post_code_area">
|
|
<div class="btn btn-xs btn-primary pointer m-t-10 requestModal btn-block" data-type="defineLocation">Define Location</div>
|
|
<modal-component class="animate_animated animatefast animate_fadeIn" styleType="fill-in" type="defineLocation">
|
|
<declare-postcode-area-form-component :data="item.order.address" :section="section"></declare-postcode-area-form-component>
|
|
</modal-component>
|
|
</div>
|
|
<div v-if="item.order.company_module.billingAddress && item.order.address.post_code_area" class="btn btn-outline-primary btn-lg pointer" @click="generateInvoice()">Generate Invoice</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="btn btn-outline-primary btn-lg pointer invisible">Generate Invoice</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn bg-grey no-border muted requestModal" v-if="item.shipping_transaction && invoice_status == 'Pending Approval'" data-type="confirmInvoice">
|
|
<i class="fa fa-check fs-12"></i>
|
|
</div>
|
|
<div class="btn bg-grey no-border muted requestModal" v-if="item.shipping_transaction && invoice_status == 'Pending Approval'" data-type="deleteInoive">
|
|
<i class="fa fa-close fs-12"></i>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="confirmInvoice">
|
|
<approve-shipping-invoice-form-component :section="section" :data="data"></approve-shipping-invoice-form-component>
|
|
</modal-component>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInoive">
|
|
<delete-shipping-invoice-form-component :section="section" :data="data"></delete-shipping-invoice-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="item.shipping_transaction && ['Pending Approval', 'Suspended Invoice'].includes(invoice_status)">
|
|
<div class="col p-b-10">
|
|
<div class="row">
|
|
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Container Reference</p>
|
|
<div v-if="item.packages.length">{{ item.container ? item.container.container_reference : 'n/a' }}</div>
|
|
<div v-else>n/a</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Due Date</p>
|
|
<div v-if="item.packages.length">
|
|
<div v-if="item.container">
|
|
<div v-if="item.container.transport">{{ item.container.transport.drop_date == null ? item.container.transport.current_schedule.etd : item.container.transport.drop_date }}</div>
|
|
<div v-else>n/a</div>
|
|
</div>
|
|
<div v-else>n/a</div>
|
|
</div>
|
|
<div v-else>n/a</div>
|
|
</div>
|
|
<!-- <div class="col">
|
|
<p class="no-margin fs-10 all-caps">Paid Date</p>
|
|
<div>n/a</div>
|
|
</div> -->
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Total CBM</p>
|
|
<div>{{ (parseFloat(cbm) + parseFloat(overweight)).toFixed(3) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="text-underline text-center">Invoice Details</h5>
|
|
<invoice-items-form-component :data="item.shipping_transaction" :section="section"></invoice-items-form-component>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Subtotal</p>
|
|
<div>{{ item.shipping_transaction.amount - item.shipping_transaction.service_charge - item.shipping_transaction.tax }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Service Charges</p>
|
|
<div>{{ item.shipping_transaction.service_charge }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Tax</p>
|
|
<div>{{ item.shipping_transaction.tax }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Total</p>
|
|
<div>{{ item.shipping_transaction.amount }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="item.shipping_transaction && invoice_status == 'Pending Payment'">
|
|
<div class="col-12 col-md-7 padding-20">
|
|
<div class="row bg-master-lightest h-100">
|
|
<div class="col">
|
|
<div class="row bg-master-lightest" v-if="item.shipping_transaction.payment_attempts.length">
|
|
<div class="col">
|
|
<div class="row m-t-10 m-b-10">
|
|
<div class="col">
|
|
<div class="font-head fs-10 all-caps">Payment Attempt</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<shipping-transaction-component v-for="item in item.shipping_transaction.payment_attempts" v-bind:key="item.id" :data="item" ></shipping-transaction-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row bg-master-lightest" v-if="item.shipping_transaction.payment_history.length">
|
|
<div class="col">
|
|
<div class="row m-t-10 m-b-10">
|
|
<div class="col">
|
|
<div class="font-head fs-10 all-caps">Payment History</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<payment-history-component v-for="item in item.shipping_transaction.payment_history" v-bind:key="item.id" :data="item" ></payment-history-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-5 padding-20 parentContainer">
|
|
<div class="row bg-master-lightest h-100">
|
|
<div class="col">
|
|
<div class="row padding-10">
|
|
<div class="col">
|
|
<div class="row align-items-end m-b-10 text-complete">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Total Amount:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((item.shipping_transaction.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-success hide">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Paid Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<!-- <div class="font-heading fs-12">MYR {{(Math.round((item.shipping_transaction.paid_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div> -->
|
|
<div class="font-heading fs-12">Paid Total</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 hide">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Floating Amount:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<!-- <div class="font-heading fs-12">MYR {{(Math.round((item.shipping_transaction.floating_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div> -->
|
|
<div class="font-heading fs-12">Floating Amount</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bold text-danger">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">OutStanding Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((item.shipping_transaction.outstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20" v-if="item.shipping_transaction.outstanding > 0">
|
|
<div class="col">
|
|
<div class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="makePayment">Make Payment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="makePayment">
|
|
<payment-form-component :data="item.shipping_transaction" :section="section"></payment-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
props: {
|
|
invoice_status: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
section:{
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
parameters: {
|
|
packing_list_id: null,
|
|
transaction_details: [],
|
|
},
|
|
expanded: false,
|
|
}
|
|
},
|
|
computed: {
|
|
cbm () {
|
|
return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.cbm) + total, 0)) * 1000) / 1000).toFixed(3)
|
|
},
|
|
overweight(){
|
|
return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
|
|
}
|
|
},
|
|
created(){
|
|
this.parameters.packing_list_id = this.data.id;
|
|
},
|
|
methods: {
|
|
generateInvoice() {
|
|
this.submit(this.route('api.transaction.invoice.create'), 'post', this.section, true, true);
|
|
},
|
|
successHandler(response){
|
|
this.item = response.payload.data;
|
|
this.updateList();
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|