first commit
This commit is contained in:
LAPTOP-V9RRD1TL\Michelle's Computer
@@ -0,0 +1,322 @@
|
||||
<?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' ;
|
||||
?>
|
||||
Reference in New Issue
Block a user