Invoice Widgets completed

app/Domains/Dashboard/Views/Partials/Widgets/OpenCostUnits.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {onMounted, reactive} from "vue";
+
+const costUnits = reactive({
+    'openCostUnits': '',
+
+})
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/dashboard/open-cost-units');
+    const data = await response.json();
+    Object.assign(costUnits, data);
+});
+
+</script>
+
+<template>
+    <table class="widget-content-item" v-if="costUnits.openCostUnits.length > 0">
+        <tr>
+            <td style="font-weight: bold">Kostenstelle</td>
+            <td style="font-weight: bold">Neu</td>
+            <td style="font-weight: bold">Ang</td>
+            <td style="font-weight: bold">Betrag</td>
+        </tr>
+
+        <tr v-for="costUnit in costUnits.openCostUnits">
+            <td>{{costUnit.name}}</td>
+            <td>{{costUnit.new_invoices_count}}</td>
+            <td>{{costUnit.approved_invoices_count}}</td>
+            <td>{{costUnit.totalAmount}}</td>
+        </tr>
+    </table>
+
+    <p v-else style="padding: 10px; font-weight: bold">Es existieren im Moment keine Abrechnugnen, um die du dich kümmern musst.</p>
+
+</template>
+
+<style scoped>
+
+</style>