mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
payment-and-billing ui
This commit is contained in:
edmondlang
+2
-1
@@ -17,6 +17,7 @@ use App\Classes\Modules\Documents\Services\CreatesDocument;
|
||||
use App\Classes\Modules\Documents\DataTransferObjects\DocumentObject;
|
||||
use App\Classes\Modules\PackingLists\Services\FetchesPackingList;
|
||||
use App\Classes\Modules\Transactions\Services\UpdatesTransactionStatus;
|
||||
use App\Classes\Modules\Transactions\ControllersLogic\Document;
|
||||
|
||||
class ApproveShippingInvoiceTransactionLogic extends AbstractControllerLogic
|
||||
{
|
||||
@@ -66,7 +67,7 @@ class ApproveShippingInvoiceTransactionLogic extends AbstractControllerLogic
|
||||
*/
|
||||
public function logic(Request $request) : JsonResponse
|
||||
{
|
||||
$packing_list = $this->fetchesPackingList->execute(['id' => $request->input('packing_list_id')]);
|
||||
$packing_list = $this->fetchesPackingList->execute(['id' => $request->route('id')]);
|
||||
|
||||
$invoice_transaction = $packing_list->transactions->where('type', TransactionType::SHIPPING_INVOICE)->first();
|
||||
|
||||
|
||||
@@ -84,8 +84,11 @@ class CreatePaymentTransactionLogic extends AbstractControllerLogic
|
||||
$billPlzBill = $this->createsBillplzBill->execute(
|
||||
$company_module->name,
|
||||
$company_module->employees()->first()->email,
|
||||
'This payment is credit topup for company ref. ' . $company_module->reference, $amount, $billNumber,
|
||||
$request->input('bank_code'), true
|
||||
'This payment is for the invoice number . ' . $invoice_transaction->bill_no,
|
||||
$amount,
|
||||
$billNumber,
|
||||
$request->input('bank_code'),
|
||||
true
|
||||
);
|
||||
|
||||
$payment_reference = $billPlzBill->id;
|
||||
|
||||
+5
-7
@@ -83,9 +83,7 @@ class UpdateShippingInvoiceTransactionLogic extends AbstractControllerLogic
|
||||
|
||||
public function logic(Request $request) : JsonResponse
|
||||
{
|
||||
$packing_list = $this->fetchesPackingList->execute(['id' => $request->input('packing_list_id')]);
|
||||
|
||||
$invoice_transaction = $packing_list->transactions->where('type', TransactionType::SHIPPING_INVOICE)->first();
|
||||
$invoice_transaction = $this->fetchesTransaction->execute(['id' => $request->route('id')]);
|
||||
|
||||
$old_transaction_details = $invoice_transaction->transactionDetails->whereNotIn('reference', ['SHIPPING_FEE', 'OVER_WEIGHT_CHARGES'])->pluck('id')->toArray();
|
||||
|
||||
@@ -110,17 +108,17 @@ class UpdateShippingInvoiceTransactionLogic extends AbstractControllerLogic
|
||||
$object_detail = new TransactionDetailObject(
|
||||
'CUSTOM_CHARGES',
|
||||
isset($transaction_detail->name) ? $transaction_detail->name : TransactionDetailType::CUSTOM_CHARGES,
|
||||
1,
|
||||
$transaction_detail->quantity,
|
||||
$transaction_detail->price
|
||||
);
|
||||
|
||||
if($transaction_detail->id){
|
||||
if(isset($transaction_detail->id)){
|
||||
$new_transaction_detail = $this->updatesTransactionDetail->execute($this->fetchesTransactionDetail->execute(['id' => $transaction_detail->id]), $object_detail);
|
||||
}else{
|
||||
$new_transaction_detail = $this->createsTransactionDetail->execute($invoice_transaction, $object_detail);
|
||||
}
|
||||
|
||||
$total_cbm += $new_transaction_detail->price;
|
||||
$total_cbm += $new_transaction_detail->amount;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +137,7 @@ class UpdateShippingInvoiceTransactionLogic extends AbstractControllerLogic
|
||||
0,
|
||||
0,
|
||||
null,
|
||||
ApprovalStatus::PENDING_SUBMISSION
|
||||
ApprovalStatus::PENDING_VERIFICATION
|
||||
);
|
||||
|
||||
/** @var Transaction $invoice_transaction */
|
||||
|
||||
@@ -16,11 +16,11 @@ class TransactionDetailResource extends JsonResource
|
||||
{
|
||||
|
||||
return [
|
||||
'stockCode' => $this->product_code,
|
||||
'description' => $this->product_name,
|
||||
'reference' => $this->reference,
|
||||
'quantity' => $this->quantity,
|
||||
'unit_price' => (double) $this->price,
|
||||
'total' => (double) $this->amount
|
||||
'price' => (double) $this->price,
|
||||
'name' => $this->name,
|
||||
'amount' => (double) $this->amount
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use App\Classes\ValueObjects\Constants\ApprovalStatus;
|
||||
use App\Classes\ValueObjects\Constants\DocumentType;
|
||||
use App\Classes\ValueObjects\Constants\TransactionType;
|
||||
use Carbon\Carbon;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
|
||||
@@ -19,18 +22,33 @@ class TransactionResource extends JsonResource
|
||||
return [
|
||||
'id' => $this->id,
|
||||
// 'booking' => new BookingResource($this->booking),
|
||||
'documents' => DocumentResource::collection($this->documents),
|
||||
'type' => (int) $this->type,
|
||||
'bill_no' => $this->bill_no,
|
||||
'amount' => (double) $this->amount,
|
||||
'outstanding' => (double) $this->amount - ($this->transactions()->where('type', TransactionType::PAYMENT)->whereIn('status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED])->sum('amount')),
|
||||
'service_charge' => (double) $this->service_charge,
|
||||
'tax' => (double) $this->tax,
|
||||
'original_amount' => (double) $this->original_amount,
|
||||
'currency' => new CurrencyResource($this->currency),
|
||||
'original_currency' => new CurrencyResource($this->original_currency),
|
||||
'currency_rate' => (double) $this->currency_rate,
|
||||
'status' => (int) $this->status,
|
||||
'details' => TransactionDetailResource::collection($this->transactionDetails),
|
||||
'documents' => new DocumentResource($this->documents()->first()),
|
||||
'transactions' => TransactionResource::collection($this->transactions),
|
||||
'payment_attempts' => TransactionResource::collection(
|
||||
$this->transactions()
|
||||
->payments()->where('status', ApprovalStatus::PENDING_SUBMISSION)
|
||||
->get()
|
||||
),
|
||||
'payment_history' => TransactionResource::collection(
|
||||
$this->transactions()
|
||||
->payments()
|
||||
->whereIn('status', [ApprovalStatus::APPROVED, ApprovalStatus::PENDING_VERIFICATION, ApprovalStatus::COMPLETED, ApprovalStatus::REJECTED])
|
||||
->get()
|
||||
),
|
||||
'expires_on' => Carbon::parse($this->expires_on)->format('d-m-Y h:s:i'),
|
||||
'updated_at' => Carbon::parse($this->update_at)->format('d-m-Y h:s:i')
|
||||
'updated_at' => Carbon::parse($this->update_at)->format('d-m-Y')
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
+157
-29
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="row m-b-15 m-l-5 m-r-10">
|
||||
<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="row align-items-center">
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Marking</p>
|
||||
<div class="no-margin">
|
||||
@@ -26,57 +26,183 @@
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Amount</p>
|
||||
<div v-if="!item.shippng_transaction">n/a</div>
|
||||
<div v-if="item.shippng_transaction">MYR {{ item.shippng_transaction.subtotal }}</div>
|
||||
<div v-if="item.shippng_transaction">MYR {{ item.shippng_transaction.amount.toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice'].includes(invoice_status)">
|
||||
<div v-if="item.shippng_transaction">
|
||||
<div v-if="item.shippng_transaction.documents.length">
|
||||
<div v-for="file in item.shippng_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="btn bg-grey no-border" @click="expanded = !expanded" v-if="item.shippng_transaction">
|
||||
<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" v-if="item.shippng_transaction">
|
||||
<i class="fa fa-check fs-12"></i>
|
||||
</div>
|
||||
<div v-if="!item.shippng_transaction">
|
||||
<div class="btn btn-outline-primary btn-lg pointer" @click="generateInvoice()">Generate Invoice</div>
|
||||
</div>
|
||||
<div class="btn bg-grey no-border muted requestModal" v-if="item.shippng_transaction && invoice_status == 'Pending Approval'" data-type="confirmInvoice">
|
||||
<i class="fa fa-check 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row b-t b-grey p-t-10" v-show="expanded" v-if="item.shippng_transaction">
|
||||
<div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="item.shippng_transaction && invoice_status == 'Pending Approval'">
|
||||
<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>{{ item.packages[0].container.container_reference }}</div>
|
||||
<div>{{ item.packages.length ? item.packages[0].container.container_reference : 'n/a' }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Due Date</p>
|
||||
<div v-if="!item.packages[0].container.transport">n/a</div>
|
||||
<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>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Date Paid</p>
|
||||
<div>Date paid or last payment date?</div>
|
||||
<div v-if="item.packages.length">
|
||||
<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 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>{{ (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.shippng_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.shippng_transaction.amount - item.shippng_transaction.service_charge - item.shippng_transaction.tax }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Service Charges</p>
|
||||
<div>{{ item.shippng_transaction.service_charge }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Tax</p>
|
||||
<div>{{ item.shippng_transaction.tax }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin fs-10 all-caps">Total</p>
|
||||
<div>{{ item.shippng_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.shippng_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.shippng_transaction.payment_attempts.length">
|
||||
<div class="col">
|
||||
<div class="btn btn-outline-complete btn-lg pointer" @click="generateInvoice()">Add Additional Chrges</div>
|
||||
</div>
|
||||
<div class="col-auto" v-if="item.shippng_transaction.documents">
|
||||
<div v-for="file in item.shippng_transaction.documents.files" v-bind:key="file.id" class="col-auto no-padding">
|
||||
<document-file-viewer-component :file="file">
|
||||
<template slot="button">
|
||||
<div class="btn btn-xs btn-primary pointer d-block m-b-5">View Invoice</div>
|
||||
</template>
|
||||
</document-file-viewer-component>
|
||||
<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.shippng_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.shippng_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.shippng_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.shippng_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">
|
||||
<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.shippng_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 ">
|
||||
<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.shippng_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.shippng_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.shippng_transaction.outstanding > 0"> -->
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<!-- <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button> -->
|
||||
<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 type="makePayment">
|
||||
<payment-form-component :data="item.shippng_transaction" :section="section"></payment-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,12 +217,17 @@
|
||||
invoice_status: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
section:{
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
parameters: {
|
||||
packing_list_id: null,
|
||||
transaction_details: [],
|
||||
},
|
||||
expanded: false,
|
||||
}
|
||||
@@ -114,10 +245,7 @@
|
||||
},
|
||||
methods: {
|
||||
generateInvoice() {
|
||||
this.submit(this.route('api.transaction.supplier.create'), 'post', '', true, true);
|
||||
},
|
||||
updateStatus(status){
|
||||
this.submit(this.route('api.packing_list.status.update', this.item.id, status), 'put', '', true, true)
|
||||
this.submit(this.route('api.transaction.invoice.create'), 'post', this.section, true, true);
|
||||
},
|
||||
successHandler(response){
|
||||
this.item = response.payload.data;
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}, {'b-a': item.status === 5}, {'b-danger': item.status === 5}]" >
|
||||
<div class="col">
|
||||
<div class="row" v-if="!item.transaction_bill">
|
||||
<div class="col">
|
||||
<div class="row bg-white ">
|
||||
<div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.status === 1 && item.type !== 6}, {'bg-white': item.status !== 1 && item.status !== 4}, {'bg-warning-lighter': item.type === 6}]">
|
||||
<div class="row m-b-5">
|
||||
<div class="col-auto">
|
||||
<div class="font-heading fs-8 muted all-caps">Status</div>
|
||||
<div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
|
||||
{{ item.status === 1 ? 'Pending Verification' : item.status === ( 4 || 5) ? 'Rejected' : 'Processing Payment'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-0">
|
||||
<div class="font-heading fs-8 muted all-caps">Payment Amount</div>
|
||||
<div class="font-heading fs-10 bold">
|
||||
{{item.currency.short_code}} {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-8 all-caps" :class="[{'text-danger': item.status === 4}, {'text-primary': item.status !== 4}]">{{ item.status === 2 ? 'Received' : item.status === 4 ? 'Rejected' : 'Submitted'}} On: {{item.updated_at}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto" v-if="item.status !== 3" :class="[{'bg-master-light': item.status === 1 && item.type !== 6}, {'bg-master-lighter': item.status === 2}, {'bg-warning-light': item.type === 6}]">
|
||||
<div class="row align-items-center h-100" v-if="item.status !== 1 || item.payment_method !== 5">
|
||||
<div class="col">
|
||||
<i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger': item.status === 4}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center h-100" v-if="item.payment_method === 5 && item.status === 1">
|
||||
<div class="col">
|
||||
<a :href="route('billplz.bill', item.payment_reference)"><i class="fa fa-repeat text-success"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row b-t b-grey" v-if="expandPaymentDetails">
|
||||
<div class="col bg-white padding-15">
|
||||
<!-- <div class="row align-items-end m-b-10 text-success bold">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">Recipient Gets</div>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<div class="font-heading fs-10">{{item.original_currency.short_code}} {{(item.original_amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-end bold m-b-10 text-primary">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">Rate</div>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<div class="font-heading fs-10 ">{{(Math.round((item.currency_rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-end m-b-10 hint-text">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">Transfer Charges</div>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<div class="font-heading fs-10">MYR {{(Math.round((item.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-end m-b-5 hint-text">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">Tax</div>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<div class="font-heading fs-10">MYR {{(Math.round((item.tax + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-end m-b-10 bold text-success">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">Your Payment</div>
|
||||
</div>
|
||||
<div class="col-auto text-right">
|
||||
<div class="font-heading fs-12">MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 m-b-5">Your Payment Proof</div>
|
||||
<div class="row no-margin" v-if="item.payment_method !== 5">
|
||||
<div v-if="item.documents.length">
|
||||
<div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding m-r-5">
|
||||
<document-file-viewer-component :file="file">
|
||||
<template slot="button">
|
||||
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
||||
<i class="fa fa-file-image-o fs-10"></i>
|
||||
</div>
|
||||
</template>
|
||||
</document-file-viewer-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" v-if="item.payment_method === 5 && (item.status === 2 || item.status === 3)">
|
||||
<a :href="route('billplz.bill', item.payment_reference)" target="_blank">
|
||||
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
||||
<i class="fa fa-file-image-o fs-10"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
expandPaymentDetails: false,
|
||||
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
||||
parameters: {
|
||||
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
||||
bank_id: 1
|
||||
},
|
||||
section: 'bookingDetailSection',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickExpand(){
|
||||
this.expandPaymentDetails = !this.expandPaymentDetails;
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="row m-b-10 parentContainer">
|
||||
<div class="col">
|
||||
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
||||
<div class="row p-b-5 b-b b-grey" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<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">
|
||||
{{ item.updated_at }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-auto">
|
||||
<div class="font-heading fs-10 muted all-caps">Order No</div>
|
||||
<div class="font-heading fs-10">
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="col-auto">
|
||||
<div class="font-heading fs-10 muted all-caps">Marking</div>
|
||||
<div class="font-heading fs-10">
|
||||
<a :href="route('customer.profile', item.booking.company.reference)">{{item.booking.company.reference}}</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col text-right">
|
||||
<div class="font-heading fs-10 muted all-caps">Amount</div>
|
||||
<div class="font-heading fs-14 text-success bold">
|
||||
{{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10 muted all-caps">Payment Proof</div>
|
||||
<div class="row no-margin" v-if="item.payment_method !==5 && item.payment_method !==4">
|
||||
<div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
|
||||
<document-file-viewer-component :file="file">
|
||||
<template slot="button">
|
||||
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
||||
<i class="fa fa-file-image-o fs-10"></i>
|
||||
</div>
|
||||
</template>
|
||||
</document-file-viewer-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" v-if="item.payment_method ===5">
|
||||
<div class="col no-padding">
|
||||
<a :href="route('billplz.bill', item.payment_reference)" target="_blank">
|
||||
<div class="icon-thumbnail fs-11 text-white icon-25 bg-complete btn-rounded float-left m-r-5">
|
||||
Bz
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" v-if="item.payment_method ===4">
|
||||
<div class="col no-padding">
|
||||
<div class="font-heading fs-10">{{item.payment_reference}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-auto">
|
||||
<div class="font-heading fs-10 muted all-caps">Service</div>
|
||||
<div class="font-heading fs-10">
|
||||
{{item.booking.service.name}}
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="col">
|
||||
<div class="font-heading fs-10 muted all-caps">Booking</div>
|
||||
<div class="font-heading fs-10">
|
||||
{{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div v-if="!no_action" class="col-6 col-md-auto text-right">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="rejectPayment">
|
||||
<i class="fa fa-times fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn btn-xs btn-success b-rad-none requestModal" data-type="approvePayment">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
</button>
|
||||
<modal-component small type="rejectPayment">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h5 class="all-caps">Reject Document</h5>
|
||||
<div class="fs-11">Are you sure you want to reject this payment?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="approvePayment('reject')">Reject</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-component>
|
||||
<modal-component small type="approvePayment">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h5 class="all-caps">Approve Payment</h5>
|
||||
<div class="fs-11">Are you sure you want to approve this payment?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="approvePayment('approve')">Approve</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import staticFormHandler from '../../../general/mixins/staticFormHandler'
|
||||
export default {
|
||||
props: {
|
||||
no_action: Boolean
|
||||
},
|
||||
methods: {
|
||||
approvePayment(status){
|
||||
this.isLoading = true;
|
||||
this.submit(this.route('api.transaction.payment.approval', this.item.id, status), 'put', 'identificationVerificationSection', true, true);
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler, staticFormHandler]
|
||||
}
|
||||
</script>
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="row m-l-0 m-b-10 m-r-0 parentContainer">
|
||||
<div class="col-auto bg-master-lighter requestModal pointer" data-type="deleteAttempt">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col">
|
||||
<i class="fa fa-times muted"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col bg-white p-t-10 p-b-10 p-r-0">
|
||||
<div class="row m-b-5">
|
||||
<div class="col-auto">
|
||||
<div class="font-heading fs-8 muted all-caps">Payment Amount</div>
|
||||
<div class="font-heading fs-10 bold">
|
||||
MYR {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-5 p-r-5 bg-success pointer" v-if="item.payment_method === 5">
|
||||
<a :href="route('billplz.bill', item.payment_reference)">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col">
|
||||
<i class="fa fa-repeat fs-20 text-white p-l-10 p-r-10"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto p-l-5 p-r-5 bg-success requestModal pointer" v-if="item.payment_method !== 5" data-type="paymentProofModal">
|
||||
<div @click="selectedID(item.id)" class="row align-items-center h-100">
|
||||
<div class="col">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="86" y1="70.76994" x2="86" y2="116.46013" gradientUnits="userSpaceOnUse" id="color-1_52139_gr1"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="61.8125" y1="34.48869" x2="61.8125" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-2_52139_gr2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="130.34375" y1="34.48869" x2="130.34375" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-3_52139_gr3"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="86" y1="32.25" x2="86" y2="148.71013" gradientUnits="userSpaceOnUse" id="color-4_52139_gr4"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient></defs><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><path d="M102.45825,99.43213h-5.70825c-1.4835,0 -2.6875,1.16637 -2.6875,2.65256v8.10013c0,1.48081 -1.19862,2.68481 -2.67944,2.68481h-10.76612c-1.48081,0 -2.67944,-1.204 -2.67944,-2.68481v-8.10013c0,-1.48619 -1.204,-2.65256 -2.6875,-2.65256h-5.70825c-1.93769,0 -3.04225,-2.39188 -1.88125,-4.05275l14.577,-20.855c1.8275,-2.61494 5.69481,-2.61763 7.52231,-0.00538l14.577,20.86306c1.16369,1.66088 0.05644,4.05006 -1.87856,4.05006z" fill="url(#color-1_52139_gr1)"></path><path d="M51.0625,67.1875h5.375c0,-8.0625 7.23206,-16.12231 16.125,-16.12231v-5.375c-11.85456,0 -21.5,10.74731 -21.5,21.49731z" fill="url(#color-2_52139_gr2)"></path><path d="M139.75,80.625c0,-10.75 -8.44144,-18.80981 -18.8125,-18.80981v5.375c7.40944,0 13.4375,5.37231 13.4375,13.43481z" fill="url(#color-3_52139_gr3)"></path><path d="M148.09738,92.27263c1.59369,-3.68188 2.40263,-7.59219 2.40263,-11.64494c0,-16.29969 -13.26281,-29.5625 -29.5625,-29.5625c-6.5145,0 -12.68769,2.08819 -17.78588,5.96088c-4.30269,-13.03438 -16.52006,-22.08587 -30.58912,-22.08587c-17.78319,0 -32.25,14.46681 -32.25,32.25c0,4.14681 0.16662,8.05981 1.42437,10.74731h-1.42437c-13.33806,0 -24.1875,10.84944 -24.1875,24.1875c0,11.56431 8.16194,21.24737 19.0275,23.62044c1.02394,6.39894 6.53869,11.31706 13.2225,11.31706h56.4375h16.125h5.375c6.54944,0 12.00238,-4.71388 13.18488,-10.92469c9.2235,-1.20131 16.37762,-9.08913 16.37762,-18.63513c0,-6.09256 -2.924,-11.72019 -7.77762,-15.23006zM126.3125,131.6875h-5.375h-16.125h-56.4375c-3.49912,0 -6.45538,-2.6875 -7.568,-5.375h93.0735c-1.11263,2.6875 -4.06888,5.375 -7.568,5.375zM137.0625,120.9375h-96.75c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125h9.51375l-1.68506,-3.78131c-2.23063,-5.01488 -2.45369,-7.48737 -2.45369,-12.341c0,-14.81888 12.05613,-26.875 26.875,-26.875c13.01825,0 24.13106,9.29875 26.42619,22.11275l0.92719,5.17075l3.64962,-3.77325c4.60638,-4.76225 10.77687,-7.38525 17.372,-7.38525c13.33806,0 24.1875,10.84944 24.1875,24.1875c0,3.6765 -0.81431,7.21056 -2.37575,10.41944l-1.763,3.32713l2.37037,1.26044c4.40481,2.34081 7.14338,6.88806 7.14338,11.868c0,7.40944 -6.02806,13.43481 -13.4375,13.43481z" fill="url(#color-4_52139_gr4)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAttempt">
|
||||
<delete-payment-attempt-form-component :data="item" :section="section" class="text-center"></delete-payment-attempt-form-component>
|
||||
</modal-component>
|
||||
<modal-component type="paymentProofModal">
|
||||
<payment-verification-form-component v-if="selected_id == item.id" :section="section" :data="item"></payment-verification-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
expandPaymentDetails: false,
|
||||
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
||||
selected_id: '',
|
||||
parameters: {
|
||||
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
||||
bank_id: 1
|
||||
},
|
||||
section: 'bookingDetailSection',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickExpand(){
|
||||
this.expandPaymentDetails = !this.expandPaymentDetails;
|
||||
},
|
||||
selectedID(id){
|
||||
this.selected_id = id;
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="row" @keyup.enter="submitForm">
|
||||
<div class="col bg-white padding-40 b-rad-lg">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h5 class="all-caps">Approve Invoice</h5>
|
||||
<div class="fs-11">Are you sure you want to approve this invoice?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-success w-100 btn-sm" @click="submit(route('api.transaction.invoice.approve', data.id), 'put', section, true, true)">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
|
||||
</script>
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
|
||||
<div class="row justify-content-center" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h3 class="all-caps">Are you Sure?</h3>
|
||||
<div class="fs-11">Are you sure you want to delete payment booking? you will not be able to recover your booking after confirming your action.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.transaction.suspend', item.id), 'delete', section, true, true)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [componentHandler, ModalFormHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="row bg-white b-a b-grey rounded padding-10" v-if="!isEdit">
|
||||
<div class="col">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto"><div class="icon-thumbnail icon-35 mr-0 bg-master-lightest light">{{index + 1}}</div></div>
|
||||
<div class="col">
|
||||
<p class="m-b-0 small muted">Name</p>
|
||||
<p class="m-b-0 bold">{{product.name}}</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="m-b-0 small muted">Unit Price</p>
|
||||
<p class="m-b-0 bold">{{product.price}}</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="m-b-0 small muted">Quantity</p>
|
||||
<p class="m-b-0 bold">{{product.quantity}}</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="m-b-0 small muted">Total</p>
|
||||
<p class="m-b-0 bold text-success">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
|
||||
</div>
|
||||
<div class="col-auto" :class="{ 'invisible': ['SHIPPING_FEE', 'OVER_WEIGHT_CHARGES'].includes(product.reference) }">
|
||||
<div @click="isEdit = !isEdit" class="pointer">
|
||||
<i class="fa fa-pencil" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto" :class="{ 'invisible': ['SHIPPING_FEE', 'OVER_WEIGHT_CHARGES'].includes(product.reference) }">
|
||||
<div @click="$emit('remove')" class="pointer">
|
||||
<i class="fa fa-close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="isEdit">
|
||||
<div class="col padding-25 bg-master-lightest">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.product.name">
|
||||
<label>Name</label>
|
||||
<input class="form-control" v-model="product.name">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.product.price">
|
||||
<label>Unit Price</label>
|
||||
<input class="form-control" v-model="product.price">
|
||||
<!-- <input class="form-control" v-model="product.price" v-money="{decimal: '.',thousands: '', precision: 2}"> -->
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.product.quantity">
|
||||
<label>Quantity</label>
|
||||
<!-- <input class="form-control" v-model="product.quantity" v-money="{decimal: '.',thousands: '', precision: 2}"> -->
|
||||
<input class="form-control" v-model="product.quantity" >
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>{{ data }}</p>
|
||||
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<p class="m-b-0 small">Total</p>
|
||||
<h6 class="no-margin bold text-complete">{{currency}} {{productTotal.toFixed(3)}}</h6>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<button class="btn btn-lg btn-secondary b-rad-none" @click="cancelUpdate()">Cancel</button>
|
||||
<button class="btn btn-lg btn-outline-success b-rad-none" @click="updateProduct()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formHandler from '../../../general/mixins/formHandler';
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
currency:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
index:{
|
||||
type: Number,
|
||||
// required: true
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isEdit: false,
|
||||
product: {
|
||||
name: '',
|
||||
quantity: 0,
|
||||
price: 0,
|
||||
amount: 0,
|
||||
},
|
||||
products: []
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
product: {
|
||||
name: { required },
|
||||
quantity: { required },
|
||||
price: { required },
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.data) {
|
||||
this.product = this.data;
|
||||
} else {
|
||||
this.isEdit = true;
|
||||
}
|
||||
this.product.amount = (Math.round((this.product.amount+ Number.EPSILON) * 1000) / 1000).toFixed(3);
|
||||
},
|
||||
computed: {
|
||||
productTotal(){
|
||||
return this.product.quantity * parseFloat((this.product.price).toString().replace(',', ''));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clearInterval(){
|
||||
clearInterval(this.interval);
|
||||
this.interval = false;
|
||||
},
|
||||
updateProduct(){
|
||||
if (!this.data) {
|
||||
this.$emit('add', {
|
||||
name: this.product.name,
|
||||
quantity: this.product.quantity,
|
||||
reference: 'CUSTOM_CHARGES',
|
||||
price: parseFloat((this.product.price).toString().replace(',', '')),
|
||||
amount: this.productTotal
|
||||
});
|
||||
|
||||
} else {
|
||||
this.isEdit = !this.isEdit;
|
||||
|
||||
console.log(this.data.reference);
|
||||
|
||||
this.$emit('change', {
|
||||
name: this.product.name,
|
||||
quantity: this.product.quantity,
|
||||
reference: this.data.reference,
|
||||
price: parseFloat((this.product.price).toString().replace(',', '')),
|
||||
amount: this.productTotal
|
||||
}, this.index);
|
||||
}
|
||||
},
|
||||
cancelUpdate() {
|
||||
if (!this.data) {
|
||||
this.$emit('change', 'cancelAddProduct', true);
|
||||
} else {
|
||||
this.isEdit = !this.isEdit;
|
||||
this.product = this.data;
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [formHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row no-margin">
|
||||
<div class="col p-b-15 p-l-0 p-r-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row" v-for="(detail, index) in details">
|
||||
<div class="col p-b-10 p-t-10 " :class="[{'b-grey' : index !== Object.keys(details).length - 1}, {'b-b' : index !== Object.keys(details).length - 1}]">
|
||||
<invoice-item-form-component :data="detail" :index="index" currency="MYR" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></invoice-item-form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="addCharges">
|
||||
<div class="col">
|
||||
<invoice-item-form-component currency="MYR" :editable="!submitted" :section="section" @change="addCharges = !addCharges" @add="addProduct($event)" v-on:remove="removeProduct(index)"></invoice-item-form-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row d-flex justify-content-center allign-items-between align-items-center m-b-15">
|
||||
<div class="col-auto">
|
||||
<div class="btn btn-outline-primary btn-md" @click="addCharges = !addCharges">{{ addCharges? 'Cancel' : 'Add Charges' }}</div>
|
||||
<div class="btn btn-outline-primary btn-md" @click="submitForm()">Save Change</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formHandler from '../../../general/mixins/formHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
interval:false,
|
||||
addCharges:false,
|
||||
canSubmitChanges:false,
|
||||
submitted: false,
|
||||
details: this.data.details,
|
||||
canSaveChange: false,
|
||||
parameters: {
|
||||
transaction_details: []
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateProduct(product, index) {
|
||||
this.details[index] = {
|
||||
name: product.name,
|
||||
quantity: product.quantity,
|
||||
reference: product.reference,
|
||||
price: parseFloat((product.price).toString().replace(',', '')),
|
||||
amount: parseFloat((product.amount).toString().replace(',', '')),
|
||||
};
|
||||
},
|
||||
removeProduct(index) {
|
||||
this.canSubmitChanges = !this.canSubmitChanges;
|
||||
this.data.details.splice(index, 1);
|
||||
},
|
||||
addProduct(newProduct) {
|
||||
this.canSubmitChanges = !this.canSubmitChanges;
|
||||
this.addCharges = !this.addCharges;
|
||||
this.details.push(newProduct);
|
||||
},
|
||||
submitForm() {
|
||||
this.canSubmitChanges = !this.canSubmitChanges;
|
||||
this.parameters.transaction_details = this.details;
|
||||
|
||||
console.log(this.parameters.transaction_details);
|
||||
|
||||
this.submit(this.route('api.transaction.invoice.update', this.data.id), 'put', this.section, true, true);
|
||||
}
|
||||
},
|
||||
mixins: [formHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="row" @keyup.enter="submitForm">
|
||||
<div class="col">
|
||||
<div class="row bg-master-lightest padding-20 m-b-15">
|
||||
<div class="col">
|
||||
<p>Outstanding: MYR {{ data.outstanding.toFixed(2) }}</p>
|
||||
|
||||
<validation-wrapper-component :validator="$v.parameters.amount">
|
||||
<label>Amount</label>
|
||||
<input class="form-control" v-model="parameters.amount" v-money="{decimal: '.',thousands: '', precision: 2}">
|
||||
</validation-wrapper-component>
|
||||
|
||||
<div class="row m-t-15 w-100 text-center">
|
||||
<div class="col">
|
||||
<button class="btn btn-lg btn-primary" @click="submitForm()">Make Payment</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formHandler from '../../../general/mixins/formHandler';
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
parameters : {
|
||||
amount: this.data.outstanding.toFixed(2),
|
||||
transaction_id: this.data.id
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
parameters : {
|
||||
amount: { required },
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
submitForm(){
|
||||
this.submit(this.route('api.transaction.payment.create'), 'post', this.section, true, true);
|
||||
}
|
||||
},
|
||||
mixins: [formHandler]
|
||||
}
|
||||
|
||||
</script>
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="row" @keyup.enter="submitForm">
|
||||
<div class="col">
|
||||
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
|
||||
<div class="row" v-show="!$store.getters.isLoading(section)">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-16 all-caps bold m-b-15">Payment Verification</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="row align-items-top">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10 muted all-caps">You are Paying</div>
|
||||
<div class="font-heading fs-16 bold text-success">
|
||||
{{data.currency.short_code}} {{(Math.round((data.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<error-message-component class="m-b-20" :error="error"></error-message-component>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<file-input-component :validator="$v.files" v-model="files">
|
||||
<template slot="label">
|
||||
<div class="font-heading fs-11 text-primary all-caps">Payment Proof</div>
|
||||
</template>
|
||||
</file-input-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-sm bg-master-lighter p-t-10 p-b-10 p-r-35 p-l-35 btn-default b-rad-none" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Save and continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalFromHandler from '../../../general/mixins/modalFormHandler'
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
export default {
|
||||
// props: {
|
||||
// id: {
|
||||
// required: true,
|
||||
// type: Number
|
||||
// }
|
||||
// },
|
||||
data(){
|
||||
return {
|
||||
files: [],
|
||||
parameters: {}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
files: {
|
||||
required
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(){
|
||||
this.parameters = {
|
||||
files: this.files
|
||||
};
|
||||
this.submit(this.route('api.transaction.payment.verification.create', this.data.id), 'post', this.section, true, true)
|
||||
}
|
||||
},
|
||||
mixins: [ModalFromHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
+8
-8
@@ -104,7 +104,7 @@
|
||||
<div class="col">
|
||||
<list-component section="pendingInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{does_not_have_transaction_type: 1}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<admin-payments-billing-component :data="data" invoice_status="Pending Invoice"></admin-payments-billing-component>
|
||||
<admin-payments-billing-component :data="data" invoice_status="Pending Invoice" section="pendingInvoiceSection" ></admin-payments-billing-component>
|
||||
</template>
|
||||
</list-component>
|
||||
</div>
|
||||
@@ -113,27 +113,27 @@
|
||||
<div class="col">
|
||||
<list-component section="pendingApprovalSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [0, 1]}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<admin-payments-billing-component :data="data" invoice_status="Pending Approval"></admin-payments-billing-component>
|
||||
<admin-payments-billing-component :data="data" invoice_status="Pending Approval" section="pendingApprovalSection" ></admin-payments-billing-component>
|
||||
</template>
|
||||
</list-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent hide" tab-name="pendingPayment">
|
||||
<div class="col">
|
||||
<!-- <list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2]}">
|
||||
<list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2]}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<packing-list-component :data="data"></packing-list-component>
|
||||
<admin-payments-billing-component :data="data" invoice_status="Pending Payment" section="pendingPaymentSection" ></admin-payments-billing-component>
|
||||
</template>
|
||||
</list-component> -->
|
||||
</list-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
|
||||
<div class="col">
|
||||
<!-- <list-component section="paidInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [3]}">
|
||||
<list-component section="paidInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [3]}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<packing-list-component :data="data"></packing-list-component>
|
||||
<admin-payments-billing-component :data="data" invoice_status="Paid Invoice" section="paidInvoiceSection" ></admin-payments-billing-component>
|
||||
</template>
|
||||
</list-component> -->
|
||||
</list-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+12
-11
@@ -5,18 +5,19 @@ use Illuminate\Support\Facades\Route;
|
||||
Route::group(['prefix' => 'transactions', 'namespace' => 'Transactions', 'as' => 'transaction.'], function () {
|
||||
|
||||
Route::get('/list', 'ListTransactionsController@list')->name('list');
|
||||
// Route::delete('/suspend/{id}', 'SuspendTransactionController@suspend')->name('suspend');
|
||||
Route::delete('/suspend/{id}', 'SuspendTransactionController@suspend')->name('suspend');
|
||||
|
||||
Route::post('/payment/create', 'CreatePaymentTransactionController@create')->name('payment.create');
|
||||
Route::post('/payment/upload-verification-document/{transaction_id}', 'UploadPaymentVerificationDocumentController@upload')->name('verification.create');
|
||||
Route::put('/payment/approve/{transaction_id}/{status}', 'ApprovePaymentTransactionController@approve')->where('status', 'approve|reject')->name('approval');
|
||||
|
||||
|
||||
route::post('/shipping-invoice/create', 'CreateShippingInvoiceTransactionController@create')->name('supplier.create');
|
||||
|
||||
route::put('/shipping-invoice/update', 'UpdateShippingInvoiceTransactionController@update')->name('supplier.update');
|
||||
|
||||
route::put('/shipping-invoice/approve', 'ApproveShippingInvoiceTransactionController@approve')->name('supplier.approve');
|
||||
Route::group(['prefix' => 'payment', 'as' => 'payment.'], function () {
|
||||
Route::post('/create', 'CreatePaymentTransactionController@create')->name('create');
|
||||
Route::post('/upload-verification-document/{transaction_id}', 'UploadPaymentVerificationDocumentController@upload')->name('verification.create');
|
||||
Route::put('/approve/{transaction_id}/{status}', 'ApprovePaymentTransactionController@approve')->where('status', 'approve|reject')->name('approval');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'invoice', 'as' => 'invoice.'], function () {
|
||||
route::post('/shipping-invoice/create', 'CreateShippingInvoiceTransactionController@create')->name('create');
|
||||
route::put('/shipping-invoice/{id}/update', 'UpdateShippingInvoiceTransactionController@update')->name('update');
|
||||
route::put('/shipping-invoice/{id}/approve', 'ApproveShippingInvoiceTransactionController@approve')->name('approve');
|
||||
});
|
||||
|
||||
route::post('/shipping-invoice/calculator', 'ShippingEstimationCalculatorController@calculate')->name('shipping.estimation.calculator');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user