ledger balance

src/pages/ledger/ListLedgers.vue

@@ -4,13 +4,14 @@ import {CreateLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
+import {formatIsk} from "@/formaters.ts";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
 const editModal = ref<typeof CreateLedgerModal>();
-const editingLedgerId = ref(0);
+const editingLedgerId = ref("");
 
-const openEdit = async (ledgerId: number) => {
+const openEdit = async (ledgerId: string) => {
   editingLedgerId.value = ledgerId;
   await nextTick();
   editModal.value?.open();
@@ -21,7 +22,10 @@ const openEdit = async (ledgerId: number) => {
 <template>
   <div class="mt-4">
     <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel class="grow" :ledger="ledger" />
+      <LedgerLabel :ledger="ledger" />
+      <div class="flex grow">
+        <span class="ms-2">{{ formatIsk(ledger.balance) }}</span>
+      </div>
       <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
     </div>
   </div>