From c6354ac656da2650f2f2d05134a192ff91a51402 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 08:28:41 +0100
Subject: [PATCH 01/22] BETA for new DB

---
 components/EntityShowSubCreatedDocuments.vue  |  1 -
 components/columnRenderings/purchasePrice.vue |  2 +-
 components/columnRenderings/sellingPrice.vue  |  2 +-
 pages/createDocument/index.vue                | 10 ++-----
 stores/data.js                                | 26 +++++++++----------
 5 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/components/EntityShowSubCreatedDocuments.vue b/components/EntityShowSubCreatedDocuments.vue
index 4aba719..3c5d26f 100644
--- a/components/EntityShowSubCreatedDocuments.vue
+++ b/components/EntityShowSubCreatedDocuments.vue
@@ -107,7 +107,6 @@ const getAvailableQueryStringData = (keys) => {
       returnString += `${key}=${value}`
     } else {
       returnString += `&${key}=${value}`
-
     }
   }
 
diff --git a/components/columnRenderings/purchasePrice.vue b/components/columnRenderings/purchasePrice.vue
index dfb1916..8b81b61 100644
--- a/components/columnRenderings/purchasePrice.vue
+++ b/components/columnRenderings/purchasePrice.vue
@@ -9,5 +9,5 @@ const props = defineProps({
 </script>
 
 <template>
-  <span>{{props.row.purchasePrice ? useCurrency(props.row.purchasePrice) : ''}}</span>
+  <span>{{props.row.purchase_price ? useCurrency(props.row.purchase_price) : ''}}</span>
 </template>
diff --git a/components/columnRenderings/sellingPrice.vue b/components/columnRenderings/sellingPrice.vue
index 6bfeeb1..a11b050 100644
--- a/components/columnRenderings/sellingPrice.vue
+++ b/components/columnRenderings/sellingPrice.vue
@@ -9,5 +9,5 @@ const props = defineProps({
 </script>
 
 <template>
-  <span>{{props.row.sellingPrice ? useCurrency(props.row.sellingPrice) : ''}}</span>
+  <span>{{props.row.selling_price ? useCurrency(props.row.selling_price) : ''}}</span>
 </template>
diff --git a/pages/createDocument/index.vue b/pages/createDocument/index.vue
index e16d2d7..81fb7b7 100644
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -134,25 +134,19 @@
             <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
           </template>
           <template #dueDate-data="{row}">
-<!--
             <span v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)" :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
--->
           </template>
           <template #paid-data="{row}">
-<!--            <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
+            <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
               <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
               <span v-else class="text-rose-600">Offen</span>
-            </div>-->
+            </div>
           </template>
           <template #amount-data="{row}">
-<!--
             <span v-if="row.type !== 'deliveryNotes'">{{displayCurrency(useSum().getCreatedDocumentSum(row,items))}}</span>
--->
           </template>
           <template #amountOpen-data="{row}">
-<!--
             <span v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n,{amount}) => n + amount, 0))}}</span>
--->
           </template>
         </UTable>
       </div>
