322 lines
9.1 KiB
PHP
322 lines
9.1 KiB
PHP
<?php
|
|
include 'connect/cms-config.php' ;
|
|
include 'requires/function.php' ;
|
|
$user_permission_check = 'all-permission' ;
|
|
include 'requires/session.php' ;
|
|
|
|
// keep parameter in value
|
|
$filter_page = escapeString($_GET['filter_page']) ;
|
|
$filter_page = ( $filter_page != '' ? $filter_page : 'task' ) ;
|
|
$date_time = escapeString($_GET['date_time']) ;
|
|
$date_time = ( $date_time != '' ? $date_time : date('Y-m', time()) ) ;
|
|
|
|
// active page
|
|
$active_main_menu = 'dashboard' ;
|
|
$active_menu = 'dashboard' ;
|
|
|
|
// start header here
|
|
include 'requires/page_header.php' ;
|
|
include 'requires/page_top.php' ;
|
|
?>
|
|
<link rel="stylesheet" href="<?= $require_path ?>css/dashboard.css" />
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#filter_page').on('change', function() {
|
|
var selectedValue = $(this).val();
|
|
var link = '?filter_page=' + selectedValue + '&date_time=<?= $date_time ?>';
|
|
window.location.href = link;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="warper container-fluid">
|
|
<div class="container dashboard">
|
|
<!-- Row 1: DASHBOARD -->
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h4 class="dashboard-title">DASHBOARD</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2: Date and Today Filter -->
|
|
<div class="row date-row">
|
|
<div class="col-xs-6">
|
|
<span class="dashboard-date">2025-07-08</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<input type="text" class="form-control input-sm dashboard-filter" placeholder="Today">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: Cards -->
|
|
<div class="row card-container">
|
|
<div class="col-sm-3 col-xs-6">
|
|
<div class="card-box">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<i class="glyphicon glyphicon-user icon"></i>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<strong>Employee</strong>
|
|
<div class="card-count">700</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3 col-xs-6">
|
|
<div class="card-box">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<i class="glyphicon glyphicon-user icon"></i>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<strong>Employee</strong>
|
|
<div class="card-count">700</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3 col-xs-6">
|
|
<div class="card-box">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<i class="glyphicon glyphicon-user icon"></i>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<strong>Employee</strong>
|
|
<div class="card-count">700</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3 col-xs-6">
|
|
<div class="card-box">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<i class="glyphicon glyphicon-user icon"></i>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<strong>Employee</strong>
|
|
<div class="card-count">700</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container announcement">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h4 class="dashboard-title text-left">ANNOUNCEMENT</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row title-row text-center">
|
|
<div class="col-sm-12">
|
|
<span class="announcement-title">Welcome to your new system</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row date-row text-center">
|
|
<div class="col-xs-12">
|
|
<span class="dashboard-date">
|
|
If you need help getting started, check out our user manual. If you need help, call us at +6016 977 5111 or email us at info@ips.com.my to get information on how to use your current screen and where to go for more assistance.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard_section">
|
|
<div class="row ">
|
|
<div class="col-sm-6" style="padding: 0px;">
|
|
<div style="margin-top:5px;margin-right:5px;padding: 30px;background-color: white; border-radius: 8px;">
|
|
<h4 class="dashboard-title">TOTAL EMPLOYEES</h4>
|
|
<div id="totalEmployee" class="chart_div"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6" style="padding: 0px;">
|
|
<div style="margin-top:5px;margin-left:5px;padding: 30px;background-color: white; border-radius: 8px;">
|
|
<h4 class="dashboard-title">EMPLOYEES COMPARISON</h4>
|
|
<div id="employeeComparison" class="chart_div"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.onload = function() {
|
|
|
|
var chart = new CanvasJS.Chart("totalEmployee", {
|
|
animationEnabled: true,
|
|
backgroundColor: "white",
|
|
legend: {
|
|
verticalAlign: "bottom",
|
|
horizontalAlign: "center",
|
|
fontSize: 14,
|
|
fontFamily: "Arial"
|
|
},
|
|
data: [{
|
|
type: "doughnut",
|
|
startAngle: 60,
|
|
innerRadius: 70,
|
|
indexLabelFontSize: 14,
|
|
indexLabel: "{label} - {y}%",
|
|
toolTipContent: "<b>{label}:</b> {y}%",
|
|
dataPoints: [{
|
|
y: 43.1,
|
|
label: "Business",
|
|
color: "#4285F4"
|
|
},
|
|
{
|
|
y: 32.4,
|
|
label: "Development",
|
|
color: "#DB3E88"
|
|
},
|
|
{
|
|
y: 16.2,
|
|
label: "Testing",
|
|
color: "#F4CF27"
|
|
},
|
|
{
|
|
y: 8.3,
|
|
label: "Design",
|
|
color: "#5CCF77"
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
chart.render();
|
|
|
|
// Line Chart Example
|
|
var lineChart = new CanvasJS.Chart("employeeComparison", {
|
|
animationEnabled: true,
|
|
backgroundColor: "white",
|
|
title: {
|
|
text: "Department Performance Over Time"
|
|
},
|
|
axisX: {
|
|
title: "Month"
|
|
},
|
|
axisY: {
|
|
title: "Completed Tasks"
|
|
},
|
|
data: [{
|
|
type: "line",
|
|
name: "IT Department",
|
|
showInLegend: true,
|
|
dataPoints: [{
|
|
label: "Jan",
|
|
y: 20
|
|
},
|
|
{
|
|
label: "Feb",
|
|
y: 25
|
|
},
|
|
{
|
|
label: "Mar",
|
|
y: 22
|
|
},
|
|
{
|
|
label: "Apr",
|
|
y: 30
|
|
},
|
|
{
|
|
label: "May",
|
|
y: 28
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
lineChart.render();
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
/*dashboard css dont move it to dashboard.css, it use to ovrrwrite some random css*/
|
|
/*first element*/
|
|
.container.dashboard {
|
|
width: 100%;
|
|
display: inline-block;
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.date-row {
|
|
margin-top: 10px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.dashboard-date {
|
|
color: #666;
|
|
}
|
|
|
|
.dashboard-filter {
|
|
max-width: 150px;
|
|
float: right;
|
|
}
|
|
|
|
.card-container .card-box {
|
|
background-color: #fff;
|
|
border: 1px solid #e1e1e1;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
text-align: left;
|
|
}
|
|
|
|
.card-box .icon {
|
|
color: #5e5bd0;
|
|
font-size: 24px;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.card-box strong {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
.card-count {
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
|
|
/*second element*/
|
|
.container.announcement {
|
|
width: 100%;
|
|
display: inline-block;
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.announcement-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
width: 100%;
|
|
margin-bottom: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<?php
|
|
// footer
|
|
include 'requires/page_footer.php' ;
|
|
?>
|