280 lines
11 KiB
PHP
Executable File
280 lines
11 KiB
PHP
Executable File
@extends('m3::liberty-theme.layout.main')
|
|
@section('title')
|
|
Solon Sentinel Portal
|
|
@endsection
|
|
@section('content')
|
|
<div class="container-fluid px-4">
|
|
<h1 class="mt-4">Executive Dashboard</h1>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header" style="line-height: 34px;">
|
|
<i class="fas fa-table me-1"></i>
|
|
Filters
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
|
|
<form>
|
|
@csrf
|
|
|
|
<div class="row mb-3">
|
|
<label for="inputEmail" class="col-sm-2 col-form-label">Date Range</label>
|
|
<div class="col-sm-10">
|
|
<label for="text" class="visually-hidden">dates</label>
|
|
<input value="{{ $starting }} - {{ $ending }}" id="text" name="dates" type="text" aria-describedby="textHelpBlock" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="inputWhs" class="col-sm-2 col-form-label">Warehouse</label>
|
|
<div class="col-sm-10">
|
|
<label for="exec_whs" class="visually-hidden">Warehouse</label>
|
|
<select id="exec_whs" name="whs" class="form-control">
|
|
<option value="*ALL">*ALL</option>
|
|
@foreach($whs_array as $key)
|
|
<option value={{$key}}
|
|
@if($whs==$key) selected @endif
|
|
>{{$key}}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-xs-offset-2 col-xs-10">
|
|
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
@foreach($data as $key=>$value)
|
|
<div class="col-xl-6">
|
|
<div class="card mb-12">
|
|
<div class="card-header">
|
|
<i class="fas fa-chart-bar me-1"></i>
|
|
{{($key=="IC")?'INTERCO':'EXTERNAL'}}
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<figure class="highcharts-figure">
|
|
<div id="container{{($key=='IC')?'1':'2'}}"></div>
|
|
</figure>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
<div class="row" style="margin-top:20px;">
|
|
@foreach($data as $key=>$value)
|
|
<div class="col-sm-6">
|
|
<div class="card text-white bg-info mb-3" id="div2">
|
|
<div class="card-header"><h5 class="card-title">{{($key=="IC")?'INTERCO':'EXTERNAL'}} <span class="text-end">$ {{ number_format($data[$key]['total'], 0, '.', ',') }}</span></h5></div>
|
|
<div class="card-body">
|
|
<b>Held</b>: $ {{ number_format($data[$key]['HLD'], 0, '.', ',') }}<br>
|
|
┗ <b>Financial Hold</b>: $ {{ number_format($data[$key]['FinHld'], 0, '.', ',') }} ($ {{ number_format($data[$key]['FinFutHld'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
|
┃ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['FHResPick'], 0, '.', ',') }}<br>
|
|
┃ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['FHResNoPick'], 0, '.', ',') }}<br>
|
|
┃ ┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['FHNres'], 0, '.', ',') }}<br>
|
|
┗ <b>Customer Hold</b>: $ {{ number_format($data[$key]['CusHld'], 0, '.', ',') }} ($ {{ number_format($data[$key]['CusFutHld'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
|
┃ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['CHResPick'], 0, '.', ',') }}<br>
|
|
┃ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['CHResNoPick'], 0, '.', ',') }}<br>
|
|
┃ ┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['CHNres'], 0, '.', ',') }}<br>
|
|
<b>Avail</b>: $ {{ number_format($data[$key]['Avail'], 0, '.', ',') }} ($ {{ number_format($data[$key]['futNH'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
|
┗ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['AvResPick'], 0, '.', ',') }}<br>
|
|
┗ ┗ <b>Reserved No Pick Fill Code 1</b>: $ {{ number_format($data[$key]['AvResNoPickFillCode1'], 0, '.', ',') }}<br>
|
|
┗ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['AvResNoPick'], 0, '.', ',') }}<br>
|
|
┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['AvUNres'], 0, '.', ',') }}<br>
|
|
<b>No Early</b>: $ {{ number_format($data[$key]['NoE'], 0, '.', ',') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
|
|
var s1 = $('#div1').height();
|
|
var s2 = $('#div2').height();
|
|
if (s1 > s2){
|
|
$('#div2').css('height', s1 + "px");
|
|
}else{
|
|
$('#div1').css('height', s2 + "px");
|
|
}
|
|
|
|
@foreach ($data as $key=>$value)
|
|
var data{{$key}} = [
|
|
{id: '0.0',parent: '', name: 'Total', value: '{{ $data[$key]['total'] }}'},
|
|
{ id: '1.1', parent: '0.0', name: 'Held', value: '{{ $data[$key]['HLD'] }}'},
|
|
{ id: '1.1.1', parent: '1.1', name: 'Financial Hold', value: '{{ $data[$key]['FinHld'] }}'},
|
|
{ id: '1.1.1.1', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResPick'] }}'},
|
|
{ id: '1.1.1.2', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResNoPick'] }}'},
|
|
{ id: '1.1.1.3', parent: '1.1.1', name: 'Not reserved', value: '{{ $data[$key]['FHNres'] }}'},
|
|
{ id: '1.1.2', parent: '1.1', name: 'Customer Hold', value: '{{ $data[$key]['CusHld'] }}'},
|
|
{ id: '1.1.2.1', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResPick'] }}'},
|
|
{ id: '1.1.2.2', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResNoPick'] }}'},
|
|
{ id: '1.1.2.3', parent: '1.1.2', name: 'Not reserved', value: '{{ $data[$key]['CHNres'] }}'},
|
|
{ id: '1.2', parent: '0.0', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
|
|
{ id: '1.2.1', parent: '1.2', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
|
|
{ id: '1.2.1.1', parent: '1.2.1', name: 'Reserved On Pick', value: '{{ $data[$key]['AvResPick'] }}'},
|
|
{ id: '1.2.1.2', parent: '1.2.1', name: 'Reserved No Pick', value: '{{ $data[$key]['AvResNoPick'] }}'},
|
|
{ id: '1.2.1.3', parent: '1.2.1', name: 'Reserved No Pick Fill Code 1', value: '{{ $data[$key]['AvResNoPickFillCode1'] }}'},
|
|
{ id: '1.2.1.4', parent: '1.2.1', name: 'Not reserved', value: '{{ $data[$key]['AvUNres'] }}'},
|
|
{ id: '1.3', parent: '0.0', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
|
|
{ id: '1.3.1', parent: '1.3', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
|
|
{ id: '1.3.1.1', parent: '1.3.1', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'}
|
|
];
|
|
@endforeach
|
|
|
|
Highcharts.chart('container1', {
|
|
chart: { height: '100%'},
|
|
colors: ['transparent'].concat(Highcharts.getOptions().colors),
|
|
title: { text: 'Interco Chart'},
|
|
|
|
series: [{
|
|
type: 'sunburst',
|
|
data: dataIC,
|
|
|
|
allowDrillToNode: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
format: '{point.name}',
|
|
filter: {
|
|
property: 'innerArcLength',
|
|
operator: '>',
|
|
value: 16
|
|
},
|
|
rotationMode: 'circular'
|
|
},
|
|
levels: [{
|
|
level: 1,
|
|
levelIsConstant: false,
|
|
dataLabels: {
|
|
filter: {
|
|
property: 'outerArcLength',
|
|
operator: '>',
|
|
value: 64
|
|
}
|
|
}
|
|
}, {
|
|
level: 2,
|
|
colorByPoint: true
|
|
},
|
|
{
|
|
level: 3,
|
|
colorVariation: {
|
|
key: 'brightness',
|
|
to: -0.5
|
|
}
|
|
}, {
|
|
level: 4,
|
|
colorVariation: {
|
|
key: 'brightness',
|
|
to: 0.5
|
|
}
|
|
}]
|
|
|
|
}],
|
|
|
|
tooltip: {
|
|
headerFormat: '',
|
|
pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
|
|
}
|
|
|
|
});
|
|
|
|
Highcharts.chart('container2', {
|
|
chart: { height: '100%' },
|
|
colors: ['transparent'].concat(Highcharts.getOptions().colors),
|
|
title: { text: 'External Chart' },
|
|
|
|
series: [{
|
|
type: 'sunburst',
|
|
data: dataEX,
|
|
|
|
allowDrillToNode: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
format: '{point.name}',
|
|
filter: {
|
|
property: 'innerArcLength',
|
|
operator: '>',
|
|
value: 16
|
|
},
|
|
rotationMode: 'circular'
|
|
},
|
|
levels: [{
|
|
level: 1,
|
|
levelIsConstant: false,
|
|
dataLabels: {
|
|
filter: {
|
|
property: 'outerArcLength',
|
|
operator: '>',
|
|
value: 64
|
|
}
|
|
}
|
|
}, {
|
|
level: 2,
|
|
colorByPoint: true
|
|
},
|
|
{
|
|
level: 3,
|
|
colorVariation: {
|
|
key: 'brightness',
|
|
to: -0.5
|
|
}
|
|
}, {
|
|
level: 4,
|
|
colorVariation: {
|
|
key: 'brightness',
|
|
to: 0.5
|
|
}
|
|
}]
|
|
|
|
}],
|
|
|
|
tooltip: {
|
|
headerFormat: '',
|
|
pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
|
|
// Date range init
|
|
$('input[name="dates"]').daterangepicker({
|
|
locale: {
|
|
format: 'YYYY-MM-DD',
|
|
},
|
|
startDate: '{{ $starting }}',
|
|
endDate: '{{ $ending }}',
|
|
alwaysShowCalendars: true,
|
|
ranges: {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'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')],
|
|
'This Year': [moment().startOf('year'), moment()]
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
@endsection
|