mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
service report
This commit is contained in:
omair saleh
+1
@@ -161,6 +161,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import LoadingComponent from "../../general/elements/LoadingComponent";
|
||||
export default {
|
||||
components: {LoadingComponent},
|
||||
|
||||
+174
-128
@@ -4,8 +4,172 @@
|
||||
<loading-component v-if="isLoading"></loading-component>
|
||||
<div class="row" v-if="report">
|
||||
<div class="col">
|
||||
<div class="row m-l-0 m-r-0 m-b-25" style="height: 100px;">
|
||||
<div class="col" :style="{'max-width': progressPercentage(pendingPackingPackages)+'%'}">
|
||||
<div class="row h-75">
|
||||
<div class="col bg-success"></div>
|
||||
</div>
|
||||
<div class="row h-25 align-items-end b-r b-grey">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto">
|
||||
<small class="fs-10">{{progressPercentage(pendingPackingPackages)}}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" :style="{'max-width': progressPercentage(report.pending_shipment)+'%'}">
|
||||
<div class="row h-75">
|
||||
<div class="col bg-success-light"></div>
|
||||
</div>
|
||||
<div class="row h-25 align-items-end b-r b-grey">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto">
|
||||
<small class="fs-10">{{progressPercentage(report.pending_shipment)}}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" :style="{'max-width': progressPercentage(report.in_transit)+'%'}">
|
||||
<div class="row h-75">
|
||||
<div class="col bg-warning"></div>
|
||||
</div>
|
||||
<div class="row h-25 align-items-end b-r b-grey">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto">
|
||||
<small class="fs-10">{{progressPercentage(report.in_transit)}}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" :style="{'max-width': progressPercentage(report.pending_delivery)+'%'}">
|
||||
<div class="row h-75">
|
||||
<div class="col bg-danger"></div>
|
||||
</div>
|
||||
<div class="row h-25 align-items-end b-r b-grey">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto">
|
||||
<small class="fs-10">{{progressPercentage(report.pending_delivery)}}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card no-border bg-success text-white 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">Pending Packing List</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 text-white">{{report.received - (report.pending_shipment + report.in_transit + report.pending_delivery + report.delivered)}} Packages</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-success" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-success-light text-white 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">Pending Shipment</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 text-white">{{report.pending_shipment}} Packages</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-success" style="width: 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-warning 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">In Transit</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.in_transit}} Packages</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>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card no-border bg-danger text-white 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">Pending Delivery</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 text-white">{{report.pending_delivery}} Packages</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<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">
|
||||
@@ -34,133 +198,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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">Pending Packing List</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.received - (report.pending_shipment + report.in_transit + report.pending_delivery + report.delivered)}} Packages</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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">Pending Shipment</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.pending_shipment}} Packages</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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">In Transit</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.in_transit}} Packages</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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">Pending Delivery</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.pending_delivery}} Packages</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-4">
|
||||
<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">
|
||||
@@ -191,7 +229,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,6 +247,12 @@
|
||||
computed: {
|
||||
pendingQueue () {
|
||||
return this.$store.getters.isInCompleteQueue(this.section);
|
||||
},
|
||||
pendingPackingPackages(){
|
||||
return this.report.received - (this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery + this.report.delivered)
|
||||
},
|
||||
totalInProgress(){
|
||||
return this.pendingPackingPackages + this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -227,6 +270,9 @@
|
||||
this.isLoading = true;
|
||||
this.submit(route('api.report.service'), 'get', this.section, false, false)
|
||||
},
|
||||
progressPercentage(amount){
|
||||
return (((amount / this.totalInProgress) * 100)).toFixed(2);
|
||||
},
|
||||
successHandler(response){
|
||||
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
||||
this.isLoading = false;
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
<monthly-sales-report-section-component></monthly-sales-report-section-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-50">
|
||||
<div class="col">
|
||||
<service-report-section-component></service-report-section-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
|
||||
@@ -40,7 +45,6 @@
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col-3">
|
||||
<service-report-section-component></service-report-section-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user