Dashboard update
add monthly Sales Graph add Monthly Registered Customers Graph add Active Users Graph
This commit is contained in:
Focuslinkstech
parent
771bc9d8d9
commit
cbe2602b69
@ -90,7 +90,7 @@ foreach ($tmp as $plan) {
|
||||
$used = ORM::for_table('tbl_voucher')
|
||||
->where('id_plan', $plan['id'])
|
||||
->where('status', 1)->count();
|
||||
if($unused>0 || $used>0){
|
||||
if ($unused > 0 || $used > 0) {
|
||||
$plans[$n]['name_plan'] = $plan['name_plan'];
|
||||
$plans[$n]['unused'] = $unused;
|
||||
$plans[$n]['used'] = $used;
|
||||
@ -100,6 +100,68 @@ foreach ($tmp as $plan) {
|
||||
}
|
||||
}
|
||||
|
||||
//Monthly Registered Customers
|
||||
$result = ORM::for_table('tbl_customers')
|
||||
->select_expr('MONTH(created_at)', 'month')
|
||||
->select_expr('COUNT(*)', 'count')
|
||||
->where_raw('YEAR(created_at) = YEAR(NOW())')
|
||||
->group_by_expr('MONTH(created_at)')
|
||||
->find_many();
|
||||
|
||||
$counts = [];
|
||||
foreach ($result as $row) {
|
||||
$counts[] = [
|
||||
'date' => $row->month,
|
||||
'count' => $row->count
|
||||
];
|
||||
}
|
||||
|
||||
// Query to retrieve monthly data
|
||||
$query = ORM::for_table('tbl_transactions')
|
||||
->select_expr('MONTH(recharged_on)', 'month')
|
||||
->select_expr('SUM(price)', 'total')
|
||||
->where_raw("YEAR(recharged_on) = YEAR(CURRENT_DATE())") // Filter by the current year
|
||||
->group_by_expr('MONTH(recharged_on)')
|
||||
->find_many();
|
||||
|
||||
// Execute the query and retrieve the monthly sales data
|
||||
$results = $query->find_many();
|
||||
|
||||
// Create an array to hold the monthly sales data
|
||||
$monthlySales = array();
|
||||
|
||||
// Iterate over the results and populate the array
|
||||
foreach ($results as $result) {
|
||||
$month = $result->month;
|
||||
$totalSales = $result->total;
|
||||
|
||||
$monthlySales[$month] = array(
|
||||
'month' => $month,
|
||||
'totalSales' => $totalSales
|
||||
);
|
||||
}
|
||||
|
||||
// Fill in missing months with zero sales
|
||||
for ($month = 1; $month <= 12; $month++) {
|
||||
if (!isset($monthlySales[$month])) {
|
||||
$monthlySales[$month] = array(
|
||||
'month' => $month,
|
||||
'totalSales' => 0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort the array by month
|
||||
ksort($monthlySales);
|
||||
|
||||
// Reindex the array
|
||||
$monthlySales = array_values($monthlySales);
|
||||
|
||||
// Assign the monthly sales data to Smarty
|
||||
$ui->assign('monthlySales', $monthlySales);
|
||||
$ui->assign('xheader', '<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0/dist/apexcharts.min.js"></script>');
|
||||
$ui->assign('xfooter', '');
|
||||
$ui->assign('counts', $counts);
|
||||
$ui->assign('stocks', $stocks);
|
||||
$ui->assign('plans', $plans);
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{include file="sections/header.tpl"}
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-xs-6">
|
||||
<div class="small-box bg-aqua">
|
||||
@ -59,38 +60,73 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- solid sales graph -->
|
||||
<div class="box box-solid ">
|
||||
<div class="box-header">
|
||||
<i class="fa fa-th"></i>
|
||||
|
||||
<h3 class="box-title">{Lang::T('Monthly Registered Customers')}</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body border-radius-none">
|
||||
<canvas class="chart" id="chart" style="height: 250px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- solid sales graph -->
|
||||
<div class="box box-solid ">
|
||||
<div class="box-header">
|
||||
<i class="fa fa-inbox"></i>
|
||||
|
||||
<h3 class="box-title">{Lang::T('Total Monthly Sales')}</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body border-radius-none">
|
||||
<canvas class="chart" id="salesChart" style="height: 250px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
{if $_c['disable_voucher'] != 'yes' && $stocks['unused']>0 || $stocks['used']>0}
|
||||
<div class="panel panel-primary mb20 panel-hovered project-stats table-responsive">
|
||||
<div class="panel-heading">Vouchers Stock</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{$_L['Plan_Name']}</th>
|
||||
<th>unused</th>
|
||||
<th>used</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach $plans as $stok}
|
||||
<tr>
|
||||
<td>{$stok['name_plan']}</td>
|
||||
<td>{$stok['unused']}</td>
|
||||
<td>{$stok['used']}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/foreach}
|
||||
<div class="panel panel-primary mb20 panel-hovered project-stats table-responsive">
|
||||
<div class="panel-heading">Vouchers Stock</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>{$stocks['unused']}</td>
|
||||
<td>{$stocks['used']}</td>
|
||||
<th>{$_L['Plan_Name']}</th>
|
||||
<th>unused</th>
|
||||
<th>used</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach $plans as $stok}
|
||||
<tr>
|
||||
<td>{$stok['name_plan']}</td>
|
||||
<td>{$stok['unused']}</td>
|
||||
<td>{$stok['used']}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/foreach}
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>{$stocks['unused']}</td>
|
||||
<td>{$stocks['used']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="panel panel-warning mb20 panel-hovered project-stats table-responsive">
|
||||
<div class="panel-heading">{$_L['User_Expired_Today']}</div>
|
||||
@ -107,15 +143,15 @@
|
||||
<tbody>
|
||||
{$no = 1}
|
||||
{foreach $expire as $expired}
|
||||
<tr>
|
||||
<td>{$no++}</td>
|
||||
<td><a href="{$_url}customers/viewu/{$expired['username']}">{$expired['username']}</a></td>
|
||||
<td>{Lang::dateAndTimeFormat($expired['recharged_on'],$expired['recharged_time'])}
|
||||
</td>
|
||||
<td>{Lang::dateAndTimeFormat($expired['expiration'],$expired['time'])}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td>{$no++}</td>
|
||||
<td><a href="{$_url}customers/viewu/{$expired['username']}">{$expired['username']}</a></td>
|
||||
<td>{Lang::dateAndTimeFormat($expired['recharged_on'],$expired['recharged_time'])}
|
||||
</td>
|
||||
<td>{Lang::dateAndTimeFormat($expired['expiration'],$expired['time'])}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/foreach}
|
||||
</table>
|
||||
</div>
|
||||
@ -123,38 +159,201 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="panel panel-success panel-hovered mb20 activities">
|
||||
<div class="panel-heading">{Lang::T('Payment Gateway')}: {$_c['payment_gateway']}</div>
|
||||
</div>
|
||||
<div class="panel panel-info panel-hovered mb20 activities">
|
||||
<div class="panel-heading">{Lang::T('Active Users')}</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="userRechargesChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info panel-hovered mb20 activities">
|
||||
<div class="panel-heading"><a href="{$_url}logs">{$_L['Activity_Log']}</a></div>
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled">
|
||||
{foreach $dlog as $dlogs}
|
||||
<li class="primary">
|
||||
<span class="point"></span>
|
||||
<span class="time small text-muted">{time_elapsed_string($dlogs['date'],true)}</span>
|
||||
<p>{$dlogs['description']}</p>
|
||||
</li>
|
||||
<li class="primary">
|
||||
<span class="point"></span>
|
||||
<span class="time small text-muted">{time_elapsed_string($dlogs['date'],true)}</span>
|
||||
<p>{$dlogs['description']}</p>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var counts = JSON.parse('{/literal}{$counts|json_encode}{literal}');
|
||||
|
||||
var monthNames = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
||||
];
|
||||
|
||||
var labels = [];
|
||||
var data = [];
|
||||
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
var month = counts.find(count => count.date === i);
|
||||
labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
|
||||
data.push(month ? month.count : 0);
|
||||
}
|
||||
|
||||
var ctx = document.getElementById('chart').getContext('2d');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Registered Members',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.5)',
|
||||
borderColor: 'rgba(0, 0, 255, 0.7)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var monthlySales = JSON.parse('{/literal}{$monthlySales|json_encode}{literal}');
|
||||
|
||||
var monthNames = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
||||
];
|
||||
|
||||
var labels = [];
|
||||
var data = [];
|
||||
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
var month = findMonthData(monthlySales, i);
|
||||
labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
|
||||
data.push(month ? month.totalSales : 0);
|
||||
}
|
||||
|
||||
var ctx = document.getElementById('salesChart').getContext('2d');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Monthly Sales',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(2, 10, 242)', // Customize the background color
|
||||
borderColor: 'rgba(255, 99, 132, 1)', // Customize the border color
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function findMonthData(monthlySales, month) {
|
||||
for (var i = 0; i < monthlySales.length; i++) {
|
||||
if (monthlySales[i].month === month) {
|
||||
return monthlySales[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get the data from PHP and assign it to JavaScript variables
|
||||
var u_act = '{/literal}{$u_act}{literal}';
|
||||
var u_all = '{/literal}{$u_all}{literal}';
|
||||
|
||||
// Create the chart data
|
||||
var data = {
|
||||
labels: ['Active Users', 'Inactive Users'],
|
||||
datasets: [{
|
||||
label: 'User Recharges',
|
||||
data: [parseInt(u_act), parseInt(u_all)],
|
||||
backgroundColor: ['rgba(4, 191, 13)', 'rgba(191, 35, 4)'],
|
||||
borderColor: ['rgba(0, 255, 0, 1)', 'rgba(255, 99, 132, 1)'],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
|
||||
// Create chart options
|
||||
var options = {
|
||||
responsive: true,
|
||||
aspectRatio: 1,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth: 15
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Get the canvas element and create the chart
|
||||
var ctx = document.getElementById('userRechargesChart').getContext('2d');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/literal}
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
$.getJSON("./version.json?" + Math.random(), function(data) {
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
$.getJSON("./version.json?" + Math.random(), function (data) {
|
||||
var localVersion = data.version;
|
||||
$('#version').html('Version: ' + localVersion);
|
||||
$.getJSON(
|
||||
"https://raw.githubusercontent.com/hotspotbilling/phpnuxbill/master/version.json?" +
|
||||
Math
|
||||
.random(),
|
||||
function(data) {
|
||||
.random(),
|
||||
function (data) {
|
||||
var latestVersion = data.version;
|
||||
if (localVersion !== latestVersion) {
|
||||
$('#version').html('Latest Version: ' + latestVersion);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user