File: /home/cafsindia/.trash/application/views/timeoffice_dashboard/manage.php
<?php
$this->load->view("partial/header");
$today = date('d-m-Y');
$current_month = date('m-Y');
$prev_month = date('01-m-Y', strtotime("-6 month", strtotime($today)));
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Poppins, sans-serif;
background-color: #f1f1f1;
}
/* Float four columns side by side */
.column {
float: left;
width: 20%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin-left: 15px;
margin-right: 15px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.highcharts-no-data{
font-size: 1.8em !important;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 5px;
text-align: center;
background-color: #FFFFFF;
border-radius: 7px;
}
.jumbotron{
background-color: #f1f1f1;
}
.card:hover {
box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.orange{
background: linear-gradient(45deg, #ff6f00 0%, #ffca28 100%);
}
.blue{
background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
}
.text-uppercase,.h4{
color: #FFFFFF;
font-weight: bold;
}
.pink{
background: linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
}
.violite{
background: linear-gradient(45deg, #9C27B0 0%, #BA68C8 100%);
}
.green{
background: linear-gradient(45deg, #14f28c 0%, #4DB6AC 100%);
}
.red{
background: linear-gradient(45deg, #e60012 0%, #e8b8b8 100%);
}
.fa{
color: #FFFFFF;
}
#emp_leave_info_tab.dataTable tr th:nth-child(1){
position:sticky;
left:0;
z-index:1000;
top:0;
background-color: #001630;
}
#emp_leave_info_tab.dataTable tr th:nth-child(2){
position:sticky;
left:35px;
z-index:1000;
top:0;
background-color:
}
#emp_leave_info_tab.dataTable tr th:nth-child(3){
position:sticky;
left:160px;
z-index:1000;
top:0;
background-color: #001630;
}
#emp_leave_info_tab.dataTable th{
position: sticky;
top: 0;
z-index: 2;
background-color: #001630;
}
.highcharts-axis .highcharts-xaxis{
font-size: 1.2rem !important;
}
#emp_leave_info_tab_wrapper{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
table thead tr th {
background-color: #001630;
position: sticky;
z-index: 100;
top: 0;
}
</style>
</head>
<body>
<h4 class="center bold mrgb15" style="color:#5C5C61;">TIME OFFICE DASHBOARD</h4>
<div class="row" style="margin:20px 30px;margin-bottom: 30px;">
<div class="col-md-2">
<div class="card orange">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-group" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Total Employees</h6>
<!-- Heading -->
<span id="total_employees" class="h4 mb-0">0</span>
<!-- Badge -->
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card blue">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Active Employees</h6>
<!-- Heading -->
<span id="active_employees" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card pink">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-bank" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Departments </h6>
<!-- Heading -->
<span id="active_department" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card violite">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-cubes" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Designations</h6>
<!-- Heading -->
<span id="active_sections" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card green">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-handshake-o" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> This Month Joining </h6>
<!-- Heading -->
<span id="joined_this_month" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card red">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-remove" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Left this month</h6>
<!-- Heading -->
<span id="left_this_month" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<!-- </div> -->
</div>
</body>
</html>
<div class="container-fluid" style="background-color: #f2f2f2;padding: 10px;">
<!-- <div class="row" >
</div> -->
<div class="row dash_layer_bar" >
<div class='col-md-12'>
<div class='col-md-2'>
<div class='form-group'>
<?php
$date_period_list = array(""=>"---- Select Period ----",1=>"Yesterday",2=>"Today");
//,3=>"Current Month",4=>"Current Year"
echo form_label('Date Period', 'date_period');
echo form_dropdown(array( 'name' => 'date_period', 'id' => 'date_period', 'class' => 'form-control input-sm select2'), $date_period_list,1);
?>
</div>
</div>
<div class='col-md-2'>
<div class='form-group'>
<?php
echo form_label('Branch', 'Branch');
echo form_dropdown(array( 'name' => 'category', 'id' => 'category', 'class' => 'form-control input-sm '), $branch_list);
?>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<h4 style="margin-left:9px;">Employees Statistics</h4>
<div id = "Statistics_info">
</div>
</div>
<!-- <div class="col-md-6">
<h4>Extended Employees Statistics: Last 8 Days</h4>
<div id = "present_absent_info">
</div>
</div> -->
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class='col-md-2'>
<div class='form-group'>
<label>Start Date</label>
<input type='text' id='start_date' value='<?php echo $prev_month; ?>' class='datepicker form-control input-sm'>
</div>
</div>
<div class='col-md-2'>
<div class='form-group' style="margin-left:5px;">
<label>End Date</label>
<input type='text' id='end_date' value='<?php echo $today; ?>' class='datepicker form-control input-sm '>
</div>
</div>
<div class='col-md-2'>
<div class='form-group'>
<?php
echo form_label('Branch', 'Branch');
echo form_dropdown(array( 'name' => 'branch', 'id' => 'branch', 'class' => 'form-control input-sm '), $branch_list);
?>
</div>
</div>
<div class='form-group'>
<button id='search' class='btn btn-info btn-sm' style="margin-top:17px;margin-left: 20px;" onclick='chart_search()'>search</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="dash_layer_bar">
<div id="emp_department_count_chart" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
</div>
</div>
<div class="col-md-6">
<div class="dash_layer_bar" style="padding: 1px 9px 0px 9px;height: 330px;">
<!-- <h4 id="leave_header" style="margin-left:9px;">Total Team Count</h4> -->
<div id="get_cw_team_data"></div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6">
<div class="dash_layer" style="padding: 1px 9px 0px 9px;overflow-y:auto;height: 378px;">
<h4 id="leave_header" style="margin-left:9px;">TOP 10 LEAVE TAKERS</h4>
<div id='emp_leave_details_info'></div>
</div>
</div>
<div class="col-md-6 dash_layer_bar">
<div class="shift_div">
<div class='col-md-12' style="height: 54px">
<div class='col-md-4'>
<div class='form-group'>
<?php
$date_period_list = array(""=>"---- Select Period ----",1=>"Yesterday",2=>"Today",3=>"Current Month");
echo form_label('Month', 'month');
echo form_input(array( 'name' => 'month', 'id' => 'month', 'value'=>$current_month, 'class' => 'form-control input-sm monthpicker'));
?>
</div>
</div>
<div class='col-md-4'>
<div class='form-group'>
<?php
echo form_label('Branch', 'Branch');
echo form_dropdown(array( 'name' => 'shift_branch', 'id' => 'shift_branch', 'class' => 'form-control input-sm '), $branch_list);
?>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div id="emp_shift_count_chart" style="min-width: 268px; height: 307px; margin: 0 auto;">
<p id="showCustom" style="display: none;">No data available</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$(".datepicker").datetimepicker({
format: 'DD-MM-YYYY',
});
$(".monthpicker").datetimepicker({
format: 'MM-YYYY',
}).on('dp.change', function (e) {
var month = $("#month").val();
var branch = $("#branch").val();
emp_shift_count_chart(month,branch);
});
$('.select2').select2({
placeholder: '---- Select ----',
allowClear: true,
//dropdownParent: $('.modal-dialog')
});
});
$("#shift_branch").on('change',function(){
var month = $("#month").val();
var branch = $("#shift_branch").val();
emp_shift_count_chart(month,branch);
});
dashboard_search();
chart_search();
$('#date_period,#category').on("change",function(e) {
var date_period = parseInt($('#date_period').val());
var category = parseInt($('#category').val());
if(!date_period){
toastr.error('Date Period Should not Empty..!!');
}
else{
dashboard_search();
}
});
});
function dashboard_search(){
var date_period = $('#date_period').val();
var branch = $('#category').val();
get_emp_statistics_info(date_period,branch);
get_emp_present_absent_info(date_period,branch);
}
function chart_search(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
var branch = $('#branch').val();
var month = $("#month").val();
get_cw_team_data(start_date,end_date,branch);
emp_department_count_chart(start_date,end_date,branch);
emp_leave_details_info(start_date,end_date,branch);
emp_master_count();
emp_shift_count_chart(month,branch);
}
</script>
<script src="./dist/highcharts/highcharts.js"></script>
<script src="./dist/highcharts/exporting.js"></script>
<script src="./dist/highcharts/highchartnodata.js"></script>
<script src="./dist/highcharts/modules_export-data.js"></script>
<script src="./dist/highcharts/timeoffice_dashboard.js"></script>
<!-- <script type="text/javascript" src="dist/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="dist/highcharts/data.js"></script>
<script type="text/javascript" src="dist/highcharts/drilldown.js"></script> -->
<?php $this->load->view("partial/footer"); ?>