feat: reorganize ledger views

src/ledger/LedgerLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
-import {isCombined, isMain, Ledger, systemLedger} from "@/ledger/ledger.ts";
+import {isCombined, Ledger, systemLedger} from "@/ledger/ledger.ts";
-import {DocumentIcon, FolderOpenIcon} from '@heroicons/vue/24/outline';
+import {FolderOpenIcon} from '@heroicons/vue/24/outline';
 import {RouterLink} from "vue-router";
 import {routeNames} from "@/routes";
 
@@ -15,8 +15,7 @@ const props = defineProps<Props>();
 
 <template>
   <div class="flex">
-    <DocumentIcon v-if="isMain(ledger)" class="w-4 me-1" />
+    <FolderOpenIcon v-if="isCombined(ledger)" class="w-4 me-1" />
-    <FolderOpenIcon v-else-if="isCombined(ledger)" class="w-4 me-1" />
     <div v-else class="w-4 me-1"/>
     <RouterLink v-if="link" :to="{name: routeNames.viewLedger, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
     <span v-else :class="{'system-ledger': ledger === systemLedger}">{{ ledger.name }}</span>

src/pages/Ledgers.vue

@@ -1,27 +1,7 @@
 <script setup lang="ts">
 import {RouterView} from 'vue-router';
-import {EditLedgerModal, useLedgersStore} from "@/ledger";
-import {ref} from "vue";
-import {activityApi} from "@/mammon";
-
-const ledgersStore = useLedgersStore();
-
-const editLedgerModal = ref<typeof EditLedgerModal>();
-
-const processActivities = async () => {
-  await activityApi.fetchAllNewActivities();
-  await activityApi.processNewActivities();
-  await ledgersStore.refresh();
-}
 </script>
 
 <template>
-    <div class="mt-4">
+  <RouterView />
-      <div class="mb-4 border-b-1 flex justify-end">
-        <button class="mb-2 ms-2" @click="processActivities">Process Activities</button>
-        <button class="mb-2 ms-2" @click="editLedgerModal?.open()">New Ledger</button>
-      </div>
-      <EditLedgerModal ref="editLedgerModal" />
-      <RouterView />
-    </div>
 </template>

src/pages/ledger/ListLedgers.vue

@@ -5,9 +5,18 @@ import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
 import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
+import {activityApi} from "@/mammon";
 
 const ledgersStore = useLedgersStore();
 
+const editLedgerModal = ref<typeof EditLedgerModal>();
+
+const processActivities = async () => {
+  await activityApi.fetchAllNewActivities();
+  await activityApi.processNewActivities();
+  await ledgersStore.refresh();
+}
+
 const { sortedArray, headerProps } = useSort<Ledger>(() => ledgersStore.ledgers);
 
 const editModal = ref<typeof EditLedgerModal>();
@@ -22,6 +31,13 @@ const openEdit = async (ledgerId: string) => {
 </script>
 
 <template>
+  <div class="mt-4">
+    <div class="mb-4 border-b-1 flex justify-end">
+      <button class="mb-2 ms-2" @click="processActivities">Process Activities</button>
+      <button class="mb-2 ms-2" @click="editLedgerModal?.open()">New Ledger</button>
+    </div>
+    <EditLedgerModal ref="editLedgerModal" />
+  </div>
   <div class="mt-4">
     <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
       <template #default="{ list }">

src/pages/ledger/ViewLedger.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import {RouterLink, RouterView} from 'vue-router';
-import {useLedgerParam} from "@/ledger";
+import {LedgerLabel, useLedgerParam} from "@/ledger";
 import {routeNames} from "@/routes.ts";
+import {IskLabel} from "@/market";
 
 const {ledger} = useLedgerParam();
 
@@ -9,7 +10,15 @@ const {ledger} = useLedgerParam();
 
 <template>
   <div v-if="ledger" class="mt-4">
-    <div class="flex border-b-2 border-emerald-500">
+    <div class="flex">
+      <div class="flex">
+        <LedgerLabel :ledger="ledger" :link="false" />
+      </div>
+      <div class="flex justify-end w-full">
+        <IskLabel class="mb-2" :amount="ledger.balance" />
+      </div>
+    </div>
+    <div class="flex border-b-2 border-emerald-500 mt-4">
       <RouterLink :to="{name: routeNames.viewLedgerBalance}" class="tab">
         <span>Balance</span>
       </RouterLink>

src/pages/ledger/ViewLedgerBalance.vue

@@ -2,7 +2,7 @@
 import {getLedgerBalance, useLedgerParam} from "@/ledger";
 import {computedAsync} from "@vueuse/core";
 import {BalanceResponse} from "@/generated/mammon";
-import {getMarketType, IskLabel, MarketTypeLabel} from "@/market";
+import {getMarketType, MarketTypeLabel} from "@/market";
 import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgerId} = useLedgerParam();
@@ -35,9 +35,7 @@ const { sortedArray, headerProps } = useSort(computedAsync(async () => {
 
 <template>
   <div v-if="balance" class="mt-4">
-    <div class="flex justify-end w-full">
+
-      <IskLabel class="mb-2" :amount="balance.iskBalance" />
-    </div>
     <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
       <template #default="{ list }">
         <thead>