incr: get top expenses to display

backend/database/bespoke.ts

@@ -32,13 +32,11 @@ export class BespokeQueries {
 
     const topExpenses = await db
       .knex!.select({
-        total: db.knex!.raw('sum(cast(?? as real)) - sum(cast(?? as real))', [
-          'debit',
-          'credit',
-        ]),
+        total: db.knex!.raw('sum(cast(debit as real) - cast(credit as real))'),
       })
       .select('account')
       .from('AccountingLedgerEntry')
+      .where('reverted', false)
       .where('account', 'in', expenseAccounts)
       .whereBetween('date', [fromDate, toDate])
       .groupBy('account')
@@ -89,7 +87,7 @@ export class BespokeQueries {
   ) {
     const income = await db.knex!.raw(
       `
-      select sum(credit - debit) as balance, strftime('%Y-%m', date) as yearmonth
+      select sum(cast(credit as real) - cast(debit as real)) as balance, strftime('%Y-%m', date) as yearmonth
       from AccountingLedgerEntry
       where
         reverted = false and
@@ -105,7 +103,7 @@ export class BespokeQueries {
 
     const expense = await db.knex!.raw(
       `
-      select sum(debit - credit) as balance, strftime('%Y-%m', date) as yearmonth
+      select sum(cast(debit as real) - cast(credit as real)) as balance, strftime('%Y-%m', date) as yearmonth
       from AccountingLedgerEntry
       where
         reverted = false and

src/pages/Dashboard/Dashboard.vue

@@ -2,16 +2,14 @@
   <div class="flex flex-col">
     <PageHeader :title="t`Dashboard`" />
 
-    <div class="mx-4 overflow-y-scroll no-scrollbar">
-      <Cashflow class="mt-5" />
-      <hr class="border-t mt-10" />
-      <UnpaidInvoices class="mt-10" />
-      <hr class="border-t mt-10" />
-      <div class="flex justify-between mx-auto mt-10 ml-4 mr-4 gap-10">
-        <ProfitAndLoss class="w-1/2" />
-        <!--
-        <Expenses class="w-1/2" />
-       -->
+    <div class="mx-4 overflow-y-scroll no-scrollbar flex flex-col gap-8">
+      <Cashflow class="" />
+      <hr />
+      <UnpaidInvoices />
+      <hr />
+      <div class="flex gap-8">
+        <ProfitAndLoss class="w-full" />
+        <Expenses class="w-full" />
       </div>
     </div>
   </div>
@@ -20,7 +18,7 @@
 <script>
 import PageHeader from 'src/components/PageHeader';
 import Cashflow from './Cashflow';
-// import Expenses from './Expenses';
+import Expenses from './Expenses';
 import ProfitAndLoss from './ProfitAndLoss';
 import UnpaidInvoices from './UnpaidInvoices';
 
@@ -31,9 +29,7 @@ export default {
     UnpaidInvoices,
     Cashflow,
     ProfitAndLoss,
-    /*
     Expenses,
-    */
   },
 };
 </script>

src/pages/Dashboard/Expenses.vue

@@ -7,9 +7,11 @@
       </template>
     </SectionHeader>
     <div class="flex relative" v-show="hasData">
-      <div class="w-1/2">
+      <!-- Chart Legend -->
+      <div class="w-1/2 flex flex-col gap-5 mt-8">
+        <!-- Ledgend Item -->
         <div
-          class="mt-5 flex justify-between items-center text-sm"
+          class="flex justify-between items-center text-sm"
           v-for="(d, i) in expenses"
           :key="d.name"
         >
@@ -18,8 +20,12 @@
             @mouseover="active = i"
             @mouseleave="active = null"
           >
-            <div class="w-3 h-3 rounded-sm" :class="d.class"></div>
-            <div class="ml-3">{{ d.account }}</div>
+            <div class="w-3 h-3 rounded-sm flex-shrink-0" :class="d.class" />
+            <p
+              class="ml-2 w-24 overflow-x-scroll whitespace-nowrap no-scrollbar"
+            >
+              {{ d.account }}
+            </p>
           </div>
           <p class="whitespace-nowrap">
             {{ fyo.format(d.total, 'Currency') }}
@@ -38,6 +44,8 @@
         @change="(value) => (active = value)"
       />
     </div>
+
+    <!-- Empty Message -->
     <div
       v-if="expenses.length === 0"
       class="flex-1 w-full h-full flex-center my-20"
@@ -52,7 +60,7 @@
 <script>
 import { fyo } from 'src/initFyo';
 import theme from 'src/theme';
-import { getDatesAndPeriodicity } from 'src/utils/misc';
+import { getDatesAndPeriodList } from 'src/utils/misc';
 import DonutChart from '../../components/Charts/DonutChart.vue';
 import PeriodSelector from './PeriodSelector';
 import SectionHeader from './SectionHeader';
@@ -94,8 +102,12 @@ export default {
   },
   methods: {
     async setData() {
-      const { fromDate, toDate } = await getDatesAndPeriodicity(this.period);
-      let topExpenses = await fyo.db.getTopExpenses(fromDate, toDate);
+      const { fromDate, toDate } = await getDatesAndPeriodList(this.period);
+      let topExpenses = await fyo.db.getTopExpenses(
+        fromDate.toISO(),
+        toDate.toISO()
+      );
+
       const shades = [
         { class: 'bg-gray-800', hex: theme.backgroundColor.gray['800'] },
         { class: 'bg-gray-600', hex: theme.backgroundColor.gray['600'] },

src/pages/Dashboard/UnpaidInvoices.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between gap-10">
+  <div class="flex justify-between gap-8">
     <div
       class="flex-col justify-between flex-1"
       v-for="(invoice, i) in invoices"
@@ -152,8 +152,8 @@ export default {
         barWidth: 60,
       },
     ],
-    salesInvoicePeriod: 'This Month',
-    purchaseInvoicePeriod: 'This Month',
+    salesInvoicePeriod: 'This Year',
+    purchaseInvoicePeriod: 'This Year',
   }),
   watch: {
     salesInvoicePeriod: 'calculateInvoiceTotals',