Added Vehicles

Added Bankimport, BankAccounts, BankStatements
Some Visual Changes
Added Contacts
Changes in VendorInvoices
Added layouts with default an one for Login PAge
Added Input Group Component

spaces/pages/vendorinvoices/index.vue

@@ -17,7 +17,34 @@
         :columns="itemColumns"
         @select="selectItem"
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    />
+    >
+      <template #state-data="{row}">
+        <span
+          v-if="row.state === 'Entwurf'"
+          class="text-cyan-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+          v-if="row.state === 'Bezahlt'"
+          class="text-primary-500"
+        >
+          {{row.state}}
+        </span>
+      </template>
+      <template #vendor-data="{row}">
+        {{vendors.find(vendor => vendor.id === row.vendor) ? vendors.find(vendor => vendor.id === row.vendor).name : ''}}
+      </template>
+      <template #date-data="{row}">
+        {{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
+      </template>
+      <template #dueDate-data="{row}">
+        {{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
+      </template>
+      <template #amount-data="{row}">
+        {{row.amount ? row.amount.toFixed(2) + ' €' : ''}}
+      </template>
+    </UTable>
 
 
 
@@ -25,6 +52,7 @@
 </template>
 
 <script setup>
+import * as dayjs from "dayjs";
 
 definePageMeta({
   middleware: "auth"
@@ -32,15 +60,10 @@ definePageMeta({
 
 
 const router = useRouter()
-const {vendorInvoices } = storeToRefs(useDataStore())
+const {vendorInvoices, vendors} = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
-  {
-    key: 'id',
-    label: "Id",
-    sortable: true
-  },
   {
     key: 'state',
     label: "Status.",
@@ -48,7 +71,7 @@ const itemColumns = [
   },
   {
     key: 'vendor',
-    label: "Lieferantennr.",
+    label: "Lieferant",
     sortable: true
   },
   {
@@ -61,12 +84,22 @@ const itemColumns = [
     label: "Datum",
     sortable: true
   },
+  {
+    key: "dueDate",
+    label: "Fällig:",
+    sortable: true
+  },
+  {
+    key: "amount",
+    label: "Betrag",
+    sortable: true
+  },
 ]
 
 
 const selectItem = (item) => {
   console.log(item)
-  router.push(`/vendorinvoices/show/${item.id} `)
+  router.push(`/vendorinvoices/edit/${item.id} `)
 }