@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
In case of an error, the API will return an error response containing a specific error code 400, 403 Failed and a user-friendly message. Refer to our API documentation for a comprehensive list of error codes and their descriptions.