Developer
@extends('admin.layouts.master')
@push('css')
@endpush
@section('page-title')
@include('admin.components.page-title',['title' => __($page_title)])
@endsection
@section('breadcrumb')
@include('admin.components.breadcrumb',['breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("admin.dashboard"),
]
], 'active' => __("Dashboard")])
@endsection
@section('content')
<div class="dashboard-area">
<div class="dashboard-item-area">
<div class="row">
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ __("Total Users") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInKNotation($data['total_user_count']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--success">{{ __("Active") }} {{ $data['active_user'] }}</span>
<span class="badge badge--warning">{{ __("Unverified") }} {{ $data['unverified_user'] }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart6" data-percent="{{ $data['user_percent'] }}"><span>{{ round($data['user_percent']) }}%</span></div>
</div>
</div>
</div>
</div>
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ __("Total Support Ticket") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInkNotation($data['total_support_ticket_count']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--info">{{ __("Active") }} {{ formatNumberInkNotation($data['active_ticket']) }}</span>
<span class="badge badge--warning">{{ __("Pending") }} {{ formatNumberInkNotation($data['pending_ticket']) }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart7" data-percent="{{ $data['percent_ticket'] }}"><span>{{ $data['percent_ticket'] }}%</span></div>
</div>
</div>
</div>
</div>
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ __("Add Money") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInKNotation($data['total_add_money_count']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--info">{{ __("Success") }} {{ formatNumberInkNotation($data['success_add_money']) }}</span>
<span class="badge badge--warning">{{ __("Pending") }} {{ formatNumberInkNotation($data['pending_add_money']) }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart8" data-percent="{{ $data['add_money_percent'] }}"><span>{{ formatNumberInkNotation($data['add_money_percent']) }}%</span></div>
</div>
</div>
</div>
</div>
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ __("Transfer Money") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInKNotation($data['total_transfer_money_count']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--info">{{ __("Success") }} {{ formatNumberInkNotation($data['success_transfer_money']) }}</span>
<span class="badge badge--warning">{{ __("Pending") }} {{ formatNumberInkNotation($data['pending_transfer_money']) }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart9" data-percent="{{ $data['transfer_money_percent'] }}"><span>{{ formatNumberInkNotation($data['transfer_money_percent']) }}%</span></div>
</div>
</div>
</div>
</div>
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ __("Total Card Payments") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInKNotation($data['total_card_payments_count']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--warning">{{ __("Success") }} {{ formatNumberInkNotation($data['success_card_payments']) }}</span>
<span class="badge badge--success">{{ __("Pending") }} {{ formatNumberInkNotation($data['pending_card_payments']) }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart10" data-percent="{{ $data['card_payments_percent'] }}"><span>{{ formatNumberInkNotation($data['card_payments_percent']) }}%</span></div>
</div>
</div>
</div>
</div>
<div class="col-xxxl-4 col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-15">
<div class="dashbord-item">
<div class="dashboard-content">
<div class="left">
<h6 class="title">{{ ("Payment Gateways") }}</h6>
<div class="user-info">
<h2 class="user-count">{{ formatNumberInKNotation($data['total_payment_gateways']) }}</h2>
</div>
<div class="user-badge">
<span class="badge badge--warning">{{ __("Automatic") }} {{ formatNumberInkNotation($data['automatic_gateways']) }}</span>
<span class="badge badge--success">{{ __("Manual") }} {{ formatNumberInkNotation($data['manual_gateways']) }}</span>
</div>
</div>
<div class="right">
<div class="chart" id="chart11" data-percent="{{ $data['payment_gateways_percent'] }}"><span>{{ formatNumberInkNotation($data['payment_gateways_percent']) }}%</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chart-area mt-15">
<div class="row mb-15-none">
<div class="col-xxl-6 col-xl-6 col-lg-6 mb-15">
<div class="chart-wrapper">
<div class="chart-area-header">
<h5 class="title">{{ __("Transaction Analytics") }}</h5>
</div>
<div class="chart-container">
<div id="chart1" data-chart_one_data="{{ json_encode($data['chart_one_data']) }}" data-month_day="{{ json_encode($data['month_day']) }}" class="order-chart"></div>
</div>
</div>
</div>
<div class="col-xxxl-6 col-xxl-3 col-xl-6 col-lg-6 mb-15">
<div class="chart-wrapper">
<div class="chart-area-header">
<h5 class="title">{{ __("User Analytics Chart") }}</h5>
</div>
<div class="chart-container">
<div id="chart4" class="balance-chart" data-user_chart_data="{{ json_encode($data['user_chart_data']) }}"></div>
</div>
<div class="chart-area-footer">
<div class="chart-btn">
<a href="{{ setRoute('admin.users.index') }}" class="btn--base w-100">{{ __("View User") }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="table-area mt-15">
<div class="table-wrapper">
<div class="table-header">
<h5 class="title">{{ __("Latest Payments") }}</h5>
</div>
<div class="table-responsive">
@include('admin.components.data-table.payment-table',[
'data' => $transactions
])
</div>
</div>
</div>
@endsection
@push('script')
<!-- apexcharts js -->
<script src="{{ asset('public/backend/js/apexcharts.js') }}"></script>
<script>
// apex-chart
var chart1 = $('#chart1');
var chart_one_data = chart1.data('chart_one_data');
var month_day = chart1.data('month_day');
var options = {
series: [{
name: '{{ __("Pending") }}',
color: "#5A5278",
data: chart_one_data.pending_data
}, {
name: '{{ __("Success") }}',
color: "#6F6593",
data: chart_one_data.complete_data
},],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: false
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'datetime',
categories: month_day,
},
legend: {
position: 'bottom',
offsetX: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
var chart4 = $('#chart4');
var user_chart_data = chart4.data('user_chart_data');
var options = {
series: user_chart_data,
chart: {
width: 350,
type: 'pie'
},
colors: ['#5A5278', '#6F6593', '#8075AA', '#A192D9'],
labels: ['{{ __("Active") }}', '{{ __("Unverified") }}', '{{ __("Banned") }}', '{{ __("ALL") }}'],
responsive: [{
breakpoint: 1480,
options: {
chart: {
width: 280
},
legend: {
position: 'bottom'
}
},
breakpoint: 1199,
options: {
chart: {
width: 380
},
legend: {
position: 'bottom'
}
},
breakpoint: 575,
options: {
chart: {
width: 280
},
legend: {
position: 'bottom'
}
}
}],
legend: {
position: 'bottom'
},
};
var chart = new ApexCharts(document.querySelector("#chart4"), options);
chart.render();
// pie-chart
$(function() {
$('#chart6').easyPieChart({
size: 80,
barColor: '#f05050',
scaleColor: false,
lineWidth: 5,
trackColor: '#f050505a',
lineCap: 'circle',
animate: 3000
});
});
$(function() {
$('#chart7').easyPieChart({
size: 80,
barColor: '#10c469',
scaleColor: false,
lineWidth: 5,
trackColor: '#10c4695a',
lineCap: 'circle',
animate: 3000
});
});
$(function() {
$('#chart8').easyPieChart({
size: 80,
barColor: '#ffbd4a',
scaleColor: false,
lineWidth: 5,
trackColor: '#ffbd4a5a',
lineCap: 'circle',
animate: 3000
});
});
$(function() {
$('#chart9').easyPieChart({
size: 80,
barColor: '#ff8acc',
scaleColor: false,
lineWidth: 5,
trackColor: '#ff8acc5a',
lineCap: 'circle',
animate: 3000
});
});
$(function() {
$('#chart10').easyPieChart({
size: 80,
barColor: '#7367f0',
scaleColor: false,
lineWidth: 5,
trackColor: '#7367f05a',
lineCap: 'circle',
animate: 3000
});
});
$(function() {
$('#chart11').easyPieChart({
size: 80,
barColor: '#1e9ff2',
scaleColor: false,
lineWidth: 5,
trackColor: '#1e9ff25a',
lineCap: 'circle',
animate: 3000
});
});
</script>
@endpush
Developer
If you encounter any issues or need assistance, please reach out to our dedicated developer support team Contact Us
Thank you for choosing Kueue Pay Payment Gateway Solutions! We look forward to seeing your integration thrive and provide a seamless payment experience for your valued customers.