Dashboard report

This commit is contained in:
Kawlll Maxso
2019-03-19 18:45:39 +08:00
parent 0e117b2440
commit ac1353c5a1
14 changed files with 546 additions and 32 deletions
@@ -0,0 +1,41 @@
<?php
namespace App\Classes\Modules\ControllersLogic\Dashboard;
use App\Models\Package;
use Carbon\Carbon;
class CbmReportLogic
{
/* @var Package */
private $repository;
/**
* CbmReportLogic constructor.
* @param Package $repository
*/
public function __construct(Package $repository)
{
$this->repository = $repository;
}
public function execute() {
$cbm = $this->repository->selectRaw('created_at, ((((width/100) * (length/100) * (height/100))) * quantity) as cbm')->whereYear('created_at', '=', Carbon::now()->year)->whereMonth('created_at', '=', Carbon::now()->month)->orderBy('created_at')->get();
$cbmGroup = $cbm->groupBy(function ($item) {
return Carbon::parse($item->created_at)->format('j');
});
$cbmMap = $cbmGroup->map(function ($item){
return collect($item)->sum("cbm");
})->toArray();
$report = [];
for($x = 1; $x <= Carbon::now()->daysInMonth; $x++){
$report[] = isset($cbmMap[$x]) ? $cbmMap[$x] : 0;
}
return $report;
}
}
@@ -0,0 +1,39 @@
<?php
namespace App\Classes\Modules\ControllersLogic\Dashboard;
use App\Models\Company;
use App\Models\Order;
use Carbon\Carbon;
class CustomerReportLogic
{
/* @var Order */
private $orderRepository;
/* @var Company */
private $companiesRepository;
/**
* ActiveCustomerReportLogic constructor.
* @param Order $orderRepository
* @param Company $companiesRepository
*/
public function __construct(Order $orderRepository, Company $companiesRepository)
{
$this->orderRepository = $orderRepository;
$this->companiesRepository = $companiesRepository;
}
public function execute() {
$active = $this->orderRepository->whereYear('created_at', '=', Carbon::now()->year)->whereMonth('created_at', '=', Carbon::now()->month)->orderBy('company_id')->get()->groupBy('company_id');
$company = $this->companiesRepository->count();
if ($company > $active->count()) $company -= $active->count();
else $company = $active->count() - $company;
return [$active->count(), $company];
}
}
@@ -0,0 +1,43 @@
<?php
namespace App\Classes\Modules\ControllersLogic\Dashboard;
use App\Models\Order;
use Carbon\Carbon;
class OrdersReportLogic
{
/** @var Order */
private $repository;
/**
* OrdersReportLogic constructor.
* @param Order $repository
*/
public function __construct(Order $repository)
{
$this->repository = $repository;
}
public function execute() {
$Orders= $this->repository->whereYear('created_at', '=', Carbon::now()->year)
->whereMonth('created_at', '=', Carbon::now()->month)->orderBy('created_at')->get();
$group = $Orders->groupBy(function($item) {
return Carbon::parse($item->created_at)->format('j');
});
$groupCount = $group->map(function ($item) {
return collect($item)->count();
})->toArray();
$report = [];
for($x = 1; $x <= Carbon::now()->daysInMonth; $x++) {
$report[] = isset($groupCount[$x]) ? $groupCount[$x] : 0;
}
return $report;
}
}
@@ -0,0 +1,39 @@
<?php
namespace App\Classes\Modules\ControllersLogic\Dashboard;
use App\Models\Order;
class OrdersStatusReportLogic
{
/* @var Order */
private $repository;
/**
* OrderTypeReportLogic constructor.
* @param Order $repository
*/
public function __construct(Order $repository)
{
$this->repository = $repository;
}
public function execute() {
$status = $this->repository->whereNotNull('current_step')->get()->groupBy('current_step');
$completed = $this->repository->whereNull('current_step')->where('complete', '=' , 1)->get();
$statusMap = $status->map(function ($item) {
return collect($item)->count();
})->toArray();
$completedArray = ["COMPLETED" => $completed->count()];
$combine = $statusMap + $completedArray;
return [
$combine['PS_PROCESSING'],
$combine['MS_WAREHOUSE_RECEIVING'],
$combine['PS_SHIPPING'],
$completedArray['COMPLETED']
];
}
}
@@ -0,0 +1,13 @@
<?php
namespace App\Http\Controllers\Dashboard;
use App\Classes\Modules\ControllersLogic\Dashboard\CbmReportLogic;
class CbmReportController
{
public function index(CbmReportLogic $logic) {
return $logic->execute();
}
}
@@ -0,0 +1,18 @@
<?php
/**
* Created by PhpStorm.
* User: ayen
* Date: 19/03/2019
* Time: 10:17 AM
*/
namespace App\Http\Controllers\Dashboard;
use App\Classes\Modules\ControllersLogic\Dashboard\CustomerReportLogic;
class CustomerReportController
{
public function index(CustomerReportLogic $logic) {
return $logic->execute();
}
}
@@ -0,0 +1,13 @@
<?php
namespace App\Http\Controllers\Dashboard;
use App\Classes\Modules\ControllersLogic\Dashboard\OrdersReportLogic;
class OrdersReportController
{
public function index(OrdersReportLogic $logic) {
return $logic->execute();
}
}
@@ -0,0 +1,12 @@
<?php
namespace App\Http\Controllers\Dashboard;
use App\Classes\Modules\ControllersLogic\Dashboard\OrdersStatusReportLogic;
class OrdersStatusReportController
{
public function index(OrdersStatusReportLogic $logic) {
return $logic->execute();
}
}
+5
View File
@@ -88,6 +88,11 @@ Vue.component('notification-component', require('./components/common/Notificatio
Vue.component('company-error-notification-component', require('./components/company/notifications/CompanyErrorComponent.vue'));
Vue.component('cbm-order-chart-component', require('./components/dashboard/elements/CbmVsOrdersChartComponent.vue'));
Vue.component('customer-chart-component', require('./components/dashboard/elements/CustomerChartComponent.vue'));
Vue.component('order-status-chart-component', require('./components/dashboard/elements/OrderStatusChartComponent.vue'));
window.Event = new Vue();
const header = new Vue({
@@ -0,0 +1,117 @@
<template>
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row b-b b-grey">
<loading-component v-show="isLoading"></loading-component>
<div class="col">
<small class="fs-11 bold">CBM VS ORDERS</small>
</div>
</div>
<div class="row">
<canvas :id="this.id"></canvas>
</div>
</div>
</div>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
props: {
'id': {
type: String,
required: true
}
},
data() {
return {
isLoading: false,
months: [],
cbm: [],
orders: []
}
},
mounted() {
{
this.fetchData();
}
},
methods: {
fetchData() {
this.isLoading = true;
fetch(route('api.report.order')).then(response => response.json())
.then(response => {
this.orders = response;
//turn off loading animation
this.isLoading = false;
})
.catch(error => console.log(error));
fetch(route('api.report.cbm')).then(response => response.json())
.then(response => {
this.cbm = response;
//turn off loading animation
// this.isLoading = false;
this.createChart(this.id, this.chartConfig());
})
.catch(error => console.log(error));
},
chartConfig() {
const date = new Date();
//replace with api call
for (let i = 1; i <= new Date(date.getFullYear(), date.getMonth()+1, 0).getDate(); i++) {
this.months.push(i);
}
let chartData = {
type: 'line',
data: {
labels: this.months,
datasets: [{
label: "CBM",
data: this.cbm,
borderColor: '#ea336b',
fill: false
}, {
label: 'Orders',
data: this.orders,
borderColor: '#69b6f3',
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
}
};
return chartData;
},
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
}
}
</script>
@@ -0,0 +1,80 @@
<template>
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<div class="row">
<loading-component v-show="isLoading"></loading-component>
<div class="col">
<small class="fs-11 bold">CUSTOMERS</small>
</div>
</div>
<div class="row">
<canvas :id="this.id"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
props: {
'id': {
type: String,
required: true
}
},
data() {
return {
isLoading: false,
customer: []
}
},
mounted() {
{
this.fetchData();
}
},
methods: {
fetchData() {
this.isLoading = true;
fetch(route('api.report.customer')).then(response => response.json())
.then(response => {
this.customer = response;
//turn off loading animation
this.isLoading = false;
this.createChart(this.id, this.chartConfig());
})
.catch(error => console.log(error));
},
chartConfig() {
let chartData = {
type: 'pie',
data: {
labels: ["ACTIVE", "NON-ACTIVE"],
datasets: [{
label: "TOTAL CUSTOMER ON THE MONTH",
data: this.customer,
backgroundColor: ['#ea336b'],
fill: 'transparent'
}]
}
};
return chartData;
},
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
}
}
</script>
@@ -0,0 +1,82 @@
<template>
<div class="row">
<div class="card card-transparent">
<div class="card-body no-padding b-b">
<loading-component v-show="isLoading"></loading-component>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<canvas :id="this.id"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
props: {
'id': {
type: String,
required: true
}
},
data() {
return {
isLoading: false,
ordersStatus: []
}
},
mounted() {
{
this.fetchData();
}
},
methods: {
fetchData() {
this.isLoading = true;
fetch(route('api.report.order.status')).then(response => response.json())
.then(response => {
this.ordersStatus = response;
//turn off loading animation
this.isLoading = false;
this.createChart(this.id, this.chartConfig());
})
.catch(error => console.log(error));
},
chartConfig() {
let chartData = {
type: 'doughnut',
data: {
labels: ["Processing", "Receiving", "Shipping", "Completed"],
datasets: [{
data: this.ordersStatus,
backgroundColor: ['#f9dc6b', '#69b6f3', '#ea336b','#47b5ab'],
fill: 'transparent'
}]
},
options: {
cutoutPercentage: 60,
rotation: Math.PI,
circumference: Math.PI
}
};
return chartData;
},
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
}
}
</script>
+38 -31
View File
@@ -1,40 +1,47 @@
@extends('layouts.base_portal')
@section('inner_content')
<div class="row p-t-50 p-b-50">
<div class="col">
<div class="row">
<div class="col">
<h4 class="all-caps">Welcome {{auth()->user()->first_name}}</h4>
</div>
</div>
<div class="row m-t-20">
<div class="col-5">
<div class="row bg-white">
<div class="col">
<div class="row b-b b-grey">
<div class="col p-t-5 p-b-5">
<small class="fs-11 bold">Getting Started</small>
</div>
</div>
<div class="row">
<div class="col">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="row">
<div class="col">
Manage Importers
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row p-t-50 p-b-50">
<div class="col">
<div class="row">
<div class="col">
<h4 class="all-caps">Welcome {{auth()->user()->first_name}}</h4>
</div>
</div>
<div class="row">
<cbm-order-chart-component id="cbm"></cbm-order-chart-component>
<div class="col-auto">
<order-status-chart-component id="order"></order-status-chart-component>
<customer-chart-component id="customer"></customer-chart-component>
</div>
</div>
{{--<div class="row m-t-20">--}}
{{--<div class="col-5">--}}
{{--<div class="row bg-white">--}}
{{--<div class="col">--}}
{{--<div class="row b-b b-grey">--}}
{{--<div class="col p-t-5 p-b-5">--}}
{{--<small class="fs-11 bold">Getting Started</small>--}}
{{--</div>--}}
{{--</div>--}}
{{--<div class="row">--}}
{{--<div class="col">--}}
{{--<div class="row align-items-center justify-content-center">--}}
{{--<div class="col">--}}
{{--<div class="row">--}}
{{--<div class="col">--}}
{{--Manage Importers--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
</div>
</div>
</div>
@endsection
+6 -1
View File
@@ -133,7 +133,12 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
});
Route::group(['prefix' => 'report', 'as' => 'report.', 'namespace' => 'Dashboard'], function () {
Route::get('/order', 'OrdersReportController@index')->name('order');
Route::get('/cbm', 'CbmReportController@index')->name('cbm');
Route::get('/customer', 'ActiveCustomerReportController@index')->name('customer');
Route::get('/order/status', 'OrdersStatusReportController@index')->name('order.status');
});