From 70b8e818c090e971300db27674040b7edc600029 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 22 Nov 2019 23:13:32 +0530
Subject: [PATCH] fix: Dashboard

- Remove hardcoded values
- Calculate cashflow
- PeriodSelector
---
 reports/Cashflow/Cashflow.js           | 110 +++++++
 src/pages/Dashboard.vue                | 286 ------------------
 src/pages/Dashboard/Dashboard.vue      | 388 +++++++++++++++++++++++++
 src/pages/Dashboard/PeriodSelector.vue |  52 ++++
 src/pages/Dashboard/SectionHeader.vue  |   6 +
 src/router.js                          |   2 +-
 6 files changed, 557 insertions(+), 287 deletions(-)
 create mode 100644 reports/Cashflow/Cashflow.js
 delete mode 100644 src/pages/Dashboard.vue
 create mode 100644 src/pages/Dashboard/Dashboard.vue
 create mode 100644 src/pages/Dashboard/PeriodSelector.vue
 create mode 100644 src/pages/Dashboard/SectionHeader.vue

diff --git a/reports/Cashflow/Cashflow.js b/reports/Cashflow/Cashflow.js
new file mode 100644
index 00000000..80fed038
--- /dev/null
+++ b/reports/Cashflow/Cashflow.js
@@ -0,0 +1,110 @@
+const { getData } = require('../FinancialStatements/FinancialStatements');
+const ProfitAndLoss = require('../ProfitAndLoss/ProfitAndLoss');
+const { DateTime } = require('luxon');
+
+class Cashflow {
+  async run({ fromDate, toDate, periodicity }) {
+    let income = await getData({
+      rootType: 'Income',
+      balanceMustBe: 'Credit',
+      fromDate,
+      toDate,
+      periodicity
+    });
+
+    let expense = await getData({
+      rootType: 'Expense',
+      balanceMustBe: 'Debit',
+      fromDate,
+      toDate,
+      periodicity
+    });
+
+    let cashflow = await frappe.db.sql(
+      `
+      select sum(credit) as inflow, sum(debit) as outflow, strftime("%m-%Y", date) as "month-year"
+      from AccountingLedgerEntry
+      where account in (
+        select name from Account where accountType in ('Receivable', 'Payable', 'Stock', 'Fixed Asset', 'Equity')
+      )
+      and date >= $fromDate and date <= $toDate
+      group by strftime("%m-%Y", date)
+    `,
+      { $fromDate: fromDate, $toDate: toDate }
+    );
+
+    let depreciation = await frappe.db.sql(
+      `
+      select sum(credit) as credit, sum(debit) as debit, strftime("%m-%Y", date) as "month-year"
+      from AccountingLedgerEntry
+      where account in (
+        select name from Account where accountType = "Depreciation"
+      )
+      and date >= $fromDate and date <= $toDate
+      group by strftime("%m-%Y", date)
+    `,
+      { $fromDate: fromDate, $toDate: toDate }
+    );
+
+    let periodList = income.periodList;
+
+    let data = periodList.map(periodKey => {
+      let monthYear = this.getMonthYear(periodKey, 'MMM yyyy');
+      let cashflowForPeriod = cashflow.find(d => d['month-year'] === monthYear);
+      if (cashflowForPeriod) {
+        cashflowForPeriod.periodKey = periodKey;
+        return cashflowForPeriod;
+      }
+      return {
+        inflow: 0,
+        outflow: 0,
+        periodKey,
+        'month-year': monthYear
+      };
+    });
+
+    let depreciationPeriodList = periodList.map(periodKey => {
+      let monthYear = this.getMonthYear(periodKey, 'MMM yyyy');
+      let depreciationForPeriod = depreciation.find(
+        d => d['month-year'] === monthYear
+      );
+      if (depreciationForPeriod) {
+        depreciationForPeriod.periodKey = periodKey;
+        return depreciationForPeriod;
+      }
+      return {
+        debit: 0,
+        credit: 0,
+        periodKey,
+        'month-year': monthYear
+      };
+    });
+
+    data = data.map((d, i) => {
+      d.inflow += income.totalRow[d.periodKey];
+      d.outflow -= expense.totalRow[d.periodKey];
+
+      let depreciation = depreciationPeriodList[i];
+      d.inflow -= depreciation.credit;
+      d.outflow += depreciation.debit;
+      return d;
+    });
+
+    return {
+      data,
+      periodList
+    };
+  }
+
+  getMonthYear(periodKey, format) {
+    return DateTime.fromFormat(periodKey, format).toFormat('MM-yyyy');
+  }
+
+  getPeriodKey(dateStr, format, periodicity) {
+    if (periodicity === 'Monthly') {
+      return DateTime.fromFormat(dateStr, format).toFormat('MMM yyyy');
+    }
+  }
+}
+
+module.exports = Cashflow;
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
deleted file mode 100644
index b02debc4..00000000
--- a/src/pages/Dashboard.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">{{ _('Dashboard') }}</h1>
-      <template slot="actions">
-        <SearchBar class="ml-2" />
-      </template>
-    </PageHeader>
-    <div class="mt-4 px-8">
-      <div class="border-t" />
-      <div class="mt-6">
-        <div class="flex items-center justify-between">
-          <div class="font-medium">{{ _('Cash Flow') }}</div>
-          <div class="flex text-base">
-            <div class="flex items-center">
-              <span class="w-3 h-3 rounded inline-block bg-blue-500"></span>
-              <span class="ml-2">{{ _('Inflow') }}</span>
-            </div>
-            <div class="flex items-center ml-6">
-              <span class="w-3 h-3 rounded inline-block bg-gray-500"></span>
-              <span class="ml-2">{{ _('Outflow' )}}</span>
-            </div>
-          </div>
-          <div class="text-sm flex items-center">
-            {{ _('Last 30 Days') }}
-            <feather-icon name="chevron-down" class="ml-1 w-3 h-3" />
-          </div>
-        </div>
-        <div class="chart-wrapper" ref="cashflow"></div>
-      </div>
-      <div class="my-10 border-t" />
-      <div class="flex -mx-4">
-        <div class="w-1/2 px-4" v-for="invoice in invoices" :key="invoice.title">
-          <div class="font-medium">{{ invoice.title }}</div>
-          <div class="mt-6 flex justify-between">
-            <div class="text-sm">
-              {{ frappe.format(invoice.paid, 'Currency') }}
-              <span class="text-gray-600">{{ _('Paid') }}</span>
-            </div>
-            <div class="text-sm">
-              {{ frappe.format(invoice.unpaid, 'Currency') }}
-              <span class="text-gray-600">{{ _('Unpaid') }}</span>
-            </div>
-          </div>
-          <div class="mt-2 relative">
-            <div
-              class="w-full h-4 rounded"
-              :class="invoice.color == 'blue' ? 'bg-blue-200' : 'bg-gray-200'"
-            ></div>
-            <div
-              class="absolute inset-0 h-4 rounded"
-              :class="invoice.color == 'blue' ? 'bg-blue-500' : 'bg-gray-500'"
-              :style="`width: ${invoice.paid / invoice.total * 100}%`"
-            ></div>
-          </div>
-        </div>
-      </div>
-      <div class="my-10 border-t" />
-      <div class="flex -mx-4">
-        <div class="w-1/2 px-4">
-          <span class="font-medium">{{ _('Profit and Loss') }}</span>
-          <div class="chart-wrapper" ref="profit-and-loss"></div>
-        </div>
-        <div class="w-1/2 px-4">
-          <span class="font-medium">{{ _('Top Expenses') }}</span>
-          <div class="flex">
-            <div class="w-1/2">
-              <div
-                class="mt-5 flex justify-between items-center text-sm"
-                v-for="d in expenses"
-                :key="d.name"
-              >
-                <div class="flex items-center">
-                  <div class="w-3 h-3 rounded" :style="`backgroundColor: ${d.color}`"></div>
-                  <div class="ml-3">{{ d.name }}</div>
-                </div>
-                <div>{{ frappe.format(d.value, 'Currency') }}</div>
-              </div>
-            </div>
-            <div class="w-1/2 chart-wrapper" ref="top-expenses"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import frappe from 'frappejs';
-import { Chart } from 'frappe-charts';
-import PageHeader from '@/components/PageHeader';
-import SearchBar from '@/components/SearchBar';
-import { getData } from '../../reports/FinancialStatements/FinancialStatements';
-import ProfitAndLoss from '../../reports/ProfitAndLoss/ProfitAndLoss';
-import theme from '@/theme';
-
-export default {
-  name: 'Dashboard',
-  components: {
-    PageHeader,
-    SearchBar,
-  },
-  data() {
-    return {
-      invoices: [],
-      expenses: []
-    };
-  },
-  async mounted() {
-    await this.generateIncomeExpenseChart();
-    this.getInvoiceTotals();
-    this.generateProfitAndLossChart();
-    this.generateExpensesPieChart();
-  },
-
-  methods: {
-    async getInvoiceTotals() {
-      let res;
-      res = await frappe.db.sql(`
-        select
-          sum(baseGrandTotal) as total,
-          sum(outstandingAmount) as outstanding
-        from SalesInvoice
-      `);
-      let { total, outstanding } = res[0];
-      this.invoices.push({
-        title: 'Sales Invoices',
-        total: total,
-        unpaid: outstanding,
-        paid: total - outstanding,
-        color: 'blue'
-      });
-
-      res = await frappe.db.sql(`
-        select
-          sum(baseGrandTotal) as total,
-          sum(outstandingAmount) as outstanding
-        from PurchaseInvoice
-      `);
-      let { total: purchaseTotal, outstanding: purchaseOutstanding } = res[0];
-      this.invoices.push({
-        title: 'Purchase Invoices',
-        total: purchaseTotal,
-        unpaid: purchaseOutstanding,
-        paid: purchaseTotal - purchaseOutstanding,
-        color: 'gray'
-      });
-    },
-    async generateIncomeExpenseChart() {
-      let income = await getData({
-        rootType: 'Income',
-        balanceMustBe: 'Credit',
-        fromDate: '2019-01-01',
-        toDate: '2019-12-31',
-        periodicity: 'Monthly'
-      });
-
-      let expense = await getData({
-        rootType: 'Expense',
-        balanceMustBe: 'Debit',
-        fromDate: '2019-01-01',
-        toDate: '2019-12-31',
-        periodicity: 'Monthly'
-      });
-
-      const chart = new Chart(this.$refs['cashflow'], {
-        title: '',
-        type: 'line',
-        animate: false,
-        colors: ['#2490EF', '#B7BFC6'],
-        axisOptions: {
-          xAxisMode: 'tick',
-          shortenYAxisNumbers: true
-        },
-        lineOptions: {
-          regionFill: 1,
-          hideDots: 1,
-          heatLine: 1
-        },
-        tooltipOptions: {
-          formatTooltipY: value => frappe.format(value, 'Currency')
-        },
-        data: {
-          labels: income.periodList,
-          datasets: [
-            {
-              name: 'Income',
-              chartType: 'line',
-              values: income.periodList.map(key => income.totalRow[key])
-            },
-            {
-              name: 'Expense',
-              chartType: 'line',
-              values: expense.periodList.map(key => expense.totalRow[key])
-            }
-          ]
-        }
-      });
-    },
-    async generateProfitAndLossChart() {
-      let pl = new ProfitAndLoss();
-      let res = await pl.run({
-        fromDate: '2019-01-01',
-        toDate: '2019-12-31',
-        periodicity: 'Monthly'
-      });
-
-      let totalRow = res.rows[res.rows.length - 1];
-
-      const chart = new Chart(this.$refs['profit-and-loss'], {
-        title: '',
-        animate: false,
-        type: 'bar',
-        colors: ['#2490EF', '#B7BFC6'],
-        axisOptions: {
-          xAxisMode: 'tick',
-          shortenYAxisNumbers: true
-        },
-        tooltipOptions: {
-          formatTooltipY: value => frappe.format(value, 'Currency')
-        },
-        data: {
-          labels: res.columns.map(d => d.replace('2019', '')),
-          datasets: [
-            {
-              name: 'Income',
-              chartType: 'bar',
-              values: res.columns.map(key => totalRow[key])
-            }
-          ]
-        }
-      });
-    },
-
-    async generateExpensesPieChart() {
-      let expense = await getData({
-        rootType: 'Expense',
-        balanceMustBe: 'Debit',
-        fromDate: '2019-01-01',
-        toDate: '2019-12-31',
-        periodicity: 'Yearly'
-      });
-
-      // let key = expense.periodList[0];
-      let key = '2019 - 2020';
-      let shades = ['800', '600', '400', '200', '100'];
-      let expenses = expense.accounts
-        .filter(d => d[key])
-        .map((d, i) => {
-          return {
-            name: d.name,
-            value: d[key]
-          };
-        })
-        .sort((a, b) => {
-          return b.value - a.value;
-        })
-        .slice(0, 5)
-        .map((d, i) => {
-          d.color = theme.backgroundColor.gray[shades[i]];
-          return d;
-        });
-
-      this.expenses = expenses;
-
-      let chart = new Chart(this.$refs['top-expenses'], {
-        type: 'pie',
-        colors: expenses.map(d => d.color),
-        data: {
-          labels: expenses.map(d => d.name),
-          datasets: [
-            {
-              values: expenses.map(d => d.value)
-            }
-          ]
-        }
-      });
-    }
-  }
-};
-</script>
-<style scoped>
-.chart-wrapper >>> .chart-legend {
-  display: none;
-}
-</style>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
new file mode 100644
index 00000000..3bc587d0
--- /dev/null
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="flex flex-col">
+    <PageHeader>
+      <h1 slot="title" class="text-2xl font-bold">{{ _('Dashboard') }}</h1>
+      <template slot="actions">
+        <SearchBar class="ml-2" />
+      </template>
+    </PageHeader>
+    <div class="mt-4 px-8">
+      <div class="border-t" />
+      <div class="mt-6">
+        <div class="flex items-center justify-between">
+          <div class="font-medium">{{ _('Cash Flow') }}</div>
+          <div class="flex text-base">
+            <div class="flex items-center">
+              <span class="w-3 h-3 rounded inline-block bg-blue-500"></span>
+              <span class="ml-2">{{ _('Inflow') }}</span>
+            </div>
+            <div class="flex items-center ml-6">
+              <span class="w-3 h-3 rounded inline-block bg-gray-500"></span>
+              <span class="ml-2">{{ _('Outflow') }}</span>
+            </div>
+          </div>
+          <PeriodSelector
+            :value="periods.cashflow"
+            @change="value => periodChange('cashflow', value)"
+          />
+        </div>
+        <div class="chart-wrapper" ref="cashflow"></div>
+      </div>
+      <div class="my-10 border-t" />
+      <div class="flex -mx-4">
+        <div
+          class="w-1/2 px-4"
+          v-for="invoice in invoices"
+          :key="invoice.title"
+        >
+          <SectionHeader>
+            <template slot="title">{{ invoice.title }}</template>
+            <PeriodSelector
+              slot="action"
+              :value="periods[invoice.periodKey]"
+              @change="value => periodChange(invoice.periodKey, value)"
+            />
+          </SectionHeader>
+          <div class="mt-6 flex justify-between">
+            <div class="text-sm">
+              {{ frappe.format(invoice.paid, 'Currency') }}
+              <span class="text-gray-600">{{ _('Paid') }}</span>
+            </div>
+            <div class="text-sm">
+              {{ frappe.format(invoice.unpaid, 'Currency') }}
+              <span class="text-gray-600">{{ _('Unpaid') }}</span>
+            </div>
+          </div>
+          <div class="mt-2 relative">
+            <div
+              class="w-full h-4 rounded"
+              :class="invoice.color == 'blue' ? 'bg-blue-200' : 'bg-gray-200'"
+            ></div>
+            <div
+              class="absolute inset-0 h-4 rounded"
+              :class="invoice.color == 'blue' ? 'bg-blue-500' : 'bg-gray-500'"
+              :style="`width: ${(invoice.paid / invoice.total) * 100}%`"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="my-10 border-t" />
+      <div class="flex -mx-4">
+        <div class="w-1/2 px-4">
+          <SectionHeader>
+            <template slot="title">{{ _('Profit and Loss') }}</template>
+            <PeriodSelector
+              slot="action"
+              :value="periods.profitAndLoss"
+              @change="value => periodChange('profitAndLoss', value)"
+            />
+          </SectionHeader>
+          <div class="chart-wrapper" ref="profit-and-loss"></div>
+        </div>
+        <div class="w-1/2 px-4">
+          <SectionHeader>
+            <template slot="title" class="font-medium">{{
+              _('Top Expenses')
+            }}</template>
+            <PeriodSelector
+              slot="action"
+              :value="periods.expenses"
+              @change="value => periodChange('expenses', value)"
+            />
+          </SectionHeader>
+          <div class="flex">
+            <div class="w-1/2">
+              <div
+                class="mt-5 flex justify-between items-center text-sm"
+                v-for="d in expenses"
+                :key="d.name"
+              >
+                <div class="flex items-center">
+                  <div class="w-3 h-3 rounded" :class="d.class"></div>
+                  <div class="ml-3">{{ d.account }}</div>
+                </div>
+                <div>{{ frappe.format(d.total, 'Currency') }}</div>
+              </div>
+            </div>
+            <div class="w-1/2 chart-wrapper" ref="top-expenses"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import { Chart } from 'frappe-charts';
+import PageHeader from '@/components/PageHeader';
+import SearchBar from '@/components/SearchBar';
+import PeriodSelector from './PeriodSelector';
+import SectionHeader from './SectionHeader';
+import { getData } from '../../../reports/FinancialStatements/FinancialStatements';
+import ProfitAndLoss from '../../../reports/ProfitAndLoss/ProfitAndLoss';
+import Cashflow from '../../../reports/Cashflow/Cashflow';
+import theme from '@/theme';
+import { DateTime } from 'luxon';
+
+export default {
+  name: 'Dashboard',
+  components: {
+    PageHeader,
+    SearchBar,
+    PeriodSelector,
+    SectionHeader
+  },
+  data() {
+    return {
+      invoices: [],
+      expenses: [],
+      periods: {
+        cashflow: 'This Year',
+        receivables: 'This Year',
+        payables: 'This Year',
+        expenses: 'This Year',
+        profitAndLoss: 'This Year'
+      }
+    };
+  },
+
+  async mounted() {
+    await this.generateCashflowChart();
+    this.getInvoiceTotals();
+    this.generateProfitAndLossChart();
+    this.generateExpensesPieChart();
+  },
+
+  methods: {
+    async getInvoiceTotals() {
+      let promises = [
+        {
+          title: 'Sales Invoices',
+          doctype: 'SalesInvoice',
+          total: 0,
+          unpaid: 0,
+          paid: 0,
+          color: 'blue',
+          periodKey: 'receivables'
+        },
+        {
+          title: 'Purchase Invoices',
+          doctype: 'PurchaseInvoice',
+          total: 0,
+          unpaid: 0,
+          paid: 0,
+          color: 'gray',
+          periodKey: 'payables'
+        },
+      ].map(async d => {
+        let { fromDate, toDate, periodicity } = await this.getDatesAndPeriodicity(
+          this.periods[d.periodKey]
+        );
+
+        let res = await frappe.db.sql(
+          `
+          select
+            sum(baseGrandTotal) as total,
+            sum(outstandingAmount) as outstanding
+          from ${d.doctype}
+          where date >= $fromDate and date <= $toDate
+        `,
+          { $fromDate: fromDate, $toDate: toDate }
+        );
+        let { total, outstanding } = res[0];
+        d.total = total;
+        d.unpaid = outstanding;
+        d.paid = total - outstanding;
+        return d;
+      });
+
+      this.invoices = await Promise.all(promises);
+    },
+    async generateCashflowChart() {
+      let { fromDate, toDate, periodicity } = await this.getDatesAndPeriodicity(
+        this.periods.cashflow
+      );
+
+      let { data, periodList } = await new Cashflow().run({
+        fromDate,
+        toDate,
+        periodicity
+      });
+
+      const chart = new Chart(this.$refs['cashflow'], {
+        title: '',
+        type: 'line',
+        animate: false,
+        colors: ['#2490EF', '#B7BFC6'],
+        axisOptions: {
+          xAxisMode: 'tick',
+          shortenYAxisNumbers: true
+        },
+        lineOptions: {
+          regionFill: 1,
+          hideDots: 1,
+          heatLine: 1
+        },
+        tooltipOptions: {
+          formatTooltipY: value => frappe.format(value, 'Currency')
+        },
+        data: {
+          labels: periodList,
+          datasets: [
+            {
+              name: 'Inflow',
+              chartType: 'line',
+              values: data.map(period => period.inflow)
+            },
+            {
+              name: 'Outflow',
+              chartType: 'line',
+              values: data.map(period => period.outflow)
+            }
+          ]
+        }
+      });
+    },
+    async generateProfitAndLossChart() {
+      let { fromDate, toDate, periodicity } = await this.getDatesAndPeriodicity(
+        this.periods.profitAndLoss
+      );
+
+      let pl = new ProfitAndLoss();
+      let res = await pl.run({
+        fromDate,
+        toDate,
+        periodicity
+      });
+
+      let totalRow = res.rows[res.rows.length - 1];
+
+      const chart = new Chart(this.$refs['profit-and-loss'], {
+        title: '',
+        animate: false,
+        type: 'bar',
+        colors: ['#2490EF', '#B7BFC6'],
+        axisOptions: {
+          xAxisMode: 'tick',
+          shortenYAxisNumbers: true,
+          xIsSeries: true
+        },
+        tooltipOptions: {
+          formatTooltipY: value => frappe.format(value, 'Currency')
+        },
+        data: {
+          labels: res.columns,
+          datasets: [
+            {
+              name: 'Income',
+              chartType: 'bar',
+              values: res.columns.map(key => totalRow[key])
+            }
+          ]
+        }
+      });
+    },
+
+    async generateExpensesPieChart() {
+      let { fromDate, toDate } = await this.getDatesAndPeriodicity(
+        this.periods.expenses
+      );
+
+      let topExpenses = await frappe.db.sql(
+        `
+        select sum(debit) - sum(credit) as total, account from AccountingLedgerEntry
+        where account in (
+          select name from Account where rootType = "Expense"
+        )
+        and date >= $fromDate and date <= $toDate
+        group by account
+        order by total desc
+        limit 5
+      `,
+        { $fromDate: fromDate, $toDate: toDate }
+      );
+
+      let shades = [
+        { class: 'bg-gray-800', hex: theme.backgroundColor.gray['800'] },
+        { class: 'bg-gray-600', hex: theme.backgroundColor.gray['600'] },
+        { class: 'bg-gray-400', hex: theme.backgroundColor.gray['400'] },
+        { class: 'bg-gray-200', hex: theme.backgroundColor.gray['200'] },
+        { class: 'bg-gray-100', hex: theme.backgroundColor.gray['100'] }
+      ];
+      topExpenses = topExpenses.map((d, i) => {
+        d.class = shades[i].class;
+        d.color = shades[i].hex;
+        return d;
+      });
+
+      this.expenses = topExpenses;
+
+      let chart = new Chart(this.$refs['top-expenses'], {
+        type: 'pie',
+        colors: topExpenses.map(d => d.color),
+        data: {
+          labels: topExpenses.map(d => d.account),
+          datasets: [
+            {
+              values: topExpenses.map(d => d.total)
+            }
+          ]
+        }
+      });
+    },
+
+    periodChange(key, value) {
+      this.periods[key] = value;
+      if (key === 'cashflow') {
+        this.generateCashflowChart();
+      }
+      if (key === 'profitAndLoss') {
+        this.generateProfitAndLossChart();
+      }
+      if (key === 'expenses') {
+        this.generateExpensesPieChart();
+      }
+      if (['receivables', 'payables'].includes(key)) {
+        this.getInvoiceTotals();
+      }
+    },
+
+    async getDatesAndPeriodicity(period) {
+      let fromDate, toDate;
+      let periodicity = 'Monthly';
+      let accountingSettings = await frappe.getSingle('AccountingSettings');
+
+      if (period === 'This Year') {
+        fromDate = accountingSettings.fiscalYearStart;
+        toDate = accountingSettings.fiscalYearEnd;
+      } else if (period === 'This Quarter') {
+        fromDate = DateTime.local()
+          .startOf('quarter')
+          .toISODate();
+        toDate = DateTime.local()
+          .endOf('quarter')
+          .toISODate();
+      } else if (period === 'This Month') {
+        fromDate = DateTime.local()
+          .startOf('month')
+          .toISODate();
+        toDate = DateTime.local()
+          .endOf('month')
+          .toISODate();
+      }
+
+      return {
+        fromDate,
+        toDate,
+        periodicity
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.chart-wrapper >>> .chart-legend {
+  display: none;
+}
+</style>
diff --git a/src/pages/Dashboard/PeriodSelector.vue b/src/pages/Dashboard/PeriodSelector.vue
new file mode 100644
index 00000000..d05cc610
--- /dev/null
+++ b/src/pages/Dashboard/PeriodSelector.vue
@@ -0,0 +1,52 @@
+<template>
+  <Dropdown ref="dropdown" class="text-sm" :items="periodOptions" right>
+    <template
+      v-slot="{
+        toggleDropdown,
+        highlightItemUp,
+        highlightItemDown,
+        selectHighlightedItem
+      }"
+    >
+      <div
+        class="text-sm flex hover:bg-gray-100 focus:outline-none focus:bg-gray-100 items-center px-3 py-2 rounded cursor-pointer"
+        @click="toggleDropdown()"
+        tabindex="0"
+        @keydown.down="highlightItemDown"
+        @keydown.up="highlightItemUp"
+        @keydown.enter="selectHighlightedItem"
+      >
+        {{ value }}
+        <feather-icon name="chevron-down" class="ml-1 w-3 h-3" />
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script>
+import Dropdown from '@/components/Dropdown';
+export default {
+  name: 'PeriodSelector',
+  props: ['value'],
+  components: {
+    Dropdown
+  },
+  data() {
+    let options = ['This Year', 'This Quarter', 'This Month'];
+    return {
+      periodOptions: options.map(option => {
+        return {
+          label: option,
+          action: () => this.selectOption(option)
+        };
+      })
+    };
+  },
+  methods: {
+    selectOption(value) {
+      this.$emit('change', value);
+      this.$refs.dropdown.toggleDropdown(false);
+    }
+  }
+};
+</script>
diff --git a/src/pages/Dashboard/SectionHeader.vue b/src/pages/Dashboard/SectionHeader.vue
new file mode 100644
index 00000000..f3d711a4
--- /dev/null
+++ b/src/pages/Dashboard/SectionHeader.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-baseline justify-between">
+    <span class="font-medium"><slot name="title"></slot></span>
+    <slot name="action"></slot>
+  </div>
+</template>
diff --git a/src/router.js b/src/router.js
index 2083af6c..2eeef68a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 
 import ListView from '@/pages/ListView/ListView';
-import Dashboard from '@/pages/Dashboard';
+import Dashboard from '@/pages/Dashboard/Dashboard';
 import FormView from '@/pages/FormView/FormView';
 import PrintView from '@/pages/PrintView';
 import QuickEditForm from '@/pages/QuickEditForm';