Added Frontend

frontend/components/displayBankaccounts.vue

@@ -0,0 +1,54 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+let unallocatedStatements = ref(0)
+let bankaccounts = ref([])
+
+const setupPage = async () => {
+  let bankstatements = (await useEntities("bankstatements").select("*, statementallocations(*)","date",true)).filter(i => !i.archived)
+  unallocatedStatements.value = bankstatements.filter(i => Number(calculateOpenSum(i)) !== 0).length
+  bankaccounts.value = await useEntities("bankaccounts").select()
+}
+
+setupPage()
+
+const calculateOpenSum = (statement) => {
+  let startingAmount = 0
+
+  statement.statementallocations.forEach(item => {
+    startingAmount += item.amount
+  })
+
+  return (statement.amount - startingAmount).toFixed(2)
+}
+</script>
+
+<template>
+  <table>
+
+    <tr>
+      <td colspan="2">Nicht zugewiesene Bankbuchungen:</td>
+      <td>
+        <span v-if="unallocatedStatements > 0" class="text-orange-500 font-bold">{{unallocatedStatements}}</span>
+        <span v-else class="text-primary-500 font-bold">0</span>
+      </td>
+    </tr>
+    <tr v-for="account in bankaccounts.filter(i => !i.expired)">
+      <td>{{ account.name }}:</td>
+      <td>
+        {{dayjs(account.syncedAt).format("DD.MM.YY HH:mm")}}
+      </td>
+      <td>
+        <span v-if="account.balance < 0" class=" text-nowrap text-rose-600 font-bold">{{useCurrency(account.balance)}}</span>
+        <span v-else-if="account.balance > 0" class="text-nowrap text-primary-500 font-bold">{{useCurrency(account.balance)}}</span>
+        <span v-else class="text-nowrap ">{{useCurrency(account.balance)}}</span>
+      </td>
+    </tr>
+  </table>
+
+</template>
+
+<style scoped>
+
+</style>