mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
create sales report range frontend
This commit is contained in:
omair saleh
@@ -17,9 +17,8 @@ use Illuminate\Http\Request;
|
|||||||
class MonthlyReportController
|
class MonthlyReportController
|
||||||
{
|
{
|
||||||
public function salesReport(Request $request): JsonResponse {
|
public function salesReport(Request $request): JsonResponse {
|
||||||
|
$from = $request->route('from') ? Carbon::parse($request->route('from')) : Carbon::now()->startOfMonth();
|
||||||
$from = $request->input('from') ? Carbon::parse($request->input('from')) : Carbon::now()->startOfMonth();
|
$to = $request->route('to') ? Carbon::parse($request->route('to')) : Carbon::now()->endOfMonth();
|
||||||
$to = $request->input('to') ? Carbon::parse($request->input('to')) : Carbon::now()->endOfMonth();
|
|
||||||
|
|
||||||
$containers = Container::whereBetween('loading_date', [$from, $to])->orderBy('loading_date')->get();
|
$containers = Container::whereBetween('loading_date', [$from, $to])->orderBy('loading_date')->get();
|
||||||
|
|
||||||
|
|||||||
@@ -30,7 +30,6 @@
|
|||||||
"v-money": "^0.8.1",
|
"v-money": "^0.8.1",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-avatar": "^2.1.8",
|
"vue-avatar": "^2.1.8",
|
||||||
"vue-bootstrap-datetimepicker": "^5.0.1",
|
|
||||||
"vue-debounce": "^2.6.0",
|
"vue-debounce": "^2.6.0",
|
||||||
"vue-template-compiler": "^2.6.10",
|
"vue-template-compiler": "^2.6.10",
|
||||||
"vue-the-mask": "^0.11.1",
|
"vue-the-mask": "^0.11.1",
|
||||||
|
|||||||
+149
-116
@@ -2,154 +2,181 @@
|
|||||||
<div class="row" >
|
<div class="row" >
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<loading-component v-if="isLoading"></loading-component>
|
<loading-component v-if="isLoading"></loading-component>
|
||||||
<div class="row" v-if="report">
|
<div class="row" v-if="!isLoading">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
<div class="row m-b-15">
|
||||||
<div class="container-xs-height full-height">
|
<div class="col-5 p-r-0">
|
||||||
<div class="row-xs-height">
|
<div class="row">
|
||||||
<div class="col-xs-height col-top">
|
<div class="col p-r-0">
|
||||||
<div class="card-header top-left top-right">
|
<div class="form-group no-margin form-group-default b-rad-none">
|
||||||
<div class="card-title">
|
<label class="text-primary">Start Date</label>
|
||||||
<span class="font-montserrat fs-11 all-caps">Total CBM</span>
|
<date-picker-component v-model="from"></date-picker-component>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col p-l-0">
|
||||||
<div class="row-xs-height">
|
<div class="form-group no-margin form-group-default b-rad-none">
|
||||||
<div class="col-xs-height col-top">
|
<label class="text-primary">End Date</label>
|
||||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
<date-picker-component v-model="to"></date-picker-component>
|
||||||
<h3 class="no-margin p-b-5">{{(Math.ceil(report.total_cbm * 1000) / 1000).toFixed(3)}} <small class="fs-12">+{{(report.daily_cbm).toFixed(0)}} CBM/Day</small></h3>
|
|
||||||
<span class="small hint-text pull-left">{{((report.total_cbm / 800) * 100).toFixed(2)}}%</span>
|
|
||||||
<span class="pull-right small text-primary">Goal: 800 CBM </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-xs-height">
|
|
||||||
<div class="col-xs-height col-bottom">
|
|
||||||
<div class="progress progress-small m-b-0">
|
|
||||||
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.total_cbm / 800) * 100).toFixed(2)+'%'}"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col p-l-0">
|
||||||
|
<div class="btn btn-primary b-rad-none">
|
||||||
|
<i class="fa fa-refresh lh-40" @click="fetchReport()"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row" v-if="report">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||||
<div class="container-xs-height full-height">
|
<div class="container-xs-height full-height">
|
||||||
<div class="row-xs-height">
|
<div class="row-xs-height">
|
||||||
<div class="col-xs-height col-top">
|
<div class="col-xs-height col-top">
|
||||||
<div class="card-header top-left top-right">
|
<div class="card-header top-left top-right">
|
||||||
<div class="card-title">
|
<div class="card-title">
|
||||||
<span class="font-montserrat fs-11 all-caps">Activated Orders</span>
|
<span class="font-montserrat fs-11 all-caps">Total CBM</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||||
<div class="col-xs-height col-top">
|
<h3 class="no-margin p-b-5">{{(Math.ceil(report.total_cbm * 1000) / 1000).toFixed(3)}} <small class="fs-12">+{{(report.daily_cbm).toFixed(0)}} CBM/Day</small></h3>
|
||||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
<span class="small hint-text pull-left">{{((report.total_cbm / 800) * 100).toFixed(2)}}%</span>
|
||||||
<h3 class="no-margin p-b-5">{{report.activated_orders}}</h3>
|
<span class="pull-right small text-primary">Goal: 800 CBM </span>
|
||||||
<span class="small hint-text pull-left">{{((report.activated_orders / report.total_orders) * 100).toFixed(2)}}%</span>
|
</div>
|
||||||
<span class="pull-right small text-primary">Created Orders: {{report.total_orders}}</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-bottom">
|
||||||
<div class="row-xs-height">
|
<div class="progress progress-small m-b-0">
|
||||||
<div class="col-xs-height col-bottom">
|
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.total_cbm / 800) * 100).toFixed(2)+'%'}"></div>
|
||||||
<div class="progress progress-small m-b-0">
|
</div>
|
||||||
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.activated_orders / report.total_orders) * 100).toFixed(2)+'%'}"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col">
|
||||||
</div>
|
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||||
<div class="col">
|
<div class="container-xs-height full-height">
|
||||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
<div class="row-xs-height">
|
||||||
<div class="container-xs-height full-height">
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="card-header top-left top-right">
|
||||||
<div class="col-xs-height col-top">
|
<div class="card-title">
|
||||||
<div class="card-header top-left top-right">
|
<span class="font-montserrat fs-11 all-caps">Activated Orders</span>
|
||||||
<div class="card-title">
|
</div>
|
||||||
<span class="font-montserrat fs-11 all-caps">Active Customers</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||||
<div class="col-xs-height col-top">
|
<h3 class="no-margin p-b-5">{{report.activated_orders}}</h3>
|
||||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
<span class="small hint-text pull-left">{{((report.activated_orders / report.total_orders) * 100).toFixed(2)}}%</span>
|
||||||
<h3 class="no-margin p-b-5">{{report.active_customers}}</h3>
|
<span class="pull-right small text-primary">Created Orders: {{report.total_orders}}</span>
|
||||||
<span class="small hint-text pull-left">{{((report.active_customers / report.total_customers) * 100).toFixed(2)}}%</span>
|
</div>
|
||||||
<span class="pull-right small text-primary">Total Customers: {{report.total_customers}}</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-bottom">
|
||||||
<div class="row-xs-height">
|
<div class="progress progress-small m-b-0">
|
||||||
<div class="col-xs-height col-bottom">
|
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.activated_orders / report.total_orders) * 100).toFixed(2)+'%'}"></div>
|
||||||
<div class="progress progress-small m-b-0">
|
</div>
|
||||||
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.active_customers / report.total_customers) * 100).toFixed(2)+'%'}"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col">
|
||||||
</div>
|
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||||
<div class="col">
|
<div class="container-xs-height full-height">
|
||||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
<div class="row-xs-height">
|
||||||
<div class="container-xs-height full-height">
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="card-header top-left top-right">
|
||||||
<div class="col-xs-height col-top">
|
<div class="card-title">
|
||||||
<div class="card-header top-left top-right">
|
<span class="font-montserrat fs-11 all-caps">Active Customers</span>
|
||||||
<div class="card-title">
|
</div>
|
||||||
<span class="font-montserrat fs-11 all-caps">New Customers</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||||
<div class="col-xs-height col-top">
|
<h3 class="no-margin p-b-5">{{report.active_customers}}</h3>
|
||||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
<span class="small hint-text pull-left">{{((report.active_customers / report.total_customers) * 100).toFixed(2)}}%</span>
|
||||||
<h3 class="no-margin p-b-5">{{report.new_customers}}</h3>
|
<span class="pull-right small text-primary">Total Customers: {{report.total_customers}}</span>
|
||||||
<span class="small hint-text pull-left">{{((report.new_converted_customers / report.new_customers) * 100).toFixed(2)}}%</span>
|
</div>
|
||||||
<span class="pull-right small text-primary">Confirmed Order: {{report.new_converted_customers}}</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-bottom">
|
||||||
<div class="row-xs-height">
|
<div class="progress progress-small m-b-0">
|
||||||
<div class="col-xs-height col-bottom">
|
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.active_customers / report.total_customers) * 100).toFixed(2)+'%'}"></div>
|
||||||
<div class="progress progress-small m-b-0">
|
</div>
|
||||||
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.new_converted_customers / report.new_customers) * 100).toFixed(2)+'%'}"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col">
|
||||||
</div>
|
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||||
<div class="col hide">
|
<div class="container-xs-height full-height">
|
||||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
<div class="row-xs-height">
|
||||||
<div class="container-xs-height full-height">
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="card-header top-left top-right">
|
||||||
<div class="col-xs-height col-top">
|
<div class="card-title">
|
||||||
<div class="card-header top-left top-right">
|
<span class="font-montserrat fs-11 all-caps">New Customers</span>
|
||||||
<div class="card-title">
|
</div>
|
||||||
<span class="font-montserrat fs-11 all-caps">Containers</span>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-xs-height">
|
||||||
|
<div class="col-xs-height col-top">
|
||||||
|
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||||
|
<h3 class="no-margin p-b-5">{{report.new_customers}}</h3>
|
||||||
|
<span class="small hint-text pull-left">{{((report.new_converted_customers / report.new_customers) * 100).toFixed(2)}}%</span>
|
||||||
|
<span class="pull-right small text-primary">Confirmed Order: {{report.new_converted_customers}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-xs-height">
|
||||||
|
<div class="col-xs-height col-bottom">
|
||||||
|
<div class="progress progress-small m-b-0">
|
||||||
|
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.new_converted_customers / report.new_customers) * 100).toFixed(2)+'%'}"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row-xs-height">
|
</div>
|
||||||
<div class="col-xs-height col-top">
|
<div class="col hide">
|
||||||
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||||
<h3 class="no-margin p-b-5">{{report.containers}}</h3>
|
<div class="container-xs-height full-height">
|
||||||
|
<div class="row-xs-height">
|
||||||
|
<div class="col-xs-height col-top">
|
||||||
|
<div class="card-header top-left top-right">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="font-montserrat fs-11 all-caps">Containers</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row-xs-height">
|
||||||
</div>
|
<div class="col-xs-height col-top">
|
||||||
<div class="row-xs-height">
|
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
|
||||||
<div class="col-xs-height col-bottom">
|
<h3 class="no-margin p-b-5">{{report.containers}}</h3>
|
||||||
<div class="progress progress-small m-b-0">
|
</div>
|
||||||
<div class="progress-bar progress-bar-primary" style="width: 0"></div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-xs-height">
|
||||||
|
<div class="col-xs-height col-bottom">
|
||||||
|
<div class="progress progress-small m-b-0">
|
||||||
|
<div class="progress-bar progress-bar-primary" style="width: 0"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -169,9 +196,15 @@
|
|||||||
return {
|
return {
|
||||||
section: 'monthlyReportSection',
|
section: 'monthlyReportSection',
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
report: null
|
report: null,
|
||||||
|
from: '',
|
||||||
|
to: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
validations: {
|
||||||
|
from: {},
|
||||||
|
to: {},
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
pendingQueue () {
|
pendingQueue () {
|
||||||
return this.$store.getters.isInCompleteQueue(this.section);
|
return this.$store.getters.isInCompleteQueue(this.section);
|
||||||
@@ -190,7 +223,7 @@
|
|||||||
methods: {
|
methods: {
|
||||||
fetchReport(){
|
fetchReport(){
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
this.submit(route('api.report.sales'), 'get', this.section, false, false)
|
this.submit(route('api.report.sales', this.from, this.to), 'get', this.section, false, false)
|
||||||
},
|
},
|
||||||
successHandler(response){
|
successHandler(response){
|
||||||
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
||||||
|
|||||||
+1
-1
@@ -50,7 +50,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
|
|||||||
|
|
||||||
require __DIR__ . '/schedule.php';
|
require __DIR__ . '/schedule.php';
|
||||||
|
|
||||||
Route::get('/report/sales', 'Reports\MonthlyReportController@salesReport')->name('report.sales');
|
Route::get('/report/sales/{from?}/{to?}', 'Reports\MonthlyReportController@salesReport')->name('report.sales');
|
||||||
Route::get('/report/service', 'Reports\MonthlyReportController@serviceReport')->name('report.service');
|
Route::get('/report/service', 'Reports\MonthlyReportController@serviceReport')->name('report.service');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user