diff --git a/stores/data.js b/stores/data.js
index adb5f5e..dd805a7 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -956,10 +956,10 @@ export const useDataStore = defineStore('data', () => {
                     inputType: "number",
                     inputTrailing: "EUR",
                     inputChangeFunction: function (row) {
-                        if(row.markupPercentage) {
-                            row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
+                        if(row.markup_percentage) {
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
                         } else {
-                            row.sellingPrice = row.purchasePrice.toFixed(4)
+                            row.seling_price = row.purchase_price.toFixed(4)
                         }
                     }
                 },{
@@ -968,12 +968,12 @@ export const useDataStore = defineStore('data', () => {
                     inputType: "number",
                     inputTrailing: "%",
                     inputChangeFunction: function (row) {
-                        if(row.purchasePrice && ! row.sellingPrice) {
-                            row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
-                        } else if(row.sellingPrice && !row.purchasePrice) {
-                            row.purchasePrice = (row.sellingPrice / (1+row.markupPercentage/100)).toFixed(4)
+                        if(row.purchase_price && ! row.seling_price) {
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
+                        } else if(row.seling_price && !row.purchase_price) {
+                            row.purchase_price = (row.seling_price / (1+row.markup_percentage/100)).toFixed(4)
                         } else {
-                            row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
                         }
                     }
                 },{
@@ -984,10 +984,10 @@ export const useDataStore = defineStore('data', () => {
                     inputType: "number",
                     inputTrailing: "EUR",
                     inputChangeFunction: function (row) {
-                        if(row.purchasePrice ) {
-                            row.markupPercentage = ((row.sellingPrice / row.purchasePrice - 1) * 100 ).toFixed(2)
+                        if(row.purchase_price ) {
+                            row.markup_percentage = ((row.selling_price / row.purchase_price - 1) * 100 ).toFixed(2)
                         } else{
-                            row.purchasePrice = (row.sellingPrice / (1+row.markupPercentage/100)).toFixed(4)
+                            row.purchase_price = (row.selling_price / (1+row.markup_percentage/100)).toFixed(4)
                         }
                     }
                 },{
@@ -1766,7 +1766,7 @@ export const useDataStore = defineStore('data', () => {
                     sortable: true
                 },
                 {
-                    key: "purchasePrice",
+                    key: "purchase_price",
                     label: "Kaufpreis",
                     inputType: "number",
                     inputStepSize: "0.01",
@@ -2108,7 +2108,7 @@ export const useDataStore = defineStore('data', () => {
                     sortable: true
                 },
                 {
-                    key: "purchasePrice",
+                    key: "purchase_price",
                     label: "Einkauspreis",
                     inputType: "number",
                     component: purchasePrice,

From a161306359a31aaf63f66c03eb5ed95d55a3370f Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 11:05:56 +0100
Subject: [PATCH 02/22] BETA for new DB

---
 pages/createDocument/edit/[[id]].vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 047fa9c..4e761ac 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -1506,7 +1506,20 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
   }
 
   if (row.service) {
-    row.unit = service.unit ? service.unit : services.value.find(i => i.id === row.service).unit
+    console.log(service)
+    if(service.unit) {
+      row.unit = service.unit
+    } else {
+      let selectedService = services.value.find(i => i.id === row.service)
+      console.log(selectedService)
+      if(selectedService.unit?.id) {
+        row.unit = selectedService.unit.id
+      } else {
+        row.unit = selectedService.unit
+      }
+    }
+
+    //row.unit = service.unit ? service.unit : services.value.find(i => i.id === row.service).unit
     row.inputPrice = ((service.sellingPriceComposed.total || service.sellingPrice) ? (service.sellingPriceComposed.total || service.sellingPrice) : (services.value.find(i => i.id === row.service).sellingPriceComposed.total || services.value.find(i => i.id === row.service).sellingPrice))
     row.description = service.description ? service.description : (services.value.find(i => i.id === row.service) ? services.value.find(i => i.id === row.service).description : "")
 
@@ -1520,14 +1533,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
   if (row.product) {
     console.log("Product Detected")
     row.unit = product.unit ? product.unit : products.value.find(i => i.id === row.product).unit
-    row.inputPrice = (product.sellingPrice ? product.sellingPrice : products.value.find(i => i.id === row.product).sellingPrice)
+    row.inputPrice = (product.selling_price ? product.selling_price : products.value.find(i => i.id === row.product).selling_price)
     //row.price = Number((row.originalPrice * (1 + itemInfo.value.customSurchargePercentage /100)).toFixed(2))
     row.description = product.description ? product.description : (products.value.find(i => i.id === row.product) ? products.value.find(i => i.id === row.product).description : "")
 
     if (['13b UStG', '19 UStG'].includes(itemInfo.value.taxType)) {
       row.taxPercent = 0
     } else {
-      row.taxPercent = product.taxPercentage ? product.taxPercentage : products.value.find(i => i.id === row.product).taxPercentage
+      row.taxPercent = product.tax_percentage ? product.tax_percentage : products.value.find(i => i.id === row.product).tax_percentage
     }
   }
 

From 76941abbf28a66997550a20a5f4c0adbf3741a68 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 11:36:12 +0100
Subject: [PATCH 03/22] BETA for new DB

---
 components/displayOpenBalances.vue | 2 +-
 pages/createDocument/index.vue     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/displayOpenBalances.vue b/components/displayOpenBalances.vue
index e0e6a11..c19dfdf 100644
--- a/components/displayOpenBalances.vue
+++ b/components/displayOpenBalances.vue
@@ -22,7 +22,7 @@ const setupPage = async () => {
 
   finalizedDocuments = finalizedDocuments.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, documents).toFixed(2))
 
-  finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === x.id))
+  finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === x.id))
 
 
 
diff --git a/pages/createDocument/index.vue b/pages/createDocument/index.vue
index 81fb7b7..65c0e77 100644
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -101,16 +101,16 @@
                       {{row.state}}
                   </span>-->
             <span
-                v-if="row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
+                v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
                 class="text-primary-500"
             >
           {{row.state}}
       </span>
             <span
-                v-else-if="row.state === 'Gebucht' && items.find(i => i.linkedDocument && i.linkedDocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
+                v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
                 class="text-cyan-500"
             >
-          Storniert mit {{items.find(i => i.linkedDocument && i.linkedDocument.id === row.id).documentNumber}}
+          Storniert mit {{items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber}}
       </span>
             <span
                 v-else-if="row.state === 'Gebucht'"

From 8b70b77b853c89f47b9534ef4edb0bc3a6fd72e5 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 11:41:21 +0100
Subject: [PATCH 04/22] Added Buttons for all connected Documents

---
 pages/createDocument/show/[id].vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/pages/createDocument/show/[id].vue b/pages/createDocument/show/[id].vue
index 81ae4dc..d1a61ba 100644
--- a/pages/createDocument/show/[id].vue
+++ b/pages/createDocument/show/[id].vue
@@ -105,12 +105,21 @@ const openBankstatements = () => {
         Kunde
       </UButton>
       <UButton
-          v-if="itemInfo.linkedDocument"
-          @click="router.push(`/standardEntity/createDocument/show/${itemInfo.linkedDocument}`)"
+          v-if="itemInfo.createddocument"
+          @click="router.push(`/createDocument/show/${itemInfo.createddocument}`)"
           icon="i-heroicons-link"
           variant="outline"
       >
-        {{dataStore.documentTypesForCreation[itemInfo.linkedDocument.type].labelSingle}} - {{itemInfo.linkedDocument.documentNumber}}
+        {{dataStore.documentTypesForCreation[itemInfo.createddocument.type].labelSingle}} - {{itemInfo.createddocument.documentNumber}}
+      </UButton>
+      <UButton
+          v-for="item in itemInfo.createddocuments"
+          v-if="itemInfo.createddocuments"
+          @click="router.push(`/createDocument/show/${item.id}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        {{dataStore.documentTypesForCreation[item.type].labelSingle}} - {{item.documentNumber}}
       </UButton>
       <UButton
           v-if="itemInfo.statementallocations?.length > 0"

From 84c88ef69e24d90e498925adadd57a5455b0498e Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 12:07:00 +0100
Subject: [PATCH 05/22] Added Buttons for all connected Documents

---
 pages/banking/statements/[mode]/[[id]].vue | 16 ++++++++--------
 pages/createDocument/show/[id].vue         |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/pages/banking/statements/[mode]/[[id]].vue b/pages/banking/statements/[mode]/[[id]].vue
index 5f90098..97943e8 100644
--- a/pages/banking/statements/[mode]/[[id]].vue
+++ b/pages/banking/statements/[mode]/[[id]].vue
@@ -509,11 +509,11 @@ const archiveStatement = async () => {
         </UCard>
         <UCard
             class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.ii_id)"
+            v-for="item in itemInfo.statementallocations.filter(i => i.incominginvoice)"
         >
           <template #header>
             <div class="flex flex-row justify-between">
-              <span>{{item.ii_id.reference}} - {{vendors.find(i => i.id === item.ii_id.vendor).name}}</span>
+              <span>{{item.incominginvoice.reference}} - {{vendors.find(i => i.id === item.incominginvoice.vendor).name}}</span>
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
@@ -529,11 +529,11 @@ const archiveStatement = async () => {
         </UCard>
         <UCard
             class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.cd_id)"
+            v-for="item in itemInfo.statementallocations.filter(i => i.createddocument)"
         >
           <template #header>
             <div class="flex flex-row justify-between">
-              <span v-if="customers.find(i => i.id === item.cd_id.customer)">{{item.cd_id.documentNumber}} - {{customers.find(i => i.id === item.cd_id.customer).name}}</span>
+              <span v-if="customers.find(i => i.id === item.createddocument.customer)">{{item.createddocument.documentNumber}} - {{customers.find(i => i.id === item.createddocument.customer).name}}</span>
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
@@ -810,8 +810,8 @@ const archiveStatement = async () => {
               icon="i-heroicons-check"
               variant="outline"
               class="mr-3"
-              v-if="!itemInfo.statementallocations.find(i => i.cd_id === document.id)"
-              @click="saveAllocation({cd_id: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
+              v-if="!itemInfo.statementallocations.find(i => i.createddocument === document.id)"
+              @click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
           />
 
           <UButton
@@ -835,8 +835,8 @@ const archiveStatement = async () => {
               icon="i-heroicons-check"
               variant="outline"
               class="mr-3"
-              v-if="!itemInfo.statementallocations.find(i => i.ii_id === item.id)"
-              @click="saveAllocation({ii_id: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
+              v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
+              @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
           />
           <UButton
               variant="outline"
diff --git a/pages/createDocument/show/[id].vue b/pages/createDocument/show/[id].vue
index d1a61ba..3d91df4 100644
--- a/pages/createDocument/show/[id].vue
+++ b/pages/createDocument/show/[id].vue
@@ -39,9 +39,9 @@ const openEmail = () => {
 
 const openBankstatements = () => {
   if(itemInfo.value.statementallocations.length > 1) {
-    navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bs_id))}`)
+    navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bankstatement))}`)
   } else {
-    navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bs_id}`)
+    navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bankstatement}`)
   }
 }
 </script>

From 7ce5616e65bec8b8b8a6abfc93eeec7b6390cc85 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 9 Dec 2025 16:00:01 +0100
Subject: [PATCH 06/22] Fix for Copying

---
 components/copyCreatedDocumentModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/copyCreatedDocumentModal.vue b/components/copyCreatedDocumentModal.vue
index 1c3038b..56fe961 100644
--- a/components/copyCreatedDocumentModal.vue
+++ b/components/copyCreatedDocumentModal.vue
@@ -60,7 +60,7 @@ const mappings = ref({
 })
 
 const startImport = () => {
-  router.push(`/createDocument/edit/?linkedDocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
+  router.push(`/createDocument/edit/?createddocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
   modal.close()
 }
 </script>

From ac2ed79e1008b00b6e8a8c880a8dcab881d27fa4 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 10 Dec 2025 08:21:59 +0100
Subject: [PATCH 07/22] Fix for Copying

---
 pages/createDocument/edit/[[id]].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 4e761ac..6d5e8aa 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -1809,7 +1809,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 >
                   <template #description>
                     Kundennr: {{ customers.find(i => i.id === itemInfo.customer).customerNumber }}<br>
-                    Typ: {{ customers.find(i => i.id === itemInfo.customer).isCompany ? 'Firma' : 'Privat' }}<br>
+                    Typ: {{ customers.find(i => i.id === itemInfo.customer).is_company ? 'Firma' : 'Privat' }}<br>
                     Notizen: <span class="truncate">{{ customers.find(i => i.id === itemInfo.customer).notes }}</span>
                   </template>
 
@@ -1818,7 +1818,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               </UFormGroup>
               <UFormGroup
                   label="Ansprechpartner:"
-                  v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
+                  v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).is_company : false "
               >
                 <InputGroup>
                   <USelectMenu

From eeceb4a8f6477e8550e698b4837968de563f292f Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 10 Dec 2025 08:39:51 +0100
Subject: [PATCH 08/22] Fix for Copying

---
 composables/useEntities.ts           | 4 ++--
 pages/createDocument/edit/[[id]].vue | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/composables/useEntities.ts b/composables/useEntities.ts
index fbf0459..edbca08 100644
--- a/composables/useEntities.ts
+++ b/composables/useEntities.ts
@@ -134,11 +134,11 @@ export const useEntities = (
     const selectSingle = async (
         idToEq: string | number,
         select: string = "*",
-        withInformation: boolean = false
+        withInformation: boolean = true
     ) => {
         if (!idToEq) return null
 
-        const res = await useNuxtApp().$api(withInformation ? `/api/resource/${relation}/${idToEq}` : `/api/resource/${relation}/${idToEq}`, {
+        const res = await useNuxtApp().$api(withInformation ? `/api/resource/${relation}/${idToEq}` : `/api/resource/${relation}/${idToEq}/true`, {
             method: "GET",
             params: { select }
         })
diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 6d5e8aa..1af395e 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -109,7 +109,7 @@ const setupPage = async () => {
   if (route.params) {
     if (route.params.id) {
       console.log(route.params)
-      itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id)
+      itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,'',false)
       await setContactPersonData()
       checkCompatibilityWithInputPrice()
     }
@@ -1597,7 +1597,6 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     <UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
       <template #item="{item}">
         <div v-if="item.label === 'Editor'">
-
           <UAlert
               class="my-5"
               title="Vorhandene Probleme und Informationen:"
@@ -1809,7 +1808,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 >
                   <template #description>
                     Kundennr: {{ customers.find(i => i.id === itemInfo.customer).customerNumber }}<br>
-                    Typ: {{ customers.find(i => i.id === itemInfo.customer).is_company ? 'Firma' : 'Privat' }}<br>
+                    Typ: {{ customers.find(i => i.id === itemInfo.customer).isCompany ? 'Firma' : 'Privat' }}<br>
                     Notizen: <span class="truncate">{{ customers.find(i => i.id === itemInfo.customer).notes }}</span>
                   </template>
 
@@ -1818,7 +1817,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               </UFormGroup>
               <UFormGroup
                   label="Ansprechpartner:"
-                  v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).is_company : false "
+                  v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
               >
                 <InputGroup>
                   <USelectMenu

From 1e0f18c854b4bc98ae83e926d768ed8d2cef6456 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 10 Dec 2025 12:23:41 +0100
Subject: [PATCH 09/22] Fix for Copying

---
 pages/createDocument/edit/[[id]].vue          | 6 +++---
 pages/standardEntity/[type]/[mode]/[[id]].vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 1af395e..d87dfb4 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -276,9 +276,9 @@ const setupPage = async () => {
 
     }
 
-    if (route.query.linkedDocument) {
-      itemInfo.value.linkedDocument = route.query.linkedDocument
-      let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.linkedDocument)
+    if (route.query.createddocument) {
+      itemInfo.value.createddocument = route.query.createddocument
+      let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.createddocument,'',true)
 
       if (route.query.optionsToImport) {
         //Import only true
diff --git a/pages/standardEntity/[type]/[mode]/[[id]].vue b/pages/standardEntity/[type]/[mode]/[[id]].vue
index 450b5cd..0bf2688 100644
--- a/pages/standardEntity/[type]/[mode]/[[id]].vue
+++ b/pages/standardEntity/[type]/[mode]/[[id]].vue
@@ -33,7 +33,7 @@ const setupPage = async (sort_column = null, sort_direction = null) => {
     item.value = await useEntities(type).selectSingle(route.params.id, "*", true)
   } else if (mode.value === "edit") {
     //Load Data for Edit
-    item.value = JSON.stringify(await useEntities(type).selectSingle(route.params.id))
+    item.value = JSON.stringify(await useEntities(type).selectSingle(route.params.id,"*",false))
 
     console.log(item.value)
 

From 3328279581d5239eb13a3aaeebcac4cc023565f7 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 10 Dec 2025 12:40:34 +0100
Subject: [PATCH 10/22] Fix for Copying

---
 pages/createDocument/edit/[[id]].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index d87dfb4..f5cec09 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -278,7 +278,7 @@ const setupPage = async () => {
 
     if (route.query.createddocument) {
       itemInfo.value.createddocument = route.query.createddocument
-      let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.createddocument,'',true)
+      let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.createddocument,'',false)
 
       if (route.query.optionsToImport) {
         //Import only true

From d916ed471bae137db228d6938fcc5159694444a1 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 10 Dec 2025 14:49:40 +0100
Subject: [PATCH 11/22] Fix for Invoice Gen

---
 pages/createDocument/edit/[[id]].vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index f5cec09..57fc5ed 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -1428,7 +1428,8 @@ const closeDocument = async () => {
     fileData.folder = folders.find(i => i.function === mappedType && i.year === Number(dayjs().format("YYYY"))).id
 
     const tags = await useEntities("filetags").select()
-    fileData.type = tags.find(i => i.createddocumenttype === mappedType).id
+    console.log(tags)
+    fileData.type = tags.find(i => i.createdDocumentType === mappedType).id
 
     function dataURLtoFile(dataurl, filename) {
       var arr = dataurl.split(","),

From 9ddda1a933bd92aa0eef021cd3c672c139484133 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 13 Dec 2025 14:00:14 +0100
Subject: [PATCH 12/22] Fixed linkedDocuments Agrar

---
 pages/createDocument/edit/[[id]].vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 57fc5ed..23aa8d1 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -141,9 +141,9 @@ const setupPage = async () => {
 
         //TODO: Implement Checking for Same Customer, Contact and Project
 
-        itemInfo.value.customer = linkedDocuments[0].customer
-        itemInfo.value.project = linkedDocuments[0].project
-        itemInfo.value.contact = linkedDocuments[0].contact
+        itemInfo.value.customer = linkedDocuments[0].customer ? linkedDocuments[0].customer.id : null
+        itemInfo.value.project = linkedDocuments[0].project ? linkedDocuments[0].project.id : null
+        itemInfo.value.contact = linkedDocuments[0].contact ? linkedDocuments[0].contact.id : null
 
         setCustomerData()
 

From 780b899d42fe06b4b8a2055fceded98f65df8a01 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sun, 14 Dec 2025 17:15:24 +0100
Subject: [PATCH 13/22] Fixed Times

---
 composables/useFunctions.js        |  15 +-
 composables/useStaffTime.ts        | 203 ++++++++++++++++++--------
 pages/staff/time/[id]/evaluate.vue | 201 ++++++++++++++++----------
 pages/staff/time/index.vue         | 220 +++++++++++++----------------
 4 files changed, 386 insertions(+), 253 deletions(-)

diff --git a/composables/useFunctions.js b/composables/useFunctions.js
index a56ac3c..e475b50 100644
--- a/composables/useFunctions.js
+++ b/composables/useFunctions.js
@@ -7,7 +7,20 @@ export const useFunctions = () => {
     const supabase = useSupabaseClient()
 
     const getWorkingTimesEvaluationData = async (user_id, startDate, endDate) => {
-        return (await useNuxtApp().$api(`/api/functions/timeevaluation/${user_id}?start_date=${startDate}&end_date=${endDate}`))
+        // Der neue Endpunkt ist /staff/time/evaluation und erwartet die Benutzer-ID als targetUserId Query-Parameter.
+
+        // Wir bauen den Query-String zusammen.
+        const queryParams = new URLSearchParams({
+            from: startDate,
+            to: endDate,
+            targetUserId: user_id, // Die ID wird als targetUserId übergeben
+        });
+
+        // Der neue API-Pfad verwendet nur noch den Basis-Endpunkt.
+        const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
+
+        // Annahme: useNuxtApp().$api führt den GET-Request aus und liefert die Daten zurück.
+        return (await useNuxtApp().$api(url));
     }
 
     const useNextNumber = async (numberRange) => {
diff --git a/composables/useStaffTime.ts b/composables/useStaffTime.ts
index 4db7d36..b19145d 100644
--- a/composables/useStaffTime.ts
+++ b/composables/useStaffTime.ts
@@ -1,77 +1,160 @@
-interface StaffTimeEntry {
-    id: string
-    started_at: string
-    stopped_at?: string | null
-    duration_minutes?: number | null
-    type: string
-    description?: string | null
-    created_at?: string
-}
+import { defineStore } from 'pinia'
+import { useAuthStore } from '~/stores/auth'
 
-export function useStaffTime() {
-    const { $api } = useNuxtApp()
+export const useStaffTime = () => {
+    const { $api, $dayjs } = useNuxtApp()
     const auth = useAuthStore()
 
+    /**
+     * Lädt die Zeitspannen (Spans) für die Liste.
+     * Nutzt jetzt GET /api/staff/time/spans
+     */
+    const list = async (filter?: { user_id?: string, from?: string, to?: string }) => {
+        // Standard: Aktueller Monat
+        const from = filter?.from || $dayjs().startOf('month').format('YYYY-MM-DD')
+        const to = filter?.to || $dayjs().endOf('month').format('YYYY-MM-DD')
 
+        // Ziel-User: Entweder aus Filter (Admin-Ansicht) oder eigener User
+        const targetUserId = filter?.user_id || auth.user.id
 
-    async function list(params?: { user_id?: string }) {
-        const query = new URLSearchParams()
-        if (params?.user_id) query.append("user_id", params.user_id)
-
-        return await $api(`/api/staff/time${query.toString() ? `?${query}` : ''}`, { method: 'GET' })
-    }
-
-    async function start(description?: string) {
-        return await $api<StaffTimeEntry>('/api/staff/time', {
-            method: 'POST',
-            body: {
-                started_at: new Date().toISOString(),
-                type: 'work',
-                description,
-            },
+        const params = new URLSearchParams({
+            from,
+            to,
+            // Der Endpoint erwartet targetUserId, wenn man Daten eines anderen Users will
+            targetUserId
         })
+
+        try {
+            // 💡 UPDATE: Prefix /api hinzugefügt
+            const spans = await $api(`/api/staff/time/spans?${params.toString()}`)
+
+            return (spans || []).map((span: any) => {
+                const start = $dayjs(span.startedAt)
+                // Wenn endedAt null ist, läuft die Zeit noch -> Dauer bis "jetzt" berechnen für Anzeige
+                const end = span.endedAt ? $dayjs(span.endedAt) : $dayjs()
+                const duration = end.diff(start, 'minute')
+
+                return {
+                    // ID: Wir nehmen die erste Event-ID (Start-Event) als Referenz für Aktionen
+                    id: span.sourceEventIds && span.sourceEventIds.length > 0 ? span.sourceEventIds[0] : null,
+
+                    // Mapping Backend-Status -> Frontend-State
+                    state: span.status,
+
+                    // Zeitstempel
+                    started_at: span.startedAt,
+                    stopped_at: span.endedAt,
+
+                    duration_minutes: duration,
+
+                    // Da der Endpoint nur die Spans zurückgibt, setzen wir die UserID
+                    // auf den User, den wir angefragt haben.
+                    user_id: targetUserId,
+
+                    type: span.type,
+
+                    // Payload/Description falls vorhanden
+                    description: span.payload?.description || ''
+                }
+            }).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf()) // Sortierung: Neueste oben
+
+        } catch (error) {
+            console.error("Fehler beim Laden der Zeiten:", error)
+            return []
+        }
     }
 
-    async function stop(id: string) {
-        return await $api<StaffTimeEntry>(`/api/staff/time/${id}/stop`, {
-            method: 'PUT',
-            body: { stopped_at: new Date().toISOString() },
-        })
+    /**
+     * Startet einen neuen Zeiteintrag.
+     * POST /api/staff/time/event
+     */
+    const start = async (description = "Arbeitszeit") => {
+        try {
+            // 💡 UPDATE: Prefix /api hinzugefügt
+            await $api('/api/staff/time/event', {
+                method: 'POST',
+                body: {
+                    eventtype: 'work_start',
+                    eventtime: new Date().toISOString(),
+                    payload: { description }
+                }
+            })
+        } catch (error) {
+            console.error("Fehler beim Starten:", error)
+            throw error
+        }
     }
 
-    async function submit(id: string) {
-        return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, {
-            method: 'PUT',
-            body: { state: 'submitted' },
-        })
+    /**
+     * Stoppt die aktuelle Zeit.
+     * POST /api/staff/time/event
+     */
+    const stop = async (entryId?: string) => {
+        try {
+            // 💡 UPDATE: Prefix /api hinzugefügt
+            await $api('/api/staff/time/event', {
+                method: 'POST',
+                body: {
+                    eventtype: 'work_end',
+                    eventtime: new Date().toISOString()
+                }
+            })
+        } catch (error) {
+            console.error("Fehler beim Stoppen:", error)
+            throw error
+        }
     }
 
-    async function approve(id: string) {
-        const auth = useAuthStore()
-        const now = useNuxtApp().$dayjs().toISOString()
-
-        return await $api(`/api/staff/time/${id}`, {
-            method: 'PUT',
-            body: {
-                state: 'approved',
-                //@ts-ignore
-                approved_by: auth.user.id,
-                approved_at: now,
-            },
-        })
+    /**
+     * Reicht einen Eintrag ein.
+     * POST /api/staff/time/submit
+     */
+    const submit = async (entryId: string) => {
+        if (!entryId) return
+        try {
+            // 💡 UPDATE: Prefix /api hinzugefügt
+            await $api('/api/staff/time/submit', {
+                method: 'POST',
+                body: {
+                    eventIds: [entryId]
+                }
+            })
+        } catch (error) {
+            console.error("Fehler beim Einreichen:", error)
+            throw error
+        }
     }
 
-    async function get(id: string) {
-        return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, { method: 'GET' })
+    /**
+     * Genehmigt einen Eintrag.
+     * POST /api/staff/time/approve
+     */
+    const approve = async (entry: any) => {
+        if (!entry || !entry.id || !entry.user_id) {
+            console.error("Ungültiger Eintrag für Genehmigung (ID oder UserID fehlt)", entry)
+            return
+        }
+
+        try {
+            // 💡 UPDATE: Prefix /api hinzugefügt
+            await $api('/api/staff/time/approve', {
+                method: 'POST',
+                body: {
+                    eventIds: [entry.id],
+                    employeeUserId: entry.user_id
+                }
+            })
+        } catch (error) {
+            console.error("Fehler beim Genehmigen:", error)
+            throw error
+        }
     }
 
-    async function create(data: Record<string, any>) {
-        return await $api('/api/staff/time', { method: 'POST', body: data })
+    return {
+        list,
+        start,
+        stop,
+        submit,
+        approve
     }
-
-    async function update(id: string, data: Record<string, any>) {
-        return await $api(`/api/staff/time/${id}`, { method: 'PUT', body: data })
-    }
-
-    return { list, start, stop,submit,approve, get, create, update }
-}
+}
\ No newline at end of file
diff --git a/pages/staff/time/[id]/evaluate.vue b/pages/staff/time/[id]/evaluate.vue
index 38ced35..8f75226 100644
--- a/pages/staff/time/[id]/evaluate.vue
+++ b/pages/staff/time/[id]/evaluate.vue
@@ -4,10 +4,25 @@ const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
 const toast = useToast()
+
 // 🔹 State
-const workingtimes = ref([])
-const absencerequests = ref([])
-const workingTimeInfo = ref(null)
+const workingTimeInfo = ref<{
+  userId: string;
+  spans: any[]; // Neue Struktur für die Detailansicht/Tabelle
+  summary: {
+    sumWorkingMinutesSubmitted: number;
+    sumWorkingMinutesApproved: number;
+    sumWorkingMinutesRecreationDays: number;
+    sumRecreationDays: number;
+    sumWorkingMinutesVacationDays: number;
+    sumVacationDays: number;
+    sumWorkingMinutesSickDays: number;
+    sumSickDays: number;
+    timeSpanWorkingMinutes: number;
+    saldoApproved: number;
+    saldoSubmitted: number;
+  } | null; // Neue Struktur für die Zusammenfassung
+} | null>(null)
 
 const platformIsNative = ref(useCapacitor().getIsNative())
 
@@ -20,12 +35,38 @@ const showDocument = ref(false)
 const uri = ref("")
 const itemInfo = ref({})
 
+const profile = ref(null)
+
+// 💡 Die ID des Benutzers, dessen Daten wir abrufen (aus der Route)
+const evaluatedUserId = computed(() => route.params.id as string)
+
+/**
+ * Konvertiert Minuten in das Format HH:MM h
+ */
 function formatMinutesToHHMM(minutes = 0) {
   const h = Math.floor(minutes / 60)
   const m = Math.floor(minutes % 60)
   return `${h}:${String(m).padStart(2, "0")} h`
 }
 
+/**
+ * Berechnet die Dauer zwischen startedAt und endedAt in Minuten.
+ */
+function calculateDurationMinutes(start: string, end: string): number {
+  const startTime = $dayjs(start);
+  const endTime = $dayjs(end);
+  return endTime.diff(startTime, 'minute');
+}
+
+/**
+ * Formatiert die Dauer (in Minuten) in HH:MM h
+ */
+function formatSpanDuration(start: string, end: string): string {
+  const minutes = calculateDurationMinutes(start, end);
+  return formatMinutesToHHMM(minutes);
+}
+
+
 // 📅 Zeitraumumschaltung
 function changeRange() {
   const rangeMap = {
@@ -56,41 +97,67 @@ function changeRange() {
   loadWorkingTimeInfo()
 }
 
-const profile = ref(null)
-
-// 📊 Daten laden
+// 📊 Daten laden (Initialisierung)
 async function setupPage() {
   await changeRange()
 
-  profile.value = (await useNuxtApp().$api("/api/tenant/profiles")).data.find(i => i.user_id === route.params.id)
+  // Lade das Profil des Benutzers, der ausgewertet wird (route.params.id)
+  try {
+    const response = await useNuxtApp().$api(`/api/tenant/profiles`);
+    // Findet das Profil des Benutzers, dessen ID in der Route steht
+    profile.value = response.data.find(i => i.user_id === evaluatedUserId.value);
+  } catch (error) {
+    console.error("Fehler beim Laden des Profils:", error);
+  }
 
   console.log(profile.value)
   setPageLayout(platformIsNative.value ? 'mobile' : 'default')
-
 }
 
+// 💡 ANGEPASST: Ruft den neuen Endpunkt ab und speichert das gesamte Payload-Objekt
 async function loadWorkingTimeInfo() {
-  workingTimeInfo.value = await useFunctions().getWorkingTimesEvaluationData(
-      route.params.id,
-      selectedStartDay.value,
-      selectedEndDay.value
-  )
+
+  // Erstellt Query-Parameter für den neuen Backend-Endpunkt
+  const queryParams = new URLSearchParams({
+    from: selectedStartDay.value,
+    to: selectedEndDay.value,
+    targetUserId: evaluatedUserId.value,
+  });
+
+  const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
+
+  // Führt den GET-Request zum neuen Endpunkt aus und speichert das gesamte Payload-Objekt { userId, spans, summary }
+  const data = await useNuxtApp().$api(url);
+
+  workingTimeInfo.value = data;
+
   openTab.value = 0
 }
 
 // 📄 PDF generieren
+// Frontend (index.vue)
 async function generateDocument() {
-  const path = (await useEntities("letterheads").select("*"))[0].path // TODO SELECT
+  if (!workingTimeInfo.value || !workingTimeInfo.value.summary) return;
+
+  const path = (await useEntities("letterheads").select("*"))[0].path
 
   uri.value = await useFunctions().useCreatePDF({
     full_name: profile.value.full_name,
-    employee_number: profile.value.employee_number ? profile.value.employee_number : "-",
-    ...workingTimeInfo.value}, path, "timesheet")
+    employee_number: profile.value.employee_number || "-",
 
+    // Wir übergeben das summary-Objekt flach (für Header-Daten)
+    ...workingTimeInfo.value.summary,
+
+    // UND wir müssen die Spans explizit übergeben, damit die Tabelle generiert werden kann
+    spans: workingTimeInfo.value.spans
+  }, path, "timesheet")
 
   showDocument.value = true
 }
+
 const fileSaved = ref(false)
+
+// 💾 Datei speichern
 async function saveFile() {
   try {
     let fileData = {
@@ -107,9 +174,6 @@ async function saveFile() {
   } catch (error) {
     toast.add({title:"Fehler beim Speichern der Auswertung", color: "rose"})
   }
-
-
-
 }
 
 async function onTabChange(index: number) {
@@ -118,7 +182,6 @@ async function onTabChange(index: number) {
 
 // Initialisierung
 await setupPage()
-changeRange()
 </script>
 
 <template>
@@ -206,22 +269,24 @@ changeRange()
       >
         <template #item="{ item }">
           <div v-if="item.label === 'Information'">
-            <UCard v-if="workingTimeInfo" class="my-5">
+
+            <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5">
               <template #header>
                 <h3 class="text-base font-semibold">Zusammenfassung</h3>
               </template>
               <div class="grid grid-cols-2 gap-3 text-sm">
-                <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesEingereicht) }}</b></p>
-                <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesApproved) }}</b></p>
-                <p>Feiertagsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesRecreationDays) }}</b> / {{ workingTimeInfo.sumRecreationDays }} Tage</p>
-                <p>Urlaubs-/Berufsschulausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesVacationDays) }}</b> / {{ workingTimeInfo.sumVacationDays }} Tage</p>
-                <p>Krankheitsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesSickDays) }}</b> / {{ workingTimeInfo.sumSickDays }} Tage</p>
-                <p>Soll-Stunden: <b>{{ formatMinutesToHHMM(workingTimeInfo.timeSpanWorkingMinutes) }}</b></p>
+                <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
+                <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
+                <p>Feiertagsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b> / {{ workingTimeInfo.summary.sumRecreationDays }} Tage</p>
+                <p>Urlaubs-/Berufsschulausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b> / {{ workingTimeInfo.summary.sumVacationDays }} Tage</p>
+                <p>Krankheitsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b> / {{ workingTimeInfo.summary.sumSickDays }} Tage</p>
+                <p>Soll-Stunden: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
+
                 <p class="col-span-2">
-                  Inoffizielles Saldo: <b>{{ (workingTimeInfo.saldoInOfficial >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldoInOfficial)) }}</b>
+                  Inoffizielles Saldo: <b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
                 </p>
                 <p class="col-span-2">
-                  Saldo: <b>{{ (workingTimeInfo.saldo >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldo)) }}</b>
+                  Saldo: <b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
                 </p>
               </div>
             </UCard>
@@ -229,33 +294,39 @@ changeRange()
             <UDashboardPanel>
               <UTable
                   v-if="workingTimeInfo"
-                  :rows="workingTimeInfo.times"
+                  :rows="workingTimeInfo.spans"
                   :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
                   :columns="[
-                { key: 'state', label: 'Status' },
-                { key: 'start', label: 'Start' },
-                { key: 'end', label: 'Ende' },
+                { key: 'status', label: 'Status' },
+                { key: 'startedAt', label: 'Start' },
+                { key: 'endedAt', label: 'Ende' },
                 { key: 'duration', label: 'Dauer' },
-                { key: 'description', label: 'Beschreibung' }
+                { key: 'type', label: 'Typ' }
               ]"
-                  @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
+                  @select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)"
               >
-                <template #state-data="{row}">
-                  <span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
-                  <span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
-                  <span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
+                <template #status-data="{row}">
+                  <span v-if="row.status === 'approved'" class="text-primary-500">Genehmigt</span>
+                  <span v-else-if="row.status === 'submitted'" class="text-cyan-500">Eingereicht</span>
+                  <span v-else-if="row.status === 'factual'" class="text-gray-500">Faktisch</span>
+                  <span v-else-if="row.status === 'draft'" class="text-red-500">Entwurf</span>
+                  <span v-else>{{ row.status }}</span>
                 </template>
 
-                <template #start-data="{ row }">
-                  {{ $dayjs(row.started_at).format('HH:mm DD.MM.YY') }} Uhr
+                <template #startedAt-data="{ row }">
+                  {{ $dayjs(row.startedAt).format('HH:mm DD.MM.YY') }} Uhr
                 </template>
 
-                <template #end-data="{ row }">
-                  {{ $dayjs(row.stopped_at).format('HH:mm DD.MM.YY') }} Uhr
+                <template #endedAt-data="{ row }">
+                  {{ $dayjs(row.endedAt).format('HH:mm DD.MM.YY') }} Uhr
                 </template>
 
                 <template #duration-data="{ row }">
-                  {{ useFormatDuration(row.duration_minutes) }}
+                  {{ formatSpanDuration(row.startedAt, row.endedAt) }}
+                </template>
+
+                <template #type-data="{ row }">
+                  {{ row.type.charAt(0).toUpperCase() + row.type.slice(1).replace('_', ' ') }}
                 </template>
               </UTable>
             </UDashboardPanel>
@@ -273,12 +344,8 @@ changeRange()
     </UDashboardPanelContent>
   </template>
 
-  <!-- ====================== -->
-  <!-- 📱 MOBILE ANSICHT -->
-  <!-- ====================== -->
   <template v-else>
 
-    <!-- 🔙 Navigation -->
     <UDashboardNavbar title="Auswertung">
       <template #toggle><div></div></template>
       <template #left>
@@ -290,9 +357,7 @@ changeRange()
       </template>
     </UDashboardNavbar>
 
-    <!-- 📌 Mobile Zeitraumwahl -->
     <div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900">
-      <!-- Predefined Ranges -->
       <USelectMenu
           v-model="selectedPresetRange"
           :options="[
@@ -309,7 +374,6 @@ changeRange()
           class="w-full"
       />
 
-      <!-- Start/End Datum -->
       <div class="grid grid-cols-2 gap-3">
         <div>
           <p class="text-xs text-gray-500 mb-1">Start</p>
@@ -341,7 +405,6 @@ changeRange()
       </div>
     </div>
 
-    <!-- 📑 Mobile Tabs -->
     <UTabs
         :items="[{ label: 'Information' }, { label: 'Bericht' }]"
         v-model="openTab"
@@ -350,58 +413,50 @@ changeRange()
     >
       <template #item="{ item }">
 
-        <!-- ====================== -->
-        <!-- TAB 1 — INFORMATION -->
-        <!-- ====================== -->
         <div v-if="item.label === 'Information'" class="space-y-4">
 
-          <!-- Summary Card -->
-          <UCard v-if="workingTimeInfo" class="mt-3">
+          <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3">
             <template #header>
               <h3 class="text-base font-semibold">Zusammenfassung</h3>
             </template>
 
             <div class="space-y-2 text-sm">
-              <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesEingereicht) }}</b></p>
-              <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesApproved) }}</b></p>
+              <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
+              <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
 
               <p>
                 Feiertagsausgleich:
-                <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesRecreationDays) }}</b>
-                / {{ workingTimeInfo.sumRecreationDays }} Tage
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b>
+                / {{ workingTimeInfo.summary.sumRecreationDays }} Tage
               </p>
 
               <p>
                 Urlaubs-/Berufsschule:
