ledger balance

src/pages/ledger/ViewLedgerBalance.vue

@@ -1,11 +1,28 @@
 <script setup lang="ts">
-import {useLedgerParam} from "@/ledger";
+import {getLedgerBalance, useLedgerParam} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {BalanceResponse} from "@/generated/mammon";
+import {IskLabel, MarketTypeLabel} from "@/market";
 
-const {ledgerId, ledger} = useLedgerParam();
+const {ledgerId} = useLedgerParam();
+
+const balance = computedAsync<BalanceResponse>(async () => {
+  if (ledgerId.value) {
+    return await getLedgerBalance(ledgerId.value);
+  }
+  return undefined;
+});
 
 </script>
 
 <template>
-  <div class="mt-4">
+  <div v-if="balance" class="mt-4">
+    <div class="border-b-1">
+      <IskLabel class="mb-2" :amount="balance.iskBalance" />
+    </div>
+    <div v-for="item in balance.itemBalances" :key="item.typeId" class="mt-2 flex gap-2">
+      <MarketTypeLabel :id="item.typeId" />
+      <span>{{item.quantity}}</span>
+    </div>
   </div>
 </template>