feat(#40): Show an appraised estimate of held items on the ledger

src/pages/ledger/ViewLedger.vue

@@ -1,10 +1,29 @@
 <script setup lang="ts">
 import {RouterLink, RouterView} from 'vue-router';
-import {isMain, LedgerLabel, useLedgerParam} from "@/ledger";
+import {appraiseItemBalances, getLedgerBalance, isMain, LedgerLabel, useLedgerParam} from "@/ledger";
 import {routeNames} from "@/routes.ts";
-import {IskLabel} from "@/market";
+import {getMarketTypes, getPrices, IskLabel} from "@/market";
+import {computedAsync} from "@vueuse/core";
 
-const {ledger} = useLedgerParam();
+const {ledgerId, ledger} = useLedgerParam();
+
+const itemAppraisal = computedAsync(async () => {
+  if (!ledgerId.value) {
+    return undefined;
+  }
+
+  const {itemBalances} = await getLedgerBalance(ledgerId.value);
+
+  if (itemBalances.length === 0) {
+    return undefined;
+  }
+
+  const types = await getMarketTypes([...new Set(itemBalances.map(i => i.typeId))]);
+  const prices = await getPrices(types);
+  const appraisal = appraiseItemBalances(itemBalances, prices);
+
+  return appraisal.buy === 0 && appraisal.sell === 0 ? undefined : appraisal;
+}, undefined);
 
 </script>
 
@@ -14,8 +33,12 @@ const {ledger} = useLedgerParam();
       <div class="flex w-full">
         <LedgerLabel :ledger="ledger" :link="false" />
       </div>
-      <div class="flex justify-end w-full">
-        <IskLabel class="mb-2" :amount="ledger.balance" />
+      <div class="flex justify-end items-baseline gap-3 w-full mb-2">
+        <span v-if="itemAppraisal" class="text-sm text-gray-400">
+          ~<IskLabel :amount="itemAppraisal.buy" :colored="false" /> buy /
+          ~<IskLabel :amount="itemAppraisal.sell" :colored="false" /> sell
+        </span>
+        <IskLabel :amount="ledger.balance" />
       </div>
     </div>
     <div class="flex border-b-2 border-emerald-500 mt-4">