[dashboard] add checking accounts balance

refer #145

internal/server/assets/balance.go

@@ -27,10 +27,18 @@ type AssetBreakdown struct {
 	AbsoluteReturn   decimal.Decimal `json:"absoluteReturn"`
 }
 
+func GetCheckingBalance(db *gorm.DB) gin.H {
+	return doGetBalance(db, "Assets:Checking:%", false)
+}
+
 func GetBalance(db *gorm.DB) gin.H {
-	postings := query.Init(db).Like("Assets:%", "Income:CapitalGains:%").All()
+	return doGetBalance(db, "Assets:%", true)
+}
+
+func doGetBalance(db *gorm.DB, pattern string, rollup bool) gin.H {
+	postings := query.Init(db).Like(pattern, "Income:CapitalGains:%").All()
 	postings = service.PopulateMarketPrice(db, postings)
-	breakdowns := ComputeBreakdowns(db, postings, true)
+	breakdowns := ComputeBreakdowns(db, postings, rollup)
 	return gin.H{"asset_breakdowns": breakdowns}
 }
 

internal/server/dashboard.go

@@ -2,13 +2,15 @@ package server
 
 import (
 	"github.com/ananthakumaran/paisa/internal/query"
+	"github.com/ananthakumaran/paisa/internal/server/assets"
 	"github.com/ananthakumaran/paisa/internal/server/goal"
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
 )
 
 func GetDashboard(db *gorm.DB) gin.H {
 	return gin.H{
+		"checkingBalances":     assets.GetCheckingBalance(db),
 		"networth":             GetCurrentNetworth(db),
 		"expenses":             GetCurrentExpense(db),
 		"cashFlows":            GetCurrentCashFlow(db),

src/lib/components/BalanceCard.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { accountColorStyle } from "$lib/colors";
+  import { iconText } from "$lib/icon";
+  import { restName, type AssetBreakdown, formatCurrency, firstName } from "$lib/utils";
+
+  export let assetBreakdown: AssetBreakdown;
+</script>
+
+<div class="box p-3 has-background-white">
+  <div class="my-1 is-flex is-justify-content-space-between">
+    <div class="has-text-grey truncate custom-icon" title={assetBreakdown.group}>
+      <span style={accountColorStyle(firstName(assetBreakdown.group))}
+        >{iconText(assetBreakdown.group)}</span
+      >
+      <a class="secondary-link" href="/assets/gain/{assetBreakdown.group}">
+        {restName(restName(assetBreakdown.group))}</a
+      >
+    </div>
+    <div class="has-text-weight-bold is-size-6">
+      {formatCurrency(assetBreakdown.marketAmount)}
+    </div>
+  </div>
+</div>

src/lib/utils.ts

@@ -553,6 +553,7 @@ export function ajax(route: "/api/gain"): Promise<{
   gain_breakdown: Gain[];
 }>;
 export function ajax(route: "/api/dashboard"): Promise<{
+  checkingBalances: { asset_breakdowns: Record<string, AssetBreakdown> };
   expenses: { [key: string]: Posting[] };
   cashFlows: CashFlow[];
   transactionSequences: TransactionSequence[];

src/routes/(app)/+page.svelte

@@ -17,7 +17,8 @@
     type TransactionSequence,
     type Legend,
     now,
-    type GoalSummary
+    type GoalSummary,
+    type AssetBreakdown
   } from "$lib/utils";
   import _ from "lodash";
   import { onMount } from "svelte";
@@ -30,6 +31,7 @@
   import UpcomingCard from "$lib/components/UpcomingCard.svelte";
   import GoalSummaryCard from "$lib/components/GoalSummaryCard.svelte";
   import LegendCard from "$lib/components/LegendCard.svelte";
+  import BalanceCard from "$lib/components/BalanceCard.svelte";
 
   let UntypedMasonryGrid = MasonryGrid as any;
 
@@ -48,6 +50,7 @@
   let currentBudget: Budget;
   let selectedExpenses: Posting[] = [];
   let isEmpty = false;
+  let checkingBalances: Record<string, AssetBreakdown> = {};
 
   $: if (renderer) {
     selectedExpenses = expenses[month] || [];
@@ -68,6 +71,7 @@
       budget: { budgetsByMonth },
       transactionSequences,
       networth: { networth, xirr },
+      checkingBalances: { asset_breakdowns: checkingBalances },
       transactions
     } = await ajax("/api/dashboard"));
 
@@ -192,6 +196,28 @@
               </div>
             </div>
           </div>
+
+          {#if !_.isEmpty(checkingBalances)}
+            <div class="tile is-parent">
+              <article class="tile is-child">
+                <div class="content">
+                  <p class="subtitle">
+                    <a class="secondary-link" href="/assets/balance">Checking Balance</a>
+                  </p>
+                  <div class="content">
+                    <UntypedMasonryGrid gap={10} maxStretchColumnSize={400} align="stretch">
+                      {#each _.values(checkingBalances) as assetBreakdown}
+                        <div class="is-flex-grow-1">
+                          <BalanceCard {assetBreakdown} />
+                        </div>
+                      {/each}
+                    </UntypedMasonryGrid>
+                  </div>
+                </div>
+              </article>
+            </div>
+          {/if}
+
           <div class="tile is-parent">
             <article class="tile is-child">
               <p class="subtitle">

tests/fixture/eur-hledger/dashboard.json

@@ -26,6 +26,9 @@
       "balance": 994.95
     }
   ],
+  "checkingBalances": {
+    "asset_breakdowns": {}
+  },
   "expenses": {},
   "goalSummaries": [],
   "networth": {

tests/fixture/eur/dashboard.json

@@ -26,6 +26,9 @@
       "balance": 994.95
     }
   ],
+  "checkingBalances": {
+    "asset_breakdowns": {}
+  },
   "expenses": {},
   "goalSummaries": [],
   "networth": {

tests/fixture/inr-beancount/dashboard.json

@@ -26,6 +26,9 @@
       "balance": 13001.94858619763
     }
   ],
+  "checkingBalances": {
+    "asset_breakdowns": {}
+  },
   "expenses": {
     "2022-01": [
       {

tests/fixture/inr-hledger/dashboard.json

@@ -26,6 +26,9 @@
       "balance": 4976.6659857408
     }
   ],
+  "checkingBalances": {
+    "asset_breakdowns": {}
+  },
   "expenses": {
     "2022-01": [
       {

tests/fixture/inr/dashboard.json

@@ -26,6 +26,9 @@
       "balance": 13001.9829928704
     }
   ],
+  "checkingBalances": {
+    "asset_breakdowns": {}
+  },
   "expenses": {
     "2022-01": [
       {