-                <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesVacationDays) }}</b>
-                / {{ workingTimeInfo.sumVacationDays }} Tage
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b>
+                / {{ workingTimeInfo.summary.sumVacationDays }} Tage
               </p>
 
               <p>
                 Krankheitsausgleich:
-                <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesSickDays) }}</b>
-                / {{ workingTimeInfo.sumSickDays }} Tage
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b>
+                / {{ workingTimeInfo.summary.sumSickDays }} Tage
               </p>
 
-              <p>Soll: <b>{{ formatMinutesToHHMM(workingTimeInfo.timeSpanWorkingMinutes) }}</b></p>
+              <p>Soll: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
 
               <p>
                 Inoffizielles Saldo:
-                <b>{{ (workingTimeInfo.saldoInOfficial >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldoInOfficial)) }}</b>
+                <b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
               </p>
 
               <p>
                 Saldo:
-                <b>{{ (workingTimeInfo.saldo >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldo)) }}</b>
+                <b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
               </p>
             </div>
           </UCard>
-
         </div>
 
-        <!-- ====================== -->
-        <!-- TAB 2 — BERICHT -->
-        <!-- ====================== -->
         <div v-else-if="item.label === 'Bericht'">
           <UButton
               v-if="uri && !fileSaved"
@@ -424,4 +479,4 @@ changeRange()
   </template>
 
 
-</template>
+</template>
\ No newline at end of file
diff --git a/pages/staff/time/index.vue b/pages/staff/time/index.vue
index ac4a1e3..c6c9d17 100644
--- a/pages/staff/time/index.vue
+++ b/pages/staff/time/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { useStaffTime } from '~/composables/useStaffTime'
 import { useAuthStore } from '~/stores/auth'
 import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
@@ -12,20 +12,30 @@ const auth = useAuthStore()
 const router = useRouter()
 // MOBILE DETECTION
 const platformIsNative = useCapacitor().getIsNative()
-// LIST + ACTIVE
-const entries = ref([])
-const active = computed(() => entries.value.find(e => !e.stopped_at && e.user_id === auth.user.id))
 
+// STATE
 const loading = ref(false)
 const showModal = ref(false)
 const editEntry = ref(null)
 
-// 👥 Nutzer-Filter (nur für Berechtigte)
+// 👥 Nutzer-Filter
 const users = ref([])
-const selectedUser = ref(platformIsNative ? auth.user.id : null)
-
+// WICHTIG: Standardmäßig IMMER den aktuellen User wählen (kein null mehr)
+const selectedUser = ref(auth.user.id)
 const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
 
