diff --git a/app/Http/Controllers/Portal/Dashboard.php b/app/Http/Controllers/Portal/Dashboard.php
index afe3354df..a52668ba2 100644
--- a/app/Http/Controllers/Portal/Dashboard.php
+++ b/app/Http/Controllers/Portal/Dashboard.php
@@ -4,12 +4,13 @@ namespace App\Http\Controllers\Portal;
 
 use App\Models\Document\Document;
 use App\Traits\Charts;
+use App\Traits\DateTime;
 use App\Utilities\Chartjs;
 use Date;
 
 class Dashboard
 {
-    use Charts;
+    use Charts, DateTime;
 
     /**
      * Display a listing of the resource.
@@ -20,14 +21,25 @@ class Dashboard
     {
         $contact = user()->contact;
 
-        $invoices = Document::invoice()->accrued()->where('contact_id', $contact->id)->get();
+        $financial_start = $this->getFinancialStart()->format('Y-m-d');
 
-        $start = Date::parse(request('start', Date::today()->startOfYear()->format('Y-m-d')));
-        $end = Date::parse(request('end', Date::today()->endOfYear()->format('Y-m-d')));
+        // check and assign year start
+        if (($year_start = Date::today()->startOfYear()->format('Y-m-d')) !== $financial_start) {
+            $year_start = $financial_start;
+        }
+
+        $start = Date::parse(request('start_date', $year_start));
+        $end = Date::parse(request('end_date', Date::parse($year_start)->addYear(1)->subDays(1)->format('Y-m-d')));
+
+        //$invoices = Document::invoice()->accrued()->where('contact_id', $contact->id)->get();
+        $invoices = Document::invoice()->accrued()->whereBetween('due_at', [$start, $end])->where('contact_id', $contact->id)->get();
 
         $start_month = $start->month;
         $end_month = $end->month;
 
+        // look cashFlow widget
+        $end_month   = $end->diffInMonths($start);
+        $start_month = 0;
         // Monthly
         $labels = [];
 
@@ -89,7 +101,14 @@ class Dashboard
             ])
             ->fill(false);
 
-        return view('portal.dashboard.index', compact('contact', 'invoices', 'totals', 'progress', 'chart'));
+        $date_picker_shortcuts = $this->getDatePickerShortcuts();
+
+        if (!request()->has('start_date')) {
+            request()->merge(['start_date' => $date_picker_shortcuts[trans('reports.this_year')]['start']]);
+            request()->merge(['end_date' => $date_picker_shortcuts[trans('reports.this_year')]['end']]);
+        }
+
+        return view('portal.dashboard.index', compact('contact', 'invoices', 'totals', 'progress', 'chart', 'date_picker_shortcuts'));
     }
 
     private function calculateAmounts($invoices, $start, $end)
diff --git a/resources/assets/js/views/portal/dashboard.js b/resources/assets/js/views/portal/dashboard.js
index 727b2d987..4938391e6 100644
--- a/resources/assets/js/views/portal/dashboard.js
+++ b/resources/assets/js/views/portal/dashboard.js
@@ -12,20 +12,51 @@ import Vue from 'vue';
 import DashboardPlugin from './../../plugins/dashboard-plugin';
 
 import Global from './../../mixins/global';
+import {getQueryVariable} from './../../plugins/functions';
+import {DatePicker, Tooltip} from 'element-ui';
 
-import {Tooltip} from 'element-ui';
+Vue.use(DatePicker, Tooltip);
 
 // plugin setup
-Vue.use(DashboardPlugin, Tooltip);
+Vue.use(DashboardPlugin, DatePicker, Tooltip);
 
 const app = new Vue({
-    el: '#app',
+    el: '#main-body',
 
     components: {
+        [DatePicker.name]: DatePicker,
         [Tooltip.name]: Tooltip,
     },
 
     mixins: [
         Global
     ],
+
+    data: function () {
+        return {
+            filter_date: [],
+        };
+    },
+
+    mounted() {
+        let start_date = getQueryVariable('start_date');
+
+        if (start_date) {
+            let end_date = getQueryVariable('end_date');
+
+            this.filter_date.push(start_date);
+            this.filter_date.push(end_date);
+        }
+    },
+
+    methods: {
+        // Global filter change date column
+        onChangeFilterDate() {
+            if (this.filter_date) {
+                window.location.href = url + '/portal?start_date=' + this.filter_date[0] + '&end_date=' + this.filter_date[1];
+            } else {
+                window.location.href = url + '/portal';
+            }
+        },
+    }
 });
diff --git a/resources/views/portal/dashboard/index.blade.php b/resources/views/portal/dashboard/index.blade.php
index 522cc68e0..464e487da 100644
--- a/resources/views/portal/dashboard/index.blade.php
+++ b/resources/views/portal/dashboard/index.blade.php
@@ -2,6 +2,71 @@
 
 @section('title', trans_choice('general.dashboards', 1))
 
+@section('new_button')
+    <!--Dashboard General Filter-->
+    <el-date-picker
+        v-model="filter_date"
+        type="daterange"
+        align="right"
+        unlink-panels
+        :format="'yyyy-MM-dd'"
+        value-format="yyyy-MM-dd"
+        @change="onChangeFilterDate"
+        range-separator=">>"
+        start-placeholder="{{ $date_picker_shortcuts[trans("reports.this_year")]["start"] }}"
+        end-placeholder="{{ $date_picker_shortcuts[trans("reports.this_year")]["end"] }}"
+        :picker-options="{
+            shortcuts: [
+                {
+                    text: '{{ trans("reports.this_year") }}',
+                    onClick(picker) {
+                        const start = new Date('{{ $date_picker_shortcuts[trans("reports.this_year")]["start"] }}');
+                        const end = new Date('{{ $date_picker_shortcuts[trans("reports.this_year")]["end"] }}');
+
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '{{ trans("reports.previous_year") }}',
+                    onClick(picker) {
+                        const start = new Date('{{ $date_picker_shortcuts[trans("reports.previous_year")]["start"] }}');
+                        const end = new Date('{{ $date_picker_shortcuts[trans("reports.previous_year")]["end"] }}');
+
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '{{ trans("reports.this_quarter") }}',
+                    onClick(picker) {
+                        const start = new Date('{{ $date_picker_shortcuts[trans("reports.this_quarter")]["start"] }}');
+                        const end = new Date('{{ $date_picker_shortcuts[trans("reports.this_quarter")]["end"] }}');
+
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '{{ trans("reports.previous_quarter") }}',
+                    onClick(picker) {
+                        const start = new Date('{{ $date_picker_shortcuts[trans("reports.previous_quarter")]["start"] }}');
+                        const end = new Date('{{ $date_picker_shortcuts[trans("reports.previous_quarter")]["end"] }}');
+
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '{{ trans("reports.last_12_months") }}',
+                    onClick(picker) {
+                        const start = new Date('{{ $date_picker_shortcuts[trans("reports.last_12_months")]["start"] }}');
+                        const end = new Date('{{ $date_picker_shortcuts[trans("reports.last_12_months")]["end"] }}');
+
+                        picker.$emit('pick', [start, end]);
+                    }
+                }
+            ]
+        }">
+    </el-date-picker>
+@endsection
+
 @section('content')
     <div class="row">
         <div class="col-md-4">
@@ -12,6 +77,7 @@
                             <h5 class="text-uppercase text-white mb-0">{{ trans('general.paid') }}</h5>
                             <span class="font-weight-bold text-white mb-0">{{ $totals['paid'] }}</span>
                         </div>
+
                         <div class="col-auto">
                             <div class="icon icon-shape bg-white text-success rounded-circle shadow">
                                 <i class="fa fa-money-bill"></i>
@@ -19,6 +85,7 @@
                         </div>
                     </div>
                 </div>
+
                 <div class="card-footer">
                     <div class="progress progress-xs mb-0">
                         <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ $progress['paid'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['paid'] }}%"></div>
@@ -26,6 +93,7 @@
                 </div>
             </div>
         </div>
+
         <div class="col-md-4">
             <div class="card bg-gradient-warning card-stats">
                 <div class="card-body">
@@ -34,6 +102,7 @@
                             <h5 class="text-uppercase text-white mb-0">{{ trans('general.unpaid') }}</h5>
                             <span class="font-weight-bold text-white mb-0">{{ $totals['unpaid'] }}</span>
                         </div>
+
                         <div class="col-auto">
                             <div class="icon icon-shape bg-white text-warning rounded-circle shadow">
                                 <i class="fa fa-money-bill"></i>
@@ -41,6 +110,7 @@
                         </div>
                     </div>
                 </div>
+
                 <div class="card-footer">
                     <div class="progress progress-xs mb-0">
                         <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ $progress['unpaid'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['unpaid'] }}%"></div>
@@ -48,6 +118,7 @@
                 </div>
             </div>
         </div>
+
         <div class="col-md-4">
             <div class="card bg-gradient-danger card-stats">
                 <div class="card-body">
@@ -56,6 +127,7 @@
                             <h5 class="text-uppercase text-white mb-0">{{ trans('general.overdue') }}</h5>
                             <span class="font-weight-bold text-white mb-0">{{ $totals['overdue'] }}</span>
                         </div>
+
                         <div class="col-auto">
                             <div class="icon icon-shape bg-white text-danger rounded-circle shadow">
                                 <i class="fa fa-money-bill"></i>
@@ -63,6 +135,7 @@
                         </div>
                     </div>
                 </div>
+
                 <div class="card-footer">
                     <div class="progress progress-xs mb-0">
                         <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ $progress['overdue'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['overdue'] }}%"></div>
@@ -70,6 +143,7 @@
                 </div>
             </div>
         </div>
+
         <div class="col-md-12">
             <div class="card">
                 <div class="card-header">