| Server IP : 104.21.37.246 / Your IP : 104.23.243.32 [ Web Server : Apache System : Linux cpanel01wh.bkk1.cloud.z.com 2.6.32-954.3.5.lve1.4.59.el6.x86_64 #1 SMP Thu Dec 6 05:11:00 EST 2018 x86_64 User : cp648411 ( 1354) PHP Version : 7.2.34 Disable Function : NONE Domains : 0 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/cp648411/public_html/ilawasia.onnud20.com/themes/ |
Upload File : |
<input type="hidden" id="page-menu-id" name="" value="" />
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
<select class="form-control" id="ddl_department" onchange="changeFilter()" style="display:inline-block; width:200px;">
<option value="">All</option>
<option value="1">Litigation</option>
<option value="2">IP</option>
<option value="3">Corporate</option>
</select>
</div>
<!-- Manager -->
<!-- Content Row -->
<div class="row">
<!-- Quotation Count -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Quotation Count
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader"><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_quotation_count"><?php echo ($respose_count_quotationCount)?$respose_count_quotationCount:0; ?></div>
</div>
<div class="col-auto">
<i class="fas fa-file-invoice-dollar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Quotation Amount -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Quotation Value
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader"><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_quotation_value"><?php echo ($row_quotationValue['Amount'])?$row_quotationValue['Amount']:0; ?></div>
</div>
<div class="col-auto">
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Quotation not be paid count -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Unpaid Quotation Count
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader"><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_unpaid_quotation_count"><?php echo ($row_unpaidQuotationCount['Count'])?$row_unpaidQuotationCount['Count']:0; ?></div>
</div>
<div class="col-auto">
<i class="fas fa-file-invoice-dollar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Quotation not be paid amount -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Unpaid Quotation Value
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader"><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_unpaid_quotation_value"><?php echo ($row_unpaidQuotationValue['Amount'])?$row_unpaidQuotationValue['Amount']:0; ?></div>
</div>
<div class="col-auto">
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Income Overview</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="ph-item graph-box-loader">
<div class="ph-col-12">
<div class="ph-picture" style="height:300px"></div>
</div>
</div>
<div class="chart-area d-none" id="div-graph">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Quotation Status</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="ph-item pie-box-loader">
<div class="ph-col-12">
<div class="ph-picture" style="height:300px"></div>
</div>
</div>
<div class="d-none" id="div-pie">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Paid
</span>
<span class="mr-2">
<i class="fas fa-circle text-danger"></i> Unpaid
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Quotation Count -->
<div class="col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Case
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader" ><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_case"></div>
</div>
<div class="col-auto">
<i class="fas fa-folder-open fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Quotation Amount -->
<div class="col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Closed Case
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-loader"><i class="fa fa-pulse fa-spinner"></i></div>
<div class="h5 mb-0 font-weight-bold text-gray-800 top-box-label d-none" id="lbl_case_closed"></div>
</div>
<div class="col-auto">
<i class="fas fa-folder fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row d-none">
<!-- Area Chart -->
<div class="col-lg-12">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Timesheet Overview</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="ph-item graph-box-loader">
<div class="ph-col-12">
<div class="ph-picture" style="height:300px"></div>
</div>
</div>
<div class="chart-area d-none" id="div-graph">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo $path; ?>Assets/Backend/vendor/chart.js/Chart.min.js"></script>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';
function number_format(number, decimals, dec_point, thousands_sep) {
number = (number + '').replace(',', '').replace(' ', '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
</script>
<?php if ($System==true || $Admin==true || $Ceo==true || $Manager==true) { ?>
<script>
loadManagerBoxes();
loadManagerIncome();
loadManagerPie();
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function changeFilter() {
loadManagerBoxes();
loadManagerIncome();
loadManagerPie();
}
function loadManagerBoxes() {
$(".top-box-loader").removeClass('d-none');
$(".top-box-label").addClass('d-none');
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
//console.log(data.unpaidQuotationValue);
$("#lbl_quotation_count").text(numberWithCommas(parseFloat(data.QuotationCount)));
$("#lbl_quotation_value").text(numberWithCommas(parseFloat(data.QuotationValue)));
$("#lbl_unpaid_quotation_count").text(numberWithCommas(parseFloat(data.UnpaidQuotationCount)));
$("#lbl_unpaid_quotation_value").text(numberWithCommas(parseFloat(data.unpaidQuotationValue)));
$(".top-box-loader").addClass('d-none');
$(".top-box-label").removeClass('d-none');
}
};
xmlhttp.open("GET", "ajax.php?q=dashboard", true);
xmlhttp.send();
}
function loadManagerIncome() {
$(".graph-box-loader").removeClass('d-none');
$(".chart-area").addClass('d-none');
department: $("#ddl_department").val()
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
setChart(data.month1);
$(".graph-box-loader").addClass('d-none');
$(".chart-area").removeClass('d-none');
}
};
xmlhttp.open("GET", "ajax.php?q=LoadManagerGraph", true);
xmlhttp.send();
}
function loadManagerPie() {
$(".pie-box-loader").removeClass('d-none');
$("#div-pie").addClass('d-none');
var department = $("#ddl_department").val();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
//console.log(this.responseText);
setPie(data);
$(".pie-box-loader").addClass('d-none');
$("#div-pie").removeClass('d-none');
}
};
xmlhttp.open("GET", "ajax.php?q=LoadManagerPie&department="+department, true);
xmlhttp.send();
}
var myPieChart;
function setPie(data) {
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
if (myPieChart instanceof Chart) {
myPieChart.destroy();
}
myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Paid", "Unpaid"],
datasets: [{
data: data,
backgroundColor: ['#1cc88a', '#e74a3b'],
hoverBackgroundColor: ['#17a673', '#e02d1b'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
callbacks: {
label: function (tooltipItem, chart) {
console.log(tooltipItem);
var datasetLabel = chart.labels[tooltipItem.index];
return datasetLabel + ': ' + number_format(chart.datasets[0].data[tooltipItem.index]);//+ ': ' + number_format(tooltipItem.yLabel);
}
}
},
legend: {
display: false
},
cutoutPercentage: 80,
},
});
}
var myLineChart;
function setChart(data) {
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
if (myLineChart instanceof Chart) {
myLineChart.destroy();
}
myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Income",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: data,
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
callbacks: {
label: function (tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
}
}
}
}
});
}
</script>
<?php }else{ ?>
<script>
//loadBoxes();
//loadTimeSheetGraph();
function loadBoxes() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
console.log(data);
$("#lbl_case").text(numberWithCommas(data.CaseCount));
$("#lbl_case_closed").text(numberWithCommas(data.ClosedCaseCount));
/*
$("#lbl_quotation_count").text(numberWithCommas(parseFloat(data.QuotationCount)));
$("#lbl_quotation_value").text(numberWithCommas(parseFloat(data.QuotationValue)));
$("#lbl_unpaid_quotation_count").text(numberWithCommas(parseFloat(data.UnpaidQuotationCount)));
$("#lbl_unpaid_quotation_value").text(numberWithCommas(parseFloat(data.unpaidQuotationValue)));
*/
$(".top-box-loader").addClass('d-none');
$(".top-box-label").removeClass('d-none');
}
};
xmlhttp.open("GET", "ajax.php?q=dashboard", true);
xmlhttp.send();
$(".top-box-loader").addClass('d-none');
$(".top-box-label").removeClass('d-none');
}
function loadTimeSheetGraph() {
setChart(resp.Data);
}
function setChart(data) {
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Timesheet",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: data,
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
callbacks: {
label: function (tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + number_format(tooltipItem.yLabel) +" tasks";
}
}
}
}
});
}
</script>
<?php } ?>