File: /var/www/html/taxicamera/application/views/admin/dashboard.php
<style>
.table th, .table td {
padding: 10px;
vertical-align: top;
border-top: 1px solid #DEE2E6;
font-size: 12px;
}
div.dataTables_wrapper div.dataTables_length select {
height: 26px;
margin-bottom: 0;
}
div.dataTables_wrapper div.dataTables_filter input {
height: 26px;
margin-bottom: 0;
}
div.dataTables_wrapper div.dataTables_filter label {
margin-bottom: 0;
}
</style>
<div class="main-content">
<div class="content-wrapper">
<div class="container-fluid">
<?php if ($this->session->flashdata('success_msg')) : ?>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
<?php echo $this->session->flashdata('success_msg') ?>
</div>
<?php endif ?>
<?php if ($this->session->flashdata('error_msg')) : ?>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
<?php echo $this->session->flashdata('error_msg') ?>
</div>
<?php endif ?>
<!--Statistics cards Starts-->
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<div class="card bg-white">
<div class="card-body">
<div class="card-block pt-2 pb-0">
<div class="media">
<div class="media-body white text-left">
<h4 class="font-medium-5 card-title mb-0">$<?=$total_cash_in_hand['total_cash_in_hand']?></h4>
<span class="grey darken-1">Total Cash In Hand</span>
</div>
<div class="media-right text-right">
<i class="icon-cup font-large-1 primary"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<?php if($this->role_id == 1) { ?>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<div class="card bg-white">
<div class="card-body">
<div class="card-block pt-2 pb-0">
<div class="media">
<div class="media-body white text-left">
<h4 class="font-medium-5 card-title mb-0">$<?=$total_bond['paid_amt']?></h4>
<span class="grey darken-1">Total Bond</span>
</div>
<div class="media-right text-right">
<!--<i class="icon-wallet font-large-1 warning"></i>-->
<i class="fa fa-briefcase font-large-1 warning" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<div class="card bg-white">
<div class="card-body">
<div class="card-block pt-2 pb-0">
<div class="media">
<div class="media-body white text-left">
<h4 class="font-medium-5 card-title mb-0"><?php echo $datatotal_active_driver; ?></h4>
<span class="grey darken-1">Active Driver</span>
</div>
<div class="media-right text-right">
<!--<i class="icon-basket-loaded font-large-1 success"></i>-->
<i class="fa fa-users font-large-1 success" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<?php if($this->role_id == 1) { ?>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-warning">
<h4 class="card-title">Accident 1 year</h4>
<div style="margin-top:20px">
<div class="media-body white text-left">
<h4 class="font-medium-5 card-title mb-0"><?php echo $accdnt_fault_notfault_cnt['fault']; ?></h4>
<span class="grey darken-1">Fault</span>
</div>
<div class="media-body white text-left">
<h4 class="font-medium-5 card-title mb-0"><?php echo $accdnt_fault_notfault_cnt['not_fault']; ?></h4>
<span class="grey darken-1">Not Fault</span>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="row match-height">
<div class="col-xl-5 col-lg-12 col-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Shift Not Started</h4>
</div>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
<div class="card-content mt-1">
<div class="table-responsive">
<table class="table table-hover table-xl mb-0 dom-jQuery-events" id="recent-orders">
<thead>
<tr>
<th class="border-top-0">Sl No.</th>
<th class="border-top-0">Car No.</th>
<th class="border-top-0">Date</th>
<th class="border-top-0">Mobile No.</th>
<th class="border-top-0">Driver Name</th>
</tr>
</thead>
<tbody>
<?php if (!empty($shift_not_started_details)) : ?>
<?php foreach ($shift_not_started_details as $key => $list) : ?>
<tr>
<td><?php echo $key + 1; ?></td>
<td class="text-truncate"><?php echo $list['registration_no']; ?></td>
<td class="text-truncate"><?php echo $list['day_date']; ?></td>
<td class="text-truncate"><?php echo $list['mobile']; ?></td>
<td class="text-truncate"><?php echo $list['first_name']; ?></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-7" id="recent-sales">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Ongoing Shift Details</h4>
</div>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
<div class="card-content mt-1">
<div class="table-responsive">
<table class="table table-hover table-xl mb-0 dom-jQuery-events" id="ongoing_shift_details">
<thead>
<tr>
<th class="border-top-0">Sl No.</th>
<th class="border-top-0">Car No.</th>
<th class="border-top-0">Shift No.</th>
<th class="border-top-0">Mobile No.</th>
<th class="border-top-0">Driver Name</th>
<th class="border-top-0">Delete</th>
</tr>
</thead>
<tbody style="display:none;" id="ongoing_shift_details_tbody">
<?php if (!empty($ongoing_shift_details)) : ?>
<?php foreach ($ongoing_shift_details as $key => $list) : ?>
<tr>
<td><?php echo $key + 1; ?></td>
<td class="text-truncate"><?php echo $list['registration_no']; ?></td>
<td class="text-truncate"><?php echo $list['shift_no']; ?></td>
<td class="text-truncate"><?php echo $list['mobile']; ?></td>
<td class="text-truncate"><?php echo $list['first_name']; ?></td>
<td class="action_td text-center delete_icon_td"><a title="Delete" class="btn btn-danger btn-sm btn_action delete_icon" href="<?= base_url();?>admin/dashboard/shift_delete/<?= $list['shift_id'];?>"><i class="fa fa-trash" aria-hidden="true"></i></a></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--Statistics cards Ends-->
<!--Line with Area Chart 1 Starts-->
<div class="row match-height">
<div class="col-xl-5 col-lg-12 col-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Driver Settlement Chart</h4>
</div>
</div>
<div class="card-body">
<div class="card-block chartjs">
<canvas id="settlement_column_chart" height="400px"></canvas>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-7" id="recent-sales">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Driver Due Data (Partial Paid)</h4>
</div>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
<div class="card-content mt-1">
<div class="table-responsive">
<table class="table table-hover table-xl mb-0 dom-jQuery-events" id="recent-orders">
<thead>
<tr>
<th class="border-top-0">Sl No.</th>
<th class="border-top-0">First Name</th>
<th class="border-top-0">Shift No</th>
<th class="border-top-0">Mobile No.</th>
<th class="border-top-0">Due Amount</th>
</tr>
</thead>
<tbody>
<?php if (!empty($driver_due_data)) : ?>
<?php foreach ($driver_due_data as $key => $list) : ?>
<tr>
<td class="text-truncate"><?php echo $key + 1 ; ?></td>
<td class="text-truncate"><?php echo $list['first_name']; ?></td>
<td class="text-truncate"><?php echo $list['shift_no']; ?></td>
<td class="text-truncate"><?php echo $list['mobile']; ?></td>
<td class="text-truncate"><?php echo $list['due_amount']; ?></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--Line with Area Chart 1 Ends-->
<div class="row match-height">
<div class="col-xl-5 col-lg-12 col-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-warning">
<h4 class="card-title">Roster (Last Week)</h4>
</div>
</div>
<div class="card-body">
<div class="card-block chartjs">
<canvas id="roster_column_chart" height="400px"></canvas>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-7" id="recent-sales">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">App submitted pay-ins</h4>
</div>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
<div class="card-content mt-1">
<div class="table-responsive">
<table class="table table-hover table-xl mb-0 dom-jQuery-events" id="recent-orders">
<thead>
<tr>
<th class="border-top-0">Sl No.</th>
<th class="border-top-0">First Name</th>
<th class="border-top-0">Shift No</th>
<th class="border-top-0">Mobile No.</th>
<th class="border-top-0">Due Amount</th>
</tr>
</thead>
<tbody>
<?php if (!empty($driver_due_data_not_paid)) : ?>
<?php foreach ($driver_due_data_not_paid as $key => $list) : ?>
<tr>
<td class="text-truncate"><?php echo $key + 1 ; ?></td>
<td class="text-truncate"><?php echo $list['first_name']; ?></td>
<td class="text-truncate"><?php echo $list['shift_no']; ?></td>
<td class="text-truncate"><?php echo $list['mobile']; ?></td>
<td class="text-truncate"><?php echo $list['due_amount']; ?></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row match-height">
<div class="col-xl-5 col-lg-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Job Statistics(Last Week)</h4>
</div>
</div>
<div class="card-body">
<div class="card-block chartjs">
<canvas id="job_column_chart" height="400px"></canvas>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-7" id="recent-sales">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-primary">
<h4 class="card-title">Daily Inspection Fault</h4>
</div>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
<div class="card-content mt-1">
<div class="table-responsive">
<table class="table table-hover table-xl mb-0 dom-jQuery-events" id="recent-orders">
<thead>
<tr>
<th class="border-top-0">Sl No.</th>
<th class="border-top-0">Car No.</th>
<th class="border-top-0">Shift No.</th>
<th class="border-top-0">Mobile No.</th>
<th class="border-top-0">Driver Name</th>
</tr>
</thead>
<tbody>
<?php if (!empty($daily_inspection_fault)) : ?>
<?php foreach ($daily_inspection_fault as $key => $list) : ?>
<tr>
<td><?php echo $key + 1; ?></td>
<td class="text-truncate"><?php echo $list['registration_no']; ?></td>
<td class="text-truncate"><?php echo $list['shift_no']; ?></td>
<td class="text-truncate"><?php echo $list['mobile']; ?></td>
<td class="text-truncate"><?php echo $list['driver_name']; ?></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<?= base_url('public/admin_assets/vendors/js/chart.min.js') ?>"></script>
<script>
$(document).ready(function() {
get_driver_settlement_report();
get_roster_report();
get_job_report();
})
function get_driver_settlement_report() {
var weekly_settlement_status = [];
var unsettled_settled_data = [];
var settled_data = [];
var unsettled_data = [];
$.ajax({
url: "<?php echo base_url('admin/dashboard/get_settlement_due_report'); ?>",
type: "POST",
data: {},
dataType: "json",
encode: true,
async: false
})
.done(function(data) {
if (data.status) {
if (data.settlement_data) {
if (data.settlement_data.weekly_settlement_status) {
weekly_settlement_status = data.settlement_data.weekly_settlement_status.split('|#|');
}
$.each(weekly_settlement_status,function(key1,value1){
if(value1){
unsettled_settled_data = value1.split('|@|');
unsettled_data.push(unsettled_settled_data[1]);
settled_data.push(unsettled_settled_data[0]);
}
})
}
// Chart Data
var chartData = {
labels: ['1st Week', '2nd Week', '3rd Week', '4th Week'],
datasets: [{
label: "Not Settled",
data: unsettled_data,
backgroundColor: "rgba(255, 95, 32, 0.8)",
borderColor: "transparent",
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}, {
label: "Settled",
data: settled_data,
backgroundColor: "rgba(102, 110, 232, 0.8)",
borderColor: 'transparent',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}]
};
initialize_chart('settlement_column_chart',chartData);
} else {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
}
})
.fail(function(result) {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
})
}
function get_roster_report(){
var roster_data = [];
$.ajax({
url: "<?php echo base_url('admin/dashboard/get_roster_report'); ?>",
type: "POST",
data: {},
dataType: "json",
encode: true,
async: false
})
.done(function(data) {
if (data.status) {
if (data.roster_data) {
roster_data.push(data.roster_data.total_roster_count);
roster_data.push(data.roster_data.tot_breakdown_cnt);
roster_data.push(Number(data.roster_data.total_roster_count) - Number(data.roster_data.roster_set_cnt));
}
console.log(roster_data);
// Chart Data
var chartData = {
labels: ['Roster', 'Breakdown', 'Free'],
datasets: [{
label: "Roster",
data: roster_data,
backgroundColor: "rgba(255, 95, 32, 0.8)",
borderColor: "transparent",
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}]
};
initialize_chart('roster_column_chart',chartData);
} else {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
}
})
.fail(function(result) {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
})
}
function get_job_report(){
var job_data = [];
$.ajax({
url: "<?php echo base_url('admin/dashboard/get_job_report'); ?>",
type: "POST",
data: {},
dataType: "json",
encode: true,
async: false
})
.done(function(data) {
if (data.status) {
if (data.job_data) {
job_data.push(Math.abs(data.job_data.hail_job_cnt));
job_data.push(Math.abs(Number(data.job_data.tot_job_cnt) - Number(data.job_data.hail_job_cnt)));
}
console.log(job_data);
// Chart Data
var chartData = {
labels: ['Hail Job', 'Radio Job'],
datasets: [{
label: "Job",
data: job_data,
backgroundColor: "rgba(255, 95, 32, 0.8)",
borderColor: "transparent",
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}]
};
initialize_chart('job_column_chart',chartData);
} else {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
}
})
.fail(function(result) {
$.alert({
type: 'red',
title: 'Alert!',
content: 'Oops!Something went wrong...',
});
})
}
function initialize_chart(canvas_id,chartData) {
var ctx = $("#"+canvas_id);
// Chart Options
var chartOptions = {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
maintainAspectRatio: false,
scaleShowVerticalLines: false,
responsiveAnimationDuration: 500,
legend: {
position: 'top',
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
}
}]
}
};
var config = {
type: 'bar',
// Chart Options
options: chartOptions,
data: chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
}
</script>