216 lines
14 KiB
PHP
216 lines
14 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('css')
|
|
<!--Chartist Chart CSS -->
|
|
<link rel="stylesheet" href="{{ URL::asset('plugins/chartist/css/chartist.min.css') }}">
|
|
@endsection
|
|
|
|
@section('breadcrumb')
|
|
<div class="col-sm-6 text-left" >
|
|
<h4 class="page-title">Dashboard</h4>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Welcome to Attendance Management System</li>
|
|
</ol>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card mini-stat bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<div class="float-left mini-stat-img mr-4">
|
|
<span class="ti-id-badge" style="font-size: 20px"></span>
|
|
</div>
|
|
<h5 class="font-16 text-uppercase mt-0 text-white-50">Total <br> Employees</h5>
|
|
<h4 class="font-500">{{$data[0]}} </h4>
|
|
<span class="ti-user" style="font-size: 71px"></span>
|
|
|
|
</div>
|
|
<div class="pt-2">
|
|
<div class="float-right">
|
|
<a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5"></i></a>
|
|
</div>
|
|
<p class="text-white-50 mb-0">More info</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card mini-stat bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<div class="float-left mini-stat-img mr-4">
|
|
<i class="ti-alarm-clock" style="font-size: 20px"></i>
|
|
</div>
|
|
<h6 class="font-16 text-uppercase mt-0 text-white-50" >On Time <br> Percentage</h6>
|
|
<h4 class="font-500">{{$data[3]}} %<i class="text-danger ml-2"></i></h4>
|
|
<span class="peity-donut" data-peity='{ "fill": ["#02a499", "#f2f2f2"], "innerRadius": 28, "radius": 32 }' data-width="72" data-height="72">{{$data[3]}}/{{count($data)}}</span>
|
|
|
|
</div>
|
|
<div class="pt-2">
|
|
<div class="float-right">
|
|
<a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5"></i></a>
|
|
</div>
|
|
|
|
<p class="text-white-50 mb-0">More info</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card mini-stat bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<div class="float-left mini-stat-img mr-4">
|
|
<i class=" ti-check-box " style="font-size: 20px"></i>
|
|
</div>
|
|
<h5 class="font-16 text-uppercase mt-0 text-white-50">On Time <br> Today</h5>
|
|
<h4 class="font-500">{{$data[1]}} <i class=" text-success ml-2"></i></h4>
|
|
<span class="peity-donut" data-peity='{ "fill": ["#02a499", "#f2f2f2"], "innerRadius": 28, "radius": 32 }' data-width="72" data-height="72">{{$data[1]}}/{{count($data)}}</span>
|
|
|
|
</div>
|
|
<div class="pt-2">
|
|
<div class="float-right">
|
|
<a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5"></i></a>
|
|
</div>
|
|
|
|
<p class="text-white-50 mb-0">More info</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card mini-stat bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<div class="float-left mini-stat-img mr-4">
|
|
<i class="ti-alert" style="font-size: 20px"></i>
|
|
</div>
|
|
<h5 class="font-16 text-uppercase mt-0 text-white-50">Late <br> Today</h5>
|
|
<h4 class="font-500">{{$data[2]}}<i class=" text-success ml-2"></i></h4>
|
|
<span class="peity-donut" data-peity='{ "fill": ["#02a499", "#f2f2f2"], "innerRadius": 28, "radius": 32 }' data-width="72" data-height="72">{{$data[2]}}/{{count($data)}}</span>
|
|
|
|
</div>
|
|
<div class="pt-2">
|
|
<div class="float-right">
|
|
<a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5"></i></a>
|
|
</div>
|
|
|
|
<p class="text-white-50 mb-0">More info</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-9">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="mt-0 header-title mb-5">Monthly Report</h4>
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<div>
|
|
<div id="chart-with-area" class="ct-chart earning ct-golden-section"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="text-center">
|
|
<p class="text-muted mb-4">This month</p>
|
|
<h4>124</h4>
|
|
<p class="text-muted mb-5">It will be as simple as in fact it will be occidental.</p>
|
|
<span class="peity-donut" data-peity='{ "fill": ["#02a499", "#f2f2f2"], "innerRadius": 28, "radius": 32 }' data-width="72" data-height="72">{{$data[3]}}/{{count($data)}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="text-center">
|
|
<p class="text-muted mb-4">Last month</p>
|
|
<h4>200</h4>
|
|
<p class="text-muted mb-5">It will be as simple as in fact it will be occidental.</p>
|
|
<span class="peity-donut" data-peity='{ "fill": ["#02a499", "#f2f2f2"], "innerRadius": 28, "radius": 32 }' data-width="72" data-height="72">3/5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
</div>
|
|
<!-- end card -->
|
|
</div>
|
|
|
|
<div class="col-xl-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div>
|
|
<h4 class="mt-0 header-title mb-4">Sales Analytics</h4>
|
|
</div>
|
|
<div class="wid-peity mb-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<p class="text-muted">Online</p>
|
|
<h5 class="mb-4">1,542</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-4">
|
|
<span class="peity-line" data-width="100%" data-peity='{ "fill": ["rgba(2, 164, 153,0.3)"],"stroke": ["rgba(2, 164, 153,0.8)"]}' data-height="60">6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wid-peity mb-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<p class="text-muted">Offline</p>
|
|
<h5 class="mb-4">6,451</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-4">
|
|
<span class="peity-line" data-width="100%" data-peity='{ "fill": ["rgba(2, 164, 153,0.3)"],"stroke": ["rgba(2, 164, 153,0.8)"]}' data-height="60">6,2,8,4,-3,8,1,-3,6,-5,9,2,-8,1,4,8,9,8,2,1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<p class="text-muted">Marketing</p>
|
|
<h5>84,574</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-4">
|
|
<span class="peity-line" data-width="100%" data-peity='{ "fill": ["rgba(2, 164, 153,0.3)"],"stroke": ["rgba(2, 164, 153,0.8)"]}' data-height="60">6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
|
|
<!-- end row -->
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!--Chartist Chart-->
|
|
<script src="{{ URL::asset('plugins/chartist/js/chartist.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/chartist/js/chartist-plugin-tooltip.min.js') }}"></script>
|
|
<!-- peity JS -->
|
|
<script src="{{ URL::asset('plugins/peity-chart/jquery.peity.min.js') }}"></script>
|
|
<script src="{{ URL::asset('assets/pages/dashboard.js') }}"></script>
|
|
@endsection |