mirror of
https://gitlab.com/uldvstar/exchange-2.0.git
synced 2026-08-19 04:24:16 +00:00
wallets ui
This commit is contained in:
edmondlang
@@ -22,6 +22,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-5" v-if="$store.getters.isAdmin">
|
||||
<!-- <div class="col" v-if="$store.getters.isAdmin && item.type === 3"> -->
|
||||
<div class="col">
|
||||
<div class="font-heading fs-8 muted all-caps">Customer Marking</div>
|
||||
<div class="font-heading fs-10 bold">
|
||||
Marking & Link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Paid On: ' + customerBooking.updated_at : 'Transferred On:' + item.updated_at }}</div> -->
|
||||
@@ -29,7 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto pointer " v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
|
||||
<div class="col-auto pointer" v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
|
||||
<div class="row align-items-center h-100">
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-12 p-0" style="width: 500px; height:350px">
|
||||
<canvas id="wallets-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card no-border bg-success text-white widget-loader-bar m-b-10">
|
||||
<div class="container-xs-height full-height">
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="card-header top-left top-right">
|
||||
<div class="card-title">
|
||||
<span class="font-montserrat fs-11 all-caps">Total Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||
<h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-bottom">
|
||||
<div class="progress progress-small m-b-0">
|
||||
<div class="progress-bar progress-bar-success" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
|
||||
<div class="container-xs-height full-height">
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="card-header top-left top-right">
|
||||
<div class="card-title">
|
||||
<span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||
<h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-bottom">
|
||||
<div class="progress progress-small m-b-0">
|
||||
<div class="progress-bar progress-bar-success" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-warning widget-loader-bar m-b-10">
|
||||
<div class="container-xs-height full-height">
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="card-header top-left top-right">
|
||||
<div class="card-title">
|
||||
<span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||
<h3 class="no-margin p-b-5">MYR 500,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-bottom">
|
||||
<div class="progress progress-small m-b-0">
|
||||
<div class="progress-bar progress-bar-primary" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
|
||||
<div class="container-xs-height full-height">
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="card-header top-left top-right">
|
||||
<div class="card-title">
|
||||
<span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-top">
|
||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||
<h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-xs-height">
|
||||
<div class="col-xs-height col-bottom">
|
||||
<div class="progress progress-small m-b-0">
|
||||
<div class="progress-bar progress-bar-primary" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import Chart from 'chart.js';
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
wallet_details: function() {
|
||||
const ctx = document.getElementById('wallets-chart');
|
||||
var xValues = [100,200,300,400,500,600,700,800,900,1000];
|
||||
new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: 'ndcs',
|
||||
datasets: [{
|
||||
data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
|
||||
borderColor: "red",
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
|
||||
borderColor: "green",
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
|
||||
borderColor: "blue",
|
||||
fill: false
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -106,7 +106,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wallet-top-up-history-component></wallet-top-up-history-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
|
||||
@extends('layouts.base_portal')
|
||||
@section('inner_content')
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<wallets-component></wallets-component>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
|
||||
<div class="col no-padding">
|
||||
<h6>Transaction History</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row padding-10">
|
||||
<div class="col-2 fs-10">Date</div>
|
||||
<div class="col fs-10">Description</div>
|
||||
<div class="col-2 fs-10">Incoming</div>
|
||||
<div class="col-2 fs-10">Outgoing</div>
|
||||
<div class="col-2 fs-10">Balance</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white padding-10 m-b-10 rounded">
|
||||
<div class="col-2">25/11/2015</div>
|
||||
<div class="col">Payment to bill #121221121</div>
|
||||
<div class="col-2"></div>
|
||||
<div class="col-2 text-danger">- 2,123</div>
|
||||
<div class="col-2">12,123</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white padding-10 m-b-10 rounded">
|
||||
<div class="col-2">115/11/2015</div>
|
||||
<div class="col">Top Up</div>
|
||||
<div class="col-2 text-success">1,234</div>
|
||||
<div class="col-2"></div>
|
||||
<div class="col-2">14,246</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 m-l-15">
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="font-head fs-10 all-caps">Top Up Records</div>
|
||||
</div>
|
||||
</div>
|
||||
<wallet-top-up-history-component></wallet-top-up-history-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -51,6 +51,11 @@
|
||||
<div class="text-white all-caps fs-12">customers</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto p-r-20" v-if="$store.getters.isAdmin">
|
||||
<a href="{{route('wallet.wallets')}}">
|
||||
<div class="text-white all-caps fs-12">Wallets</div>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="$store.getters.isCustomer" class="col-auto p-r-20">
|
||||
<a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
|
||||
</div>
|
||||
|
||||
+4
-1
@@ -75,13 +75,16 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
|
||||
return view('pages.bookings.merge', ['marking' => $marking]);
|
||||
})->name('booking.merge');
|
||||
|
||||
Route::get('/wallet-transactions', function () {
|
||||
Route::get('/online_payment/redirect', 'Billplz\CallbackBillplzController@callback')->name('online_payment.redirect');
|
||||
|
||||
Route::get('/wallet/{marking}/details', function () {
|
||||
return view('pages.wallet.index');
|
||||
})->name('wallet.details');
|
||||
|
||||
Route::get('/wallets', function () {
|
||||
return view('pages.wallet.wallets');
|
||||
})->name('wallet.wallets');
|
||||
|
||||
Route::get('/test', function(){
|
||||
|
||||
// Auth::login(User::findOrFail(1));
|
||||
|
||||
Reference in New Issue
Block a user