You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
12 KiB
267 lines
12 KiB
2 years ago
|
@extends('layouts.vendor.app')
|
||
|
|
|
||
|
|
@section('title',translate('messages.dashboard'))
|
||
|
|
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="content container-fluid">
|
||
|
|
@if(auth('vendor')->check())
|
||
|
|
<!-- Page Header -->
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||
|
|
<h1 class="page-header-title my-1">
|
||
|
|
<div class="card-header-icon d-inline-flex mr-2 img">
|
||
|
|
<img src="{{asset('/public/assets/admin/img/resturant-panel/page-title/dashboard.png')}}" alt="public">
|
||
|
|
</div>
|
||
|
|
<span>
|
||
|
|
{{translate('messages.dashboard')}}
|
||
|
|
</span>
|
||
|
|
</h1>
|
||
|
|
<span class="my-2 text--title d-block">
|
||
|
|
{{translate('messages.followup')}}
|
||
|
|
<i class="tio-restaurant fz-30px"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Page Header -->
|
||
|
|
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-header">
|
||
|
|
<h4 class="card-header-title">
|
||
|
|
<span class="card-header-icon">
|
||
|
|
<i class="tio-chart-bar-4"></i>
|
||
|
|
</span>
|
||
|
|
{{translate('messages.dashboard_order_statistics')}}
|
||
|
|
</h4>
|
||
|
|
<div>
|
||
|
|
<select class="custom-select my-1" name="statistics_type" onchange="order_stats_update(this.value)">
|
||
|
|
<option
|
||
|
|
value="overall" {{$params['statistics_type'] == 'overall'?'selected':''}}>
|
||
|
|
{{translate('messages.Overall Statistics')}}
|
||
|
|
</option>
|
||
|
|
<option
|
||
|
|
value="today" {{$params['statistics_type'] == 'today'?'selected':''}}>
|
||
|
|
{{__("messages.Today's Statistics")}}
|
||
|
|
</option>
|
||
|
|
<option
|
||
|
|
value="this_month" {{$params['statistics_type'] == 'this_month'?'selected':''}}>
|
||
|
|
{{__("messages.This Month's Statistics")}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row g-2" id="order_stats">
|
||
|
|
@include('vendor-views.partials._dashboard-order-stats',['data'=>$data])
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row gx-2 gx-lg-3">
|
||
|
|
<div class="col-lg-12 mb-3 mb-lg-12">
|
||
|
|
<!-- Card -->
|
||
|
|
<div class="card h-100">
|
||
|
|
<div class="card-header flex-wrap justify-content-evenly justify-content-lg-between border-0">
|
||
|
|
<h4 class="card-title my-2 my-md-0">
|
||
|
|
<i class="tio-chart-bar-4"></i>
|
||
|
|
{{translate('messages.yearly_statistics')}}
|
||
|
|
</h4>
|
||
|
|
<div class="d-flex flex-wrap my-2 my-md-0 justify-content-center align-items-center">
|
||
|
|
@php($amount=array_sum($earning))
|
||
|
|
<span class="h5 m-0 mr-3 fz--11 d-flex align-items-center mb-2 mb-md-0">
|
||
|
|
<span class="legend-indicator bg-7ECAFF"></span>
|
||
|
|
{{translate('messages.commission_given')}} : {{\App\CentralLogics\Helpers::format_currency(array_sum($commission))}}
|
||
|
|
</span>
|
||
|
|
<span class="h5 m-0 fz--11 d-flex align-items-center mb-2 mb-md-0">
|
||
|
|
<span class="legend-indicator bg-0661CB"></span>
|
||
|
|
{{translate('messages.total_earning')}} : {{\App\CentralLogics\Helpers::format_currency(array_sum($earning))}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Body -->
|
||
|
|
<div class="card-body">
|
||
|
|
|
||
|
|
<!-- Bar Chart -->
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div class="chart--extension">
|
||
|
|
{{ \App\CentralLogics\Helpers::currency_symbol() }}({{translate('messages.currency')}})
|
||
|
|
</div>
|
||
|
|
<div class="chartjs-custom w-75 flex-grow-1">
|
||
|
|
<canvas id="updatingData" class="h-20rem" data-hs-chartjs-options='{
|
||
|
|
"type": "bar",
|
||
|
|
"data": {
|
||
|
|
"labels": ["Jan","Feb","Mar","April","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
|
||
|
|
"datasets": [{
|
||
|
|
"data": [{{$earning[1]}},{{$earning[2]}},{{$earning[3]}},{{$earning[4]}},{{$earning[5]}},{{$earning[6]}},{{$earning[7]}},{{$earning[8]}},{{$earning[9]}},{{$earning[10]}},{{$earning[11]}},{{$earning[12]}}],
|
||
|
|
"backgroundColor": "#7ECAFF",
|
||
|
|
"hoverBackgroundColor": "#7ECAFF",
|
||
|
|
"borderColor": "#7ECAFF"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"data": [{{$commission[1]}},{{$commission[2]}},{{$commission[3]}},{{$commission[4]}},{{$commission[5]}},{{$commission[6]}},{{$commission[7]}},{{$commission[8]}},{{$commission[9]}},{{$commission[10]}},{{$commission[11]}},{{$commission[12]}}],
|
||
|
|
"backgroundColor": "#0661CB",
|
||
|
|
"borderColor": "#0661CB"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
"options": {
|
||
|
|
"scales": {
|
||
|
|
"yAxes": [{
|
||
|
|
"gridLines": {
|
||
|
|
"color": "#e7eaf3",
|
||
|
|
"drawBorder": false,
|
||
|
|
"zeroLineColor": "#e7eaf3"
|
||
|
|
},
|
||
|
|
"ticks": {
|
||
|
|
"beginAtZero": true,
|
||
|
|
"stepSize": {{ceil($amount/10000)*2000}},
|
||
|
|
"fontSize": 12,
|
||
|
|
"fontColor": "#97a4af",
|
||
|
|
"fontFamily": "Open Sans, sans-serif",
|
||
|
|
"padding": 10
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
"xAxes": [{
|
||
|
|
"gridLines": {
|
||
|
|
"display": false,
|
||
|
|
"drawBorder": false
|
||
|
|
},
|
||
|
|
"ticks": {
|
||
|
|
"fontSize": 12,
|
||
|
|
"fontColor": "#97a4af",
|
||
|
|
"fontFamily": "Open Sans, sans-serif",
|
||
|
|
"padding": 5
|
||
|
|
},
|
||
|
|
"categoryPercentage": 0.3,
|
||
|
|
"maxBarThickness": "10"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
"cornerRadius": 5,
|
||
|
|
"tooltips": {
|
||
|
|
"prefix": " ",
|
||
|
|
"hasIndicator": true,
|
||
|
|
"mode": "index",
|
||
|
|
"intersect": false
|
||
|
|
},
|
||
|
|
"hover": {
|
||
|
|
"mode": "nearest",
|
||
|
|
"intersect": true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}'></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Bar Chart -->
|
||
|
|
</div>
|
||
|
|
<!-- End Body -->
|
||
|
|
</div>
|
||
|
|
<!-- End Card -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-6 mt-3">
|
||
|
|
<!-- Card -->
|
||
|
|
<div class="card h-100" id="top-selling-foods-view">
|
||
|
|
@include('vendor-views.partials._top-selling-foods',['top_sell'=>$data['top_sell']])
|
||
|
|
</div>
|
||
|
|
<!-- End Card -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-6 mt-3">
|
||
|
|
<!-- Card -->
|
||
|
|
<div class="card h-100" id="top-rated-foods-view">
|
||
|
|
@include('vendor-views.partials._most-rated-foods',['most_rated_foods'=>$data['most_rated_foods']])
|
||
|
|
</div>
|
||
|
|
<!-- End Card -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End Row -->
|
||
|
|
@else
|
||
|
|
<!-- Page Header -->
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-sm mb-2 mb-sm-0">
|
||
|
|
<h1 class="page-header-title">{{translate('messages.welcome')}}, {{auth('vendor_employee')->user()->f_name}}.</h1>
|
||
|
|
<p class="page-header-text">{{translate('messages.employee_welcome_message')}}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End Page Header -->
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@push('script')
|
||
|
|
<script src="{{asset('public/assets/admin')}}/vendor/chart.js/dist/Chart.min.js"></script>
|
||
|
|
<script src="{{asset('public/assets/admin')}}/vendor/chart.js.extensions/chartjs-extensions.js"></script>
|
||
|
|
<script
|
||
|
|
src="{{asset('public/assets/admin')}}/vendor/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"></script>
|
||
|
|
@endpush
|
||
|
|
|
||
|
|
|
||
|
|
@push('script_2')
|
||
|
|
<script>
|
||
|
|
// INITIALIZATION OF CHARTJS
|
||
|
|
// =======================================================
|
||
|
|
Chart.plugins.unregister(ChartDataLabels);
|
||
|
|
|
||
|
|
$('.js-chart').each(function () {
|
||
|
|
$.HSCore.components.HSChartJS.init($(this));
|
||
|
|
});
|
||
|
|
|
||
|
|
var updatingChart = $.HSCore.components.HSChartJS.init($('#updatingData'));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function order_stats_update(type) {
|
||
|
|
$.ajaxSetup({
|
||
|
|
headers: {
|
||
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$.post({
|
||
|
|
url: '{{route('vendor.dashboard.order-stats')}}',
|
||
|
|
data: {
|
||
|
|
statistics_type: type
|
||
|
|
},
|
||
|
|
beforeSend: function () {
|
||
|
|
$('#loading').show()
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
insert_param('statistics_type',type);
|
||
|
|
$('#order_stats').html(data.view)
|
||
|
|
},
|
||
|
|
complete: function () {
|
||
|
|
$('#loading').hide()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function insert_param(key, value) {
|
||
|
|
key = encodeURIComponent(key);
|
||
|
|
value = encodeURIComponent(value);
|
||
|
|
// kvp looks like ['key1=value1', 'key2=value2', ...]
|
||
|
|
var kvp = document.location.search.substr(1).split('&');
|
||
|
|
let i = 0;
|
||
|
|
|
||
|
|
for (; i < kvp.length; i++) {
|
||
|
|
if (kvp[i].startsWith(key + '=')) {
|
||
|
|
let pair = kvp[i].split('=');
|
||
|
|
pair[1] = value;
|
||
|
|
kvp[i] = pair.join('=');
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (i >= kvp.length) {
|
||
|
|
kvp[kvp.length] = [key, value].join('=');
|
||
|
|
}
|
||
|
|
// can return this or...
|
||
|
|
let params = kvp.join('&');
|
||
|
|
// change url page with new params
|
||
|
|
window.history.pushState('page2', 'Title', '{{url()->current()}}?' + params);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
@endpush
|