diff --git a/app/Classes/Modules/ControllersLogic/Dashboard/CbmReportLogic.php b/app/Classes/Modules/ControllersLogic/Dashboard/CbmReportLogic.php
new file mode 100644
index 0000000..2b890a5
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Dashboard/CbmReportLogic.php
@@ -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;
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/ControllersLogic/Dashboard/CustomerReportLogic.php b/app/Classes/Modules/ControllersLogic/Dashboard/CustomerReportLogic.php
new file mode 100644
index 0000000..ea9d3ca
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Dashboard/CustomerReportLogic.php
@@ -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];
+
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/ControllersLogic/Dashboard/OrdersReportLogic.php b/app/Classes/Modules/ControllersLogic/Dashboard/OrdersReportLogic.php
new file mode 100644
index 0000000..8f1c128
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Dashboard/OrdersReportLogic.php
@@ -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;
+    }
+}
+
diff --git a/app/Classes/Modules/ControllersLogic/Dashboard/OrdersStatusReportLogic.php b/app/Classes/Modules/ControllersLogic/Dashboard/OrdersStatusReportLogic.php
new file mode 100644
index 0000000..8a28a93
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Dashboard/OrdersStatusReportLogic.php
@@ -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']
+        ];
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Dashboard/CbmReportController.php b/app/Http/Controllers/Dashboard/CbmReportController.php
new file mode 100644
index 0000000..804a22a
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/CbmReportController.php
@@ -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();
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Dashboard/CustomerReportController.php b/app/Http/Controllers/Dashboard/CustomerReportController.php
new file mode 100644
index 0000000..62844a9
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/CustomerReportController.php
@@ -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();
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Dashboard/OrdersReportController.php b/app/Http/Controllers/Dashboard/OrdersReportController.php
new file mode 100644
index 0000000..0c06a30
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/OrdersReportController.php
@@ -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();
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Dashboard/OrdersStatusReportController.php b/app/Http/Controllers/Dashboard/OrdersStatusReportController.php
new file mode 100644
index 0000000..6b98efb
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/OrdersStatusReportController.php
@@ -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();
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index ad30f62..0a37f2f 100644
--- a/resources/assets/vue/app.js
+++ b/resources/assets/vue/app.js
@@ -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({
diff --git a/resources/assets/vue/components/dashboard/elements/CbmVsOrdersChartComponent.vue b/resources/assets/vue/components/dashboard/elements/CbmVsOrdersChartComponent.vue
new file mode 100644
index 0000000..7d327a9
--- /dev/null
+++ b/resources/assets/vue/components/dashboard/elements/CbmVsOrdersChartComponent.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>
\ No newline at end of file
diff --git a/resources/assets/vue/components/dashboard/elements/CustomerChartComponent.vue b/resources/assets/vue/components/dashboard/elements/CustomerChartComponent.vue
new file mode 100644
index 0000000..4963886
--- /dev/null
+++ b/resources/assets/vue/components/dashboard/elements/CustomerChartComponent.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/assets/vue/components/dashboard/elements/OrderStatusChartComponent.vue b/resources/assets/vue/components/dashboard/elements/OrderStatusChartComponent.vue
new file mode 100644
index 0000000..fc5c56f
--- /dev/null
+++ b/resources/assets/vue/components/dashboard/elements/OrderStatusChartComponent.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/views/pages/dashboard.blade.php b/resources/views/pages/dashboard.blade.php
index c4f7f33..69c8f3f 100644
--- a/resources/views/pages/dashboard.blade.php
+++ b/resources/views/pages/dashboard.blade.php
@@ -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
 
diff --git a/routes/api.php b/routes/api.php
index d14e8e3..a438486 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -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');
+    });