+// LIST + ACTIVE
+const entries = ref([])
+
+// Active berechnet sich jetzt aus den geladenen Einträgen.
+// Da wir immer nur EINEN User laden, ist ein laufender Eintrag hier
+// automatisch der aktive Eintrag des angezeigten Users.
+const active = computed(() => entries.value.find(e => !e.stopped_at))
+
+// Prüft, ob wir gerade das eigene Profil ansehen (für Start/Stop Buttons)
+const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
+
+
 const typeLabel = {
   work: "Arbeitszeit",
   vacation: "Urlaub",
@@ -45,21 +55,23 @@ const typeColor = {
 
 async function loadUsers() {
   if (!canViewAll.value) return
-  // Beispiel: User aus Supabase holen
   const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
   users.value = res
 }
 
-
-// LOAD ENTRIES (only own entries on mobile)
+// LOAD ENTRIES (Erzwingt jetzt immer eine User-ID)
 async function load() {
-  entries.value = await list(
-      canViewAll.value && selectedUser.value ? { user_id: selectedUser.value } : undefined
-  )
+  if (!selectedUser.value) return
 
+  entries.value = await list({
+    user_id: selectedUser.value // 👈 Hier wird der Filter erzwungen
+  })
 }
 
 async function handleStart() {
+  // Sicherheitshalber: Starten nur erlauben, wenn man sich selbst ansieht
+  if (!isViewingSelf.value) return
+
   loading.value = true
   await start("Arbeitszeit gestartet")
   await load()
@@ -68,73 +80,93 @@ async function handleStart() {
 
 async function handleStop() {
   if (!active.value) return
+  // Stoppen darf man ggf. auch andere (als Admin), daher hier kein isViewingSelf Check
+  // oder je nach Logik anpassen. Hier erlauben wir das Stoppen des angezeigten Timers.
+
   loading.value = true
   await stop(active.value.id)
   await load()
   loading.value = false
 }
 
-function handleEdit(entry: any) {
+function handleEdit(entry) {
   editEntry.value = entry
   showModal.value = true
 }
 
-async function handleSubmit(entry: any) {
-  await submit(entry.id)
+async function handleSubmit(entry) {
+  await submit(entry)
   await load()
 }
 
-async function handleApprove(entry: any) {
-  await approve(entry.id)
+async function handleApprove(entry) {
+  await approve(entry)
   await load()
 }
 
-
-
-onMounted(async () => {
-  await load()
-  await loadUsers()
-  setPageLayout(platformIsNative ? 'mobile' : 'default')
+// Watcher: Wenn der User im Dropdown gewechselt wird, neu laden
+watch(selectedUser, () => {
+  load()
 })
 
-
+onMounted(async () => {
+  await loadUsers()
+  await load() // Lädt initial den eingeloggten User
+  setPageLayout(platformIsNative ? 'mobile' : 'default')
+})
 </script>
 
 <template>
-  <!-- ============================= -->
-  <!-- DESKTOP VERSION -->
-  <!-- ============================= -->
   <template v-if="!platformIsNative">
     <UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
 
-    <UDashboardToolbar>
+    <!--<UDashboardToolbar>
       <template #left>
         <div class="flex items-center gap-2">
           <UIcon name="i-heroicons-clock" class="text-primary-500" />
           <span v-if="active" class="text-primary-600 font-medium">
-            Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
+            <span v-if="isViewingSelf">Läuft seit</span>
+            <span v-else>Mitarbeiter aktiv seit</span>
+            {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
+          </span>
+          <span v-else class="text-gray-500">
+             <span v-if="isViewingSelf">Keine aktive Zeit</span>
+             <span v-else>Mitarbeiter nicht aktiv</span>
           </span>
-          <span v-else class="text-gray-500">Keine aktive Zeit</span>
         </div>
       </template>
 
       <template #right>
-        <UButton
-            v-if="active"
-            color="red"
-            icon="i-heroicons-stop"
-            :loading="loading"
-            label="Stoppen"
-            @click="handleStop"
-        />
-        <UButton
-            v-else
-            color="green"
-            icon="i-heroicons-play"
-            :loading="loading"
-            label="Starten"
-            @click="handleStart"
-        />
+        <template v-if="isViewingSelf">
+          <UButton
+              v-if="active"
+              color="red"
+              icon="i-heroicons-stop"
+              :loading="loading"
+              label="Stoppen"
+              @click="handleStop"
+          />
+          <UButton
+              v-else
+              color="green"
+              icon="i-heroicons-play"
+              :loading="loading"
+              label="Starten"
+              @click="handleStart"
+          />
+        </template>
+        <template v-else-if="active && canViewAll">
+          <UButton
+              color="red"
+              variant="soft"
+              icon="i-heroicons-stop"
+              :loading="loading"
+              label="Mitarbeiter stoppen"
+              @click="handleStop"
+          />
+        </template>
+
+
         <UButton
             color="primary"
             icon="i-heroicons-plus"
@@ -142,28 +174,22 @@ onMounted(async () => {
             @click="() => { editEntry = null; showModal = true }"
         />
       </template>
-    </UDashboardToolbar>
+    </UDashboardToolbar>-->
+
     <UDashboardToolbar>
       <template #left>
-        <!-- 👥 User-Filter (nur bei Berechtigung) -->
         <div v-if="canViewAll" class="flex items-center gap-2">
           <USelectMenu
               v-model="selectedUser"
-              :options="[
-          { label: 'Alle Benutzer', value: null },
-          ...users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))
-        ]"
+              :options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
               placeholder="Benutzer auswählen"
               value-attribute="value"
               option-attribute="label"
               class="min-w-[220px]"
-              @change="load"
+              :clearable="false"
           />
 
-          <!-- 🔹 Button zur Auswertung -->
-          <UTooltip
-              :text="selectedUser ? 'Anwesenheiten des Mitarbeiters auswerten' : 'Mitarbeiter für die Auswertung auswählen'"
-          >
+          <UTooltip text="Anwesenheiten auswerten">
             <UButton
                 :disabled="!selectedUser"
                 color="gray"
@@ -188,10 +214,11 @@ onMounted(async () => {
           { key: 'started_at', label: 'Start' },
           { key: 'stopped_at', label: 'Ende' },
           { key: 'duration_minutes', label: 'Dauer' },
-          { key: 'user', label: 'Mitarbeiter' },
+          // { key: 'user', label: 'Mitarbeiter' }, // Spalte entfernt, da wir eh nur einen User sehen
           { key: 'type', label: 'Typ' },
           { key: 'description', label: 'Beschreibung' },
           ]"
+          :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
       >
         <template #state-data="{ row }">
           <span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
@@ -204,53 +231,37 @@ onMounted(async () => {
           </UBadge>
         </template>
 
-        <!-- START -->
         <template #started_at-data="{ row }">
-          <!-- Urlaub / Krankheit → nur Tag -->
           <span v-if="row.type === 'vacation' || row.type === 'sick'">
             {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
           </span>
-
-          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
           <span v-else>
             {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
           </span>
         </template>
 
-
-        <!-- ENDE -->
         <template #stopped_at-data="{ row }">
           <span v-if="!row.stopped_at" class="text-primary-500 font-medium">
             läuft...
           </span>
-
-          <!-- Urlaub / Krankheit → nur Tag -->
           <span v-else-if="row.type === 'vacation' || row.type === 'sick'">
             {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
           </span>
-
-          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
           <span v-else>
             {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
           </span>
         </template>
 
         <template #duration_minutes-data="{ row }">
-
-          <!-- Urlaub / Krankheit → Tage anzeigen -->
           <span v-if="row.type === 'vacation' || row.type === 'sick'">
-<!--            {{ useFormatDurationDays(row.startet_at, row.stopped_at) }}-->--
-          </span>
-
-          <!-- Arbeitszeit / andere → Minutenformat -->
+            </span>
           <span v-else>
             {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
           </span>
-
         </template>
 
         <template #actions-data="{ row }">
-          <UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted'">
+          <UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted' && canViewAll">
             <UButton
                 variant="ghost"
                 icon="i-heroicons-check-circle"
@@ -272,9 +283,7 @@ onMounted(async () => {
             />
           </UTooltip>
         </template>
-        <template #user-data="{ row }">
-          {{users.find(i => i.user_id === row.user_id) ? users.find(i => i.user_id === row.user_id).full_name : ""}}
-        </template>
+
         <template #description-data="{ row }">
           <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
           <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
@@ -284,22 +293,16 @@ onMounted(async () => {
     </UDashboardPanelContent>
   </template>
 
-  <!-- ============================= -->
-  <!-- MOBILE VERSION -->
-  <!-- ============================= -->
   <template v-else>
     <UDashboardNavbar title="Zeiterfassung" />
 
     <div class="relative flex flex-col h-[100dvh] overflow-hidden">
 
-      <!-- 🔥 FIXED ACTIVE TIMER -->
-      <div class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
+      <div v-if="isViewingSelf" class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
         <UCard class="p-3">
           <div class="flex items-center justify-between">
-
             <div>
               <p class="text-gray-500 text-sm">Aktive Zeit</p>
-
               <p v-if="active" class="text-primary-600 font-semibold">
                 Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
               </p>
@@ -328,17 +331,15 @@ onMounted(async () => {
         <UButton
             color="gray"
             icon="i-heroicons-chart-bar"
-            label="Eigene Auswertung"
+            label="Auswertung"
             class="w-full"
             variant="soft"
-            @click="router.push(`/staff/time/${auth.user.id}/evaluate`)"
+            @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
         />
       </div>
 
-      <!-- 📜 SCROLLABLE CONTENT -->
       <UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
 
-        <!-- ZEIT-CARDS -->
         <UCard
             v-for="row in entries"
             :key="row.id"
@@ -349,30 +350,16 @@ onMounted(async () => {
             <div class="font-semibold flex items-center gap-2">
               <span>{{ row.description || 'Keine Beschreibung' }}</span>
 
-              <UBadge
-                  :color="typeColor[row.type]"
-                  class="text-xs"
-              >
+              <UBadge :color="typeColor[row.type]" class="text-xs">
                 {{ typeLabel[row.type] }}
               </UBadge>
             </div>
 
             <UBadge
-                :color="{
-    approved: 'primary',
-    submitted: 'cyan',
-    draft: 'red'
-  }[row.state]"
+                :color="{ approved: 'primary', submitted: 'cyan', draft: 'red' }[row.state]"
             >
-              {{
-                {
-                  approved: 'Genehmigt',
-                  submitted: 'Eingereicht',
-                  draft: 'Entwurf'
-                }[row.state] || row.state
-              }}
+              {{ { approved: 'Genehmigt', submitted: 'Eingereicht', draft: 'Entwurf' }[row.state] || row.state }}
             </UBadge>
-
           </div>
 
           <p class="text-sm text-gray-500 mt-1">
@@ -382,8 +369,8 @@ onMounted(async () => {
           <p class="text-sm text-gray-500">
             Ende:
             <span v-if="row.stopped_at">
-            {{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
-          </span>
+              {{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
+            </span>
             <span v-else class="text-primary-500 font-medium">läuft...</span>
           </p>
 
@@ -392,7 +379,6 @@ onMounted(async () => {
             {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
           </p>
 
-          <!-- ACTION-BUTTONS -->
           <div class="flex gap-2 mt-3">
             <UButton
                 v-if="row.state === 'draft'"
@@ -402,21 +388,18 @@ onMounted(async () => {
                 variant="soft"
                 @click.stop="handleSubmit(row)"
             />
-
-<!--            <UButton
-                v-if="row.state === 'submitted'"
+            <UButton
+                v-if="row.state === 'submitted' && canViewAll"
                 color="primary"
                 icon="i-heroicons-check"
                 label="Genehmigen"
                 variant="soft"
                 @click.stop="handleApprove(row)"
-            />-->
+            />
           </div>
         </UCard>
-
       </UDashboardPanelContent>
 
-      <!-- ➕ FLOATING ACTION BUTTON -->
       <FloatingActionButton
           icon="i-heroicons-plus"
           class="!fixed bottom-6 right-6 z-50"
@@ -427,7 +410,6 @@ onMounted(async () => {
     </div>
   </template>
 
-  <!-- MODAL -->
   <StaffTimeEntryModal
       v-model="showModal"
       :entry="editEntry"
@@ -436,4 +418,4 @@ onMounted(async () => {
       :can-select-user="canViewAll"
       :default-user-id="selectedUser"
   />
-</template>
+</template>
\ No newline at end of file

From 6d8193296eefd836870568e8d09e3746599ebd27 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 16 Dec 2025 16:23:12 +0100
Subject: [PATCH 14/22] Time Changes

---
 components/StaffTimeEntryModal.vue | 302 +++++++-------
 composables/useStaffTime.ts        | 183 ++++-----
 pages/staff/time/index.vue         | 608 ++++++++++++++++-------------
 3 files changed, 534 insertions(+), 559 deletions(-)

diff --git a/components/StaffTimeEntryModal.vue b/components/StaffTimeEntryModal.vue
index e08ff26..dcf370f 100644
--- a/components/StaffTimeEntryModal.vue
+++ b/components/StaffTimeEntryModal.vue
@@ -1,206 +1,170 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types'
+import { useStaffTime } from '~/composables/useStaffTime'
 
-const props = defineProps<{
-  modelValue: boolean;
-  entry?: any | null;
-  users: any[];
-  canSelectUser: boolean;
-  defaultUserId: string;
-}>();
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  entry: { type: Object, default: null },
+  defaultUserId: { type: String, default: null }
+})
 
-const emit = defineEmits(["update:modelValue", "saved"]);
+const emit = defineEmits(['update:modelValue', 'saved'])
 
-const { create, update } = useStaffTime();
+// 💡 createEntry importieren
+const { update, createEntry } = useStaffTime()
+const { $dayjs } = useNuxtApp()
+const toast = useToast()
 
-const show = computed({
+const loading = ref(false)
+
+const types = [
+  { label: 'Arbeitszeit', value: 'work' },
+  { label: 'Pause', value: 'pause' },
+  { label: 'Urlaub', value: 'vacation' },
+  { label: 'Krankheit', value: 'sick' },
+  { label: 'Feiertag', value: 'holiday' },
+  { label: 'Sonstiges', value: 'other' }
+]
+
+const state = reactive({
+  start_date: '',
+  start_time: '',
+  end_date: '',
+  end_time: '',
+  type: 'work',
+  description: ''
+})
+
+const schema = z.object({
+  start_date: z.string().min(1, 'Datum erforderlich'),
+  start_time: z.string().min(1, 'Zeit erforderlich'),
+  type: z.string(),
+  description: z.string().optional()
+})
+
+const isOpen = computed({
   get: () => props.modelValue,
-  set: (v: boolean) => emit("update:modelValue", v),
-});
+  set: (value) => emit('update:modelValue', value)
+})
 
-// 🌈 Typen
-const typeOptions = [
-  { label: "Arbeitszeit", value: "work" },
-  { label: "Urlaub", value: "vacation" },
-  { label: "Krankheit", value: "sick" },
-  { label: "Feiertag", value: "holiday" },
-];
+const toDateStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('YYYY-MM-DD') : ''
+const toTimeStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('HH:mm') : ''
 
-// Lokaler State
-const local = reactive({
-  id: "",
-  user_id: "",               // 👈 Mitarbeiter
-  description: "",
-  started_at: "",
-  stopped_at: "",
-  type: "work",
-  vacation_reason: "",
-  sick_reason: "",
-});
+watch(() => props.entry, (newVal) => {
+  if (newVal) {
+    // EDIT
+    state.start_date = toDateStr(newVal.started_at)
+    state.start_time = toTimeStr(newVal.started_at)
+    state.end_date = newVal.stopped_at ? toDateStr(newVal.stopped_at) : ''
+    state.end_time = newVal.stopped_at ? toTimeStr(newVal.stopped_at) : ''
+    state.type = newVal.type || 'work'
+    state.description = newVal.description || ''
+  } else {
+    // CREATE (Standardwerte: Heute)
+    const now = $dayjs()
+    state.start_date = now.format('YYYY-MM-DD')
+    state.start_time = now.format('HH:mm')
+    state.end_date = ''
+    state.end_time = ''
+    state.type = 'work'
+    state.description = ''
+  }
+}, { immediate: true })
 
-// 📡 ENTRY —> LOCAL
-watch(
-    () => props.entry,
-    (val) => {
-      if (val) {
-        Object.assign(local, {
-          id: val.id,
-          user_id: val.user_id, // 👈 Mitarbeiter vorbelegen
-          description: val.description || "",
-          type: val.type || "work",
-
-          started_at:
-              val.type === "vacation"
-                  ? dayjs(val.started_at).format("YYYY-MM-DD")
-                  : dayjs(val.started_at).format("YYYY-MM-DDTHH:mm"),
-
-          stopped_at:
-              val.type === "vacation"
-                  ? dayjs(val.stopped_at).format("YYYY-MM-DD")
-                  : dayjs(val.stopped_at).format("YYYY-MM-DDTHH:mm"),
-
-          vacation_reason: val.vacation_reason || "",
-          sick_reason: val.sick_reason || "",
-        });
-      } else {
-        Object.assign(local, {
-          id: "",
-          user_id: props.defaultUserId, // 👈 Neuer Eintrag → aktueller Nutzer
-          description: "",
-          type: "work",
-          started_at: dayjs().format("YYYY-MM-DDTHH:mm"),
-          stopped_at: dayjs().add(1, "hour").format("YYYY-MM-DDTHH:mm"),
-          vacation_reason: "",
-          sick_reason: "",
-        });
-      }
-    },
-    { immediate: true }
-);
-
-const loading = ref(false);
-
-async function handleSubmit() {
-  loading.value = true;
+async function onSubmit(event: FormSubmitEvent<any>) {
+  loading.value = true
   try {
-    const payload: any = {
-      user_id: local.user_id,   // 👈 immer senden
-      type: local.type,
-    };
+    // 1. Datum und Zeit kombinieren
+    const startIso = $dayjs(`${state.start_date} ${state.start_time}`).toISOString()
 
-    if (local.type === "vacation") {
-      payload.started_at = dayjs(local.started_at).startOf("day").toISOString();
-      payload.stopped_at = dayjs(local.stopped_at).endOf("day").toISOString();
-      payload.vacation_reason = local.vacation_reason;
-    } else {
-      payload.started_at = dayjs(local.started_at).toISOString();
-      payload.stopped_at = local.stopped_at
-          ? dayjs(local.stopped_at).toISOString()
-          : null;
-      payload.description = local.description;
+    let endIso = null
+    if (state.end_date && state.end_time) {
+      endIso = $dayjs(`${state.end_date} ${state.end_time}`).toISOString()
 
-      if (local.type === "sick") {
-        payload.sick_reason = local.sick_reason;
+      if ($dayjs(endIso).isBefore($dayjs(startIso))) {
+        throw new Error("Endzeitpunkt muss nach dem Startzeitpunkt liegen.")
       }
     }
 
-    if (local.id) {
-      await update(local.id, payload);
+    if (props.entry) {
+      // 🟢 UPDATE (Bearbeiten)
+      await update(props.entry, {
+        start: startIso,
+        end: endIso,
+        type: state.type,
+        description: state.description
+      })
+      toast.add({ title: 'Eintrag aktualisiert', color: 'green' })
     } else {
-      await create(payload);
+      // 🟢 CREATE (Neu Erstellen)
+      // 💡 HIER WAR DER FEHLER: Wir nutzen jetzt createEntry mit den Daten aus dem Formular
+      await createEntry({
+        start: startIso,   // Die eingegebene Startzeit
+        end: endIso,       // Die eingegebene Endzeit (oder null)
+        type: state.type,
+        description: state.description
+      })
+
+      toast.add({ title: 'Zeit manuell erfasst', color: 'green' })
     }
 
-    emit("saved");
-    show.value = false;
+    emit('saved')
+    isOpen.value = false
+  } catch (error: any) {
+    toast.add({ title: 'Fehler', description: error.message, color: 'red' })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 </script>
 
-
 <template>
-  <UModal v-model="show" :ui="{ width: 'w-full sm:max-w-md' }" :key="local.id || 'new'">
-    <UCard>
+  <UModal v-model="isOpen">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
       <template #header>
-        <div class="font-semibold text-lg">
-          {{ local.id ? "Zeit bearbeiten" : "Neue Zeit erfassen" }}
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
         </div>
       </template>
 
-      <UForm @submit.prevent="handleSubmit" class="space-y-4">
+      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
 
-        <!-- 👥 Mitarbeiter-Auswahl -->
-        <UFormGroup label="Mitarbeiter" v-if="props.canSelectUser">
-          <USelectMenu
-              v-model="local.user_id"
-              :options="props.users.map(u => ({
-              label: u.full_name || u.email,
-              value: u.user_id
-            }))"
-              placeholder="Mitarbeiter wählen"
-              option-attribute="label"
-              value-attribute="value"
-          />
+        <UFormGroup label="Typ" name="type">
+          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
         </UFormGroup>
 
-        <!-- TYPE -->
-        <UFormGroup label="Typ">
-          <USelect v-model="local.type" :options="typeOptions" />
+        <div class="grid grid-cols-2 gap-4">
+          <UFormGroup label="Start Datum" name="start_date">
+            <UInput type="date" v-model="state.start_date" />
+          </UFormGroup>
+          <UFormGroup label="Start Zeit" name="start_time">
+            <UInput type="time" v-model="state.start_time" />
+          </UFormGroup>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormGroup label="Ende Datum" name="end_date">
+            <UInput type="date" v-model="state.end_date" />
+          </UFormGroup>
+          <UFormGroup label="Ende Zeit" name="end_time">
+            <UInput type="time" v-model="state.end_time" />
+          </UFormGroup>
+        </div>
+        <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
+
+        <UFormGroup label="Beschreibung / Notiz" name="description">
+          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
         </UFormGroup>
 
-        <!-- VACATION -->
-        <template v-if="local.type === 'vacation'">
-          <UFormGroup label="Urlaubsgrund">
-            <UInput v-model="local.vacation_reason" />
-          </UFormGroup>
-
-          <UFormGroup label="Start (Tag)">
-            <UInput v-model="local.started_at" type="date" />
-          </UFormGroup>
-
-          <UFormGroup label="Ende (Tag)">
-            <UInput v-model="local.stopped_at" type="date" />
-          </UFormGroup>
-        </template>
-
-        <!-- SICK -->
-        <template v-else-if="local.type === 'sick'">
-          <UFormGroup label="Krankheitsgrund">
-            <UInput v-model="local.sick_reason" />
-          </UFormGroup>
-
-          <UFormGroup label="Start (Tag)">
-            <UInput v-model="local.started_at" type="date" />
-          </UFormGroup>
-
-          <UFormGroup label="Ende (Tag)">
-            <UInput v-model="local.stopped_at" type="date" />
-          </UFormGroup>
-        </template>
-
-        <!-- WORK / OTHER -->
-        <template v-else>
-          <UFormGroup label="Beschreibung">
-            <UInput v-model="local.description" placeholder="Was wurde gemacht?" />
-          </UFormGroup>
-
-          <UFormGroup label="Startzeit">
-            <UInput v-model="local.started_at" type="datetime-local" />
-          </UFormGroup>
-
-          <UFormGroup label="Endzeit">
-            <UInput v-model="local.stopped_at" type="datetime-local" />
-          </UFormGroup>
-        </template>
-
-        <!-- ACTIONS -->
-        <div class="flex justify-end gap-2 mt-4">
-          <UButton color="gray" label="Abbrechen" @click="show = false" />
-          <UButton color="primary" :loading="loading" type="submit" label="Speichern" />
+        <div class="flex justify-end gap-2 pt-4">
+          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
         </div>
       </UForm>
     </UCard>
   </UModal>
-</template>
-
+</template>
\ No newline at end of file
diff --git a/composables/useStaffTime.ts b/composables/useStaffTime.ts
index b19145d..791c0a0 100644
--- a/composables/useStaffTime.ts
+++ b/composables/useStaffTime.ts
@@ -5,156 +5,115 @@ export const useStaffTime = () => {
     const { $api, $dayjs } = useNuxtApp()
     const auth = useAuthStore()
 
-    /**
-     * Lädt die Zeitspannen (Spans) für die Liste.
-     * Nutzt jetzt GET /api/staff/time/spans
-     */
+    // ... (list Funktion bleibt gleich) ...
     const list = async (filter?: { user_id?: string, from?: string, to?: string }) => {
-        // Standard: Aktueller Monat
+        // ... (Code wie zuvor)
         const from = filter?.from || $dayjs().startOf('month').format('YYYY-MM-DD')
         const to = filter?.to || $dayjs().endOf('month').format('YYYY-MM-DD')
-
-        // Ziel-User: Entweder aus Filter (Admin-Ansicht) oder eigener User
         const targetUserId = filter?.user_id || auth.user.id
-
-        const params = new URLSearchParams({
-            from,
-            to,
-            // Der Endpoint erwartet targetUserId, wenn man Daten eines anderen Users will
-            targetUserId
-        })
-
+        const params = new URLSearchParams({ from, to, targetUserId })
         try {
-            // 💡 UPDATE: Prefix /api hinzugefügt
             const spans = await $api(`/api/staff/time/spans?${params.toString()}`)
-
             return (spans || []).map((span: any) => {
                 const start = $dayjs(span.startedAt)
-                // Wenn endedAt null ist, läuft die Zeit noch -> Dauer bis "jetzt" berechnen für Anzeige
                 const end = span.endedAt ? $dayjs(span.endedAt) : $dayjs()
-                const duration = end.diff(start, 'minute')
-
                 return {
-                    // ID: Wir nehmen die erste Event-ID (Start-Event) als Referenz für Aktionen
                     id: span.sourceEventIds && span.sourceEventIds.length > 0 ? span.sourceEventIds[0] : null,
-
-                    // Mapping Backend-Status -> Frontend-State
+                    eventIds: span.sourceEventIds || [],
                     state: span.status,
-
-                    // Zeitstempel
                     started_at: span.startedAt,
                     stopped_at: span.endedAt,
-
-                    duration_minutes: duration,
-
-                    // Da der Endpoint nur die Spans zurückgibt, setzen wir die UserID
-                    // auf den User, den wir angefragt haben.
+                    duration_minutes: end.diff(start, 'minute'),
                     user_id: targetUserId,
-
                     type: span.type,
-
-                    // Payload/Description falls vorhanden
                     description: span.payload?.description || ''
                 }
-            }).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf()) // Sortierung: Neueste oben
-
+            }).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf())
         } catch (error) {
-            console.error("Fehler beim Laden der Zeiten:", error)
+            console.error("Fehler beim Laden:", error)
             return []
         }
     }
 
     /**
-     * Startet einen neuen Zeiteintrag.
-     * POST /api/staff/time/event
+     * Startet "jetzt" (Live-Modus).
+     * Kann optional eine Zeit empfangen (für manuelle Korrekturen),
+     * aber wir nutzen dafür besser die createEntry Funktion unten.
      */
-    const start = async (description = "Arbeitszeit") => {
-        try {
-            // 💡 UPDATE: Prefix /api hinzugefügt
-            await $api('/api/staff/time/event', {
-                method: 'POST',
-                body: {
-                    eventtype: 'work_start',
-                    eventtime: new Date().toISOString(),
-                    payload: { description }
-                }
-            })
-        } catch (error) {
-            console.error("Fehler beim Starten:", error)
-            throw error
-        }
+    const start = async (description = "Arbeitszeit", time?: string) => {
+        await $api('/api/staff/time/event', {
+            method: 'POST',
+            body: {
+                eventtype: 'work_start',
+                eventtime: time || new Date().toISOString(), // 💡 Fix: Zeit akzeptieren
+                payload: { description }
+            }
+        })
     }
 
-    /**
-     * Stoppt die aktuelle Zeit.
-     * POST /api/staff/time/event
-     */
-    const stop = async (entryId?: string) => {
-        try {
-            // 💡 UPDATE: Prefix /api hinzugefügt
-            await $api('/api/staff/time/event', {
-                method: 'POST',
-                body: {
-                    eventtype: 'work_end',
-                    eventtime: new Date().toISOString()
-                }
-            })
-        } catch (error) {
-            console.error("Fehler beim Stoppen:", error)
-            throw error
-        }
+    const stop = async () => {
+        await $api('/api/staff/time/event', { method: 'POST', body: { eventtype: 'work_end', eventtime: new Date().toISOString() } })
     }
 
-    /**
-     * Reicht einen Eintrag ein.
-     * POST /api/staff/time/submit
-     */
-    const submit = async (entryId: string) => {
-        if (!entryId) return
-        try {
-            // 💡 UPDATE: Prefix /api hinzugefügt
-            await $api('/api/staff/time/submit', {
-                method: 'POST',
-                body: {
-                    eventIds: [entryId]
-                }
-            })
-        } catch (error) {
-            console.error("Fehler beim Einreichen:", error)
-            throw error
-        }
+    const submit = async (entry: any) => {
+        const ids = entry.eventIds || (entry.id ? [entry.id] : [entry]);
+        if (!ids || ids.length === 0) return
+        await $api('/api/staff/time/submit', { method: 'POST', body: { eventIds: ids } })
     }
 
-    /**
-     * Genehmigt einen Eintrag.
-     * POST /api/staff/time/approve
-     */
     const approve = async (entry: any) => {
-        if (!entry || !entry.id || !entry.user_id) {
-            console.error("Ungültiger Eintrag für Genehmigung (ID oder UserID fehlt)", entry)
-            return
-        }
+        if (!entry?.user_id) return
+        const ids = entry.eventIds || [entry.id];
+        await $api('/api/staff/time/approve', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id } })
+    }
 
-        try {
-            // 💡 UPDATE: Prefix /api hinzugefügt
-            await $api('/api/staff/time/approve', {
+    const reject = async (entry: any, reason = "Abgelehnt") => {
+        if (!entry?.user_id) return
+        const ids = entry.eventIds || [entry.id];
+        await $api('/api/staff/time/reject', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id, reason } })
+    }
+
+    const update = async (entry: any, newData: { start: string, end: string | null, type: string, description: string }) => {
+        if (!entry || !entry.eventIds || entry.eventIds.length === 0) {
+            throw new Error("Bearbeiten fehlgeschlagen: Keine IDs.")
+        }
+        await $api('/api/staff/time/edit', {
+            method: 'POST',
+            body: {
+                originalEventIds: entry.eventIds,
+                newStart: newData.start,
+                newEnd: newData.end,
+                newType: newData.type,
+                description: newData.description,
+                reason: "Manuelle Bearbeitung"
+            }
+        })
+    }
+
+    // 🆕 NEU: Manuellen Eintrag erstellen (Vergangenheit oder Zeitraum)
+    const createEntry = async (data: { start: string, end: string | null, type: string, description: string }) => {
+        // 1. Start Event senden
+        // Wir nutzen den dynamischen Typ (work_start, vacation_start etc.)
+        await $api('/api/staff/time/event', {
+            method: 'POST',
+            body: {
+                eventtype: `${data.type}_start`,
+                eventtime: data.start,
+                payload: { description: data.description }
+            }
+        })
+
+        // 2. End Event senden (falls vorhanden)
+        if (data.end) {
+            await $api('/api/staff/time/event', {
                 method: 'POST',
                 body: {
-                    eventIds: [entry.id],
-                    employeeUserId: entry.user_id
+                    eventtype: `${data.type}_end`,
+                    eventtime: data.end
                 }
             })
-        } catch (error) {
-            console.error("Fehler beim Genehmigen:", error)
-            throw error
         }
     }
 
-    return {
-        list,
-        start,
-        stop,
-        submit,
-        approve
-    }
+    return { list, start, stop, submit, approve, reject, update, createEntry }
 }
\ No newline at end of file
diff --git a/pages/staff/time/index.vue b/pages/staff/time/index.vue
index c6c9d17..a546533 100644
--- a/pages/staff/time/index.vue
+++ b/pages/staff/time/index.vue
@@ -7,35 +7,49 @@ definePageMeta({
   layout: "default",
 })
 
-const { list, start, stop, submit, approve } = useStaffTime()
+const { list, start, stop, submit, approve, reject } = useStaffTime()
 const auth = useAuthStore()
 const router = useRouter()
+const toast = useToast()
+const { $dayjs } = useNuxtApp()
+
 // MOBILE DETECTION
 const platformIsNative = useCapacitor().getIsNative()
 
 // STATE
 const loading = ref(false)
-const showModal = ref(false)
-const editEntry = ref(null)
+const view = ref('list') // 'list' | 'timeline'
 
-// 👥 Nutzer-Filter
+// MODAL STATES
+const showEditModal = ref(false)
+const entryToEdit = ref(null)
+
+const showRejectModal = ref(false)
+const entryToReject = ref(null)
+const rejectReason = ref("")
+
+// FILTER & USER
 const users = ref([])
-// WICHTIG: Standardmäßig IMMER den aktuellen User wählen (kein null mehr)
 const selectedUser = ref(auth.user.id)
 const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
 
-// LIST + ACTIVE
+// DATA
 const entries = ref([])
-
-// Active berechnet sich jetzt aus den geladenen Einträgen.
-// Da wir immer nur EINEN User laden, ist ein laufender Eintrag hier
-// automatisch der aktive Eintrag des angezeigten Users.
 const active = computed(() => entries.value.find(e => !e.stopped_at))
-
-// Prüft, ob wir gerade das eigene Profil ansehen (für Start/Stop Buttons)
 const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
 
+// GROUPING
+const groupedEntries = computed(() => {
+  const groups = {}
+  entries.value.forEach(entry => {
+    const dateKey = $dayjs(entry.started_at).format('YYYY-MM-DD')
+    if (!groups[dateKey]) groups[dateKey] = []
+    groups[dateKey].push(entry)
+  })
+  return groups
+})
 
+// CONFIG
 const typeLabel = {
   work: "Arbeitszeit",
   vacation: "Urlaub",
@@ -52,26 +66,20 @@ const typeColor = {
   other: "gray"
 }
 
-
+// ACTIONS
 async function loadUsers() {
   if (!canViewAll.value) return
   const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
   users.value = res
 }
 
-// LOAD ENTRIES (Erzwingt jetzt immer eine User-ID)
 async function load() {
   if (!selectedUser.value) return
-
-  entries.value = await list({
-    user_id: selectedUser.value // 👈 Hier wird der Filter erzwungen
-  })
+  entries.value = await list({ user_id: selectedUser.value })
 }
 
 async function handleStart() {
-  // Sicherheitshalber: Starten nur erlauben, wenn man sich selbst ansieht
   if (!isViewingSelf.value) return
-
   loading.value = true
   await start("Arbeitszeit gestartet")
   await load()
@@ -80,9 +88,6 @@ async function handleStart() {
 
 async function handleStop() {
   if (!active.value) return
-  // Stoppen darf man ggf. auch andere (als Admin), daher hier kein isViewingSelf Check
-  // oder je nach Logik anpassen. Hier erlauben wir das Stoppen des angezeigten Timers.
-
   loading.value = true
   await stop(active.value.id)
   await load()
@@ -90,28 +95,53 @@ async function handleStop() {
 }
 
 function handleEdit(entry) {
-  editEntry.value = entry
-  showModal.value = true
+  entryToEdit.value = entry
+  showEditModal.value = true
 }
 
 async function handleSubmit(entry) {
+  loading.value = true
   await submit(entry)
   await load()
+  loading.value = false
+  toast.add({ title: 'Zeit eingereicht', color: 'green' })
 }
 
 async function handleApprove(entry) {
+  loading.value = true
   await approve(entry)
   await load()
+  loading.value = false
+  toast.add({ title: 'Zeit genehmigt', color: 'green' })
 }
 
-// Watcher: Wenn der User im Dropdown gewechselt wird, neu laden
-watch(selectedUser, () => {
-  load()
-})
+function openRejectModal(entry) {
+  entryToReject.value = entry
+  rejectReason.value = ""
+  showRejectModal.value = true
+}
+
+async function confirmReject() {
+  if (!entryToReject.value) return
+  loading.value = true
+  try {
+    await reject(entryToReject.value, rejectReason.value || "Vom Administrator abgelehnt")
+    toast.add({ title: 'Zeit abgelehnt', color: 'green' })
+    showRejectModal.value = false
+    await load()
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' })
+  } finally {
+    loading.value = false
+    entryToReject.value = null
+  }
+}
+
+watch(selectedUser, () => { load() })
 
 onMounted(async () => {
   await loadUsers()
-  await load() // Lädt initial den eingeloggten User
+  await load()
   setPageLayout(platformIsNative ? 'mobile' : 'default')
 })
 </script>
@@ -120,302 +150,324 @@ onMounted(async () => {
   <template v-if="!platformIsNative">
     <UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
 
-    <!--<UDashboardToolbar>
+    <UDashboardToolbar>
       <template #left>
-        <div class="flex items-center gap-2">
-          <UIcon name="i-heroicons-clock" class="text-primary-500" />
-          <span v-if="active" class="text-primary-600 font-medium">
-            <span v-if="isViewingSelf">Läuft seit</span>
-            <span v-else>Mitarbeiter aktiv seit</span>
-            {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
-          </span>
-          <span v-else class="text-gray-500">
-             <span v-if="isViewingSelf">Keine aktive Zeit</span>
-             <span v-else>Mitarbeiter nicht aktiv</span>
-          </span>
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2 border-r pr-4 mr-2">
+            <UIcon name="i-heroicons-clock" class="w-5 h-5" :class="active ? 'text-primary-500 animate-pulse' : 'text-gray-400'" />
+            <div class="flex flex-col">
+              <span class="text-xs text-gray-500 uppercase font-bold">Status</span>
+              <span v-if="active" class="text-sm font-medium text-primary-600">
+                 Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
+               </span>
+              <span v-else class="text-sm text-gray-600">Nicht aktiv</span>
+            </div>
+          </div>
+
+          <div v-if="canViewAll" class="flex items-center gap-2">
+            <USelectMenu
+                v-model="selectedUser"
+                :options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
+                placeholder="Benutzer auswählen"
+                value-attribute="value"
+                option-attribute="label"
+                class="min-w-[220px]"
+                :clearable="false"
+            />
+            <UTooltip text="Anwesenheiten auswerten">
+              <UButton
+                  :disabled="!selectedUser"
+                  color="gray"
+                  icon="i-heroicons-chart-bar"
+                  variant="ghost"
+                  @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
+              />
+            </UTooltip>
+          </div>
         </div>
       </template>
 
       <template #right>
-        <template v-if="isViewingSelf">
-          <UButton
-              v-if="active"
-              color="red"
-              icon="i-heroicons-stop"
-              :loading="loading"
-              label="Stoppen"
-              @click="handleStop"
-          />
-          <UButton
-              v-else
-              color="green"
-              icon="i-heroicons-play"
-              :loading="loading"
-              label="Starten"
-              @click="handleStart"
-          />
-        </template>
-        <template v-else-if="active && canViewAll">
-          <UButton
-              color="red"
-              variant="soft"
-              icon="i-heroicons-stop"
-              :loading="loading"
-              label="Mitarbeiter stoppen"
-              @click="handleStop"
-          />
-        </template>
+        <div class="flex gap-2 items-center">
+          <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
+            <UTooltip text="Listenansicht">
+              <UButton
+                  size="xs"
+                  :color="view === 'list' ? 'white' : 'gray'"
+                  variant="ghost"
+                  icon="i-heroicons-table-cells"
+                  @click="view = 'list'"
+              />
+            </UTooltip>
+            <UTooltip text="Zeitstrahl">
+              <UButton
+                  size="xs"
+                  :color="view === 'timeline' ? 'white' : 'gray'"
+                  variant="ghost"
+                  icon="i-heroicons-list-bullet"
+                  @click="view = 'timeline'"
+              />
+            </UTooltip>
+          </div>
 
+          <template v-if="isViewingSelf">
+            <UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
+            <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" />
+          </template>
+          <template v-else-if="active && canViewAll">
+            <UButton color="red" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
+          </template>
 
-        <UButton
-            color="primary"
-            icon="i-heroicons-plus"
-            label="Zeit"
-            @click="() => { editEntry = null; showModal = true }"
-        />
-      </template>
-    </UDashboardToolbar>-->
-
-    <UDashboardToolbar>
-      <template #left>
-        <div v-if="canViewAll" class="flex items-center gap-2">
-          <USelectMenu
-              v-model="selectedUser"
-              :options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
-              placeholder="Benutzer auswählen"
-              value-attribute="value"
-              option-attribute="label"
-              class="min-w-[220px]"
-              :clearable="false"
-          />
-
-          <UTooltip text="Anwesenheiten auswerten">
-            <UButton
-                :disabled="!selectedUser"
-                color="gray"
-                icon="i-heroicons-chart-bar"
-                label="Auswertung"
-                variant="soft"
-                @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
-            />
-          </UTooltip>
-
+          <UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
         </div>
       </template>
     </UDashboardToolbar>
 
+    <UDashboardPanelContent class="p-0 sm:p-4">
 
-    <UDashboardPanelContent>
-      <UTable
-          :rows="entries"
-          :columns="[
-          { key: 'actions', label: '' },
-          { key: 'state', label: 'Status' },
-          { key: 'started_at', label: 'Start' },
-          { key: 'stopped_at', label: 'Ende' },
-          { key: 'duration_minutes', label: 'Dauer' },
-          // { key: 'user', label: 'Mitarbeiter' }, // Spalte entfernt, da wir eh nur einen User sehen
-          { key: 'type', label: 'Typ' },
-          { key: 'description', label: 'Beschreibung' },
-          ]"
-          :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
-      >
-        <template #state-data="{ row }">
-          <span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
-          <span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
-          <span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
-        </template>
-        <template #type-data="{ row }">
-          <UBadge :color="typeColor[row.type] || 'gray'">
-            {{ typeLabel[row.type] || row.type }}
-          </UBadge>
-        </template>
-
-        <template #started_at-data="{ row }">
-          <span v-if="row.type === 'vacation' || row.type === 'sick'">
-            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
-          </span>
-          <span v-else>
-            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
-          </span>
-        </template>
-
-        <template #stopped_at-data="{ row }">
-          <span v-if="!row.stopped_at" class="text-primary-500 font-medium">
-            läuft...
-          </span>
-          <span v-else-if="row.type === 'vacation' || row.type === 'sick'">
-            {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
-          </span>
-          <span v-else>
-            {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
-          </span>
-        </template>
-
-        <template #duration_minutes-data="{ row }">
-          <span v-if="row.type === 'vacation' || row.type === 'sick'">
-            </span>
-          <span v-else>
+      <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
+        <UTable
+            :rows="entries"
+            :columns="[
+              { key: 'actions', label: 'Aktionen', class: 'w-32' },
+              { key: 'state', label: 'Status' },
+              { key: 'started_at', label: 'Start' },
+              { key: 'stopped_at', label: 'Ende' },
+              { key: 'duration_minutes', label: 'Dauer' },
+              { key: 'type', label: 'Typ' },
+              { key: 'description', label: 'Beschreibung' },
+            ]"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
+        >
+          <template #state-data="{ row }">
+            <UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
+            <UBadge v-else-if="row.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
+            <UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
+            <UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
+          </template>
+          <template #type-data="{ row }">
+            <UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
+          </template>
+          <template #started_at-data="{ row }">
+            <span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
+          </template>
+          <template #stopped_at-data="{ row }">
+            <span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
+            <span v-else-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
+          </template>
+          <template #duration_minutes-data="{ row }">
             {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
-          </span>
-        </template>
+          </template>
+          <template #actions-data="{ row }">
+            <div class="flex items-center gap-1">
+              <UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
+                <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
+                <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
+                <UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
+                <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
+              </UTooltip>
+            </div>
+          </template>
+          <template #description-data="{ row }">
+            <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
+            <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
+            <span v-else>{{row.description}}</span>
+          </template>
+        </UTable>
+      </UCard>
 
-        <template #actions-data="{ row }">
-          <UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted' && canViewAll">
-            <UButton
-                variant="ghost"
-                icon="i-heroicons-check-circle"
-                @click="handleApprove(row)"
-            />
-          </UTooltip>
-          <UTooltip text="Zeit einreichen" v-if="row.state === 'draft'">
-            <UButton
-                variant="ghost"
-                icon="i-heroicons-arrow-right-end-on-rectangle"
-                @click="handleSubmit(row)"
-            />
-          </UTooltip>
-          <UTooltip text="Zeit bearbeiten" v-if="row.state === 'draft'">
-            <UButton
-                variant="ghost"
-                icon="i-heroicons-pencil-square"
-                @click="handleEdit(row)"
-            />
-          </UTooltip>
-        </template>
+      <div v-else class="max-w-5xl mx-auto pb-20">
 
-        <template #description-data="{ row }">
-          <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
-          <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
-          <span v-else>{{row.description}}</span>
-        </template>
-      </UTable>
+        <div v-for="(group, date) in groupedEntries" :key="date" class="relative group/date">
+
+          <div class="sticky top-0 z-10 bg-white dark:bg-gray-900 py-4 mb-4 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
+            <div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
+            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 capitalize">
+              {{ useNuxtApp().$dayjs(date).format('dddd, DD. MMMM') }}
+            </h3>
+            <span class="text-xs text-gray-500 font-normal mt-0.5">
+                {{ group.length }} Einträge
+             </span>
+          </div>
+
+          <div class="absolute left-[5px] top-14 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last/date:bottom-auto group-last/date:h-full"></div>
+
+          <div class="space-y-6 pb-8">
+            <div v-for="entry in group" :key="entry.id" class="relative pl-8">
+
+              <div
+                  class="absolute left-0 top-6 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900 shadow-sm z-0"
+                  :class="{
+                  'bg-green-500 ring-4 ring-green-100 dark:ring-green-900/30': !entry.stopped_at,
+                  'bg-gray-400': entry.stopped_at && entry.type === 'work',
+                  'bg-yellow-400': entry.type === 'vacation',
+                  'bg-red-400': entry.type === 'sick'
+                }"
+              ></div>
+
+              <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+
+                <div class="flex flex-wrap justify-between items-center p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/30 dark:bg-gray-800">
+                  <div class="flex items-center gap-3">
+                    <div class="font-mono text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                      {{ useNuxtApp().$dayjs(entry.started_at).format('HH:mm') }}
+                      <span class="text-gray-400 text-sm">bis</span>
+                      <span v-if="entry.stopped_at">{{ useNuxtApp().$dayjs(entry.stopped_at).format('HH:mm') }}</span>
+                      <span v-else class="text-primary-500 animate-pulse text-sm uppercase font-bold tracking-wider">Läuft</span>
+                    </div>
+
+                    <UBadge :color="typeColor[entry.type]" variant="soft" size="xs">{{ typeLabel[entry.type] }}</UBadge>
+                  </div>
+
+                  <div class="flex items-center gap-2">
+                      <span v-if="entry.duration_minutes" class="text-sm font-medium text-gray-600 dark:text-gray-300">
+                        {{ useFormatDuration(entry.duration_minutes) }}
+                      </span>
+
+                    <UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
+                    <UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
+                    <UBadge v-else-if="entry.state === 'rejected'" color="red" size="xs" variant="solid">Abgelehnt</UBadge>
+                    <UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
+                  </div>
+                </div>
+
+                <div class="p-4">
+                  <p class="text-gray-700 dark:text-gray-300 text-sm whitespace-pre-wrap">
+                    {{ entry.description || 'Keine Beschreibung angegeben.' }}
+                  </p>
+                  <p v-if="entry.type === 'vacation'" class="text-sm text-gray-500 italic mt-1">
+                    Grund: {{ entry.vacation_reason }}
+                  </p>
+                </div>
+
+                <div class="bg-gray-50 dark:bg-gray-900/30 px-4 py-2 flex justify-end gap-2 border-t border-gray-100 dark:border-gray-700">
+                  <UButton
+                      v-if="(entry.state === 'draft' || entry.state === 'factual') && entry.stopped_at"
+                      size="xs" color="cyan" variant="solid" icon="i-heroicons-paper-airplane" label="Einreichen"
+                      @click="handleSubmit(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="entry.state === 'submitted' && canViewAll"
+                      size="xs" color="green" variant="solid" icon="i-heroicons-check" label="Genehmigen"
+                      @click="handleApprove(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
+                      size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
+                      @click="openRejectModal(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="['draft', 'factual', 'submitted'].includes(entry.state)"
+                      size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" label="Bearbeiten"
+                      @click="handleEdit(entry)"
+                  />
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="entries.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
+          <UIcon name="i-heroicons-calendar" class="w-12 h-12 mb-2 opacity-50" />
+          <p>Keine Einträge im gewählten Zeitraum.</p>
+        </div>
+
+      </div>
     </UDashboardPanelContent>
   </template>
 
   <template v-else>
     <UDashboardNavbar title="Zeiterfassung" />
-
     <div class="relative flex flex-col h-[100dvh] overflow-hidden">
-
       <div v-if="isViewingSelf" class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
         <UCard class="p-3">
           <div class="flex items-center justify-between">
             <div>
               <p class="text-gray-500 text-sm">Aktive Zeit</p>
-              <p v-if="active" class="text-primary-600 font-semibold">
+              <p v-if="active" class="text-primary-600 font-semibold animate-pulse">
                 Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
               </p>
               <p v-else class="text-gray-600">Keine aktive Zeit</p>
             </div>
-
-            <UButton
-                v-if="active"
-                color="red"
-                icon="i-heroicons-stop"
-                :loading="loading"
-                @click="handleStop"
-            />
-            <UButton
-                v-else
-                color="green"
-                icon="i-heroicons-play"
-                :loading="loading"
-                @click="handleStart"
-            />
+            <div class="flex gap-2">
+              <template v-if="isViewingSelf">
+                <UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
+                <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
+              </template>
+            </div>
           </div>
         </UCard>
       </div>
-
       <div class="px-3 mt-3">
-        <UButton
-            color="gray"
-            icon="i-heroicons-chart-bar"
-            label="Auswertung"
-            class="w-full"
-            variant="soft"
-            @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
-        />
+        <UButton color="gray" icon="i-heroicons-chart-bar" label="Auswertung" class="w-full" variant="soft" @click="router.push(`/staff/time/${selectedUser}/evaluate`)" />
       </div>
-
       <UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
-
-        <UCard
-            v-for="row in entries"
-            :key="row.id"
-            class="p-4 border rounded-xl active:scale-[0.98] transition cursor-pointer"
-            @click="handleEdit(row)"
-        >
+        <UCard v-for="row in entries" :key="row.id" class="p-4 border rounded-xl" @click="handleEdit(row)">
           <div class="flex justify-between items-center">
             <div class="font-semibold flex items-center gap-2">
-              <span>{{ row.description || 'Keine Beschreibung' }}</span>
-
-              <UBadge :color="typeColor[row.type]" class="text-xs">
-                {{ typeLabel[row.type] }}
-              </UBadge>
+              <span class="truncate max-w-[150px]">{{ row.description || 'Keine Beschreibung' }}</span>
+              <UBadge :color="typeColor[row.type]" class="text-xs">{{ typeLabel[row.type] }}</UBadge>
             </div>
-
-            <UBadge
-                :color="{ approved: 'primary', submitted: 'cyan', draft: 'red' }[row.state]"
-            >
-              {{ { approved: 'Genehmigt', submitted: 'Eingereicht', draft: 'Entwurf' }[row.state] || row.state }}
-            </UBadge>
+            <UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
+            <UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
+            <UBadge v-else-if="row.state === 'rejected'" color="red">Abgelehnt</UBadge>
+            <UBadge v-else color="gray">Entwurf</UBadge>
           </div>
-
-          <p class="text-sm text-gray-500 mt-1">
-            Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}
-          </p>
-
-          <p class="text-sm text-gray-500">
-            Ende:
-            <span v-if="row.stopped_at">
-              {{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
-            </span>
-            <span v-else class="text-primary-500 font-medium">läuft...</span>
-          </p>
-
-          <p class="text-sm text-gray-500">
-            Dauer:
-            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
-          </p>
-
-          <div class="flex gap-2 mt-3">
-            <UButton
-                v-if="row.state === 'draft'"
-                color="gray"
-                icon="i-heroicons-arrow-right-end-on-rectangle"
-                label="Einreichen"
-                variant="soft"
-                @click.stop="handleSubmit(row)"
-            />
-            <UButton
-                v-if="row.state === 'submitted' && canViewAll"
-                color="primary"
-                icon="i-heroicons-check"
-                label="Genehmigen"
-                variant="soft"
-                @click.stop="handleApprove(row)"
-            />
+          <p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p>
+          <p class="text-sm text-gray-500">Ende: <span v-if="row.stopped_at">{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}</span></p>
+          <div class="flex gap-2 mt-3 justify-end">
+            <UButton v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at" color="cyan" size="sm" icon="i-heroicons-paper-airplane" label="Einreichen" variant="soft" @click.stop="handleSubmit(row)" :loading="loading" />
+            <UButton v-if="row.state === 'submitted' && canViewAll" color="green" size="sm" icon="i-heroicons-check" label="Genehmigen" variant="soft" @click.stop="handleApprove(row)" :loading="loading" />
           </div>
         </UCard>
       </UDashboardPanelContent>
-
-      <FloatingActionButton
-          icon="i-heroicons-plus"
-          class="!fixed bottom-6 right-6 z-50"
-          color="primary"
-          @click="() => { editEntry = null; showModal = true }"
-      />
-
+      <FloatingActionButton icon="i-heroicons-plus" class="!fixed bottom-6 right-6 z-50" color="primary" @click="() => { entryToEdit = null; showEditModal = true }" />
     </div>
   </template>
 
   <StaffTimeEntryModal
-      v-model="showModal"
-      :entry="editEntry"
+      v-model="showEditModal"
+      :entry="entryToEdit"
       @saved="load"
-      :users="users"
-      :can-select-user="canViewAll"
       :default-user-id="selectedUser"
   />
+
+  <UModal v-model="showRejectModal">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Zeiteintrag ablehnen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
+        </div>
+      </template>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-500">
+          Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
+        </p>
+        <UFormGroup label="Grund (optional)" name="reason">
+          <UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
+        </UFormGroup>
+      </div>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
+          <UButton color="red" :loading="loading" @click="confirmReject">Bestätigen</UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
 </template>
\ No newline at end of file

From 6053b7340fa6b2c961d5ce45af2ae1ebeaf80576 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 16 Dec 2025 16:27:04 +0100
Subject: [PATCH 15/22] Time Changes

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index cc0dc96..cb1c21f 100644
--- a/package.json
+++ b/package.json
@@ -81,5 +81,6 @@
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.4.0-beta.1",
     "zebra-browser-print-wrapper": "^0.1.4"
+    "zod": "^3.25.76",
   }
 }
\ No newline at end of file

From 5aac81f60195cc2ee458dab5f40276e8e3a50053 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 16 Dec 2025 16:27:17 +0100
Subject: [PATCH 16/22] Time Changes

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cb1c21f..047644e 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,8 @@
     "vue-chartjs": "^5.3.1",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.4.0-beta.1",
-    "zebra-browser-print-wrapper": "^0.1.4"
+    "zebra-browser-print-wrapper": "^0.1.4",
     "zod": "^3.25.76",
+    "zpl-renderer-js": "^2.0.2"
   }
 }
\ No newline at end of file

From 049a5b2264da6ab4ea05457a96519ea81325e99a Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 16 Dec 2025 16:28:10 +0100
Subject: [PATCH 17/22] packages changes

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 047644e..d1a6d42 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@fullcalendar/timegrid": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
     "@iconify/json": "^2.2.171",
+    "@mmote/niimbluelib": "^0.0.1-alpha.29",
     "@nuxt/ui-pro": "^1.6.0",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.1.0",
@@ -63,7 +64,9 @@
     "dayjs": "^1.11.10",
     "fast-sort": "^3.4.1",
     "handlebars": "^4.7.8",
+    "image-js": "^1.1.0",
     "leaflet": "^1.9.4",
+    "license-checker": "^25.0.1",
     "maplibre-gl": "^4.7.0",
     "nuxt-editorjs": "^1.0.4",
     "nuxt-viewport": "^2.0.6",

From 280cf4518a5780ea624c96d300bebf312b3502db Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 17 Dec 2025 09:23:07 +0100
Subject: [PATCH 18/22] Fix E-Mail

---
 pages/email/new.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pages/email/new.vue b/pages/email/new.vue
index d31f20d..856c4ce 100644
--- a/pages/email/new.vue
+++ b/pages/email/new.vue
@@ -48,6 +48,15 @@ const setupPage = async () => {
 
       if(data) loadedDocuments.value = data
 
+      loadedDocuments.value = await Promise.all(loadedDocuments.value.map(async doc => {
+
+        const document = await useEntities("createddocuments").selectSingle(doc.createddocument)
+        console.log(document)
+        return {
+          ...doc,
+          createddocument: document
+        }}))
+
       //console.log(loadedDocuments.value)
 
       if(loadedDocuments.value.length > 0) {

From bb1e73443bb297a21bda5337acb15079cadc3709 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Thu, 18 Dec 2025 12:18:57 +0100
Subject: [PATCH 19/22] Fixed Banking Page

---
 pages/banking/statements/[mode]/[[id]].vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/banking/statements/[mode]/[[id]].vue b/pages/banking/statements/[mode]/[[id]].vue
index 97943e8..f62350e 100644
--- a/pages/banking/statements/[mode]/[[id]].vue
+++ b/pages/banking/statements/[mode]/[[id]].vue
@@ -29,7 +29,7 @@ const customers = ref([])
 const vendors = ref([])
 
 const createddocuments = ref([])
-
+const incominginvoices = ref([])
 const accounts = ref([])
 const ownaccounts = ref([])
 
@@ -45,7 +45,7 @@ const setup = async () => {
 
   createddocuments.value = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"))
   const documents = createddocuments.value.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
-  const incominginvoices = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
 
   accounts.value = (await useEntities("accounts").selectSpecial("*","number",true))
   ownaccounts.value = (await useEntities("ownaccounts").select())
@@ -66,7 +66,7 @@ const setup = async () => {
   console.log(openDocuments.value)
 
   allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
-  allocatedIncomingInvoices.value = incominginvoices.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
+  allocatedIncomingInvoices.value = incominginvoices.value.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
   console.log(allocatedDocuments.value)
   console.log(allocatedIncomingInvoices.value)
   openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived &&  i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i,false))
@@ -513,7 +513,7 @@ const archiveStatement = async () => {
         >
           <template #header>
             <div class="flex flex-row justify-between">
-              <span>{{item.incominginvoice.reference}} - {{vendors.find(i => i.id === item.incominginvoice.vendor).name}}</span>
+             <span> {{incominginvoices.find(i => i.id === item.incominginvoice).reference}} - {{incominginvoices.find(i => i.id === item.incominginvoice).vendor?.name}}</span>
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
@@ -533,7 +533,7 @@ const archiveStatement = async () => {
         >
           <template #header>
             <div class="flex flex-row justify-between">
-              <span v-if="customers.find(i => i.id === item.createddocument.customer)">{{item.createddocument.documentNumber}} - {{customers.find(i => i.id === item.createddocument.customer).name}}</span>
+              <span v-if="customers.find(i => i.id === createddocuments.find(i => i.id === item.createddocument).customer?.id)">{{createddocuments.find(i => i.id === item.createddocument).documentNumber}} - {{createddocuments.find(i => i.id === item.createddocument).customer?.name}}</span>
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>

From 7d4adbb3e4b71e299bdc1aba00cac27da4e635ac Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Thu, 18 Dec 2025 12:45:49 +0100
Subject: [PATCH 20/22] Fix Service Saving

---
 components/materialComposing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/materialComposing.vue b/components/materialComposing.vue
index b3c802a..201f3ce 100644
--- a/components/materialComposing.vue
+++ b/components/materialComposing.vue
@@ -53,7 +53,7 @@ const setRowData = (row) => {
   let product = products.value.find(i => i.id === row.product)
 
   row.unit = product.unit
-  row.price = product.sellingPrice
+  row.price = product.selling_price
 
   calculateTotalMaterialPrice()
 }

From d5999bfb20bb5eb799c70a65657f64124c97c010 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 27 Dec 2025 12:56:54 +0100
Subject: [PATCH 21/22] Fix

---
 components/DocumentUploadModal.vue         | 171 ++++++++++++++-------
 components/columnRenderings/address.vue    |   1 +
 nuxt.config.ts                             |   2 +-
 package.json                               |   4 +-
 pages/banking/index.vue                    |   6 +-
 pages/banking/statements/[mode]/[[id]].vue |  22 ++-
 pages/createDocument/index.vue             |  98 ++++++------
 pages/createDocument/serialInvoice.vue     |   6 +-
 pages/files/index.vue                      |  74 ++++++---
 9 files changed, 249 insertions(+), 135 deletions(-)

diff --git a/components/DocumentUploadModal.vue b/components/DocumentUploadModal.vue
index b3d24b2..482db80 100644
--- a/components/DocumentUploadModal.vue
+++ b/components/DocumentUploadModal.vue
@@ -1,4 +1,6 @@
-<script setup >
+<script setup>
+// Falls useDropZone nicht auto-importiert wird:
+// import { useDropZone } from '@vueuse/core'
 
 const props = defineProps({
   fileData: {
@@ -12,11 +14,35 @@ const props = defineProps({
 const emit = defineEmits(["uploadFinished"])
 
 const modal = useModal()
-const profileStore = useProfileStore()
+// const profileStore = useProfileStore() // Wird im Snippet nicht genutzt, aber ich lasse es drin
 
 const uploadInProgress = ref(false)
 const availableFiletypes = ref([])
 
+// 1. State für die Dateien und die Dropzone Referenz
+const selectedFiles = ref([])
+const dropZoneRef = ref(null)
+
+// 2. Setup der Dropzone
+const onDrop = (files) => {
+  // Wenn Dateien gedroppt werden, speichern wir sie
+  // files ist hier meist ein Array, wir stellen sicher, dass es passt
+  selectedFiles.value = files || []
+}
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop,
+  // Verhindert, dass der Browser das Bild einfach öffnet
+  preventDefaultForDrop: true,
+})
+
+// 3. Handler für den klassischen Datei-Input Klick
+const onFileInputChange = (e) => {
+  if (e.target.files) {
+    selectedFiles.value = Array.from(e.target.files)
+  }
+}
+
 const setup = async () => {
   availableFiletypes.value = await useEntities("filetags").select()
 }
@@ -24,81 +50,112 @@ const setup = async () => {
 setup()
 
 const uploadFiles = async () => {
+  // Validierung: Keine Dateien ausgewählt
+  if (!selectedFiles.value || selectedFiles.value.length === 0) {
+    alert("Bitte wählen Sie zuerst Dateien aus.") // Oder eine schönere Toast Notification
+    return
+  }
+
   uploadInProgress.value = true;
 
   let fileData = props.fileData
   delete fileData.typeEnabled
 
-
-
-  await useFiles().uploadFiles(fileData,  document.getElementById("fileUploadInput").files,[],true)
+  // 4. Hier nutzen wir nun selectedFiles.value statt document.getElementById
+  await useFiles().uploadFiles(fileData, selectedFiles.value, [], true)
 
   uploadInProgress.value = false;
   emit("uploadFinished")
   modal.close()
 }
+
+// Helper Funktion um Dateinamen anzuzeigen (da das Input Feld leer bleibt beim Droppen)
+const fileNames = computed(() => {
+  if (!selectedFiles.value.length) return ''
+  return selectedFiles.value.map(f => f.name).join(', ')
+})
 </script>
 
 <template>
   <UModal>
-    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Datei hochladen
-          </h3>
-          <UButton
-              color="gray"
-              variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
-              class="-my-1"
-              @click="modal.close()"
-              :disabled="uploadInProgress"
-          />
-        </div>
-      </template>
+    <div ref="dropZoneRef" class="relative h-full flex flex-col">
 
-      <UFormGroup
-          label="Datei:"
+      <div
+          v-if="isOverDropZone"
+          class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
       >
-        <UInput
-            type="file"
-            id="fileUploadInput"
-            multiple
-            accept="image/jpeg, image/png, image/gif, application/pdf"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Typ:"
-          class="mt-3"
-      >
-        <USelectMenu
-            option-attribute="name"
-            value-attribute="id"
-            searchable
-            searchable-placeholder="Suchen..."
-            :options="availableFiletypes"
-            v-model="props.fileData.type"
-            :disabled="!props.fileData.typeEnabled"
+        <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+          Dateien hier ablegen
+        </span>
+      </div>
+
+      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Datei hochladen
+            </h3>
+            <UButton
+                color="gray"
+                variant="ghost"
+                icon="i-heroicons-x-mark-20-solid"
+                class="-my-1"
+                @click="modal.close()"
+                :disabled="uploadInProgress"
+            />
+          </div>
+        </template>
+
+        <UFormGroup
+            label="Datei:"
+            :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
         >
-          <template #label>
-            <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
-            <span v-else>Keine Typ ausgewählt</span>
-          </template>
-        </USelectMenu>
-      </UFormGroup>
+          <UInput
+              v-if="selectedFiles.length === 0"
+              type="file"
+              id="fileUploadInput"
+              multiple
+              accept="image/jpeg, image/png, image/gif, application/pdf"
+              @change="onFileInputChange"
+          />
 
-      <template #footer>
-        <UButton
-            @click="uploadFiles"
-            :loading="uploadInProgress"
-            :disabled="uploadInProgress"
-        >Hochladen</UButton>
-      </template>
-    </UCard>
+          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+          </div>
+        </UFormGroup>
+
+        <UFormGroup
+            label="Typ:"
+            class="mt-3"
+        >
+          <USelectMenu
+              option-attribute="name"
+              value-attribute="id"
+              searchable
+              searchable-placeholder="Suchen..."
+              :options="availableFiletypes"
+              v-model="props.fileData.type"
+              :disabled="!props.fileData.typeEnabled"
+          >
+            <template #label>
+              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+              <span v-else>Kein Typ ausgewählt</span>
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+
+        <template #footer>
+          <UButton
+              @click="uploadFiles"
+              :loading="uploadInProgress"
+              :disabled="uploadInProgress || selectedFiles.length === 0"
+          >Hochladen</UButton>
+        </template>
+      </UCard>
+    </div>
   </UModal>
 </template>
 
 <style scoped>
-
+/* Optional: Animationen für das Overlay */
 </style>
\ No newline at end of file
diff --git a/components/columnRenderings/address.vue b/components/columnRenderings/address.vue
index d4528c7..4747bcd 100644
--- a/components/columnRenderings/address.vue
+++ b/components/columnRenderings/address.vue
@@ -9,6 +9,7 @@ const props = defineProps({
 </script>
 
 <template>
+  <span v-if="props.row.infoData.streetNumber">{{props.row.infoData.streetNumber}},</span>
   <span v-if="props.row.infoData.street">{{props.row.infoData.street}},</span>
   <span v-if="props.row.infoData.special">{{props.row.infoData.special}},</span>
   <span v-if="props.row.infoData.zip">{{props.row.infoData.zip}},</span>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ad3b05c..5e9547f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,7 +7,7 @@ export default defineNuxtConfig({
         }
     },
 
-    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet'],
+    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet', '@vueuse/nuxt'],
 
     ssr: false,
 
diff --git a/package.json b/package.json
index d1a6d42..5ea1bbd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "@capacitor/cli": "^7.0.0",
     "@nuxtjs/leaflet": "^1.2.3",
     "@nuxtjs/supabase": "^1.1.4",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
     "nuxt": "^3.14.1592",
     "nuxt-tiptap-editor": "^1.2.0",
     "vue": "^3.5.13",
@@ -87,4 +89,4 @@
     "zod": "^3.25.76",
     "zpl-renderer-js": "^2.0.2"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/banking/index.vue b/pages/banking/index.vue
index 67af524..6b7cd38 100644
--- a/pages/banking/index.vue
+++ b/pages/banking/index.vue
@@ -58,7 +58,7 @@ const clearSearchString = () => {
   searchString.value = ''
 }
 
-const filterAccount = ref(bankaccounts || [])
+const filterAccount = ref(bankaccounts.value || [])
 
 const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
@@ -150,7 +150,7 @@ setupPage()
       </USelectMenu>
     </template>
     <template #right>
-      <USelectMenu
+<!--      <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
           :options="templateColumns"
@@ -162,7 +162,7 @@ setupPage()
         <template #label>
           Spalten
         </template>
-      </USelectMenu>
+      </USelectMenu>-->
       <USelectMenu
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
diff --git a/pages/banking/statements/[mode]/[[id]].vue b/pages/banking/statements/[mode]/[[id]].vue
index f62350e..3298cef 100644
--- a/pages/banking/statements/[mode]/[[id]].vue
+++ b/pages/banking/statements/[mode]/[[id]].vue
@@ -12,7 +12,7 @@ defineShortcuts({
 })
 
 const dataStore = useDataStore()
-const profileStore = useProfileStore()
+const tempStore = useTempStore()
 const route = useRoute()
 const router = useRouter()
 const mode = ref(route.params.mode || "show")
@@ -177,7 +177,14 @@ const removeAllocation = async (allocationId) => {
   await setup()
 }
 
-const searchString = ref("")
+const searchString = ref(tempStore.searchStrings["bankstatementsedit"] ||'')
+
+const clearSearchString = () => {
+  searchString.value = ''
+  tempStore.clearSearchString("bankstatementsedit")
+
+}
+
 const filteredDocuments = computed(() => {
 
 
@@ -546,7 +553,15 @@ const archiveStatement = async () => {
               class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
+          <UButton
+              icon="i-heroicons-eye"
+              variant="outline"
+              color="primary"
+              class="mr-3 mt-3"
+              @click="navigateTo(`/createDocument/show/${item.createddocument}`)"
+          />
         </UCard>
+
       </div>
     </div>
 
@@ -780,6 +795,7 @@ const archiveStatement = async () => {
               placeholder="Suche..."
               class="hidden lg:block w-full mr-1"
               @keydown.esc="$event.target.blur()"
+              @change="tempStore.modifySearchString('bankstatementsedit',searchString)"
           >
             <template #trailing>
               <UKbd value="/" />
@@ -789,7 +805,7 @@ const archiveStatement = async () => {
               variant="outline"
               icon="i-heroicons-x-mark"
               color="rose"
-              @click="searchString = ''"
+              @click="clearSearchString"
           />
         </InputGroup>
       </div>
diff --git a/pages/createDocument/index.vue b/pages/createDocument/index.vue
index 65c0e77..b62a84c 100644
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -1,26 +1,26 @@
 <template>
-  <UDashboardNavbar  title="Ausgangsbelege" :badge="filteredRows.length">
+  <UDashboardNavbar :badge="filteredRows.length" title="Ausgangsbelege">
     <template #right>
       <UInput
           id="searchinput"
           v-model="searchString"
-          icon="i-heroicons-funnel"
           autocomplete="off"
-          placeholder="Suche..."
           class="hidden lg:block"
-          @keydown.esc="$event.target.blur()"
+          icon="i-heroicons-funnel"
+          placeholder="Suche..."
           @change="tempStore.modifySearchString('createddocuments',searchString)"
+          @keydown.esc="$event.target.blur()"
       >
         <template #trailing>
-          <UKbd value="/" />
+          <UKbd value="/"/>
         </template>
       </UInput>
       <UButton
+          v-if="searchString.length > 0"
+          color="rose"
           icon="i-heroicons-x-mark"
           variant="outline"
-          color="rose"
           @click="clearSearchString()"
-          v-if="searchString.length > 0"
       />
       <UButton
           @click="router.push(`/createDocument/edit`)"
@@ -33,27 +33,27 @@
 
 
     <template #right>
-      <USelectMenu
+<!--      <USelectMenu
           v-model="selectedColumns"
-          icon="i-heroicons-adjustments-horizontal-solid"
           :options="templateColumns"
-          multiple
-          class="hidden lg:block"
           by="key"
+          class="hidden lg:block"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
           @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
       >
         <template #label>
           Spalten
         </template>
-      </USelectMenu>
+      </USelectMenu>-->
       <USelectMenu
           v-if="selectableFilters.length > 0"
+          v-model="selectedFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :options="selectableFilters"
+          :ui-menu="{ width: 'min-w-max' }"
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
-          v-model="selectedFilters"
-          :options="selectableFilters"
-          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
       >
         <template #label>
           Filter
@@ -63,36 +63,36 @@
   </UDashboardToolbar>
   <UTabs :items="selectedTypes" class="m-3">
     <template #default="{item}">
-      {{item.label}}
+      {{ item.label }}
       <UBadge
-          variant="outline"
           class="ml-2"
+          variant="outline"
       >
-        {{filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type).length}}
+        {{ filteredRows.filter(i => item.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : item.key === i.type).length }}
       </UBadge>
     </template>
     <template #item="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
-            :rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
             :columns="columns"
-            class="w-full"
-            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            @select="selectItem"
             :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
+            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+            class="w-full"
+            @select="selectItem"
         >
           <template #type-data="{row}">
-            {{dataStore.documentTypesForCreation[row.type].labelSingle}}
-<!--
-            <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
--->
+            {{ dataStore.documentTypesForCreation[row.type].labelSingle }}
+            <!--
+                        <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
+            -->
           </template>
           <template #state-data="{row}">
       <span
           v-if="row.state === 'Entwurf'"
           class="text-rose-500"
       >
-        {{row.state}}
+        {{ row.state }}
       </span>
             <!--      <span
                       v-if="row.state === 'Gebucht'"
@@ -104,49 +104,56 @@
                 v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
                 class="text-primary-500"
             >
-          {{row.state}}
+          {{ row.state }}
       </span>
             <span
                 v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
                 class="text-cyan-500"
             >
-          Storniert mit {{items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber}}
+          Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
       </span>
             <span
                 v-else-if="row.state === 'Gebucht'"
                 class="text-primary-500"
             >
-          {{row.state}}
+          {{ row.state }}
       </span>
           </template>
           <template #partner-data="{row}">
-            <span v-if="row.customer && row.customer.name.length <21">{{row.customer ? row.customer.name : ""}}</span>
+            <span v-if="row.customer && row.customer.name.length <21">{{ row.customer ? row.customer.name : "" }}</span>
             <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
-              {{row.customer.name.substring(0,20)}}...
+              {{ row.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
           <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
-            <span v-else>{{row.documentNumber}}</span>
+            <span v-if="row === filteredRows[selectedItem]"
+                  class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
+            <span v-else>{{ row.documentNumber }}</span>
           </template>
           <template #date-data="{row}">
-            <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-            <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
+            <span
+                v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
           </template>
           <template #dueDate-data="{row}">
-            <span v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)" :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+            <span
+                v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
+                :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}</span>
           </template>
           <template #paid-data="{row}">
-            <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
+            <div
+                v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
               <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
               <span v-else class="text-rose-600">Offen</span>
             </div>
           </template>
           <template #amount-data="{row}">
-            <span v-if="row.type !== 'deliveryNotes'">{{displayCurrency(useSum().getCreatedDocumentSum(row,items))}}</span>
+            <span
+                v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
           </template>
           <template #amountOpen-data="{row}">
-            <span v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n,{amount}) => n + amount, 0))}}</span>
+            <span
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}</span>
           </template>
         </UTable>
       </div>
@@ -175,14 +182,14 @@ defineShortcuts({
     }
   },
   'arrowdown': () => {
-    if(selectedItem.value < filteredRows.value.length - 1) {
+    if (selectedItem.value < filteredRows.value.length - 1) {
       selectedItem.value += 1
     } else {
       selectedItem.value = 0
     }
   },
   'arrowup': () => {
-    if(selectedItem.value === 0) {
+    if (selectedItem.value === 0) {
       selectedItem.value = filteredRows.value.length - 1
     } else {
       selectedItem.value -= 1
@@ -202,7 +209,7 @@ const selectedItem = ref(0)
 
 
 const setupPage = async () => {
-  items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)","documentNumber",true, true))
+  items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
 }
 
 setupPage()
@@ -309,7 +316,7 @@ const filteredRows = computed(() => {
     }
   })
 
-  if(selectedFilters.value.length > 0) {
+  if (selectedFilters.value.length > 0) {
     selectedFilters.value.forEach(filterName => {
       let filter = dataType.filters.find(i => i.name === filterName)
       tempItems = tempItems.filter(filter.filterFunction)
@@ -317,7 +324,6 @@ const filteredRows = computed(() => {
   }
 
 
-
   tempItems = useSearch(searchString.value, tempItems)
 
 
diff --git a/pages/createDocument/serialInvoice.vue b/pages/createDocument/serialInvoice.vue
index 8436158..074d487 100644
--- a/pages/createDocument/serialInvoice.vue
+++ b/pages/createDocument/serialInvoice.vue
@@ -1,5 +1,3 @@
-
-
 <template>
   <UDashboardNavbar title="Serienrechnungen" :badge="filteredRows.length">
     <template #right>
@@ -25,7 +23,7 @@
   </UDashboardNavbar>
   <UDashboardToolbar>
     <template #right>
-      <USelectMenu
+<!--      <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
           :options="templateColumns"
@@ -36,7 +34,7 @@
         <template #label>
           Spalten
         </template>
-      </USelectMenu>
+      </USelectMenu>-->
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
diff --git a/pages/files/index.vue b/pages/files/index.vue
index 89ffec4..fd8313e 100644
--- a/pages/files/index.vue
+++ b/pages/files/index.vue
@@ -364,33 +364,67 @@ const clearSearchString = () => {
           variant="outline"
           v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
       >Herunterladen</UButton>
-      <UModal
-          v-model="createFolderModalOpen"
-      >
-        <UCard>
+      <UModal v-model="createFolderModalOpen">
+        <UCard :ui="{ body: { base: 'space-y-4' } }">
           <template #header>
-            Ordner Erstellen
-          </template>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Ordner Erstellen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="createFolderModalOpen = false" />
+          </div>
+        </template>
 
+        <UFormGroup label="Name des Ordners" required>
+          <UInput
+              v-model="createFolderData.name"
+              placeholder="z.B. Rechnungen 2024"
+              autofocus
+          />
+        </UFormGroup>
 
-
-          <UFormGroup
-              label="Ordner erstellen"
+        <UFormGroup
+            label="Standard Dateityp"
+        >
+          <USelectMenu
+              v-model="createFolderData.standardFiletype"
+              :options="filetags"
+              option-attribute="name"
+              value-attribute="id"
+              searchable
+              searchable-placeholder="Typ suchen..."
+              placeholder="Kein Standard-Typ"
+              clear-search-on-close
           >
-            <UInput
-                v-model="createFolderData.name"
+            <template #label>
+              <span v-if="createFolderData.standardFiletype">
+                {{ filetags.find(t => t.id === createFolderData.standardFiletype)?.name }}
+              </span>
+              <span v-else class="text-gray-400">Kein Typ ausgewählt</span>
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+
+          <div v-if="createFolderData.standardFiletype">
+            <UCheckbox
+                v-model="createFolderData.standardFiletypeIsOptional"
+                name="isOptional"
+                label="Dateityp ist optional"
+                help="Wenn deaktiviert, MUSS der Nutzer beim Upload diesen Typ verwenden."
             />
-          </UFormGroup>
+          </div>
 
           <template #footer>
-            <UButton
-              @click="createFolder"
-            >
-              Erstellen
-            </UButton>
+            <div class="flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="createFolderModalOpen = false">
+                Abbrechen
+              </UButton>
+              <UButton @click="createFolder" :disabled="!createFolderData.name">
+                Erstellen
+              </UButton>
+            </div>
           </template>
         </UCard>
-
       </UModal>
 
     </template>
@@ -429,8 +463,8 @@ const clearSearchString = () => {
 
               </td>
               <td>
-                <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
-                <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
+                <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
+                <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
               </td>
             </tr>
           </table>

From 240264aafb616006e9395daf3cc0faa1cf4579c0 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 27 Dec 2025 13:04:02 +0100
Subject: [PATCH 22/22] Fix Serialinvoice table

---
 pages/createDocument/serialInvoice.vue | 36 ++++++--------------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/pages/createDocument/serialInvoice.vue b/pages/createDocument/serialInvoice.vue
index 074d487..8900d36 100644
--- a/pages/createDocument/serialInvoice.vue
+++ b/pages/createDocument/serialInvoice.vue
@@ -63,26 +63,6 @@
     <template #type-data="{row}">
       {{dataStore.documentTypesForCreation[row.type].labelSingle}}
     </template>
-    <template #state-data="{row}">
-        <span
-            v-if="row.state === 'Entwurf'"
-            class="text-rose-500"
-        >
-          {{row.state}}
-        </span>
-      <span
-          v-if="row.state === 'Gebucht'"
-          class="text-cyan-500"
-      >
-          {{row.state}}
-        </span>
-      <span
-          v-if="row.state === 'Abgeschlossen'"
-          class="text-primary-500"
-      >
-          {{row.state}}
-        </span>
-    </template>
     <template #partner-data="{row}">
       <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
 
@@ -114,6 +94,10 @@
     <template #contract-data="{row}">
       <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
     </template>
+    <template #serialConfig.intervall-data="{row}">
+      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+    </template>
   </UTable>
 
 </template>
@@ -159,13 +143,9 @@ const filteredRows = computed(() => {
 
 const templateColumns = [
   {
-    key: 'type',
-    label: "Typ"
+    key: 'serialConfig.active',
+    label: "Aktiv"
   },{
-    key: 'state',
-    label: "Status"
-  },
-  {
     key: "amount",
     label: "Betrag"
   },
@@ -178,8 +158,8 @@ const templateColumns = [
     label: "Vertrag"
   },
   {
-    key: 'serialConfig.active',
-    label: "Aktiv"
+    key: 'serialConfig.intervall',
+    label: "Rhythmus"
   }
 ]
 const selectedColumns = ref(templateColumns)