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
|
||||
{
|
||||
public function salesReport(Request $request): JsonResponse {
|
||||
|
||||
$from = $request->input('from') ? Carbon::parse($request->input('from')) : Carbon::now()->startOfMonth();
|
||||
$to = $request->input('to') ? Carbon::parse($request->input('to')) : Carbon::now()->endOfMonth();
|
||||
$from = $request->route('from') ? Carbon::parse($request->route('from')) : Carbon::now()->startOfMonth();
|
||||
$to = $request->route('to') ? Carbon::parse($request->route('to')) : Carbon::now()->endOfMonth();
|
||||
|
||||
$containers = Container::whereBetween('loading_date', [$from, $to])->orderBy('loading_date')->get();
|
||||
|
||||
|
||||
@@ -30,7 +30,6 @@
|
||||
"v-money": "^0.8.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-avatar": "^2.1.8",
|
||||
"vue-bootstrap-datetimepicker": "^5.0.1",
|
||||
"vue-debounce": "^2.6.0",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
|
||||
+149
-116
@@ -2,154 +2,181 @@
|
||||
<div class="row" >
|
||||
<div class="col">
|
||||
<loading-component v-if="isLoading"></loading-component>
|
||||
<div class="row" v-if="report">
|
||||
<div class="row" v-if="!isLoading">
|
||||
<div class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Total CBM</span>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col-5 p-r-0">
|
||||
<div class="row">
|
||||
<div class="col p-r-0">
|
||||
<div class="form-group no-margin form-group-default b-rad-none">
|
||||
<label class="text-primary">Start Date</label>
|
||||
<date-picker-component v-model="from"></date-picker-component>
|
||||
</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">{{(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 class="col p-l-0">
|
||||
<div class="form-group no-margin form-group-default b-rad-none">
|
||||
<label class="text-primary">End Date</label>
|
||||
<date-picker-component v-model="to"></date-picker-component>
|
||||
</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 class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Activated Orders</span>
|
||||
<div class="row" v-if="report">
|
||||
<div class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Total CBM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.activated_orders}}</h3>
|
||||
<span class="small hint-text pull-left">{{((report.activated_orders / report.total_orders) * 100).toFixed(2)}}%</span>
|
||||
<span class="pull-right small text-primary">Created Orders: {{report.total_orders}}</span>
|
||||
<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">{{(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>
|
||||
</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.activated_orders / report.total_orders) * 100).toFixed(2)+'%'}"></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">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Active Customers</span>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Activated Orders</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.active_customers}}</h3>
|
||||
<span class="small hint-text pull-left">{{((report.active_customers / report.total_customers) * 100).toFixed(2)}}%</span>
|
||||
<span class="pull-right small text-primary">Total Customers: {{report.total_customers}}</span>
|
||||
<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.activated_orders}}</h3>
|
||||
<span class="small hint-text pull-left">{{((report.activated_orders / report.total_orders) * 100).toFixed(2)}}%</span>
|
||||
<span class="pull-right small text-primary">Created Orders: {{report.total_orders}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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.active_customers / report.total_customers) * 100).toFixed(2)+'%'}"></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.activated_orders / report.total_orders) * 100).toFixed(2)+'%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">New Customers</span>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">Active Customers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 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.active_customers}}</h3>
|
||||
<span class="small hint-text pull-left">{{((report.active_customers / report.total_customers) * 100).toFixed(2)}}%</span>
|
||||
<span class="pull-right small text-primary">Total Customers: {{report.total_customers}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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.active_customers / report.total_customers) * 100).toFixed(2)+'%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col hide">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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 class="col">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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">New Customers</span>
|
||||
</div>
|
||||
</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 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.containers}}</h3>
|
||||
</div>
|
||||
<div class="col hide">
|
||||
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
|
||||
<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 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 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.containers}}</h3>
|
||||
</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>
|
||||
@@ -169,9 +196,15 @@
|
||||
return {
|
||||
section: 'monthlyReportSection',
|
||||
isLoading: true,
|
||||
report: null
|
||||
report: null,
|
||||
from: '',
|
||||
to: '',
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
from: {},
|
||||
to: {},
|
||||
},
|
||||
computed: {
|
||||
pendingQueue () {
|
||||
return this.$store.getters.isInCompleteQueue(this.section);
|
||||
@@ -190,7 +223,7 @@
|
||||
methods: {
|
||||
fetchReport(){
|
||||
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){
|
||||
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';
|
||||
|
||||
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');
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user