%PDF-
%PDF-
Mini Shell
Mini Shell
@extends('layouts.backend')
@section('title', $siteTitle)
@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
.filter-btn{
margin-top: 26px;
}
@media only screen and (max-width: 768px){
tr.row-column td{
width: 50% !important;
margin-right: 0 !important;
}
}
@media only screen and (max-width: 768px){
tr.row-column td{
width: 100% !important;
margin-right: 0 !important;
}
}
tr.row-column td{
width: 32%;
margin-right: 2%;
display: inline-block
}
tr.row-column td:nth-child(3),
tr.row-column td:nth-child(6),
tr.row-column td:nth-child(9){
margin-right: 0;
}
table td:first-child {
padding-left: 0;
}
table td:last-child {
padding-right: 0;
}
</style>
@endpush
@section('content')
<div class="row">
<div class="col-12">
<div class="ibox">
<div class="ibox-body py-2">
<div class="row align-items-center">
<div class="col-md-6 col-12 mb-2 mb-md-0">
<h5 class="mb-0">Welcome <strong>{{ Auth::user()->name }}</strong></h5>
</div>
@permission('app.dashboard.filter')
<div class="col-md-6 col-12">
<form action="{{ route('app.dashboard.filter') }}" method="GET">
<div class="d-flex align-items-center justify-content-end">
<div class="form-group mb-0">
<label for="">Date</label>
<input type="text" class="form-control" required id="date_range" placeholder="MM/DD/YY" autocomplete="off" autofocus>
<input type="hidden" name="start_date">
<input type="hidden" name="end_date">
</div>
<div class="filter-btn">
<button class="btn btn-primary rounded-0 ml-2" type="submit">Apply</button>
<button class="btn btn-success rounded-0 ml-2 printarea" type="button"><i class="fa fa-print"></i> Print</button>
</div>
</div>
</form>
</div>
@endpermission
</div>
</div>
</div>
</div>
</div>
<div class="print-area-content">
<style>
@media screen {
.no_screen {display: none;}
.no_print {display: block;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
@media print {
body,
html {
-webkit-print-color-adjust: exact !important;
font-family: sans-serif;
margin-bottom: 100px !important;
}
table{
width: 100%;
}
tr.row-column td{
width: 32%;
margin-right: 2% !important;
display: inline-block
}
tr.row-column td:nth-child(3),
tr.row-column td:nth-child(6),
tr.row-column td:nth-child(9){
margin-right: 0 !important;
}
table td:first-child {
padding-left: 0 !important;
}
table td:last-child {
padding-right: 0 !important;
}
}
@page {
/* size: auto; */
margin: 5mm 5mm;
}
</style>
@if (Auth::user()->role->slug == 'manager')
<table class="w-100">
<tr class="row-column">
<td>
<div class="print-column">
<div class="ibox bg-success color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $target ?? 0 }}</h2>
<div class="m-b-5">TOTAL REVENUE TARGETS</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-primary color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $revenueAchievment ?? 0 }}</h2>
<div class="m-b-5">REVENUE ACHIEVED</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-info color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $revenueDeficit ?? 0 }}</h2>
<div class="m-b-5">REVENUE DEFICIT</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-warning color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $sale_target ?? 0 }}</h2>
<div class="m-b-5">SALES TARGET</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-danger color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $saleAchieved ?? 0 }}</h2>
<div class="m-b-5">SALES ACHIEVED</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-success color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $saleDeficit ?? 0 }}</h2>
<div class="m-b-5">SALES DEFICIT</div>
<i class="fa fa-bar-chart widget-stat-icon"></i>
</div>
</div>
</div>
</td>
<td>
<div class="print-column">
<div class="ibox bg-dark color-white widget-stat">
<div class="ibox-body">
<h2 class="m-b-5 font-strong">{{ $agents ?? 0 }}</h2>
<div class="m-b-5">TOTAL AGENTS</div>
<i class="fa fa-users widget-stat-icon"></i>
</div>
</div>
</div>
</td>
</tr>
</table>
@endif
<table class="w-100">
<tr>
<td>
<div class="ibox">
<div class="ibox-head">
<h4 class="ibox-title mb-0">{{ date('F Y') }} - Monthly Report</h4>
</div>
<div class="ibox-body">
<div id="bar"></div>
</div>
</div>
</td>
</tr>
</table>
</div>
@endsection
@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.printarea.js') }}"></script>
<script>
/* user chart */
var optionsBar = {
chart: {
height: 310,
type: 'bar',
toolbar: {
show: false,
},
fontFamily: 'Nunito, sans-serif',
},
colors: ["#036fe7", '#f7a556'],
plotOptions: {
bar: {
dataLabels: {
enabled: false
},
columnWidth: '40%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
endingShape: 'rounded',
colors: ['transparent'],
},
responsive: [{
breakpoint: 576,
options: {
stroke: {
show: true,
width: 1,
endingShape: 'rounded',
colors: ['transparent'],
},
},
}],
series: [{name: 'Net Profit'}],
noData: {
text: '<img src="{{ asset("uploads/images/table-loading.svg") }}" />'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov','Dec'],
},
fill: {
opacity: 1
},
legend: {
show: false,
floating: true,
position: 'top',
horizontalAlign: 'left',
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
}
}
var userChartBar = new ApexCharts(
document.querySelector('#bar'), optionsBar
);
userChartBar.render();
// user chart bar request
$.ajax({
url: "{{ route('app.dashboard.chart-bar') }}",
type: 'POST',
data: {_token:_token},
dataType: 'json',
async: true,
cache: false,
success: function (data) {
userChartBar.updateSeries([{
name: 'Monthly Data',
data: data.monthly_data
},
{
name: 'Monthly Commitment',
data: data.monthly_commit
}]);
}
});
// datepicker
$('input#date_range').daterangepicker({
opens: 'right',
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
},
ranges: {
'Today' : [moment(), moment()],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
}
}, function(start, end, label) {
$('input[name="start_date"]').val(start.format('YYYY-MM-DD'));
$('input[name="end_date"]').val(end.format('YYYY-MM-DD'));
});
$('input#date_range').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
});
$('input#date_range').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
// print area
$(document).on('click','button.printarea',function(){
var mode = 'iframe'; //popup
var close = mode = 'popup';
var options = {
mode : mode,
popClose: close
}
$('.print-area-content').printArea(options);
});
</script>
@endpush
Zerion Mini Shell 1.0