mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
UI Update (Payment and Billing page) on Admin view to see shipping invoices with storage invoices on Pending Payment tab and Paid Invoice tab
This commit is contained in:
Dillon Ngo
@@ -6,8 +6,8 @@ namespace App\Classes\Modules\PackingLists\ControllersLogic;
|
||||
use App\Classes\General\Abstracts\AbstractControllerLogic;
|
||||
use App\Classes\Modules\PackingLists\Services\ListsPackingLists;
|
||||
use App\Classes\Modules\PackingLists\Standards\Rules\CanListPackingLists;
|
||||
use App\Http\Resources\PackingListNullOrderResource;
|
||||
use App\Http\Resources\PackingListResource;
|
||||
use App\Http\Resources\PackingListWithStorageResource;
|
||||
use ErrorException;
|
||||
use Illuminate\Http\JsonResponse;
|
||||
use Illuminate\Http\Request;
|
||||
@@ -54,7 +54,14 @@ class ListPackingListsLogic extends AbstractControllerLogic
|
||||
|
||||
$query = $this->listsPackingLists->execute($this->listsPackingLists->deserializeFilters($request->input('filters')));
|
||||
|
||||
return $this->collectionResponse(PackingListResource::collection($query));
|
||||
if($request->input('storages')){
|
||||
foreach ($query->items() as $item) {
|
||||
$item['storages'] = $request->input('storages');
|
||||
}
|
||||
return $this->collectionResponse(PackingListWithStorageResource::collection($query));
|
||||
}
|
||||
else{
|
||||
return $this->collectionResponse(PackingListResource::collection($query));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -73,5 +73,6 @@ class Kernel extends HttpKernel
|
||||
'storage.invoice.check.byorder' => \App\Http\Middleware\CheckForStorageInvoiceByOrderId::class,
|
||||
'storage.invoice.check.bytransactions' => \App\Http\Middleware\CheckForStorageInvoiceByTransactions::class,
|
||||
'storage.invoice.check.bygroup' => \App\Http\Middleware\CheckForStorageInvoiceByGroup::class,
|
||||
'storage.invoice.check.bypackinglists' => \App\Http\Middleware\CheckForStorageInvoiceByPackingLists::class,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Middleware;
|
||||
|
||||
use Closure;
|
||||
use App\Classes\Modules\Transactions\Processors\CheckStorageInvoiceTransactionProcessor;
|
||||
use App\Classes\Modules\PackingLists\Services\ListsPackingLists;
|
||||
use App\Models\Order;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
|
||||
class CheckForStorageInvoiceByPackingLists
|
||||
{
|
||||
|
||||
/** @var CheckStorageInvoiceTransactionProcessor */
|
||||
private $storageInvoiceTransactionProcessor;
|
||||
|
||||
/** @var ListsPackingLists */
|
||||
private $listsPackingLists;
|
||||
|
||||
|
||||
public function __construct(CheckStorageInvoiceTransactionProcessor $storageInvoiceTransactionProcessor, ListsPackingLists $listsPackingLists)
|
||||
{
|
||||
$this->storageInvoiceTransactionProcessor = $storageInvoiceTransactionProcessor;
|
||||
$this->listsPackingLists = $listsPackingLists;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handle an incoming request.
|
||||
*
|
||||
* @param Request $request
|
||||
* @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
|
||||
* @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
|
||||
*/
|
||||
public function handle(Request $request, Closure $next)
|
||||
{
|
||||
$results = [];
|
||||
$packinglists = null;
|
||||
|
||||
$filters = json_decode($request->input('filters'), true);
|
||||
// $filters['type_in'] = [TransactionType::SHIPPING_INVOICE];
|
||||
// if(json_encode($filters['order_by']) == '{"column":"id","DESC":true}'){
|
||||
// $filters['order_by_id_desc'] = true;
|
||||
// }
|
||||
// unset($filters['order_by']);
|
||||
|
||||
if(isset($filters['check_for_storage_invoice'])){
|
||||
$packinglists = $this->listsPackingLists->execute($filters);
|
||||
foreach($packinglists as $packingList){
|
||||
if($packingList){
|
||||
$order = $packingList->owner()->first();
|
||||
if($order instanceof Order){
|
||||
$storages = $this->storageInvoiceTransactionProcessor->executeOrder($order);
|
||||
if($storages){
|
||||
$results = array_merge($results, $storages);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$request->merge(['storages' => $results]);
|
||||
|
||||
return $next($request);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use App\Classes\ValueObjects\Constants\ApprovalStatus;
|
||||
use App\Classes\ValueObjects\Constants\PackingListType;
|
||||
use App\Classes\ValueObjects\Constants\TransactionType;
|
||||
use App\Classes\ValueObjects\Constants\RoleTypes;
|
||||
use App\Models\Order;
|
||||
use App\Models\PackingList;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
|
||||
class PackingListWithStorageResource extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource into an array.
|
||||
*
|
||||
* @param \Illuminate\Http\Request $request
|
||||
* @return array
|
||||
*/
|
||||
public function toArray($request)
|
||||
{
|
||||
$exceptionUsers = in_array(Auth()->user()->type, [RoleTypes::SHADOW_ADMIN, RoleTypes::SUPER_ADMIN]);
|
||||
$packages = !$this->packingLists()->exists() || $exceptionUsers ? $this->packages : $this->packingLists->first()->packages;
|
||||
$shippingTransaction = $this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->whereNotIn('status', [ApprovalStatus::SUSPENDED, ApprovalStatus::EXPIRED])->first();
|
||||
$transactions = $this->transactions()->whereNotIn('transactions.status', [0, 1])->whereIn('transactions.type', [TransactionType::SHIPPING_INVOICE, TransactionType::STORAGE_INVOICE])->get();
|
||||
$storages = [];
|
||||
|
||||
if($this->storages){
|
||||
$transactionId = $shippingTransaction->id;
|
||||
$filteredStorages = array_filter($this->storages, function ($storage) use ($transactionId) {
|
||||
return isset($storage['parentInvoiceId']) && $storage['parentInvoiceId'] == $transactionId;
|
||||
});
|
||||
$storages = $filteredStorages;
|
||||
}
|
||||
|
||||
return [
|
||||
'id' => $this->id,
|
||||
'claimant_id' => $this->claimant_id,
|
||||
'reference' => $this->reference,
|
||||
'status' => $this->status,
|
||||
'transport' => new TransportResource($this->transports()->first()),
|
||||
'type' => $this->type,
|
||||
'receive_packing_list' => $this->when($this->type === PackingListType::SHIPPING_PACKING_LIST, new PackingListResource(PackingList::where('reference', $this->reference)->where('type', PackingListType::WAREHOUSE_RECEIVE_LIST)->first())),
|
||||
'packages' => PackageResource::collection($packages),
|
||||
$this->mergeWhen($this->owner instanceof Order, [
|
||||
'order' => New OrderResource($this->owner)
|
||||
]),
|
||||
'shipping_transaction' => count($storages) == 0 ? new TransactionWithStorageResource($shippingTransaction): null,
|
||||
'storages' => $storages,
|
||||
'invoices' => TransactionWithStorageResource::collection($transactions),
|
||||
'suspended_invoice' => new TransactionResource($this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [ApprovalStatus::SUSPENDED])->first()),
|
||||
];
|
||||
}
|
||||
}
|
||||
+2
-1
@@ -37,7 +37,8 @@
|
||||
<!-- CIEF TODO: For easy revert to old code -->
|
||||
<list-component :key="currentKey" :section="section" :endpoint="route('api.packing_list.list')" :options="options">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<admin-payments-billing-component :data="data" :invoice_status="invoice_status" :section="section" ></admin-payments-billing-component>
|
||||
<single-parent-admin-payments-billing-component :data="data" :invoice_status="invoice_status" :section="section" ></single-parent-admin-payments-billing-component>
|
||||
<!-- <admin-payments-billing-component :data="data" :invoice_status="invoice_status" :section="section" ></admin-payments-billing-component> -->
|
||||
</template>
|
||||
</list-component>
|
||||
<!-- <list-polling-component :key="currentKey" :section="section" :endpoint="route('api.packing_list.list.job')" :options="options">
|
||||
|
||||
+293
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="row m-b-15 m-l-5 m-r-10 parentContainer">
|
||||
<div class="col bg-white rounded">
|
||||
<div v-for="singleInvoice in invoices" class="row" :class="[{'b-danger': item.status == 5 ||item.status == 6, 'b-a': item.status == 5||item.status == 6}]">
|
||||
<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.packages[0].container"> {{item.packages[0].container.container_reference}}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Invoice Date</p>
|
||||
<div>{{ singleInvoice.bill_no }}</div>
|
||||
<div v-if="!singleInvoice">n/a</div>
|
||||
<div v-if="singleInvoice"> {{ singleInvoice.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="!singleInvoice">n/a</div>
|
||||
<div v-if="singleInvoice">MYR {{ singleInvoice.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="singleInvoice">
|
||||
<div v-if="singleInvoice.documents.length">
|
||||
<div v-for="file in singleInvoice.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 class="btn bg-grey no-border muted requestModal" v-if="singleInvoice && 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="singleInvoice && 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="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 v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_attempts.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_attempts)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment Attempt</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<single-group-payment-transaction-details-component v-for="group in groupItem.groups_payment_attempts" v-bind:key="group.id" :data="group" :section="section"></single-group-payment-transaction-details-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_expired.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_expired)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment Expired</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<payment-expired-component v-for="group in groupItem.groups_payment_expired" v-bind:key="group.id" :data="group" :section="section"></payment-expired-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_history.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_history)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment History</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<single-group-payment-history-transaction-details-component v-for="group in groupItem.groups_payment_history" v-bind:key="group.id" :data="group" :section="section"></single-group-payment-history-transaction-details-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(paymentAttemptItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payment_attempts && x.payment_attempts.length > 0)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment Attempt</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<shipping-transaction-component v-for="i in paymentAttemptItem.payment_attempts" v-bind:key="i.id" :data="i" :section="section"></shipping-transaction-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(paymentExpiredItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payments_expired && x.payments_expired.length > 0)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment Expired</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<payment-expired-component v-for="i in paymentExpiredItem.payments_expired" v-bind:key="i.id" :data="i" ></payment-expired-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(paymentHistoryItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payment_history && x.payment_history.length > 0)">
|
||||
<div class="col">
|
||||
<div class="row m-t-10 m-b-10">
|
||||
<div class="col">
|
||||
<div v-if="index === 0" class="font-head fs-10 all-caps">Payment History</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<payment-history-component v-for="i in paymentHistoryItem.payment_history" v-bind:key="i.id" :data="i" ></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((totalAmount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</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((totalOutstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20" v-if="totalOutstanding - totalFloating > 0.009">
|
||||
<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">
|
||||
<group-payment-form-component :section="section" :selectedIds="selectedIds" :sumAmount="totalOutstanding.toFixed(2)" :showManualPayment="true"></group-payment-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props: {
|
||||
invoices: {
|
||||
type: Array,
|
||||
},
|
||||
invoice_status: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
section:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
storage:{
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
parameters: {
|
||||
packing_list_id: null,
|
||||
transaction_details: [],
|
||||
},
|
||||
expanded: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalAmount() {
|
||||
return this.invoices.reduce((sum, item) => sum + item.amount, 0);
|
||||
},
|
||||
totalOutstanding() {
|
||||
return this.invoices.reduce((sum, item) => sum + item.outstanding, 0);
|
||||
},
|
||||
totalFloating() {
|
||||
return this.invoices.reduce((sum, item) => sum + item.floating, 0);
|
||||
},
|
||||
selectedIds() {
|
||||
const ids = [];
|
||||
this.invoices.forEach(item => {
|
||||
ids.push(item.id);
|
||||
});
|
||||
return ids;
|
||||
},
|
||||
},
|
||||
created(){
|
||||
this.parameters.packing_list_id = this.data.id;
|
||||
},
|
||||
methods: {
|
||||
successHandler(response){
|
||||
this.item = response.payload.data;
|
||||
this.updateList();
|
||||
},
|
||||
groupTransactionsExist(items, groups) {
|
||||
return groups.some(group =>
|
||||
group.transactions_ids.length === items.length &&
|
||||
group.transactions_ids.every(transaction =>
|
||||
items.some(item => item.id === transaction.transaction_id)
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
+323
@@ -0,0 +1,323 @@
|
||||
<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.packages[0].container"> {{item.packages[0].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.packages[0].container ? item.packages[0].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.packages[0].container">
|
||||
<div v-if="item.packages[0].container.transport">{{ item.packages[0].container.transport.drop_date == null ? item.packages[0].container.transport.current_schedule.etd : item.packages[0].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>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="row m-b-15 m-l-5 m-r-10 parentContainer">
|
||||
<div class="col bg-white rounded" v-if="item.storages && item.storages.length > 0">
|
||||
<div class="row" v-for="invoice in item.invoices" v-if="invoice.type === 1">
|
||||
<div class="col" v-if="getMergedInvoices(invoice).length > 1">
|
||||
<single-admin-payments-billing-with-storage-component :data="item" :invoices="getMergedInvoices(invoice)" :storage="getStorageInfo(invoice)" :invoice_status="invoice_status" :section="section" ></single-admin-payments-billing-with-storage-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col bg-white rounded" v-else>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<single-admin-payments-billing-without-storage-component :data="item" :invoice_status="invoice_status" :section="section" ></single-admin-payments-billing-without-storage-component>
|
||||
</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
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderStorageMap() {
|
||||
// Create a map to link parent invoice IDs to storageInvoiceIds
|
||||
const storageMap = {};
|
||||
if(this.item.storages){
|
||||
for (const storage of this.item.storages) {
|
||||
storageMap[storage.parentInvoiceId] = storage.storageInvoiceId;
|
||||
}
|
||||
}
|
||||
return storageMap;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStorageInfo(invoice) {
|
||||
const storageObject = this.findStorageInfoObject(invoice.id);
|
||||
return storageObject;
|
||||
},
|
||||
findStorageInfoObject(shippingInvoiceId) {
|
||||
if(this.item.storages){
|
||||
return this.item.storages.find(storage => storage.parentInvoiceId === shippingInvoiceId);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getMergedInvoices(invoice){
|
||||
const storageInvoice = this.getStorageInvoice(invoice);
|
||||
const mergedArray = [
|
||||
...(invoice ? [invoice] : []),
|
||||
...(storageInvoice ? [storageInvoice] : []),
|
||||
];
|
||||
return mergedArray;
|
||||
},
|
||||
getStorageInvoice(invoice) {
|
||||
// Retrieve the storageInvoiceId for the current shipping invoice from storage info (order.storages)
|
||||
const storageInvoiceId = this.orderStorageMap[invoice.id];
|
||||
|
||||
// Find and return the storage invoice (type 16) from order.invoices
|
||||
const storageInvoice = this.item.invoices.find((invoice) => {
|
||||
return invoice.type === 16 && invoice.id === storageInvoiceId;
|
||||
});
|
||||
|
||||
return storageInvoice;
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
+2
-2
@@ -113,12 +113,12 @@
|
||||
<div class="row tabsContainer tabContent hide" tab-name="pendingPayment" v-if="isActiveTab('pendingPayment') || showTabContent('pendingPayment')">
|
||||
<div class="col">
|
||||
<payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
|
||||
<admin-payments-billing-with-search-component :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true, per_page: 5}" section="pendingPaymentSection" invoice_status="Pending Payment" :with_export="true"></admin-payments-billing-with-search-component>
|
||||
<admin-payments-billing-with-search-component :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true, per_page: 5, check_for_storage_invoice: 1}" section="pendingPaymentSection" invoice_status="Pending Payment" :with_export="true"></admin-payments-billing-with-search-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent hide" tab-name="paidInvoice" v-if="isActiveTab('paidInvoice') || showTabContent('paidInvoice')">
|
||||
<div class="col">
|
||||
<admin-payments-billing-with-search-component :options="{has_invoice_status_in: [3], per_page: 5}" section="paidInvoiceSection" invoice_status="Paid Invoice" :with_export="true"></admin-payments-billing-with-search-component>
|
||||
<admin-payments-billing-with-search-component :options="{has_invoice_status_in: [3], per_page: 5, check_for_storage_invoice: 1}" section="paidInvoiceSection" invoice_status="Paid Invoice" :with_export="true"></admin-payments-billing-with-search-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,8 @@ use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' => 'packing_list'], function () {
|
||||
Route::get('/{id}/show', 'FetchPackingListController@fetch')->name('show');
|
||||
Route::get('/list', 'ListPackingListsController@list')->name('list');
|
||||
Route::get('/list', 'ListPackingListsController@list')->middleware('storage.invoice.check.bypackinglists')->name('list');
|
||||
// Route::get('/list', 'ListPackingListsController@list')->name('list');
|
||||
Route::get('/list/job', 'ListPackingListsJobController@list')->name('list.job');
|
||||
Route::post('/create', 'CreatePackingListController@create')->name('create');
|
||||
Route::post('/create/deliver', 'CreateDeliverPackingListController@create')->name('create.deliver');
|
||||
|
||||
Reference in New Issue
Block a user