4. Zwischenstand

frontend/app.config.ts

@@ -1,7 +1,9 @@
 export default defineAppConfig({
     ui: {
-        primary: 'green',
+        colors: {
-        gray: 'slate',
+            primary: 'green',
+            neutral: 'slate'
+        },
         tooltip: {
             background: '!bg-background'
         },

frontend/app.vue

@@ -1,5 +1,6 @@
 <script setup>
 import * as Sentry from "@sentry/browser"
+import { de as germanLocale } from "@nuxt/ui/locale"
 
 
 
@@ -47,14 +48,16 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="safearea">
+  <UApp :locale="germanLocale">
-    <NuxtLayout>
+    <div class="safearea">
-      <NuxtPage/>
+      <NuxtLayout>
-    </NuxtLayout>
+        <NuxtPage/>
-    <UNotifications/>
+      </NuxtLayout>
-    <USlideovers />
+      <UNotifications/>
-    <UModals/>
+      <USlideovers />
-  </div>
+      <UModals/>
+    </div>
+  </UApp>
 
 
 

frontend/assets/css/main.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme static {
+  --font-sans: "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --color-green-50: #f4fbf2;
+  --color-green-100: #e7f7e1;
+  --color-green-200: #cdeec4;
+  --color-green-300: #a6e095;
+  --color-green-400: #69c350;
+  --color-green-500: #53ad3a;
+  --color-green-600: #418e2b;
+  --color-green-700: #357025;
+  --color-green-800: #2d5922;
+  --color-green-900: #254a1d;
+  --color-green-950: #10280b;
+}
+
+:root {
+  --ui-container: 90rem;
+}
+
+body {
+  font-family: var(--font-sans);
+}

frontend/components/ArchiveButton.vue

@@ -38,34 +38,36 @@ const emitConfirm = () => {
   >
     Archivieren
   </UButton>
-  <UModal v-model="showModal">
+  <UModal v-model:open="showModal">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <span class="text-md font-bold">Archivieren bestätigen</span>
+        <template #header>
-      </template>
+          <span class="text-md font-bold">Archivieren bestätigen</span>
-      Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
+        </template>
+        Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
 
-      <template #footer>
+        <template #footer>
-        <div class="text-right">
+          <div class="text-right">
-          <UButtonGroup>
+            <UButtonGroup>
-            <UButton
+              <UButton
-                variant="outline"
+                  variant="outline"
-                @click="showModal = false"
+                  @click="showModal = false"
-            >
+              >
-              Abbrechen
+                Abbrechen
-            </UButton>
+              </UButton>
-            <UButton
+              <UButton
-                @click="emitConfirm"
+                  @click="emitConfirm"
-                class="ml-2"
+                  class="ml-2"
-                color="rose"
+                  color="error"
-            >
+              >
-              Archivieren
+                Archivieren
-            </UButton>
+              </UButton>
-          </UButtonGroup>
+            </UButtonGroup>
 
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 

frontend/components/BankAccountAssignInput.vue

@@ -49,7 +49,7 @@ const assignByIban = async () => {
 
   const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
   if (!match) {
-    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "rose" })
+    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "error" })
     return
   }
 
@@ -68,7 +68,7 @@ const removeAssigned = (id) => {
 
 const createAndAssign = async () => {
   if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) {
-    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "rose" })
+    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "error" })
     return
   }
 
@@ -140,43 +140,45 @@ loadAccounts()
     </InputGroup>
   </div>
 
-  <UModal v-model="showCreate">
+  <UModal v-model:open="showCreate">
-    <UCard>
+    <template #content>
-      <template #header>Neue Bankverbindung erstellen</template>
+      <UCard>
-      <div class="space-y-3">
+        <template #header>Neue Bankverbindung erstellen</template>
-        <UFormGroup label="IBAN">
+        <div class="space-y-3">
-          <InputGroup>
+          <UFormField label="IBAN">
-            <UInput
+            <InputGroup>
-                v-model="createPayload.iban"
+              <UInput
-                @blur="resolveCreatePayloadFromIban"
+                  v-model="createPayload.iban"
-                @keydown.enter.prevent="resolveCreatePayloadFromIban"
+                  @blur="resolveCreatePayloadFromIban"
-            />
+                  @keydown.enter.prevent="resolveCreatePayloadFromIban"
-            <UButton
+              />
-                color="gray"
+              <UButton
-                variant="outline"
+                  color="gray"
-                :loading="resolvingIban"
+                  variant="outline"
-                @click="resolveCreatePayloadFromIban"
+                  :loading="resolvingIban"
-            >
+                  @click="resolveCreatePayloadFromIban"
-              Ermitteln
+              >
-            </UButton>
+                Ermitteln
-          </InputGroup>
+              </UButton>
-        </UFormGroup>
+            </InputGroup>
-        <UFormGroup label="BIC">
+          </UFormField>
-          <UInput v-model="createPayload.bic" />
+          <UFormField label="BIC">
-        </UFormGroup>
+            <UInput v-model="createPayload.bic" />
-        <UFormGroup label="Bankinstitut">
+          </UFormField>
-          <UInput v-model="createPayload.bankName" />
+          <UFormField label="Bankinstitut">
-        </UFormGroup>
+            <UInput v-model="createPayload.bankName" />
-        <UFormGroup label="Beschreibung (optional)">
+          </UFormField>
-          <UInput v-model="createPayload.description" />
+          <UFormField label="Beschreibung (optional)">
-        </UFormGroup>
+            <UInput v-model="createPayload.description" />
-      </div>
+          </UFormField>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
-          <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
         </div>
-      </template>
+        <template #footer>
-    </UCard>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
+            <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/ButtonWithConfirm.vue

@@ -31,33 +31,35 @@ const emitConfirm = () => {
   >
     <slot name="button"></slot>
   </UButton>
-  <UModal v-model="showModal">
+  <UModal v-model:open="showModal">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <slot name="header"></slot>
+        <template #header>
-      </template>
+          <slot name="header"></slot>
-      <slot/>
+        </template>
-      <template #footer>
+        <slot/>
-        <div class="text-right">
+        <template #footer>
-          <UButtonGroup>
+          <div class="text-right">
-            <UButton
+            <UButtonGroup>
-                variant="outline"
+              <UButton
-                @click="showModal = false"
+                  variant="outline"
-            >
+                  @click="showModal = false"
-              Abbrechen
+              >
-            </UButton>
+                Abbrechen
-            <UButton
+              </UButton>
-                @click="emitConfirm"
+              <UButton
-                class="ml-2"
+                  @click="emitConfirm"
-                color="rose"
+                  class="ml-2"
-            >
+                  color="error"
-              Archivieren
+              >
-            </UButton>
+                Archivieren
-          </UButtonGroup>
+              </UButton>
+            </UButtonGroup>
 
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 

frontend/components/Calculator.vue

@@ -51,8 +51,8 @@
       <div class="grid grid-cols-4 gap-2">
         <UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip>
         <UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip>
-        <UTooltip text="Netto (-19%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
+        <UTooltip text="Netto (-19%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
-        <UTooltip text="Netto (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
+        <UTooltip text="Netto (-7%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
 
         <UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip>
         <UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
@@ -227,9 +227,14 @@ defineShortcuts({
   width: 4px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
-  @apply bg-transparent;
+  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  @apply bg-gray-200 dark:bg-gray-700 rounded-full;
+  background: #e5e7eb;
+  border-radius: 9999px;
+}
+
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #374151;
 }
 </style>

frontend/components/DocumentDisplayModal.vue

@@ -156,7 +156,8 @@ const moveFile = async () => {
 
 <template>
   <UModal fullscreen >
-    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
+    <template #content>
+      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
       <template #header>
         <div class="flex flex-row justify-between">
           <div class="flex items-center gap-2">
@@ -186,7 +187,7 @@ const moveFile = async () => {
         <div class="w-2/3 p-5" v-if="!false">
           <UButtonGroup>
             <ArchiveButton
-                color="rose"
+                color="error"
                 variant="outline"
                 type="files"
                 @confirmed="archiveDocument"
@@ -202,7 +203,7 @@ const moveFile = async () => {
             </UButton>
           </UButtonGroup>
 
-          <UDivider>Zuweisungen</UDivider>
+          <USeparator label="Zuweisungen"/>
           <table class="w-full">
             <tr v-if="props.documentData.project">
               <td>Projekt</td>
@@ -278,44 +279,44 @@ const moveFile = async () => {
             </tr>
           </table>
 
-          <UDivider class="my-3">Datei zuweisen</UDivider>
+          <USeparator class="my-3" label="Datei zuweisen"/>
 
-          <UFormGroup
+          <UFormField
               label="Resource auswählen"
           >
             <USelectMenu
-                :options="resourceOptions"
+                :items="resourceOptions"
                 v-model="resourceToAssign"
-                value-attribute="value"
+                value-key="value"
-                option-attribute="label"
+                label-key="label"
                 @change="getItemsBySelectedResource"
             >
 
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
-          <UFormGroup
+          <UFormField
               label="Eintrag auswählen:"
           >
             <USelectMenu
-                :options="itemOptions"
+                :items="itemOptions"
                 v-model="idToAssign"
-                :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
+                :label-key="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
-                value-attribute="id"
+                value-key="id"
                 @change="updateDocumentAssignment"
             ></USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
 
-          <UDivider class="my-5">Datei verschieben</UDivider>
+          <USeparator class="my-5" label="Datei verschieben"/>
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="folderToMoveTo"
-                value-attribute="id"
+                value-key="id"
-                option-attribute="name"
+                label-key="name"
-                :options="folders"
+                :items="folders"
             />
             <UButton
               @click="moveFile"
@@ -324,34 +325,35 @@ const moveFile = async () => {
             >Verschieben</UButton>
           </InputGroup>
 
-          <UDivider class="my-5">Dateityp</UDivider>
+          <USeparator class="my-5" label="Dateityp"/>
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.type"
-                value-attribute="id"
+                value-key="id"
-                option-attribute="name"
+                label-key="name"
-                :options="filetypes"
+                :items="filetypes"
                 @change="updateDocument"
             />
           </InputGroup>
-          <UDivider class="my-5">Dokumentenbox</UDivider>
+          <USeparator class="my-5" label="Dokumentenbox" />
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.documentbox"
-                value-attribute="id"
+                value-key="id"
-                option-attribute="key"
+                label-key="key"
-                :options="documentboxes"
+                :items="documentboxes"
                 @change="updateDocument"
             />
           </InputGroup>
 
         </div>
       </div>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 

frontend/components/DocumentUploadModal.vue

@@ -78,81 +78,83 @@ const fileNames = computed(() => {
 
 <template>
   <UModal>
-    <div ref="dropZoneRef" class="relative h-full flex flex-col">
+    <template #content>
+      <div ref="dropZoneRef" class="relative h-full flex flex-col">
 
-      <div
+        <div
-          v-if="isOverDropZone"
+            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"
+            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"
-      >
-        <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'"
         >
-          <UInput
+          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
-              v-if="selectedFiles.length === 0"
+            Dateien hier ablegen
-              type="file"
+          </span>
-              id="fileUploadInput"
+        </div>
-              multiple
-              accept="image/jpeg, image/png, image/gif, application/pdf"
-              @change="onFileInputChange"
-          />
 
-          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+        <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+          <template #header>
-          </div>
+            <div class="flex items-center justify-between">
-        </UFormGroup>
+              <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
+          <UFormField
-            label="Typ:"
+              label="Datei:"
-            class="mt-3"
+              :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
-        >
-          <USelectMenu
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              searchable-placeholder="Suchen..."
-              :options="availableFiletypes"
-              v-model="props.fileData.type"
-              :disabled="!props.fileData.typeEnabled"
           >
-            <template #label>
+            <UInput
-              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+                v-if="selectedFiles.length === 0"
-              <span v-else>Kein Typ ausgewählt</span>
+                type="file"
-            </template>
+                id="fileUploadInput"
-          </USelectMenu>
+                multiple
-        </UFormGroup>
+                accept="image/jpeg, image/png, image/gif, application/pdf"
+                @change="onFileInputChange"
+            />
 
-        <template #footer>
+            <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
-          <UButton
+              Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
-              @click="uploadFiles"
+            </div>
-              :loading="uploadInProgress"
+          </UFormField>
-              :disabled="uploadInProgress || selectedFiles.length === 0"
+
-          >Hochladen</UButton>
+          <UFormField
-        </template>
+              label="Typ:"
-      </UCard>
+              class="mt-3"
-    </div>
+          >
+            <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>
+          </UFormField>
+
+          <template #footer>
+            <UButton
+                @click="uploadFiles"
+                :loading="uploadInProgress"
+                :disabled="uploadInProgress || selectedFiles.length === 0"
+            >Hochladen</UButton>
+          </template>
+        </UCard>
+      </div>
+    </template>
   </UModal>
 </template>
 

frontend/components/EntityEdit.vue

@@ -211,6 +211,22 @@ const contentChanged = (content, datapoint) => {
   }
 }
 
+const getSelectItems = (datapoint) => {
+  return datapoint.selectManualOptions || loadedOptions.value[datapoint.selectDataType] || []
+}
+
+const getSelectValueKey = (datapoint) => {
+  return datapoint.selectValueAttribute || 'id'
+}
+
+const getSelectLabelKey = (datapoint) => {
+  return datapoint.selectOptionAttribute || 'label'
+}
+
+const getSelectSearchInput = (datapoint) => {
+  return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
+}
+
 
 const createItem = async () => {
   let ret = null
@@ -264,7 +280,7 @@ const updateItem = async () => {
     </template>
     <template #right>
       <ArchiveButton
-          color="rose"
+          color="error"
           v-if="platform !== 'mobile'"
           variant="outline"
           :type="type"
@@ -336,12 +352,12 @@ const updateItem = async () => {
             v-for="(columnName,index) in dataType.inputColumns"
             :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
         >
-          <UDivider>{{ columnName }}</UDivider>
+          <USeparator :label="columnName"/>
 
           <div
               v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
           >
-            <UFormGroup
+            <UFormField
                 v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
                 :label="datapoint.label"
             >
@@ -354,7 +370,7 @@ const updateItem = async () => {
               </template>
               <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
                 <UInput
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-if="['text','number'].includes(datapoint.inputType)"
@@ -367,25 +383,25 @@ const updateItem = async () => {
                     <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
                   </template>
                 </UInput>
-                <UToggle
+                <USwitch
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'bool'"
                     v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                 />
                 <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
+                    :items="getSelectItems(datapoint)"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :label-key="getSelectLabelKey(datapoint)"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :value-key="getSelectValueKey(datapoint)"
-                    :searchable="datapoint.selectSearchAttributes"
+                    :search-input="getSelectSearchInput(datapoint)"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :filter-fields="datapoint.selectSearchAttributes"
                     :multiple="datapoint.selectMultiple"
                 >
                   <template #empty>
@@ -393,7 +409,7 @@ const updateItem = async () => {
                   </template>
                 </USelectMenu>
                 <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'textarea'"
@@ -401,9 +417,9 @@ const updateItem = async () => {
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     rows="4"
                 />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                       variant="outline"
@@ -411,17 +427,17 @@ const updateItem = async () => {
 
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     />
                   </template>
                 </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                       variant="outline"
@@ -429,10 +445,10 @@ const updateItem = async () => {
 
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                         mode="datetime"
                     />
@@ -460,7 +476,7 @@ const updateItem = async () => {
               <InputGroup class="w-full" v-else>
                 <UInput
                     class="flex-auto"
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-if="['text','number'].includes(datapoint.inputType)"
                     v-model="item[datapoint.key]"
@@ -472,34 +488,33 @@ const updateItem = async () => {
                     {{ datapoint.inputTrailing }}
                   </template>
                 </UInput>
-                <UToggle
+                <USwitch
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'bool'"
                     v-model="item[datapoint.key]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                 />
                 <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
+                    :items="getSelectItems(datapoint)"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :label-key="getSelectLabelKey(datapoint)"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :value-key="getSelectValueKey(datapoint)"
-                    :searchable="datapoint.selectSearchAttributes"
+                    :search-input="getSelectSearchInput(datapoint)"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :filter-fields="datapoint.selectSearchAttributes"
                     :multiple="datapoint.selectMultiple"
-                    searchable-placeholder="Suche..."
                 >
                   <template #empty>
                     Keine Optionen verfügbar
                   </template>
                 </USelectMenu>
                 <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'textarea'"
@@ -507,37 +522,36 @@ const updateItem = async () => {
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     rows="4"
                 />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                       variant="outline"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key]" @close="close"
+                        v-model="item[datapoint.key]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     />
                   </template>
                 </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                       variant="outline"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                         v-model="item[datapoint.key]"
-                        @close="close"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                         mode="datetime"
                     />
@@ -572,11 +586,11 @@ const updateItem = async () => {
                     icon="i-heroicons-x-mark"
                 />
               </InputGroup>
-            </UFormGroup>
+            </UFormField>
           </div>
         </div>
       </div>
-      <UFormGroup
+      <UFormField
           v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
           :label="datapoint.label"
       >
@@ -589,7 +603,7 @@ const updateItem = async () => {
         </template>
         <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
           <UInput
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
@@ -602,25 +616,25 @@ const updateItem = async () => {
               <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
             </template>
           </UInput>
-          <UToggle
+          <USwitch
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
+              :items="getSelectItems(datapoint)"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :label-key="getSelectLabelKey(datapoint)"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :value-key="getSelectValueKey(datapoint)"
-              :searchable="datapoint.selectSearchAttributes"
+              :search-input="getSelectSearchInput(datapoint)"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :filter-fields="datapoint.selectSearchAttributes"
               :multiple="datapoint.selectMultiple"
           >
             <template #empty>
@@ -628,7 +642,7 @@ const updateItem = async () => {
             </template>
           </USelectMenu>
           <UTextarea
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -636,9 +650,9 @@ const updateItem = async () => {
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               rows="4"
           />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
@@ -646,17 +660,17 @@ const updateItem = async () => {
 
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
             </template>
           </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
@@ -664,10 +678,10 @@ const updateItem = async () => {
 
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   mode="datetime"
               />
@@ -695,7 +709,7 @@ const updateItem = async () => {
         <InputGroup class="w-full" v-else>
           <UInput
               class="flex-auto"
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
               v-model="item[datapoint.key]"
@@ -707,34 +721,33 @@ const updateItem = async () => {
               {{ datapoint.inputTrailing }}
             </template>
           </UInput>
-          <UToggle
+          <USwitch
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
+              :items="getSelectItems(datapoint)"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :label-key="getSelectLabelKey(datapoint)"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :value-key="getSelectValueKey(datapoint)"
-              :searchable="datapoint.selectSearchAttributes"
+              :search-input="getSelectSearchInput(datapoint)"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :filter-fields="datapoint.selectSearchAttributes"
               :multiple="datapoint.selectMultiple"
-              searchable-placeholder="Suche..."
           >
             <template #empty>
               Keine Optionen verfügbar
             </template>
           </USelectMenu>
           <UTextarea
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -742,37 +755,36 @@ const updateItem = async () => {
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               rows="4"
           />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
                 :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key]" @close="close"
+                  v-model="item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
             </template>
           </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
                 :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-model="item[datapoint.key]"
-                  @close="close"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   mode="datetime"
               />
@@ -807,7 +819,7 @@ const updateItem = async () => {
               icon="i-heroicons-x-mark"
           />
         </InputGroup>
-      </UFormGroup>
+      </UFormField>
     </UForm>
   </UDashboardPanelContent>
 </template>

frontend/components/EntityList.vue

@@ -110,12 +110,6 @@ const filteredRows = computed(() => {
 </script>
 
 <template>
-  <FloatingActionButton
-   :label="`+ ${dataType.labelSingle}`"
-   variant="outline"
-   v-if="platform === 'mobile'"
-   @click="router.push(`/standardEntity/${type}/create`)"
-  />
   <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
     <template #toggle>
       <div v-if="platform === 'mobile'"></div>
@@ -138,7 +132,7 @@ const filteredRows = computed(() => {
       <UButton
         icon="i-heroicons-x-mark"
         variant="outline"
-        color="rose"
+        color="error"
         @click="clearSearchString()"
         v-if="searchString.length > 0"
       />
@@ -161,15 +155,15 @@ const filteredRows = computed(() => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template #label>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -178,11 +172,11 @@ const filteredRows = computed(() => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -191,14 +185,14 @@ const filteredRows = computed(() => {
   <EntityTableMobile
     v-if="platform === 'mobile'"
     :type="props.type"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
     :rows="filteredRows"
   />
   <EntityTable
     v-else
     @sort="(i) => emit('sort',i)"
     :type="props.type"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
     :rows="filteredRows"
     :loading="props.loading"
   />

frontend/components/EntityModalButtons.vue

@@ -39,7 +39,9 @@ const modal = useModal()
 <template>
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonShow"
       icon="i-heroicons-eye"
       @click="modal.open(StandardEntityModal, {
@@ -50,7 +52,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonEdit"
       icon="i-heroicons-pencil-solid"
       @click="modal.open(StandardEntityModal, {
@@ -64,7 +68,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="!props.id && props.buttonCreate"
       icon="i-heroicons-plus"
       @click="modal.open(StandardEntityModal, {

frontend/components/EntityShow.vue

@@ -28,14 +28,16 @@ defineShortcuts({
     router.back()
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
+    const currentIndex = Number(openTab.value)
-      openTab.value -= 1
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
   'arrowright': () => {
-    if(openTab.value < dataType.showTabs.length - 1) {
+    const currentIndex = Number(openTab.value)
-      openTab.value += 1
+    if(currentIndex < dataType.showTabs.length - 1) {
+      openTab.value = String(currentIndex + 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
@@ -51,7 +53,7 @@ const auth = useAuthStore()
 
 const dataType = dataStore.dataTypes[type]
 
-const openTab = ref(route.query.tabIndex || 0)
+const openTab = ref(String(route.query.tabIndex || 0))
 
 
 
@@ -97,7 +99,8 @@ const getAvailableQueryStringData = (keys) => {
 }
 
 const onTabChange = (index) => {
-  router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
+  openTab.value = String(index)
+  router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
 }
 
 const changePinned = async () => {
@@ -255,9 +258,9 @@ const openCustomerInventoryLabelPrint = () => {
       v-if="props.item.id && platform !== 'mobile'"
       class="p-5"
       v-model="openTab"
-      @change="onTabChange"
+      @update:model-value="onTabChange"
   >
-    <template #item="{item:tab}">
+    <template #content="{item:tab}">
       <div v-if="tab.label === 'Informationen'" class="flex flex-row">
 
         <EntityShowSubInformation

frontend/components/EntityShowSub.vue

@@ -96,15 +96,15 @@ setup()
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
             multiple
             class="hidden lg:block"
             by="key"
             :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-            :ui-menu="{ width: 'min-w-max' }"
+            :content="{ width: 'min-w-max' }"
             @change="tempStore.modifyColumns(type,selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
@@ -114,7 +114,7 @@ setup()
     <div class="scroll" style="height: 70vh">
       <EntityTable
           :type="type"
-          :columns="columns"
+          :columns="normalizeTableColumns(columns)"
           :rows="props.item[type]"
           style
       />

frontend/components/EntityShowSubCreatedDocuments.vue

@@ -181,49 +181,51 @@ const selectItem = (item) => {
       </UButton>
       <UModal
           prevent-close
-          v-model="showFinalInvoiceConfig"
+          v-model:open="showFinalInvoiceConfig"
       >
-        <UCard>
+        <template #content>
-          <template #header>
+          <UCard>
-            <div class="flex items-center justify-between">
+            <template #header>
-              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              <div class="flex items-center justify-between">
-                Schlussrechnung konfigurieren
+                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              </h3>
+                  Schlussrechnung konfigurieren
-              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+                </h3>
-            </div>
+                <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showFinalInvoiceConfig = false" />
-          </template>
+              </div>
+            </template>
 
-          <UFormGroup
+            <UFormField
-              label="Rechnungsvorlage"
+                label="Rechnungsvorlage"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="referenceDocument"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-              label="Abschlagsrechnungen"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
-                multiple
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="advanceInvoicesToAdd"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-                @click="invoiceAdvanceInvoices"
             >
-              Weiter
+              <USelectMenu
-            </UButton>
+                  :items="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
-          </template>
+                  value-key="id"
-        </UCard>
+                  label-key="documentNumber"
+                  v-model="referenceDocument"
+              />
+            </UFormField>
+
+            <UFormField
+                label="Abschlagsrechnungen"
+            >
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
+                  multiple
+                  value-key="id"
+                  label-key="documentNumber"
+                  v-model="advanceInvoicesToAdd"
+              />
+            </UFormField>
+
+            <template #footer>
+              <UButton
+                  @click="invoiceAdvanceInvoices"
+              >
+                Weiter
+              </UButton>
+            </template>
+          </UCard>
+        </template>
       </UModal>
       <UButton
           @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
@@ -235,48 +237,53 @@ const selectItem = (item) => {
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="templateColumns"
+            :items="templateColumns"
             multiple
             class="hidden lg:block"
             by="key"
             @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
       </template>
     </Toolbar>
     <UTable
-        :rows="props.item.createddocuments.filter(i => !i.archived)"
+        :data="props.item.createddocuments.filter(i => !i.archived)"
-        :columns="columns"
+        :columns="normalizeTableColumns(columns)"
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="selectItem"
+        :on-select="(row) => selectItem(row.original)"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         style="height: 70vh"
     >
-      <template #type-data="{row}">
+      <template #empty>
-        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
+          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
+          <span>Keine Belege anzuzeigen</span>
+        </div>
       </template>
-      <template #state-data="{row}">
+      <template #type-cell="{ row }">
+        {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
+      </template>
+      <template #state-cell="{ row }">
         <span
-            v-if="row.state === 'Entwurf'"
+            v-if="row.original.state === 'Entwurf'"
-            class="text-rose-500"
+            class="text-error-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Gebucht'"
+            v-if="row.original.state === 'Gebucht'"
             class="text-cyan-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Abgeschlossen'"
+            v-if="row.original.state === 'Abgeschlossen'"
             class="text-primary-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
       </template>
 <!--      <template #paid-data="{row}">
@@ -285,19 +292,19 @@ const selectItem = (item) => {
           <span v-else class="text-rose-600">Offen</span>
         </div>
       </template>-->
-      <template #reference-data="{row}">
+      <template #reference-cell="{ row }">
-        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
+        <span v-if="row.original === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
-        <span v-else>{{row.documentNumber}}</span>
+        <span v-else>{{ row.original.documentNumber }}</span>
       </template>
-      <template #date-data="{row}">
+      <template #date-cell="{ row }">
-        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
+        <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.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.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #dueDate-data="{row}">
+      <template #dueDate-cell="{ row }">
-        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+        <span v-if="row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type)">{{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays,'day').format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #amount-data="{row}">
+      <template #amount-cell="{ row }">
-        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+        <span v-if="row.original.type !== 'deliveryNotes'">{{ useCurrency(useSum().getCreatedDocumentSum(row.original, createddocuments)) }}</span>
       </template>
     </UTable>
 

frontend/components/EntityShowSubFiles.vue

@@ -94,41 +94,43 @@ function isImage(file) {
   </UCard>
 
   <!-- 📱 PDF / IMG Viewer Slideover -->
-  <UModal v-model="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
+  <UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
-    <!-- Header -->
+    <template #content>
-    <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
+      <!-- Header -->
-      <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
+      <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
-      <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
+        <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
-    </div>
+        <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto m-2">
-      <!-- PDF -->
-      <div v-if="activeFile && isPdf(activeFile)" class="h-full">
-        <PDFViewer
-            :no-controls="true"
-            :file-id="activeFile.id"
-            location="fileviewer-mobile"
-            class="h-full"
-        />
       </div>
 
-      <!-- IMAGE -->
+      <!-- Content -->
-      <div
+      <div class="flex-1 overflow-y-auto m-2">
-          v-else-if="activeFile && isImage(activeFile)"
+        <!-- PDF -->
-          class="p-4 flex justify-center"
+        <div v-if="activeFile && isPdf(activeFile)" class="h-full">
-      >
+          <PDFViewer
-        <img
+              :no-controls="true"
-            :src="activeFile.url"
+              :file-id="activeFile.id"
-            class="max-w-full max-h-[80vh] rounded-lg shadow"
+              location="fileviewer-mobile"
+              class="h-full"
+          />
+        </div>
+
+        <!-- IMAGE -->
+        <div
+            v-else-if="activeFile && isImage(activeFile)"
+            class="p-4 flex justify-center"
+        >
+          <img
+              :src="activeFile.url"
+              class="max-w-full max-h-[80vh] rounded-lg shadow"
+          />
+        </div>
+
+        <UAlert
+            v-else
+            title="Nicht unterstützter Dateityp"
+            icon="i-heroicons-exclamation-triangle"
         />
       </div>
-
+    </template>
-      <UAlert
-          v-else
-          title="Nicht unterstützter Dateityp"
-          icon="i-heroicons-exclamation-triangle"
-      />
-    </div>
   </UModal>
 </template>

frontend/components/EntityShowSubInformation.vue

@@ -65,7 +65,7 @@ const renderDatapointValue = (datapoint) => {
     </template>
     <UAlert
         v-if="props.item.archived"
-        color="rose"
+        color="error"
         variant="outline"
         :title="`${dataType.labelSingle} archiviert`"
         icon="i-heroicons-archive-box"

frontend/components/EntityShowSubOwnAccountsStatements.vue

@@ -1,7 +1,7 @@
 <script setup>
-import dayjs from "dayjs";
+import dayjs from "dayjs"
-const router = useRouter()
 
+const router = useRouter()
 
 const props = defineProps({
   queryStringData: {
@@ -21,83 +21,260 @@ const props = defineProps({
   }
 })
 
-const statementallocations = ref([])
+const loading = ref(true)
-const incominginvoices = ref([])
+const incomingInvoices = ref([])
+const statementAllocations = ref([])
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const currency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`
+const currentAccountId = computed(() => String(props.item?.id ?? ""))
+const sameAccount = (value) => String(value ?? "") === currentAccountId.value
+const getStatementId = (allocation) => allocation?.bankstatement?.id || allocation?.bs_id?.id || allocation?.bs_id || null
+const getStatementLike = (allocation) => allocation?.bankstatement || (typeof allocation?.bs_id === "object" ? allocation.bs_id : null)
+const getAllocationDate = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return statement?.date || statement?.valueDate || allocation?.bs_id?.date || allocation?.bs_id?.valueDate || null
+}
+const getAllocationPartner = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return statement?.debName || statement?.credName || statement?.partner || allocation?.bs_id?.debName || allocation?.bs_id?.credName || ""
+}
+const getAllocationDescription = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return allocation?.description || statement?.purpose || statement?.text || statement?.description || allocation?.bs_id?.purpose || allocation?.bs_id?.text || ""
+}
+const hasContent = (value) => value !== null && value !== undefined && String(value).trim() !== ""
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const allAllocations = computed(() => {
+  const statementRows = statementAllocations.value.map((allocation) => ({
+    ...allocation,
+    type: "statementallocation",
+    bankstatement: allocation.bankstatement || getStatementLike(allocation),
+    date: getAllocationDate(allocation),
+    partner: getAllocationPartner(allocation),
+    description: getAllocationDescription(allocation),
+    amount: Number(allocation.amount || 0)
+  }))
+
+  const incomingInvoiceRows = incomingInvoices.value.flatMap((invoice) => {
+    return (invoice.accounts || [])
+      .filter((account) => sameAccount(account.account?.id || account.account))
+      .map((account, index) => ({
+        id: `${invoice.id}-${index}`,
+        incominginvoiceid: invoice.id,
+        type: "incominginvoice",
+        amount: Number(account.amountGross || account.amountNet || 0),
+        date: invoice.date,
+        partner: invoice.vendor?.name || "",
+        description: account.description || invoice.description || "",
+        color: invoice.expense ? "red" : "green",
+        expense: invoice.expense,
+        reference: invoice.reference || "-"
+      }))
+  })
+
+  return [...statementRows, ...incomingInvoiceRows]
+})
+
+const yearItems = computed(() => {
+  const years = [...new Set(
+    allAllocations.value
+      .map((allocation) => allocation.bankstatement?.date || allocation.date)
+      .filter(Boolean)
+      .map((date) => String(dayjs(date).year()))
+  )].sort((a, b) => Number(b) - Number(a))
+
+  return years.length > 0
+    ? years.map((year) => ({ label: year, value: year }))
+    : [{ label: String(dayjs().year()), value: String(dayjs().year()) }]
+})
+
+const renderedAllocations = computed(() => {
+  return allAllocations.value.filter((allocation) => {
+    const allocationDateValue = allocation.bankstatement?.date || allocation.date
+    const allocationDate = allocationDateValue ? dayjs(allocationDateValue) : null
+
+    if (allocationDate && allocationDate.year().toString() !== selectedYear.value) {
+      return false
+    }
+
+    if (allocationDate && selectedMonth.value !== "all" && allocationDate.month() + 1 !== Number(selectedMonth.value)) {
+      return false
+    }
+
+    return true
+  })
+})
+
+const totals = computed(() => {
+  return renderedAllocations.value.reduce((acc, allocation) => {
+    const amount = Number(allocation.amount || 0)
+
+    if (allocation.incominginvoiceid) {
+      if (allocation.expense) {
+        acc.expenses += amount
+        acc.balance -= amount
+      } else {
+        acc.income += amount
+        acc.balance += amount
+      }
+    } else {
+      if (amount < 0) {
+        acc.expenses += Math.abs(amount)
+      } else {
+        acc.income += amount
+      }
+      acc.balance += amount
+    }
+
+    return acc
+  }, { income: 0, expenses: 0, balance: 0 })
+})
+
+const columns = [
+  { accessorKey: "amount", header: "Betrag" },
+  { accessorKey: "date", header: "Datum" },
+  { accessorKey: "partner", header: "Partner" },
+  { accessorKey: "description", header: "Beschreibung" }
+]
 
 const setup = async () => {
+  loading.value = true
+
+  statementAllocations.value = (await useEntities("statementallocations").select("*, bankstatement(*), createddocument(*), incominginvoice(*)"))
+    .filter((allocation) => sameAccount(allocation.account?.id || allocation.account) || sameAccount(allocation.ownaccount?.id || allocation.ownaccount))
+
+  incomingInvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+    .filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
+
+  const firstYear = yearItems.value[0]?.value
+  if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+    selectedYear.value = firstYear
+  }
+
+  loading.value = false
 }
 
 setup()
 
-const selectAllocation = (allocation) => {
+const unwrapAllocationRow = (allocationLike) => allocationLike?.original || allocationLike
-  if(allocation.type === "statementallocation") {
+
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+const selectAllocation = (allocationLike) => {
-  } else if(allocation.type === "incominginvoice") {
+  const allocation = unwrapAllocationRow(allocationLike)
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+
+  if (!allocation) {
+    return
+  }
+
+  const statementId = getStatementId(allocation)
+
+  if (allocation.type === "statementallocation" && statementId) {
+    router.push(`/banking/statements/edit/${statementId}`)
+  } else if (allocation.type === "incominginvoice" && allocation.incominginvoiceid) {
+    router.push(`/incomingInvoices/show/${allocation.incominginvoiceid}`)
   }
 }
-
-const renderedAllocations = computed(() => {
-
-  let tempstatementallocations = props.item.statementallocations.map(i => {
-    return {
-      ...i,
-      type: "statementallocation",
-      date: i.bs_id.date,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
-    }
-  })
-
-
-  /*let incominginvoicesallocations = []
-
-  incominginvoices.value.forEach(i => {
-
-    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
-      return {
-        ...x,
-        incominginvoiceid: i.id,
-        type: "incominginvoice",
-        amount: x.amountGross ? x.amountGross : x.amountNet,
-        date: i.date,
-        partner: i.vendor.name,
-        description: i.description,
-        color: i.expense ? "red" : "green"
-      }
-    }))
-  })*/
-
-  return [...tempstatementallocations/*, ... incominginvoicesallocations*/]
-})
-
-
 </script>
 
 <template>
   <UCard class="mt-5">
-    <UTable
+    <div class="space-y-4">
-        v-if="props.item.statementallocations"
+      <div class="flex flex-col gap-3 md:flex-row md:items-end">
-        :rows="renderedAllocations"
+        <UFormField label="Jahr" class="w-full md:w-48">
-        :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+          <USelectMenu
-        @select="(i) => selectAllocation(i)"
+              v-model="selectedYear"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+              :items="yearItems"
-    >
+              value-key="value"
-      <template #amount-data="{row}">
+              label-key="label"
-        <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
+              class="w-full"
-        <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
+          />
-        <span v-else>{{useCurrency(row.amount)}}</span>
+        </UFormField>
-      </template>
+
-      <template #date-data="{row}">
+        <UFormField label="Monat" class="w-full md:w-56">
-        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+          <USelectMenu
-      </template>
+              v-model="selectedMonth"
-      <template #description-data="{row}">
+              :items="monthItems"
-        {{row.description ? row.description : ''}}
+              value-key="value"
-      </template>
+              label-key="label"
-    </UTable>
+              class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <div class="grid gap-3 md:grid-cols-3">
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.income) }}</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.expenses) }}</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Saldo</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.balance) }}</div>
+        </UCard>
+      </div>
+
+      <div v-if="!loading" class="overflow-auto max-h-[60vh]">
+        <UTable
+            :data="renderedAllocations"
+            :columns="normalizeTableColumns(columns)"
+            :on-select="selectAllocation"
+            class="w-full"
+        >
+          <template #empty>
+            <div class="flex flex-col items-center justify-center py-10 text-center">
+              <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+              <p class="font-medium">Keine Buchungen im ausgewaehlten Zeitraum</p>
+            </div>
+          </template>
+
+          <template #amount-cell="{ row }">
+            <span class="text-right text-error" v-if="row.original.amount < 0 || row.original.color === 'red'">{{ useCurrency(row.original.amount) }}</span>
+            <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{ useCurrency(row.original.amount) }}</span>
+            <span v-else>{{ useCurrency(row.original.amount) }}</span>
+          </template>
+
+          <template #date-cell="{ row }">
+            {{ row.original.bankstatement.date && dayjs(row.original.bankstatement.date).isValid() ? dayjs(row.original.bankstatement.date).format('DD.MM.YYYY') : '-' }}
+          </template>
+
+          <template #partner-cell="{ row }">
+            <div class="truncate">{{ hasContent(row.original.partner) ? row.original.partner : '-' }}</div>
+          </template>
+
+          <template #description-cell="{ row }">
+            <UTooltip :text="hasContent(row.original.description) ? row.original.description : '-'">
+              <div class="max-w-[22rem] truncate">{{ hasContent(row.original.description) ? row.original.description : '-' }}</div>
+            </UTooltip>
+          </template>
+        </UTable>
+      </div>
+
+      <UProgress v-else animation="carousel" class="w-3/4 mx-auto" />
+    </div>
   </UCard>
-
 </template>
-
-<style scoped>
-
-</style>

frontend/components/EntityShowSubPhases.vue

@@ -95,26 +95,26 @@ const changeActivePhase = async (key) => {
     <UAccordion
         :items="renderedPhases"
     >
-      <template #default="{item,index,open}">
+      <template #default="slotProps">
         <UButton
             variant="ghost"
-            :color="item.active ? 'primary' : 'white'"
+            :color="slotProps.item.active ? 'primary' : 'white'"
             class="mb-1"
             :disabled="true"
         >
           <template #leading>
             <div class="w-6 h-6  flex items-center justify-center -my-1">
-              <UIcon :name="item.icon" class="w-4 h-4 " />
+              <UIcon :name="slotProps.item.icon" class="w-4 h-4 " />
             </div>
           </template>
 
-          <span class="truncate"> {{item.label}}</span>
+          <span class="truncate"> {{ slotProps.item.label }}</span>
 
           <template #trailing>
             <UIcon
                 name="i-heroicons-chevron-right-20-solid"
                 class="w-5 h-5 ms-auto transform transition-transform duration-200"
-                :class="[open && 'rotate-90']"
+                :class="[slotProps?.open && 'rotate-90']"
             />
           </template>
 

frontend/components/EntityShowSubTimes.vue

@@ -67,40 +67,45 @@ const columns = [
   <UCard class="mt-5">
     <UTable
         class="mt-3"
-        :columns="columns"
+        :columns="normalizeTableColumns(columns)"
-        :rows="props.item.times"
+        :data="props.item.times"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
-      <template #state-data="{row}">
+      <template #empty>
+        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
+          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
+          <span>Noch keine Einträge</span>
+        </div>
+      </template>
+      <template #state-cell="{ row }">
                 <span
-                    v-if="row.state === 'Entwurf'"
+                    v-if="row.original.state === 'Entwurf'"
-                    class="text-rose-500"
+                    class="text-error-500"
-                >{{row.state}}</span>
+                >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Eingereicht'"
+            v-if="row.original.state === 'Eingereicht'"
             class="text-cyan-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Bestätigt'"
+            v-if="row.original.state === 'Bestätigt'"
             class="text-primary-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
       </template>
-      <template #user-data="{row}">
+      <template #user-cell="{ row }">
-        {{row.profile ? row.profile.fullName : "" }}
+        {{ row.original.profile ? row.original.profile.fullName : "" }}
       </template>
 
-      <template #startDate-data="{row}">
+      <template #startDate-cell="{ row }">
-        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+        {{ dayjs(row.original.startDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #endDate-data="{row}">
+      <template #endDate-cell="{ row }">
-        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+        {{ dayjs(row.original.endDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #duration-data="{row}">
+      <template #duration-cell="{ row }">
-        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+        {{ Math.floor(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") / 60) }}:{{ String(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") % 60).padStart(2,"0") }} h
 
       </template>
-      <template #project-data="{row}">
+      <template #project-cell="{ row }">
-        {{row.project ? row.project.name : "" }}
+        {{ row.original.project ? row.original.project.name : "" }}
       </template>
     </UTable>
   </UCard>

frontend/components/EntityTable.vue

@@ -58,76 +58,101 @@
   const dataType = dataStore.dataTypes[props.type]
 
   const selectedItem = ref(0)
-  const sort = ref({
+  const sorting = ref([{
-    column: dataType.sortColumn || "date",
+    id: dataType.sortColumn || "date",
-    direction: 'desc'
+    desc: true
-  })
+  }])
+  const normalizedColumns = computed(() => normalizeTableColumns(props.columns))
+  const truncateValue = (value, maxLength) => {
+    if (value === null || value === undefined || value === '') {
+      return '\u00A0'
+    }
+
+    const stringValue = String(value)
+    if (!maxLength || stringValue.length <= maxLength) {
+      return stringValue
+    }
+
+    return `${stringValue.substring(0, maxLength)}...`
+  }
+  const handleSortChange = (value) => {
+    const nextSort = Array.isArray(value) ? value[0] : undefined
+
+    if (!nextSort?.id) {
+      return
+    }
+
+    emit('sort', {
+      sort_column: nextSort.id,
+      sort_direction: nextSort.desc ? 'desc' : 'asc'
+    })
+  }
+  const handleSelect = (row) => {
+    router.push(getShowRoute(props.type, row.original.id))
+  }
 
 </script>
 
 <template>
   <UTable
       :loading="props.loading"
-      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
       sort-mode="manual"
-      v-model:sort="sort"
+      v-model:sorting="sorting"
-      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
+      @update:sorting="handleSortChange"
       v-if="dataType && columns"
-      :rows="props.rows"
+      :data="props.rows"
-      :columns="props.columns"
+      :columns="normalizedColumns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(getShowRoute(type, i.id))"
+      :on-select="handleSelect"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+      :empty="`Keine ${dataType.label} anzuzeigen`"
   >
-<!--    <template
+    <template #name-cell="{ row }">
-        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
-        v-slot:[`${column.key}-header`]="{row}">
-      <span class="text-nowrap">{{column.label}}</span>
-    </template>-->
-    <template #name-data="{row}">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
+          v-if="row.original.id === props.rows[selectedItem]?.id"
-          class="text-primary-500 font-bold">
+          class="block truncate text-primary-500 font-bold"
-        <UTooltip
+      >
-            :text="row.name"
+        <UTooltip :text="row.original.name">
-        >
+          <span class="block truncate">
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>      </span>
-      <span v-else>
+      <span v-else class="block truncate">
-        <UTooltip
+        <UTooltip :text="row.original.name">
-          :text="row.name"
+          <span class="block truncate">
-        >
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+          </span>
         </UTooltip>
       </span>
     </template>
-    <template #fullName-data="{row}">
+    <template #fullName-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
+          v-if="row.original.id === props.rows[selectedItem]?.id"
-          class="text-primary-500 font-bold">{{row.fullName}}
+          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
       </span>
-      <span v-else>
+      <span v-else class="block truncate">
-        {{row.fullName}}
+        {{ row.original.fullName }}
       </span>
     </template>
-    <template #licensePlate-data="{row}">
+    <template #licensePlate-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
+          v-if="row.original.id === props.rows[selectedItem]?.id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
+          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
       </span>
-      <span v-else>
+      <span v-else class="block truncate">
-        {{row.licensePlate}}
+        {{ row.original.licensePlate }}
       </span>
     </template>
     <template
         v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
-        v-slot:[`${column.key}-data`]="{row}">
+        v-slot:[`${column.key}-cell`]="{ row }">
-      <component v-if="column.component" :is="column.component" :row="row"></component>
+      <component v-if="column.component" :is="column.component" :row="row.original"></component>
-      <span v-else-if="row[column.key]">
+      <span v-else-if="row.original[column.key]" class="block truncate">
-        <UTooltip :text="row[column.key]">
+        <UTooltip :text="String(row.original[column.key])">
-        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
+          <span class="block truncate">
-      </UTooltip>
+            {{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
+          </span>
+        </UTooltip>
       </span>
 
     </template>

frontend/components/EntityTableMobile.vue

@@ -77,7 +77,7 @@
 
 <!--  <UTable
       v-if="dataType && columns"
-      :rows="props.rows"
+      :data="props.rows"
       :columns="props.columns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"

frontend/components/GlobalMessages.vue

@@ -55,17 +55,19 @@ setup()
 </script>
 
 <template>
-  <UModal v-model="showMessageModal" prevent-close>
+  <UModal v-model:open="showMessageModal" prevent-close>
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <span class="font-bold">{{messageToShow.title}}</span>
+        <template #header>
-      </template>
+          <span class="font-bold">{{messageToShow.title}}</span>
-      <p class=" my-2" v-html="messageToShow.description"></p>
+        </template>
-      <UButton
+        <p class=" my-2" v-html="messageToShow.description"></p>
-          variant="outline"
+        <UButton
-          @click="markMessageAsRead"
+            variant="outline"
-      >Gelesen</UButton>
+            @click="markMessageAsRead"
-    </UCard>
+        >Gelesen</UButton>
+      </UCard>
+    </template>
   </UModal>
 
 <!--  <UCard
@@ -79,7 +81,7 @@ setup()
         variant="ghost"
         @click="showMessage(globalMessages[0])"
     />
-    <UModal v-model="showMessageModal">
+    <UModal v-model:open="showMessageModal">
       <UCard>
         <template #header>
           <span class="font-bold">{{messageToShow.title}}</span>

frontend/components/GlobalSearch.vue

@@ -123,15 +123,17 @@ function onSelect (option) {
   />
 
   <UModal
-      v-model="showCommandPalette"
+      v-model:open="showCommandPalette"
   >
-    <UCommandPalette
+    <template #content>
-        v-model="selectedCommand"
+      <UCommandPalette
-        :groups="groups"
+          v-model="selectedCommand"
-        :autoselect="false"
+          :groups="groups"
-        @update:model-value="onSelect"
+          :autoselect="false"
-        ref="commandPaletteRef"
+          @update:model-value="onSelect"
-    />
+          ref="commandPaletteRef"
+      />
+    </template>
   </UModal>
 </template>
 

frontend/components/HelpSlideover.vue

@@ -2,9 +2,16 @@
 import dayjs from 'dayjs'
 
 const { isHelpSlideoverOpen } = useDashboard()
-const { metaSymbol } = useShortcuts()
 const { entries, pending, error, seenState, refresh, markAsSeen } = useChangelog()
 
+const metaSymbol = computed(() => {
+  if (import.meta.server) {
+    return 'Ctrl'
+  }
+
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform) ? '⌘' : 'Ctrl'
+})
+
 const shortcuts = ref(false)
 const query = ref('')
 const toast = useToast()
@@ -125,7 +132,7 @@ const addContactRequest = async () => {
     toast.add({title: "Anfrage erfolgreich erstellt"})
     resetContactRequest()
   } else {
-    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"error"})
   }
   loadingContactRequest.value = false
 }
@@ -154,7 +161,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isHelpSlideoverOpen">
+  <USlideover v-model:open="isHelpSlideoverOpen" side="right">
     <template #title>
       <UButton
           v-if="shortcuts"
@@ -168,93 +175,94 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
       {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
     </template>
 
-    <div v-if="shortcuts" class="space-y-6">
+    <template #body>
-      <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
+      <div v-if="shortcuts" class="space-y-6">
+        <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
 
-      <div v-for="(category, index) in filteredCategories" :key="index">
+        <div v-for="(category, index) in filteredCategories" :key="index">
-        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
+          <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
-          {{ category.title }}
+            {{ category.title }}
-        </p>
+          </p>
 
-        <div class="space-y-2">
+          <div class="space-y-2">
-          <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
+            <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
-            <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
+              <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
 
-            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
+              <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
-              <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
+                <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
-                {{ shortcut }}
+                  {{ shortcut }}
-              </UKbd>
+                </UKbd>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else class="flex flex-col gap-y-6">
-      <div class="flex flex-col gap-y-3">
-        <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
-      </div>
-
-      <UCard>
-        <div class="flex items-center justify-between gap-3">
-          <div>
-            <p class="text-base font-semibold text-gray-900 dark:text-white">
-              Changelog
-            </p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              Zuletzt geöffnet: {{ lastOpenedLabel }}
-            </p>
-          </div>
-
-          <UButton
-              icon="i-heroicons-arrow-path"
-              color="gray"
-              variant="ghost"
-              :loading="pending"
-              @click="refresh(true)"
-          />
-        </div>
-
-        <UAlert
-            v-if="error"
-            class="mt-4"
-            color="red"
-            variant="soft"
-            title="Changelog konnte nicht geladen werden"
-            :description="error"
-        />
-
-        <div v-else-if="pending && !changelogEntries.length" class="mt-4">
-          <UProgress animation="carousel"/>
-        </div>
-
-        <div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
-          <div
-              v-for="entry in changelogEntries"
-              :key="entry.hash"
-              class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
-          >
-            <div class="flex items-start justify-between gap-3">
-              <div class="min-w-0">
-                <p class="font-medium text-gray-900 dark:text-white break-words">
-                  {{ entry.subject }}
-                </p>
-                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                  {{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
-                </p>
               </div>
-
-              <UBadge color="gray" variant="subtle">
-                {{ entry.shortHash }}
-              </UBadge>
             </div>
           </div>
         </div>
+      </div>
+      <div v-else class="flex flex-col gap-y-6">
+        <div class="flex flex-col gap-y-3">
+          <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+        </div>
 
-        <p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400">
+        <UCard>
-          Es sind noch keine Changelog-Einträge verfügbar.
+          <div class="flex items-center justify-between gap-3">
-        </p>
+            <div>
-      </UCard>
+              <p class="text-base font-semibold text-gray-900 dark:text-white">
-    </div>
+                Changelog
+              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                Zuletzt geöffnet: {{ lastOpenedLabel }}
+              </p>
+            </div>
+
+            <UButton
+                icon="i-heroicons-arrow-path"
+                color="gray"
+                variant="ghost"
+                :loading="pending"
+                @click="refresh(true)"
+            />
+          </div>
+
+          <UAlert
+              v-if="error"
+              class="mt-4"
+              color="red"
+              variant="soft"
+              title="Changelog konnte nicht geladen werden"
+              :description="error"
+          />
+
+          <div v-else-if="pending && !changelogEntries.length" class="mt-4">
+            <UProgress animation="carousel"/>
+          </div>
+
+          <div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
+            <div
+                v-for="entry in changelogEntries"
+                :key="entry.hash"
+                class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="font-medium text-gray-900 dark:text-white break-words">
+                    {{ entry.subject }}
+                  </p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
+                  </p>
+                </div>
+
+                <UBadge color="gray" variant="subtle">
+                  {{ entry.shortHash }}
+                </UBadge>
+              </div>
+            </div>
+          </div>
+
+          <p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400">
+            Es sind noch keine Changelog-Einträge verfügbar.
+          </p>
+        </UCard>
+      </div>
 <!--    <div class="mt-5" v-if="!loadingContactRequest">
       <h1 class="font-semibold">Kontaktanfrage:</h1>
       <UForm
@@ -262,29 +270,29 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
         @submit="addContactRequest"
         @reset="resetContactRequest"
       >
-&lt;!&ndash;        <UFormGroup
+&lt;!&ndash;        <UFormField
           label="Art:"
         >
           <USelectMenu
               :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
               v-model="contactRequestData.contactType"
           />
-        </UFormGroup>&ndash;&gt;
+        </UFormField>&ndash;&gt;
-        <UFormGroup
+        <UFormField
           label="Titel:"
         >
           <UInput
             v-model="contactRequestData.title"
           />
-        </UFormGroup>
+        </UFormField>
-        <UFormGroup
+        <UFormField
           label="Nachricht:"
         >
           <UTextarea
               v-model="contactRequestData.message"
               rows="6"
           />
-        </UFormGroup>
+        </UFormField>
         <InputGroup class="mt-3">
           <UButton
             type="submit"
@@ -294,7 +302,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
           </UButton>
           <UButton
             type="reset"
-            color="rose"
+            color="error"
             variant="outline"
             :disabled="!contactRequestData.title && !contactRequestData.message"
           >
@@ -305,5 +313,6 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
       </UForm>
     </div>
     <UProgress class="mt-5" animation="carousel" v-else/>-->
-  </UDashboardSlideover>
+    </template>
+  </USlideover>
 </template>

frontend/components/HistoryDisplay.vue

@@ -76,38 +76,40 @@ const renderText = (text) => {
 
 <template>
   <UModal
-    v-model="showAddHistoryItemModal"
+    v-model:open="showAddHistoryItemModal"
 
   >
-    <UCard class="h-full">
+    <template #content>
-      <template #header>
+      <UCard class="h-full">
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <div class="flex items-center justify-between">
-            Eintrag hinzufügen
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-          </h3>
+              Eintrag hinzufügen
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
+            </h3>
-        </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
-      </template>
+          </div>
+        </template>
 
-      <UFormGroup
+        <UFormField
-        label="Text:"
+          label="Text:"
-      >
+        >
-        <UTextarea
+          <UTextarea
-          v-model="addHistoryItemData.text"
+            v-model="addHistoryItemData.text"
-          @keyup.meta.enter="addHistoryItem"
+            @keyup.meta.enter="addHistoryItem"
-        />
+          />
-<!-- TODO: Add Dropdown and Checking for Usernames  -->
+  <!-- TODO: Add Dropdown and Checking for Usernames  -->
-<!--        <template #help>
+  <!--        <template #help>
-          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
+            <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
-        </template>-->
+          </template>-->
 
-      </UFormGroup>
+        </UFormField>
 
 
-      <template #footer>
+        <template #footer>
-        <UButton @click="addHistoryItem">Speichern</UButton>
+          <UButton @click="addHistoryItem">Speichern</UButton>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
   <Toolbar
       v-if="!props.renderHeadline && props.elementId && props.type"
@@ -127,7 +129,7 @@ const renderText = (text) => {
         + Eintrag
       </UButton>
     </div>
-    <UDivider class="my-3"/>
+    <USeparator class="my-3"/>
   </div>
 
   <!-- ITEM LIST  -->
@@ -136,7 +138,7 @@ const renderText = (text) => {
         v-if="items.length > 0"
         v-for="(item,index) in items.slice().reverse()"
     >
-      <UDivider
+      <USeparator
           class="my-3"
           v-if="index !== 0"
       />

frontend/components/InboxList.vue

@@ -86,7 +86,7 @@ defineShortcuts({
         </p>
       </div>
 
-      <UDivider />
+      <USeparator />
     </div>
   </UDashboardPanelContent>
 </template>

frontend/components/InboxMail.vue

@@ -34,7 +34,7 @@ defineProps({
       </p>
     </div>
 
-    <UDivider class="my-5" />
+    <USeparator class="my-5" />
 
     <div class="flex-1">
       <p class="text-lg">
@@ -42,7 +42,7 @@ defineProps({
       </p>
     </div>
 
-    <UDivider class="my-5" />
+    <USeparator class="my-5" />
 
     <form @submit.prevent>
       <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">

frontend/components/LabelPrintModal.vue

@@ -90,7 +90,8 @@ watch(() => labelPrinter.connected, (connected) => {
 
 <template>
   <UModal :ui="{ width: 'sm:max-w-5xl' }">
-    <UCard class="w-[92vw] max-w-5xl">
+    <template #content>
+      <UCard class="w-[92vw] max-w-5xl">
 
       <template #header>
         <div class="flex items-center justify-between">
@@ -133,6 +134,7 @@ watch(() => labelPrinter.connected, (connected) => {
         </div>
       </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/LabelPrinterButton.vue

@@ -18,28 +18,30 @@ const handleClick = async () => {
 <template>
   <!-- Printer Button -->
 
-  <UModal v-model="showPrinterInfo">
+  <UModal v-model:open="showPrinterInfo">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-lg font-semibold">Drucker Informationen</h3>
+          <div class="flex items-center justify-between">
-          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
+            <h3 class="text-lg font-semibold">Drucker Informationen</h3>
-        </div>
+            <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
-      </template>
+          </div>
-      <p>Seriennummer: {{labelPrinter.info.serial}}</p>
+        </template>
-      <p>MAC: {{labelPrinter.info.mac}}</p>
+        <p>Seriennummer: {{labelPrinter.info.serial}}</p>
-      <p>Modell: {{labelPrinter.info.modelId}}</p>
+        <p>MAC: {{labelPrinter.info.mac}}</p>
-      <p>Charge: {{labelPrinter.info.charge}}</p>
+        <p>Modell: {{labelPrinter.info.modelId}}</p>
-      <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
+        <p>Charge: {{labelPrinter.info.charge}}</p>
-      <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+        <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
-    </UCard>
+        <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+      </UCard>
+    </template>
   </UModal>
 
   <UButton
       :icon="labelPrinter.connected ? 'i-heroicons-printer' : 'i-heroicons-printer'"
       :color="labelPrinter.connected ? 'green' : ''"
       variant="soft"
-      class="w-full justify-start"
+      class="w-full justify-start rounded-lg px-2.5 py-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
       :loading="labelPrinter.connectLoading"
       @click="handleClick"
   >

frontend/components/MainNav.vue

@@ -1,10 +1,14 @@
 <script setup>
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const route = useRoute()
 const auth = useAuthStore()
 const { has } = usePermission()
-
-// Lokaler State für den Taschenrechner
-const showCalculator = ref(false)
 const tenantExtraModules = computed(() => {
   const modules = auth.activeTenantData?.extraModules
   return Array.isArray(modules) ? modules : []
@@ -19,6 +23,17 @@ const isAdmin = computed(() => Boolean(auth.user?.is_admin))
 const tenantFeatures = computed(() => auth.activeTenantData?.features || {})
 const featureEnabled = (key) => tenantFeatures.value?.[key] !== false
 const visibleItems = (items) => items.filter(item => item && !item.disabled)
+const isRouteActive = (to) => {
+  if (!to) {
+    return false
+  }
+
+  if (to === '/') {
+    return route.path === '/'
+  }
+
+  return route.path === to || route.path.startsWith(`${to}/`)
+}
 
 const links = computed(() => {
   const organisationChildren = [
@@ -121,25 +136,37 @@ const links = computed(() => {
       to: "/incomingInvoices",
       icon: "i-heroicons-document-text",
     } : null,
-    (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
+    ((featureEnabled("createDocument") || featureEnabled("incomingInvoices")) || featureEnabled("accounts") || featureEnabled("ownaccounts") || featureEnabled("costcentres")) ? {
-      label: "USt-Auswertung",
+      label: "Auswertungen",
-      to: "/accounting/tax",
+      icon: "i-heroicons-chart-pie",
-      icon: "i-heroicons-calculator",
+      defaultOpen: false,
-    } : null,
+      children: visibleItems([
-    featureEnabled("costcentres") ? {
+        (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
-      label: "Kostenstellen",
+          label: "USt",
-      to: "/standardEntity/costcentres",
+          to: "/accounting/tax",
-      icon: "i-heroicons-document-currency-euro"
+          icon: "i-heroicons-calculator",
-    } : null,
+        } : null,
-    featureEnabled("accounts") ? {
+        (featureEnabled("createDocument") || featureEnabled("incomingInvoices") || featureEnabled("accounts") || featureEnabled("ownaccounts")) ? {
-      label: "Buchungskonten",
+          label: "BWA",
-      to: "/accounts",
+          to: "/accounting/bwa",
-      icon: "i-heroicons-document-text",
+          icon: "i-heroicons-chart-bar-square",
-    } : null,
+        } : null,
-    featureEnabled("ownaccounts") ? {
+        featureEnabled("costcentres") ? {
-      label: "zusätzliche Buchungskonten",
+          label: "Kostenstellen",
-      to: "/standardEntity/ownaccounts",
+          to: "/standardEntity/costcentres",
-      icon: "i-heroicons-document-text"
+          icon: "i-heroicons-document-currency-euro"
+        } : null,
+        featureEnabled("accounts") ? {
+          label: "Buchungskonten",
+          to: "/accounts",
+          icon: "i-heroicons-document-text",
+        } : null,
+        featureEnabled("ownaccounts") ? {
+          label: "Zusätzliche Buchungskonten",
+          to: "/standardEntity/ownaccounts",
+          icon: "i-heroicons-document-text"
+        } : null,
+      ])
     } : null,
     featureEnabled("banking") ? {
       label: "Bank",
@@ -284,15 +311,13 @@ const links = computed(() => {
           label: pin.label,
           to: pin.link,
           icon: pin.icon,
-          target: "_blank",
+          target: "_blank"
-          pinned: true
         }
       } else if (pin.type === "standardEntity") {
         return {
           label: pin.label,
           to: pin.datatype === "tasks" ? `/tasks/show/${pin.id}` : `/standardEntity/${pin.datatype}/show/${pin.id}`,
-          icon: pin.icon,
+          icon: pin.icon
-          pinned: true
         }
       }
     }),
@@ -309,6 +334,21 @@ const links = computed(() => {
       to: "/historyitems",
       icon: "i-heroicons-book-open"
     } : null,
+    ...(has("projects") && featureEnabled("projects")) ? [{
+      label: "Projekte",
+      to: "/standardEntity/projects",
+      icon: "i-heroicons-clipboard-document-check"
+    }] : [],
+    ...(has("contracts") && featureEnabled("contracts")) ? [{
+      label: "Verträge",
+      to: "/standardEntity/contracts",
+      icon: "i-heroicons-clipboard-document"
+    }] : [],
+    ...(has("plants") && featureEnabled("plants")) ? [{
+      label: "Objekte",
+      to: "/standardEntity/plants",
+      icon: "i-heroicons-clipboard-document"
+    }] : [],
     ...(visibleOrganisationChildren.length > 0 ? [{
       label: "Organisation",
       icon: "i-heroicons-rectangle-stack",
@@ -358,21 +398,7 @@ const links = computed(() => {
       children: visibleMasterDataChildren
     }] : []),
 
-    ...(has("projects") && featureEnabled("projects")) ? [{
+
-      label: "Projekte",
-      to: "/standardEntity/projects",
-      icon: "i-heroicons-clipboard-document-check"
-    }] : [],
-    ...(has("contracts") && featureEnabled("contracts")) ? [{
-      label: "Verträge",
-      to: "/standardEntity/contracts",
-      icon: "i-heroicons-clipboard-document"
-    }] : [],
-    ...(has("plants") && featureEnabled("plants")) ? [{
-      label: "Objekte",
-      to: "/standardEntity/plants",
-      icon: "i-heroicons-clipboard-document"
-    }] : [],
     ...(visibleSettingsChildren.length > 0 ? [{
       label: "Einstellungen",
       defaultOpen: false,
@@ -382,81 +408,80 @@ const links = computed(() => {
   ])
 })
 
-const accordionItems = computed(() =>
+const mapNavItem = (item, valuePrefix = "item") => {
-    links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
+  const children = Array.isArray(item.children)
-)
+    ? item.children
+      .filter(Boolean)
+      .map((child, index) => mapNavItem(child, `${valuePrefix}-${index}`))
+    : undefined
 
-const buttonItems = computed(() =>
+  const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
-    links.value.filter(item => !item.children || item.children.length === 0)
+
+  return {
+    ...item,
+    children,
+    value: item.id || item.label || valuePrefix,
+    defaultOpen: item.defaultOpen || active,
+    active,
+    tooltip: true,
+    popover: true,
+    trailingIcon: children?.length ? undefined : ''
+  }
+}
+
+const navItems = computed(() =>
+  links.value
+    .filter(Boolean)
+    .map((item, index) => mapNavItem(item, String(index)))
 )
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
+  <UNavigationMenu
-    <UButton
+      :items="navItems"
-        v-for="item in buttonItems"
+      orientation="vertical"
-        :key="item.label"
+      :collapsed="props.collapsed"
-        variant="ghost"
+      tooltip
-        :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
+      popover
-        :icon="item.pinned ? 'i-heroicons-star' : item.icon"
+      color="neutral"
-        class="w-full"
+      highlight
-        :to="item.to"
+      highlight-color="primary"
-        :target="item.target"
+      class="w-full"
-        @click="item.click ? item.click() : null"
+      :ui="{
-    >
+        root: 'w-full',
-      <UIcon
+        list: 'space-y-1',
-          v-if="item.pinned"
+        link: 'min-w-0 rounded-lg px-2.5 py-2',
-          :name="item.icon"
+        linkLeadingIcon: 'size-5 shrink-0',
-          class="w-5 h-5 me-2"
+        linkLabel: 'truncate',
-      />
+        childList: 'ms-0 space-y-1 border-l border-default ps-3',
-      {{ item.label }}
+        childLink: 'min-w-0 rounded-lg px-2 py-1.5',
-    </UButton>
+        childLinkLabel: 'truncate'
-  </div>
+      }"
-
-  <UDivider class="my-2"/>
-
-  <UAccordion
-      :items="accordionItems"
-      :multiple="false"
-      class="mt-2"
   >
-    <template #default="{ item, open }">
+    <template #item-leading="{ item, active }">
-      <UButton
+      <UIcon
-          variant="ghost"
+          v-if="item.icon"
-          :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
+          :name="item.icon"
-          :icon="item.icon"
+          class="size-5 shrink-0"
-          class="w-full"
+          :class="active ? 'text-primary' : 'text-muted'"
+      />
+    </template>
+
+    <template #item-trailing="{ item, active }">
+      <UBadge
+          v-if="item.badge && !props.collapsed"
+          color="primary"
+          variant="soft"
+          size="xs"
       >
-        {{ item.label }}
+        {{ item.badge }}
-        <template #trailing>
+      </UBadge>
-          <UIcon
+      <UIcon
-              name="i-heroicons-chevron-right-20-solid"
+          v-else-if="item.children?.length"
-              class="w-5 h-5 ms-auto transform transition-transform duration-200"
+          name="i-heroicons-chevron-down-20-solid"
-              :class="[open && 'rotate-90']"
+          class="size-4 shrink-0 transition-transform"
-          />
+          :class="active ? 'text-primary' : 'text-muted'"
-        </template>
+      />
-      </UButton>
     </template>
-
+  </UNavigationMenu>
-    <template #item="{ item }">
-      <div class="flex flex-col">
-        <UButton
-            v-for="child in item.children"
-            :key="child.label"
-            variant="ghost"
-            :color="child.to === route.path ? 'primary' : 'gray'"
-            :icon="child.icon"
-            class="ml-4"
-            :to="child.to"
-            :target="child.target"
-            :disabled="child.disabled"
-            @click="child.click ? child.click() : null"
-        >
-          {{ child.label }}
-        </UButton>
-      </div>
-    </template>
-  </UAccordion>
-
-  <Calculator v-if="showCalculator" v-model="showCalculator"/>
 </template>

frontend/components/NotificationsSlideover.vue

@@ -36,28 +36,30 @@ const setNotificationAsRead = async (notification) => {
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
+  <USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
-    <NuxtLink
+    <template #body>
-        v-for="notification in notifications"
+      <NuxtLink
-        :key="notification.id"
+          v-for="notification in notifications"
-        :to="notification.link"
+          :key="notification.id"
-        class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
+          :to="notification.link"
-        @click="setNotificationAsRead(notification)"
+          class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
-    >
+          @click="setNotificationAsRead(notification)"
-      <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
+      >
-        <UAvatar alt="FEDEO" size="md" />
+        <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
-      </UChip>
+          <UAvatar alt="FEDEO" size="md" />
+        </UChip>
 
-      <div class="text-sm flex-1">
+        <div class="text-sm flex-1">
-        <p class="flex items-center justify-between">
+          <p class="flex items-center justify-between">
-          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
+            <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
 
-          <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
+            <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
-        </p>
+          </p>
-        <p class="text-gray-500 dark:text-gray-400">
+          <p class="text-gray-500 dark:text-gray-400">
-          {{ notification.message }}
+            {{ notification.message }}
-        </p>
+          </p>
-      </div>
+        </div>
-    </NuxtLink>
+      </NuxtLink>
-  </UDashboardSlideover>
+    </template>
+  </USlideover>
 </template>

frontend/components/PublicDynamicForm.vue

@@ -119,7 +119,7 @@ const setDeliveryDateToToday = () => {
 
     <div class="space-y-5">
 
-      <UFormGroup
+      <UFormField
           label="Datum der Ausführung"
           :error="errors.deliveryDate"
           required
@@ -134,9 +134,9 @@ const setDeliveryDateToToday = () => {
           />
           <UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
         </div>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
           label="Mitarbeiter"
           :error="errors.profile"
@@ -144,16 +144,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.profile"
-            :options="data.profiles"
+            :items="data.profiles"
-            option-attribute="fullName"
+            label-key="fullName"
-            value-attribute="id"
+            value-key="id"
             placeholder="Name auswählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.projects?.length > 0"
           :label="config.ui?.labels?.project || 'Projekt / Auftrag'"
           :error="errors.project"
@@ -161,16 +161,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.project"
-            :options="data.projects"
+            :items="data.projects"
-            option-attribute="name"
+            label-key="name"
-            value-attribute="id"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.services?.length > 0"
           :label="config?.ui?.labels?.service || 'Tätigkeit'"
           :error="errors.service"
@@ -178,16 +178,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.service"
-            :options="data.services"
+            :items="data.services"
-            option-attribute="name"
+            label-key="name"
-            value-attribute="id"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           label="Menge / Dauer"
           :error="errors.quantity"
           required
@@ -203,9 +203,9 @@ const setDeliveryDateToToday = () => {
             <span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="config?.features?.agriculture?.showDieselUsage"
           label="Dieselverbrauch"
           :error="errors.diesel"
@@ -216,11 +216,11 @@ const setDeliveryDateToToday = () => {
             <span class="text-gray-500 text-xs">Liter</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
+      <UFormField :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
         <UTextarea v-model="form.description" :rows="3" placeholder="Optional..." />
-      </UFormGroup>
+      </UFormField>
 
     </div>
 

frontend/components/SessionRefreshModal.vue

@@ -16,28 +16,30 @@ const onLogout = async () => {
 </script>
 
 <template>
-  <UModal v-model="auth.sessionWarningVisible" prevent-close>
+  <UModal v-model:open="auth.sessionWarningVisible" prevent-close>
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
+        <template #header>
-      </template>
+          <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
+        </template>
 
-      <p class="text-sm text-gray-600 dark:text-gray-300">
+        <p class="text-sm text-gray-600 dark:text-gray-300">
-        Deine Sitzung endet in
+          Deine Sitzung endet in
-        <span class="font-semibold">{{ remainingTimeLabel }}</span>.
+          <span class="font-semibold">{{ remainingTimeLabel }}</span>.
-        Bitte bestätige, um eingeloggt zu bleiben.
+          Bitte bestätige, um eingeloggt zu bleiben.
-      </p>
+        </p>
 
-      <template #footer>
+        <template #footer>
-        <div class="flex justify-end gap-2">
+          <div class="flex justify-end gap-2">
-          <UButton variant="outline" color="gray" @click="onLogout">
+            <UButton variant="outline" color="gray" @click="onLogout">
-            Abmelden
+              Abmelden
-          </UButton>
+            </UButton>
-          <UButton color="primary" @click="onRefresh">
+            <UButton color="primary" @click="onRefresh">
-            Eingeloggt bleiben
+              Eingeloggt bleiben
-          </UButton>
+            </UButton>
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/StaffTimeEntryModal.vue

@@ -116,7 +116,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     emit('saved')
     isOpen.value = false
   } catch (error: any) {
-    toast.add({ title: 'Fehler', description: error.message, color: 'red' })
+    toast.add({ title: 'Fehler', description: error.message, color: 'error' })
   } finally {
     loading.value = false
   }
@@ -124,57 +124,63 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UModal v-model="isOpen">
+  <UModal v-model:open="isOpen">
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+    <template #content>
-      <template #header>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <div class="flex items-center justify-between">
-            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-          </h3>
+              {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+            </h3>
-        </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-      </template>
+          </div>
+        </template>
 
-      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+          <UFormField label="Typ" name="type">
+            <USelectMenu
+              v-model="state.type"
+              :items="types"
+              value-key="value"
+              label-key="label"
+            />
+          </UFormField>
 
-        <UFormGroup label="Typ" name="type">
+          <div class="grid grid-cols-2 gap-4">
-          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
+            <UFormField label="Start Datum" name="start_date">
-        </UFormGroup>
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.start_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Start Zeit" name="start_time">
+              <UInput type="time" v-model="state.start_time" />
+            </UFormField>
+          </div>
 
-        <div class="grid grid-cols-2 gap-4">
+          <div class="grid grid-cols-2 gap-4">
-          <UFormGroup label="Start Datum" name="start_date">
+            <UFormField label="Ende Datum" name="end_date">
-            <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2">
-              <UInput type="date" v-model="state.start_date" class="flex-1" />
+                <UInput type="date" v-model="state.end_date" class="flex-1" />
-              <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
-            </div>
+              </div>
-          </UFormGroup>
+            </UFormField>
-          <UFormGroup label="Start Zeit" name="start_time">
+            <UFormField label="Ende Zeit" name="end_time">
-            <UInput type="time" v-model="state.start_time" />
+              <UInput type="time" v-model="state.end_time" />
-          </UFormGroup>
+            </UFormField>
-        </div>
+          </div>
+          <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
 
-        <div class="grid grid-cols-2 gap-4">
+          <UFormField label="Beschreibung / Notiz" name="description">
-          <UFormGroup label="Ende Datum" name="end_date">
+            <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
-            <div class="flex items-center gap-2">
+          </UFormField>
-              <UInput type="date" v-model="state.end_date" class="flex-1" />
-              <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
-            </div>
-          </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">
+          <div class="flex justify-end gap-2 pt-4">
-          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
+            <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
-        </UFormGroup>
+            <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
-
+          </div>
-        <div class="flex justify-end gap-2 pt-4">
+        </UForm>
-          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+      </UCard>
-          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
+    </template>
-        </div>
-      </UForm>
-    </UCard>
   </UModal>
 </template>

frontend/components/StandardEntityModal.vue

@@ -61,33 +61,35 @@ setupPage()
 
 <template>
   <UModal :fullscreen="props.mode === 'show'">
-    <EntityShow
+    <template #content>
-        v-if="loaded && props.mode === 'show'"
+      <EntityShow
-        :type="props.type"
+          v-if="loaded && props.mode === 'show'"
-        :item="item"
+          :type="props.type"
-        @updateNeeded="setupPage"
+          :item="item"
-        :key="item"
+          @updateNeeded="setupPage"
-        :in-modal="true"
+          :key="item"
-    />
+          :in-modal="true"
-    <EntityEdit
+      />
-        v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
+      <EntityEdit
-        :type="props.type"
+          v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
-        :item="item"
+          :type="props.type"
-        :inModal="true"
+          :item="item"
-        @return-data="(data) => emit('return-data',data)"
+          :inModal="true"
-        :createQuery="props.createQuery"
+          @return-data="(data) => emit('return-data',data)"
-        :mode="props.mode"
+          :createQuery="props.createQuery"
-    />
+          :mode="props.mode"
-<!--    <EntityList
+      />
-        v-else-if="loaded && props.mode === 'list'"
+  <!--    <EntityList
-        :type="props.type"
+          v-else-if="loaded && props.mode === 'list'"
-        :items="items"
+          :type="props.type"
-    />-->
+          :items="items"
-    <UProgress
+      />-->
-        v-else
+      <UProgress
-        animation="carousel"
+          v-else
-        class="p-5 mt-10"
+          animation="carousel"
-    />
+          class="p-5 mt-10"
+      />
+    </template>
   </UModal>
 </template>
 

frontend/components/TenantDropdown.vue

@@ -1,27 +1,59 @@
 <script setup>
 const auth = useAuthStore()
 
-const selectedTenant = ref(auth.user.tenant_id)
+const activeTenantName = computed(() => {
+  return auth.activeTenantData?.name || auth.tenants?.find((tenant) => tenant.id === auth.activeTenant)?.name || 'Mandant waehlen'
+})
 
+const tenantInitials = computed(() => {
+  return activeTenantName.value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('') || 'M'
+})
 
+const tenantItems = computed(() => [
+  auth.tenants.map((tenant) => ({
+    label: tenant.name,
+    icon: tenant.id === auth.activeTenant ? 'i-heroicons-check' : undefined,
+    disabled: Boolean(tenant.locked),
+    onSelect: async (event) => {
+      if (tenant.locked || tenant.id === auth.activeTenant) {
+        event?.preventDefault?.()
+        return
+      }
+
+      await auth.switchTenant(tenant.id)
+    }
+  }))
+])
 </script>
 
 <template>
   <USelectMenu
-    :options="auth.tenants"
+      :items="tenantItems"
-    value-attribute="id"
+      :content="{ align: 'start', side: 'bottom', sideOffset: 6 }"
-    class="w-40"
+      :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
-    @change="auth.switchTenant(selectedTenant)"
+      class="block w-40"
-    v-model="selectedTenant"
+      :avatar="{
+        alt: activeTenantName,
+        text: tenantInitials,
+        loading: 'lazy'
+    }"
   >
-    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
+    <template #default="{ open }">
-      <UAvatar :alt="auth.activeTenantData?.name" size="md" />
+      <UButton
-
+          color="gray"
-      <span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span>
+          variant="ghost"
-    </UButton>
+          class="w-full min-w-0 max-w-full justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
-
+          :class="[open && 'bg-gray-100 dark:bg-gray-800']"
-    <template #option="{option}">
+      >
-      {{option.name}}
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ activeTenantName }}
+        </span>
+      </UButton>
     </template>
   </USelectMenu>
 </template>

frontend/components/Toolbar.vue

@@ -11,7 +11,7 @@
       <slot name="right"/>
     </InputGroup>
   </div>
-  <UDivider class="my-3"/>
+  <USeparator class="my-3"/>
 </template>
 
 <style scoped>

frontend/components/UCalendar.vue

@@ -0,0 +1,166 @@
+<script>
+import theme from "#build/ui/calendar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "@nuxt/ui/composables/useLocale";
+import { tv } from "@nuxt/ui/utils/tv";
+import UButton from "@nuxt/ui/components/Button.vue";
+
+const props = defineProps({
+  as: { type: null, required: false },
+  nextYearIcon: { type: String, required: false },
+  nextYear: { type: Object, required: false },
+  nextMonthIcon: { type: String, required: false },
+  nextMonth: { type: Object, required: false },
+  prevYearIcon: { type: String, required: false },
+  prevYear: { type: Object, required: false },
+  prevMonthIcon: { type: String, required: false },
+  prevMonth: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  range: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  monthControls: { type: Boolean, required: false, default: true },
+  yearControls: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
+  weekStartsOn: { type: Number, required: false, default: 1 },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false, default: true },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  numberOfMonths: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
+  nextPage: { type: Function, required: false },
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
+});
+
+const emits = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
+
+defineSlots();
+
+const { code: locale, dir, t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(
+  reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "size", "monthControls", "yearControls", "class", "ui"),
+  emits
+);
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.calendar || {} })({
+  color: props.color,
+  size: props.size
+}));
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
+
+function paginateYear(date, sign) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 });
+  }
+
+  return date.add({ years: 1 });
+}
+</script>
+
+<template>
+  <Calendar.Root
+      v-slot="{ weekDays, grid }"
+      v-bind="rootProps"
+      :model-value="modelValue"
+      :default-value="defaultValue"
+      :locale="locale"
+      :dir="dir"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
+      </Calendar.Next>
+    </Calendar.Header>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+          v-for="month in grid"
+          :key="month.value.toString()"
+          :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+                v-for="day in weekDays"
+                :key="day"
+                :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+              v-for="(weekDates, index) in month.rows"
+              :key="`weekDate-${index}`"
+              :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+                v-for="weekDate in weekDates"
+                :key="weekDate.toString()"
+                :date="weekDate"
+                :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                  :day="weekDate"
+                  :month="month.value"
+                  :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

frontend/components/UDashboardNavbar.vue

@@ -0,0 +1,94 @@
+<script setup>
+import DashboardNavbarBase from "@nuxt/ui-pro/runtime/components/DashboardNavbar.vue"
+import UBadge from "@nuxt/ui/components/Badge.vue"
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  as: {
+    type: null,
+    required: false
+  },
+  icon: {
+    type: String,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  },
+  toggle: {
+    type: [Boolean, Object],
+    required: false,
+    default: true
+  },
+  toggleSide: {
+    type: String,
+    required: false,
+    default: "left"
+  },
+  badge: {
+    type: [String, Number],
+    required: false
+  },
+  class: {
+    type: null,
+    required: false
+  },
+  ui: {
+    type: null,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <DashboardNavbarBase
+      :as="as"
+      :icon="icon"
+      :title="title"
+      :toggle="toggle"
+      :toggle-side="toggleSide"
+      :class="props.class"
+      :ui="ui"
+      v-bind="$attrs"
+  >
+    <template v-if="$slots.toggle" #toggle="slotProps">
+      <slot name="toggle" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.left" #left="slotProps">
+      <slot name="left" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.leading" #leading="slotProps">
+      <slot name="leading" v-bind="slotProps" />
+    </template>
+
+    <template #title>
+      <slot name="title">
+        <span class="inline-flex min-w-0 items-center gap-2">
+          <span class="truncate">{{ title }}</span>
+          <UBadge
+              v-if="badge !== undefined && badge !== null && badge !== ''"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+          >
+            {{ badge }}
+          </UBadge>
+        </span>
+      </slot>
+    </template>
+
+    <template v-if="$slots.trailing" #trailing="slotProps">
+      <slot name="trailing" v-bind="slotProps" />
+    </template>
+
+    <slot />
+
+    <template v-if="$slots.right" #right="slotProps">
+      <slot name="right" v-bind="slotProps" />
+    </template>
+  </DashboardNavbarBase>
+</template>

frontend/components/UDashboardPanelContent.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  as: {
+    type: [String, Object],
+    default: 'div'
+  }
+})
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <component
+      :is="props.as"
+      v-bind="attrs"
+      :class="[
+        'min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
+        attrs.class
+      ]"
+  >
+    <slot />
+  </component>
+</template>

frontend/components/UserDropdown.vue

@@ -1,57 +1,44 @@
 <script setup>
-
-const { isHelpSlideoverOpen } = useDashboard()
-const { isDashboardSearchModalOpen } = useUIState()
-const { metaSymbol } = useShortcuts()
 const auth = useAuthStore()
 
-const items = computed(() => [
+const userItems = computed(() => [[
-  [{
+  {
-    slot: 'account',
+    label: 'Passwort aendern',
-    label: '',
-    disabled: true
-  }],  [/*{
-    label: 'Mein Profil',
-    icon: 'i-heroicons-user',
-    to: `/profiles/show/${profileStore.activeProfile.id}`
-  },*/{
-    label: 'Passwort ändern',
     icon: 'i-heroicons-shield-check',
-    to: `/password-change`
+    to: '/password-change'
-  },{
+  },
+  {
     label: 'Abmelden',
     icon: 'i-heroicons-arrow-left-on-rectangle',
-    click: async () => {
+    onSelect: async () => {
       await auth.logout()
-
     }
-  }]
+  }
-])
+]])
 </script>
 
 <template>
-  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
+  <UDropdownMenu
+    :items="userItems"
+    :content="{ align: 'start', side: 'top', sideOffset: 8 }"
+    :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+    class="block w-full"
+  >
     <template #default="{ open }">
-      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+      <UButton
-<!--        <template #leading>
+        color="gray"
-          <UAvatar :alt="auth.user.email"  size="xs" />
+        variant="ghost"
-        </template>-->
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <div class="flex items-space gap-2">
+          <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ auth.user.email }}
+        </span>
+          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
+        </div>
 
-        <template #trailing>
-          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
-        </template>
       </UButton>
     </template>
-
+  </UDropdownMenu>
-    <template #account>
-      <div class="text-left">
-        <p>
-          Angemeldet als
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{auth.user.email}}
-        </p>
-      </div>
-    </template>
-  </UDropdown>
 </template>

frontend/components/copyCreatedDocumentModal.vue

@@ -67,12 +67,13 @@ const startImport = () => {
 
 <template>
   <UModal :fullscreen="false">
+    <template #content>
       <UCard>
         <template #header>
           Erstelltes Dokument Kopieren
         </template>
 
-        <UFormGroup
+        <UFormField
             label="Dokumententyp:"
           class="mb-3"
         >
@@ -84,7 +85,7 @@ const startImport = () => {
           >
 
           </USelectMenu>
-        </UFormGroup>
+        </UFormField>
         <UCheckbox
               v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
               v-model="optionsToImport[key]"
@@ -101,6 +102,7 @@ const startImport = () => {
         </template>
 
       </UCard>
+    </template>
   </UModal>
 </template>
 

frontend/components/costcentreDisplay.vue

@@ -1,26 +1,205 @@
 <script setup>
+import dayjs from "dayjs"
+
 const props = defineProps({
   item: {
     required: true,
-    type: String
+    type: Object
   }
 })
 
-const incomingInvoices = ref({})
+const loading = ref(true)
+const incomingInvoices = ref([])
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const currency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`
+
+const yearItems = computed(() => {
+  const years = [...new Set(
+    incomingInvoices.value
+      .map((invoice) => invoice.date ? String(dayjs(invoice.date).year()) : null)
+      .filter(Boolean)
+  )].sort((a, b) => Number(b) - Number(a))
+
+  return years.length > 0 ? years.map((year) => ({ label: year, value: year })) : [{ label: String(dayjs().year()), value: String(dayjs().year()) }]
+})
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const reportRows = computed(() => {
+  return incomingInvoices.value.flatMap((invoice) => {
+    const invoiceDate = invoice.date ? dayjs(invoice.date) : null
+
+    if (invoiceDate && invoiceDate.year().toString() !== selectedYear.value) {
+      return []
+    }
+
+    if (invoiceDate && selectedMonth.value !== "all" && invoiceDate.month() + 1 !== Number(selectedMonth.value)) {
+      return []
+    }
+
+    const matchingAccounts = (invoice.accounts || []).filter((account) => account.costCentre === props.item.id)
+
+    return matchingAccounts.map((account, index) => {
+      const amountNet = Number(account.amountNet || 0)
+      const amountTax = Number(account.amountTax || 0)
+      const amountGross = Number(account.amountGross || amountNet + amountTax || 0)
+
+      return {
+        id: `${invoice.id}-${index}`,
+        invoiceId: invoice.id,
+        reference: invoice.reference || "-",
+        date: invoice.date,
+        state: invoice.state || "-",
+        vendorName: invoice.vendor?.name || "-",
+        accountLabel: account.account?.label || account.accountLabel || "-",
+        description: account.description || invoice.description || "-",
+        amountNet,
+        amountTax,
+        amountGross
+      }
+    })
+  })
+})
+
+const totals = computed(() => {
+  return reportRows.value.reduce((acc, row) => {
+    acc.net += row.amountNet
+    acc.tax += row.amountTax
+    acc.gross += row.amountGross
+    return acc
+  }, { net: 0, tax: 0, gross: 0 })
+})
+
+const columns = [
+  { accessorKey: "reference", header: "Beleg" },
+  { accessorKey: "date", header: "Datum" },
+  { accessorKey: "vendorName", header: "Lieferant" },
+  { accessorKey: "accountLabel", header: "Konto" },
+  { accessorKey: "description", header: "Beschreibung" },
+  { accessorKey: "amountNet", header: "Netto" },
+  { accessorKey: "amountTax", header: "Steuer" },
+  { accessorKey: "amountGross", header: "Brutto" }
+]
 
 const setupPage = async () => {
-  incomingInvoices.value = (await useEntities("incominginvoices").select()).filter(i => i.accounts.find(x => x.costCentre === props.item.id))
+  loading.value = true
+
+  const invoices = await useEntities("incominginvoices").select("*, vendor(id,name)")
+
+  incomingInvoices.value = invoices.filter((invoice) =>
+    (invoice.accounts || []).some((account) => account.costCentre === props.item.id)
+  )
+
+  const firstYear = yearItems.value[0]?.value
+  if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+    selectedYear.value = firstYear
+  }
+
+  loading.value = false
 }
 
 setupPage()
-
 </script>
 
 <template>
-  {{props.item}}
+  <div class="space-y-4">
-  {{incomingInvoices}}
+    <div class="flex flex-col gap-3 md:flex-row md:items-end">
+      <UFormField label="Jahr" class="w-full md:w-48">
+        <USelectMenu
+            v-model="selectedYear"
+            :items="yearItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Monat" class="w-full md:w-56">
+        <USelectMenu
+            v-model="selectedMonth"
+            :items="monthItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+    </div>
+
+    <div class="grid gap-3 md:grid-cols-3">
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Netto gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.net) }}</div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Steuer gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.tax) }}</div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Brutto gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.gross) }}</div>
+      </UCard>
+    </div>
+
+    <UTable
+        v-if="!loading"
+        :data="reportRows"
+        :columns="columns"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Eingangsbelege mit dieser Kostenstelle gefunden' }"
+        class="w-full"
+    >
+      <template #reference-cell="{ row }">
+        <div class="truncate font-medium">{{ row.original.reference }}</div>
+      </template>
+
+      <template #date-cell="{ row }">
+        <div class="truncate">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YYYY") : "-" }}</div>
+      </template>
+
+      <template #vendorName-cell="{ row }">
+        <div class="truncate">{{ row.original.vendorName }}</div>
+      </template>
+
+      <template #accountLabel-cell="{ row }">
+        <div class="truncate">{{ row.original.accountLabel }}</div>
+      </template>
+
+      <template #description-cell="{ row }">
+        <UTooltip :text="row.original.description">
+          <div class="max-w-[18rem] truncate">{{ row.original.description }}</div>
+        </UTooltip>
+      </template>
+
+      <template #amountNet-cell="{ row }">
+        <div class="text-right tabular-nums">{{ currency(row.original.amountNet) }}</div>
+      </template>
+
+      <template #amountTax-cell="{ row }">
+        <div class="text-right tabular-nums">{{ currency(row.original.amountTax) }}</div>
+      </template>
+
+      <template #amountGross-cell="{ row }">
+        <div class="text-right font-medium tabular-nums">{{ currency(row.original.amountGross) }}</div>
+      </template>
+    </UTable>
+
+    <UProgress v-else animation="carousel" class="w-3/4 mx-auto" />
+  </div>
 </template>
-
-<style scoped>
-
-</style>

frontend/components/displayBWASummary.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import {
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown
+} from "~/composables/useTaxEvaluation"
+
+const loading = ref(true)
+const summary = ref({
+  label: "",
+  income: 0,
+  expenses: 0,
+  result: 0,
+  taxBalance: 0,
+  incomeCount: 0,
+  expenseCount: 0
+})
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR"
+  }).format(Number(value || 0))
+}
+
+const isRelevantOutputDocument = (doc: any) => {
+  return doc?.state === "Gebucht" && ["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)
+}
+
+const isRelevantInputInvoice = (invoice: any) => {
+  return invoice?.state === "Gebucht" && !!invoice?.date
+}
+
+const loadSummary = async () => {
+  loading.value = true
+
+  try {
+    const bounds = {
+      start: dayjs().startOf("month"),
+      end: dayjs().endOf("month")
+    }
+
+    const [docs, incoming, allocations] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select(),
+      useEntities("statementallocations").select("*, bankstatement(*)")
+    ])
+
+    const outputDocs = (docs || []).filter((doc: any) => {
+      if (!isRelevantOutputDocument(doc)) {
+        return false
+      }
+
+      const date = dayjs(doc.documentDate)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const inputDocs = (incoming || []).filter((invoice: any) => {
+      if (!isRelevantInputInvoice(invoice)) {
+        return false
+      }
+
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const directExpenses = (allocations || []).filter((allocation: any) => {
+      if (allocation?.account === null || typeof allocation?.account === "undefined") {
+        return false
+      }
+
+      const statementDate = allocation?.bankstatement?.date || allocation?.bankstatement?.valueDate || allocation?.date || allocation?.created_at
+      const date = dayjs(statementDate)
+      const amount = Number(allocation?.amount || 0)
+
+      return amount < 0 && date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const income = outputDocs.reduce((sum: number, doc: any) => {
+      return sum + (doc.rows || []).reduce((rowSum: number, row: any) => {
+        if (!row || ["pagebreak", "title", "text"].includes(row.mode)) {
+          return rowSum
+        }
+
+        const quantity = Number(row.quantity || 0)
+        const price = Number(row.price || 0)
+        const discountPercent = Number(row.discountPercent || 0)
+
+        return rowSum + (quantity * price * (1 - discountPercent / 100))
+      }, 0)
+    }, 0)
+
+    const invoiceExpenses = inputDocs.reduce((sum: number, invoice: any) => {
+      return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
+    }, 0)
+
+    const directAccountExpenses = directExpenses.reduce((sum: number, allocation: any) => {
+      return sum + Math.abs(Number(allocation.amount || 0))
+    }, 0)
+
+    const outputTax = outputDocs.reduce((sum: number, doc: any) => {
+      const breakdown = getCreatedDocumentTaxBreakdown(doc)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    const inputTax = inputDocs.reduce((sum: number, invoice: any) => {
+      const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    const expenses = invoiceExpenses + directAccountExpenses
+
+    summary.value = {
+      label: dayjs().format("MMMM YYYY"),
+      income: Number(income.toFixed(2)),
+      expenses: Number(expenses.toFixed(2)),
+      result: Number((income - expenses).toFixed(2)),
+      taxBalance: Number((outputTax - inputTax).toFixed(2)),
+      incomeCount: outputDocs.length,
+      expenseCount: inputDocs.length + directExpenses.length
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadSummary)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="bwa-summary-top">
+      <div>
+        <p class="bwa-summary-period">{{ summary.label }}</p>
+        <p class="bwa-summary-range">Aktueller Monat</p>
+      </div>
+      <UButton
+        size="xs"
+        variant="soft"
+        color="gray"
+        icon="i-heroicons-arrow-top-right-on-square"
+        @click="navigateTo('/accounting/bwa')"
+      >
+        Details
+      </UButton>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Einnahmen</span>
+      <span class="bwa-summary-value text-primary-500">
+        {{ loading ? "..." : formatCurrency(summary.income) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Ausgaben</span>
+      <span class="bwa-summary-value text-error">
+        {{ loading ? "..." : formatCurrency(summary.expenses) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Ergebnis</span>
+      <span class="bwa-summary-value" :class="summary.result >= 0 ? 'text-primary-500' : 'text-error'">
+        {{ loading ? "..." : formatCurrency(summary.result) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-meta">
+      {{ summary.incomeCount }} Einnahmenbelege | {{ summary.expenseCount }} Ausgabenbelege | USt-Saldo {{ formatCurrency(summary.taxBalance) }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bwa-summary-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.bwa-summary-period {
+  margin: 0;
+  font-weight: 700;
+  color: rgb(17 24 39);
+}
+
+.bwa-summary-range,
+.bwa-summary-meta {
+  margin: 0;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+
+.bwa-summary-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.bwa-summary-label {
+  color: rgb(55 65 81);
+}
+
+.bwa-summary-value {
+  font-weight: 700;
+  text-align: right;
+}
+
+:deep(.dark) .bwa-summary-period {
+  color: rgb(243 244 246);
+}
+
+:deep(.dark) .bwa-summary-range,
+:deep(.dark) .bwa-summary-meta,
+:deep(.dark) .bwa-summary-label {
+  color: rgb(156 163 175);
+}
+</style>

frontend/components/displayIncomeAndExpenditure.vue

@@ -243,26 +243,26 @@ loadData()
         <div class="flex flex-wrap items-center gap-2">
           <USelectMenu
             v-model="granularity"
-            :options="granularityOptions"
+            :items="granularityOptions"
-            value-attribute="value"
+            value-key="value"
-            option-attribute="label"
+            label-key="label"
             class="w-28"
           />
 
           <USelectMenu
             v-model="selectedYear"
-            :options="yearOptions"
+            :items="yearOptions"
-            value-attribute="value"
+            value-key="value"
-            option-attribute="label"
+            label-key="label"
             class="w-24"
           />
 
           <USelectMenu
             v-if="granularity === 'month'"
             v-model="selectedMonth"
-            :options="monthOptions"
+            :items="monthOptions"
-            value-attribute="value"
+            value-key="value"
-            option-attribute="label"
+            label-key="label"
             class="w-36"
           />
         </div>
@@ -288,26 +288,26 @@ loadData()
       <div class="flex flex-wrap items-center gap-2">
         <USelectMenu
           v-model="granularity"
-          :options="granularityOptions"
+          :items="granularityOptions"
-          value-attribute="value"
+          value-key="value"
-          option-attribute="label"
+          label-key="label"
           class="w-28"
         />
 
         <USelectMenu
           v-model="selectedYear"
-          :options="yearOptions"
+          :items="yearOptions"
-          value-attribute="value"
+          value-key="value"
-          option-attribute="label"
+          label-key="label"
           class="w-24"
         />
 
         <USelectMenu
           v-if="granularity === 'month'"
           v-model="selectedMonth"
-          :options="monthOptions"
+          :items="monthOptions"
-          value-attribute="value"
+          value-key="value"
-          option-attribute="label"
+          label-key="label"
           class="w-36"
         />
       </div>

frontend/components/displayOpenTasks.vue

@@ -23,9 +23,9 @@ setupPage()
 <template>
   <UTable
       v-if="openTasks.length > 0"
-    :rows="openTasks"
+    :data="openTasks"
-      :columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]"
+      :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
-      @select="(i) => router.push(`/tasks/show/${i.id}`)"
+      :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
   />
   <div v-else>
     <p  class="text-center font-bold">Keine offenen Aufgaben</p>

frontend/components/displayRunningTime.vue

@@ -29,7 +29,7 @@ const startTime = async () => {
     await setupPage()
   } catch (error) {
     console.log(error)
-    toast.add({title: "Fehler beim starten der Projektzeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Projektzeit",color:"error"})
   }
 }
 
@@ -41,7 +41,7 @@ const stopStartedTime = async () => {
   } catch (error) {
     console.log(error)
     let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"error"})
   }
 }
 
@@ -53,15 +53,15 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
+    </UFormField>
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Projekt:"
     >
@@ -74,7 +74,7 @@ const stopStartedTime = async () => {
           value-attribute="id"
           option-attribute="name"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"

frontend/components/displayRunningWorkingTime.vue

@@ -25,7 +25,7 @@ const startTime = async () => {
     await setupPage()
   } catch (error) {
     console.log(error)
-    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Zeit",color:"error"})
   }
 }
 
@@ -37,7 +37,7 @@ const stopStartedTime = async () => {
   } catch (error) {
     console.log(error)
     let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"error"})
   }
 }
 
@@ -49,14 +49,14 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"

frontend/components/materialComposing.vue

@@ -12,6 +12,10 @@ const props = defineProps({
 const products = ref([])
 const units = ref([])
 
+const productSearchInput = {
+  placeholder: 'Artikel suchen...'
+}
+
 const setup = async () => {
   products.value = await useEntities("products").select()
   units.value = await useEntities("units").selectSpecial()
@@ -68,66 +72,83 @@ const setRowData = (row) => {
       + Artikel
     </UButton>
 
-    <table class="w-full mt-3">
+    <div class="mt-3 overflow-x-auto">
-      <tr>
+      <table class="w-full min-w-[44rem] table-fixed">
-        <th>Artikel</th>
+        <thead>
-        <th>Menge</th>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
-        <th>Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Artikel</th>
-        <th>Verkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
-      </tr>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
-      <tr
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
-          v-for="product in props.item.materialComposition"
+            <th class="w-12 px-2 py-2"></th>
-      >
+          </tr>
-        <td>
+        </thead>
-          <USelectMenu
+        <tbody>
-              searchable
+          <tr
-              :search-attributes="['name']"
+              v-for="product in props.item.materialComposition"
-            :options="products"
+              :key="product.id"
-            value-attribute="id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
-            option-attribute="name"
-            v-model="product.product"
-            :color="product.product ? 'primary' : 'rose'"
-            @change="setRowData(product)"
           >
-            <template #label>
+        <td class="px-2 py-2">
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+          <USelectMenu
+            class="w-full"
+            :items="products"
+            label-key="name"
+            value-key="id"
+            :search-input="productSearchInput"
+            :filter-fields="['name']"
+            v-model="product.product"
+            :color="product.product ? 'primary' : 'error'"
+            @update:model-value="setRowData(product)"
+          >
+            <template #default>
+              {{ products.find(i => i.id === product.product)?.name || 'Kein Artikel ausgewählt' }}
             </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.quantity"
             :step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <USelectMenu
-            :options="units"
+            class="w-full"
-            value-attribute="id"
+            :items="units"
-            option-attribute="name"
+            label-key="name"
+            value-key="id"
             v-model="product.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === product.unit)?.name || 'Einheit wählen' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.price"
             step="0.01"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeProductFromMaterialComposition(product.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
-      </tr>
+          </tr>
-    </table>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 

frontend/components/mobile/FloatingActionButton.vue

@@ -53,7 +53,10 @@ const emit = defineEmits(["click"])
 <style scoped>
 /* FAB Basis */
 .fab-base {
-  @apply rounded-full px-5 py-4 text-lg font-semibold;
+  border-radius: 9999px;
+  padding: 1rem 1.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
 
   /* Wenn nur ein Icon vorhanden ist → runder Kreis */
   /* Wenn Label + Icon → Extended FAB */
@@ -61,6 +64,12 @@ const emit = defineEmits(["click"])
 
 /* Optional: Auto-Kreisen wenn kein Label */
 #fab:not([label]) {
-  @apply w-14 h-14 p-0 flex items-center justify-center text-2xl;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
 }
 </style>

frontend/components/nimbot.vue

@@ -47,14 +47,14 @@ async function handlePrint() {
 
     {{labelPrinter.printProgress}}
 
-    <UFormGroup label="Breite">
+    <UFormField label="Breite">
       <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
-    </UFormGroup>
+    </UFormField>
-    <UFormGroup label="Höhe">
+    <UFormField label="Höhe">
       <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
-    </UFormGroup>
+    </UFormField>
-    <UFormGroup label="ZPL">
+    <UFormField label="ZPL">
       <UTextarea v-model="zpl" rows="6" />
-    </UFormGroup>
+    </UFormField>
   </UCard>
 </template>

frontend/components/personalComposing.vue

@@ -12,6 +12,10 @@ const props = defineProps({
 const hourrates = ref([])
 const units = ref([])
 
+const hourrateSearchInput = {
+  placeholder: 'Stundensatz suchen...'
+}
+
 const setup = async () => {
   hourrates.value = await useEntities("hourrates").select()
   units.value = await useEntities("units").selectSpecial()
@@ -69,76 +73,94 @@ const setRowData = (row) => {
       + Stundensatz
     </UButton>
 
-    <table class="w-full mt-3">
+    <div class="mt-3 overflow-x-auto">
-      <tr>
+      <table class="w-full min-w-[52rem] table-fixed">
-        <th>Name</th>
+        <thead>
-        <th>Menge</th>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
-        <th>Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Name</th>
-        <th>Einkaufpreis</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
-        <th>Verkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
-      </tr>
+            <th class="px-2 py-2 text-left font-medium">Einkaufspreis</th>
-      <tr
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
-          v-for="row in props.item.personalComposition"
+            <th class="w-12 px-2 py-2"></th>
-      >
+          </tr>
-        <td>
+        </thead>
-          <USelectMenu
+        <tbody>
-              searchable
+          <tr
-              :search-attributes="['name']"
+              v-for="row in props.item.personalComposition"
-              :options="hourrates"
+              :key="row.id"
-              value-attribute="id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
-              option-attribute="name"
-              v-model="row.hourrate"
-              :color="row.hourrate ? 'primary' : 'rose'"
-              @change="setRowData(row)"
           >
-<!--            <template #label>
+        <td class="px-2 py-2">
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+          <USelectMenu
-            </template>-->
+            class="w-full"
+            :items="hourrates"
+            label-key="name"
+            value-key="id"
+            :search-input="hourrateSearchInput"
+            :filter-fields="['name']"
+            v-model="row.hourrate"
+            :color="row.hourrate ? 'primary' : 'error'"
+            @update:model-value="setRowData(row)"
+          >
+            <template #default>
+              {{ hourrates.find(i => i.id === row.hourrate)?.name || 'Kein Stundensatz ausgewählt' }}
+            </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.quantity"
             :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : 1"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <USelectMenu
-            :options="units"
+            class="w-full"
+            :items="units"
             disabled
-            value-attribute="id"
+            label-key="name"
-            option-attribute="name"
+            value-key="id"
             v-model="row.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === row.unit)?.name || 'Einheit' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.purchasePrice"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.price"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
-      </tr>
+          </tr>
-    </table>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 

frontend/components/wiki/WikiEditor.vue

@@ -206,16 +206,62 @@ const addVideo = () => {
 <style scoped>
 /* Toolbar & Buttons */
 .toolbar-btn {
-  @apply p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  color: #4b5563;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  font-weight: 500;
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .toolbar-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner;
+  background: #e5e7eb;
+  color: #000;
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 .bubble-btn {
-  @apply px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #374151;
 }
 .bubble-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
+  background: #e5e7eb;
+  color: #000;
+}
+
+.toolbar-btn:hover,
+.bubble-btn:hover {
+  background: #f3f4f6;
+}
+
+:global(.dark) .toolbar-btn {
+  color: #d1d5db;
+}
+
+:global(.dark) .toolbar-btn:hover,
+:global(.dark) .bubble-btn:hover {
+  background: #374151;
+}
+
+:global(.dark) .toolbar-btn.is-active,
+:global(.dark) .bubble-btn.is-active {
+  background: #4b5563;
+  color: #fff;
+}
+
+:global(.dark) .bubble-btn {
+  color: #e5e7eb;
 }
 
 /* GLOBAL EDITOR STYLES */
@@ -235,20 +281,48 @@ const addVideo = () => {
   /* MENTION */
   .wiki-mention {
     /* Pill-Shape, grau/neutral statt knallig blau */
-    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm font-medium no-underline inline-block mx-0.5 align-middle border border-gray-200 dark:border-gray-700;
+    background: #f3f4f6;
-
+    color: #374151;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-block;
+    margin-inline: 0.125rem;
+    vertical-align: middle;
+    border: 1px solid #e5e7eb;
     box-decoration-break: clone;
   }
 
   .wiki-mention::before {
-    @apply text-gray-400 dark:text-gray-500 mr-0.5;
+    color: #9ca3af;
+    margin-right: 0.125rem;
   }
 
   .wiki-mention:hover {
-    @apply bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 text-primary-700 dark:text-primary-400;
+    background: #eefbf0;
+    border-color: #bbf7d0;
+    color: #15803d;
     cursor: pointer;
   }
 
+  :global(.dark) .wiki-mention {
+    background: #1f2937;
+    color: #e5e7eb;
+    border-color: #374151;
+  }
+
+  :global(.dark) .wiki-mention::before {
+    color: #6b7280;
+  }
+
+  :global(.dark) .wiki-mention:hover {
+    background: rgb(20 83 45 / 0.3);
+    border-color: #166534;
+    color: #4ade80;
+  }
+
   /* TABLE */
   table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
   th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; }
@@ -258,7 +332,7 @@ const addVideo = () => {
   .column-resize-handle { background-color: #3b82f6; width: 4px; }
 
   /* CODE */
-  pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
+  pre { background: #0d1117; color: #c9d1d9; font-family: var(--font-mono); padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
   code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }
 
   /* IMG */

frontend/components/wiki/WikiEntityWidget.vue

@@ -98,17 +98,19 @@
       </div>
     </div>
 
-    <UModal v-model="isCreateModalOpen">
+    <UModal v-model:open="isCreateModalOpen">
-      <div class="p-5">
+      <template #content>
-        <h3 class="font-bold mb-4">Neue Seite</h3>
+        <div class="p-5">
-        <form @submit.prevent="createPage">
+          <h3 class="font-bold mb-4">Neue Seite</h3>
-          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+          <form @submit.prevent="createPage">
-          <div class="mt-4 flex justify-end gap-2">
+            <UInput v-model="newTitle" placeholder="Titel..." autofocus />
-            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+            <div class="mt-4 flex justify-end gap-2">
-            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+              <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
-          </div>
+              <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
-        </form>
+            </div>
-      </div>
+          </form>
+        </div>
+      </template>
     </UModal>
 
   </div>
@@ -163,7 +165,7 @@ async function selectPage(id: string) {
     const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
     selectedPage.value = data
   } catch (e) {
-    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+    toast.add({ title: 'Fehler beim Laden', color: 'error' })
   } finally {
     loadingContent.value = false
   }

frontend/composables/useModal.ts

@@ -0,0 +1,35 @@
+type ModalComponent = any
+type ModalProps = Record<string, any> | undefined
+
+const modalStack = useState<any[]>('__fed_modal_stack__', () => [])
+
+export const useModal = () => {
+  const overlay = useOverlay()
+
+  const open = (component: ModalComponent, props?: ModalProps) => {
+    const instance = overlay.create(component, { props, destroyOnClose: true })
+    modalStack.value.push(instance)
+
+    const result = instance.open(props)
+    result.finally(() => {
+      modalStack.value = modalStack.value.filter((entry) => entry.id !== instance.id)
+    })
+
+    return result
+  }
+
+  const close = (value?: any) => {
+    const current = modalStack.value[modalStack.value.length - 1]
+
+    if (!current) {
+      return
+    }
+
+    current.close(value)
+  }
+
+  return {
+    open,
+    close
+  }
+}

frontend/composables/useTableColumns.ts

@@ -0,0 +1,28 @@
+type LegacyTableColumn = {
+  id?: string
+  key?: string
+  label?: unknown
+  header?: unknown
+  accessorKey?: string
+  [key: string]: unknown
+}
+
+export const normalizeTableColumns = (columns: LegacyTableColumn[] = []) => {
+  return columns.map((column, index) => {
+    const accessorKey = typeof column.accessorKey === 'string'
+      ? column.accessorKey
+      : typeof column.key === 'string'
+        ? column.key
+        : undefined
+
+    const header = column.header ?? column.label ?? accessorKey ?? `column_${index}`
+    const id = column.id ?? accessorKey ?? (typeof header === 'string' ? header : `column_${index}`)
+
+    return {
+      ...column,
+      id,
+      accessorKey,
+      header
+    }
+  })
+}

frontend/layouts/default.vue

@@ -240,26 +240,42 @@ onMounted(() => {
         </UCard>
       </UContainer>
     </div>
-    <UDashboardLayout class="safearea" v-else>
+    <div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
-      <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
+<!--      <div
-        <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;"
+          class="border-b border-default bg-default px-3 py-2"
-                          :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
+          style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
-          <template #left>
+      >
+        <TenantDropdown class="min-w-0 w-full max-w-sm" />
+      </div>-->
+
+      <UDashboardGroup class="flex min-h-0 flex-1 overflow-hidden">
+
+
+        <UDashboardSidebar
+            id="sidebar"
+            collapsible
+            resizable
+            :default-size="18"
+            :min-size="14"
+            :max-size="24"
+            class="shrink-0 border-r border-default bg-default"
+        >
+          <template #header>
             <TenantDropdown class="w-full"/>
+
           </template>
-        </UDashboardNavbar>
 
-        <UDashboardSidebar id="sidebar">
+          <template #default="{ collapsed }">
+            <MainNav :collapsed="collapsed" />
+          </template>
 
-          <MainNav/>
+          <template #footer="{ collapsed }">
+            <div class="flex flex-col gap-3 w-full">
+              <div class="flex items-center gap-2">
+                <UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
+                <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
+              </div>
 
-          <div class="flex-1"/>
-
-          <template #footer>
-
-            <div class="flex flex-col gap-3">
-
-              <UColorModeToggle class="ml-3"/>
               <LabelPrinterButton class="w-full"/>
 
               <div class="flex flex-col gap-1">
@@ -268,38 +284,37 @@ onMounted(() => {
                     :key="item.label"
                     color="gray"
                     variant="ghost"
-                    class="w-full"
+                    class="w-full min-w-0 justify-start rounded-lg px-2.5 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-800"
                     :icon="item.icon"
                     @click="item.click ? item.click() : null"
                 >
-                  {{ item.label }}
+                  <span v-if="!collapsed">{{ item.label }}</span>
 
                   <template #trailing>
-                    <UBadge v-if="item.badge" color="primary" variant="solid" size="xs">
+                    <UBadge v-if="!collapsed && item.badge" color="primary" variant="solid" size="xs">
                       {{ item.badge }}
                     </UBadge>
                   </template>
                 </UButton>
               </div>
 
-              <UDivider class="sticky bottom-0 w-full"/>
+              <USeparator class="sticky bottom-0 w-full"/>
               <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;" class="w-full"/>
             </div>
           </template>
         </UDashboardSidebar>
-      </UDashboardPanel>
 
-      <UDashboardPage>
+
-        <UDashboardPanel grow>
+        <UDashboardPanel class="flex min-w-0 flex-1 flex-col overflow-hidden">
           <slot/>
+
         </UDashboardPanel>
-      </UDashboardPage>
+      </UDashboardGroup>
 
       <HelpSlideover/>
 
       <Calculator v-if="calculatorStore.isOpen"/>
-
+    </div>
-    </UDashboardLayout>
   </div>
 
   <div
@@ -330,7 +345,7 @@ onMounted(() => {
       </div>
       <UButton
           variant="outline"
-          color="rose"
+          color="error"
           @click="auth.logout()"
       >Abmelden
       </UButton>

frontend/nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
         }
     },
 
-    modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
+    modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui-pro', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
 
     ssr: false,
 
@@ -15,14 +15,12 @@ export default defineNuxtConfig({
         dirs: ['stores']
     },
 
-    extends: [
-        '@nuxt/ui-pro'
-    ],
-
     components: [{
         path: '~/components'
     }],
 
+    css: ['~/assets/css/main.css'],
+
     build: {
         transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
             'lowlight',]
@@ -74,10 +72,6 @@ export default defineNuxtConfig({
         },
     },
 
-    ui: {
-        icons: ['heroicons', 'mdi', 'simple-icons']
-    },
-
     colorMode: {
         preference: 'system'
     },

frontend/package.json

@@ -37,7 +37,8 @@
     "@fullcalendar/vue3": "^6.1.10",
     "@iconify/json": "^2.2.171",
     "@mmote/niimbluelib": "^0.0.1-alpha.29",
-    "@nuxt/ui-pro": "^1.6.0",
+    "@nuxt/ui": "^3.3.7",
+    "@nuxt/ui-pro": "^3.3.7",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.1.0",
     "@nuxtjs/strapi": "^1.9.3",

frontend/pages/accounting/bwa.vue

@@ -0,0 +1,600 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import {
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown
+} from "~/composables/useTaxEvaluation"
+
+const router = useRouter()
+
+const loading = ref(true)
+const createdDocuments = ref<any[]>([])
+const incomingInvoices = ref<any[]>([])
+const accounts = ref<any[]>([])
+const ownAccounts = ref<any[]>([])
+const statementAllocations = ref<any[]>([])
+
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const accountColumns = [
+  { accessorKey: "gross", header: "Brutto" },
+  { accessorKey: "net", header: "Netto" },
+  { accessorKey: "tax", header: "Steuer" },
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" }
+]
+
+const ownAccountColumns = [
+  { accessorKey: "balance", header: "Saldo" },
+  { accessorKey: "expenses", header: "Ausgaben" },
+  { accessorKey: "income", header: "Einnahmen" },
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" }
+]
+
+const isRelevantOutputDocument = (doc: any) => {
+  return doc?.state === "Gebucht" && ["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)
+}
+
+const isRelevantInputInvoice = (invoice: any) => {
+  return invoice?.state === "Gebucht" && !!invoice?.date
+}
+
+const sameId = (left: any, right: any) => String(left ?? "") === String(right ?? "")
+
+const getStatementDate = (allocation: any) => {
+  return allocation?.bankstatement?.date || allocation?.bankstatement?.valueDate || allocation?.date || allocation?.created_at || null
+}
+
+const matchesSelectedPeriod = (dateValue: any) => {
+  const parsed = dayjs(dateValue)
+
+  if (!parsed.isValid()) {
+    return false
+  }
+
+  if (String(parsed.year()) !== selectedYear.value) {
+    return false
+  }
+
+  if (selectedMonth.value !== "all" && parsed.month() + 1 !== Number(selectedMonth.value)) {
+    return false
+  }
+
+  return true
+}
+
+const computeDocumentNet = (doc: any) => {
+  return Number((doc?.rows || []).reduce((sum: number, row: any) => {
+    if (!row || ["pagebreak", "title", "text"].includes(row.mode)) {
+      return sum
+    }
+
+    const quantity = Number(row.quantity || 0)
+    const price = Number(row.price || 0)
+    const discountPercent = Number(row.discountPercent || 0)
+
+    return sum + (quantity * price * (1 - discountPercent / 100))
+  }, 0).toFixed(2))
+}
+
+const computeIncomingInvoiceGross = (invoice: any) => {
+  return Number((invoice?.accounts || []).reduce((sum: number, account: any) => {
+    const amountNet = Number(account?.amountNet || 0)
+    const amountTax = Number(account?.amountTax || 0)
+    const amountGross = Number(account?.amountGross)
+
+    return sum + (Number.isFinite(amountGross) ? amountGross : amountNet + amountTax)
+  }, 0).toFixed(2))
+}
+
+const yearItems = computed(() => {
+  const years = new Set<string>([String(dayjs().year())])
+
+  createdDocuments.value.forEach((doc) => {
+    const parsed = dayjs(doc.documentDate)
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  incomingInvoices.value.forEach((invoice) => {
+    const parsed = dayjs(invoice.date)
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  statementAllocations.value.forEach((allocation) => {
+    const parsed = dayjs(getStatementDate(allocation))
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  return Array.from(years)
+    .sort((a, b) => Number(b) - Number(a))
+    .map((year) => ({ label: year, value: year }))
+})
+
+const filteredDocuments = computed(() => {
+  return createdDocuments.value.filter((doc) => matchesSelectedPeriod(doc.documentDate))
+})
+
+const filteredIncomingInvoices = computed(() => {
+  return incomingInvoices.value.filter((invoice) => matchesSelectedPeriod(invoice.date))
+})
+
+const filteredStatementAllocations = computed(() => {
+  return statementAllocations.value.filter((allocation) => matchesSelectedPeriod(getStatementDate(allocation)))
+})
+
+const filteredAccountStatementAllocations = computed(() => {
+  return filteredStatementAllocations.value.filter((allocation) => allocation.account !== null && allocation.account !== undefined)
+})
+
+const incomeTotal = computed(() => {
+  return Number(filteredDocuments.value.reduce((sum, doc) => sum + computeDocumentNet(doc), 0).toFixed(2))
+})
+
+const expenseNetTotal = computed(() => {
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => {
+    return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
+  }, 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).toFixed(2))
+})
+
+const expenseGrossTotal = computed(() => {
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => sum + computeIncomingInvoiceGross(invoice), 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).toFixed(2))
+})
+
+const taxSummary = computed(() => {
+  const output = filteredDocuments.value.reduce((sum, doc) => {
+    const breakdown = getCreatedDocumentTaxBreakdown(doc)
+    return {
+      net19: sum.net19 + breakdown.net19,
+      tax19: sum.tax19 + breakdown.tax19,
+      net7: sum.net7 + breakdown.net7,
+      tax7: sum.tax7 + breakdown.tax7,
+      net0: sum.net0 + breakdown.net0
+    }
+  }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+  const input = filteredIncomingInvoices.value.reduce((sum, invoice) => {
+    const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+    return {
+      net19: sum.net19 + breakdown.net19,
+      tax19: sum.tax19 + breakdown.tax19,
+      net7: sum.net7 + breakdown.net7,
+      tax7: sum.tax7 + breakdown.tax7,
+      net0: sum.net0 + breakdown.net0
+    }
+  }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+  const outputTax = Number((output.tax19 + output.tax7).toFixed(2))
+  const inputTax = Number((input.tax19 + input.tax7).toFixed(2))
+
+  return {
+    output,
+    input,
+    outputTax,
+    inputTax,
+    balance: Number((outputTax - inputTax).toFixed(2))
+  }
+})
+
+const operatingResult = computed(() => {
+  return Number((incomeTotal.value - expenseNetTotal.value).toFixed(2))
+})
+
+const incomeDocumentCount = computed(() => filteredDocuments.value.length)
+const expenseDocumentCount = computed(() => {
+  return filteredIncomingInvoices.value.length + filteredAccountStatementAllocations.value.length
+})
+
+const accountRows = computed(() => {
+  return accounts.value
+    .map((account) => {
+      const invoiceBookings = filteredIncomingInvoices.value.flatMap((invoice) => {
+        return (invoice.accounts || [])
+          .filter((invoiceAccount: any) => sameId(invoiceAccount.account?.id || invoiceAccount.account, account.id))
+          .map((invoiceAccount: any) => ({
+            type: "incominginvoice",
+            amountNet: Number(invoiceAccount.amountNet || 0),
+            amountTax: Number(invoiceAccount.amountTax || 0),
+            amountGross: Number.isFinite(Number(invoiceAccount.amountGross))
+              ? Number(invoiceAccount.amountGross)
+              : Number(invoiceAccount.amountNet || 0) + Number(invoiceAccount.amountTax || 0)
+          }))
+      })
+
+      const directBookings = filteredAccountStatementAllocations.value
+        .filter((allocation) => sameId(allocation.account?.id || allocation.account, account.id))
+        .map((allocation) => {
+          const amount = Number(allocation.amount || 0)
+
+          return {
+            type: "statementallocation",
+            amountNet: amount,
+            amountTax: 0,
+            amountGross: amount
+          }
+        })
+
+      const bookings = [...invoiceBookings, ...directBookings]
+
+      if (bookings.length === 0) {
+        return null
+      }
+
+      const net = bookings.reduce((sum, booking: any) => sum + Number(booking.amountNet || 0), 0)
+      const tax = bookings.reduce((sum, booking: any) => sum + Number(booking.amountTax || 0), 0)
+      const gross = bookings.reduce((sum, booking: any) => {
+        const amountGross = Number(booking.amountGross)
+        return sum + (Number.isFinite(amountGross) ? amountGross : Number(booking.amountNet || 0) + Number(booking.amountTax || 0))
+      }, 0)
+
+      return {
+        id: account.id,
+        number: account.number || "-",
+        label: account.label || account.name || "-",
+        bookings: bookings.length,
+        net: Number(net.toFixed(2)),
+        tax: Number(tax.toFixed(2)),
+        gross: Number(gross.toFixed(2))
+      }
+    })
+    .filter(Boolean)
+    .sort((left: any, right: any) => Math.abs(Number(right.gross)) - Math.abs(Number(left.gross)))
+})
+
+const ownAccountRows = computed(() => {
+  return ownAccounts.value
+    .map((account) => {
+      const bookings = filteredStatementAllocations.value.filter((allocation) => sameId(allocation.ownaccount?.id || allocation.ownaccount, account.id))
+
+      if (bookings.length === 0) {
+        return null
+      }
+
+      const income = bookings.reduce((sum, booking) => {
+        const amount = Number(booking.amount || 0)
+        return amount > 0 ? sum + amount : sum
+      }, 0)
+
+      const expenses = bookings.reduce((sum, booking) => {
+        const amount = Number(booking.amount || 0)
+        return amount < 0 ? sum + Math.abs(amount) : sum
+      }, 0)
+
+      const balance = bookings.reduce((sum, booking) => sum + Number(booking.amount || 0), 0)
+
+      return {
+        id: account.id,
+        number: account.number || "-",
+        label: account.name || account.label || "-",
+        bookings: bookings.length,
+        income: Number(income.toFixed(2)),
+        expenses: Number(expenses.toFixed(2)),
+        balance: Number(balance.toFixed(2))
+      }
+    })
+    .filter(Boolean)
+    .sort((left: any, right: any) => Math.abs(Number(right.balance)) - Math.abs(Number(left.balance)))
+})
+
+const setupPage = async () => {
+  loading.value = true
+
+  try {
+    const [docs, invoices, accountItems, ownAccountItems, allocationItems] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select("*, vendor(*)"),
+      useEntities("accounts").selectSpecial(),
+      useEntities("ownaccounts").select(),
+      useEntities("statementallocations").select("*, bankstatement(*), createddocument(*), incominginvoice(*)")
+    ])
+
+    createdDocuments.value = (docs || []).filter(isRelevantOutputDocument)
+    incomingInvoices.value = (invoices || []).filter(isRelevantInputInvoice)
+    accounts.value = accountItems || []
+    ownAccounts.value = ownAccountItems || []
+    statementAllocations.value = allocationItems || []
+
+    const firstYear = yearItems.value[0]?.value
+    if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+      selectedYear.value = firstYear
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const openAccount = (rowLike: any) => {
+  const row = rowLike?.original || rowLike
+  if (row?.id) {
+    router.push(`/accounts/show/${row.id}`)
+  }
+}
+
+const openOwnAccount = (rowLike: any) => {
+  const row = rowLike?.original || rowLike
+  if (row?.id) {
+    router.push(`/standardEntity/ownaccounts/show/${row.id}`)
+  }
+}
+
+onMounted(setupPage)
+</script>
+
+<template>
+  <UDashboardNavbar title="BWA">
+
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent class="min-w-0 space-y-6 overflow-x-hidden overflow-y-auto p-4 md:p-6">
+    <div class="flex flex-col gap-3 md:flex-row md:items-end">
+      <UFormField label="Jahr" class="w-full md:w-48">
+        <USelectMenu
+            v-model="selectedYear"
+            :items="yearItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Monat" class="w-full md:w-56">
+        <USelectMenu
+            v-model="selectedMonth"
+            :items="monthItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+    </div>
+
+      <div class="grid min-w-0 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen netto</div>
+          <div class="mt-2 text-2xl font-semibold">{{ useCurrency(incomeTotal) }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            {{ incomeDocumentCount }} gebuchte Ausgangsbelege
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben netto</div>
+        <div class="mt-2 text-2xl font-semibold">{{ useCurrency(expenseNetTotal) }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Brutto: {{ useCurrency(expenseGrossTotal) }}
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ incomeDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Ausgangsbelege im Zeitraum
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ expenseDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Eingangsbelege plus direkte Buchungen
+          </div>
+        </UCard>
+      </div>
+
+      <div class="grid min-w-0 gap-4 md:grid-cols-2">
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Betriebsergebnis</div>
+          <div class="mt-2 text-2xl font-semibold" :class="operatingResult >= 0 ? 'text-primary-500' : 'text-error'">
+            {{ useCurrency(operatingResult) }}
+          </div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Einnahmen minus Ausgaben netto
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">USt-Saldo</div>
+          <div class="mt-2 text-2xl font-semibold" :class="taxSummary.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-primary-500'">
+            {{ useCurrency(taxSummary.balance) }}
+          </div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            USt {{ useCurrency(taxSummary.outputTax) }} | Vorsteuer {{ useCurrency(taxSummary.inputTax) }}
+          </div>
+        </UCard>
+      </div>
+
+      <div class="grid min-w-0 gap-4 xl:grid-cols-2">
+        <UCard class="min-w-0">
+          <template #header>
+            <div class="font-semibold">USt-Details</div>
+          </template>
+          
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19% Ausgangsbelege</span>
+              <span>{{ useCurrency(taxSummary.output.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 19%</span>
+              <span>{{ useCurrency(taxSummary.output.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7% Ausgangsbelege</span>
+              <span>{{ useCurrency(taxSummary.output.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 7%</span>
+              <span>{{ useCurrency(taxSummary.output.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Steuerfrei</span>
+              <span>{{ useCurrency(taxSummary.output.net0 + taxSummary.input.net0) }}</span>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <template #header>
+            <div class="font-semibold">Vorsteuer-Details</div>
+          </template>
+
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19% Eingangsbelege</span>
+              <span>{{ useCurrency(taxSummary.input.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 19%</span>
+              <span>{{ useCurrency(taxSummary.input.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7% Eingangsbelege</span>
+              <span>{{ useCurrency(taxSummary.input.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 7%</span>
+              <span>{{ useCurrency(taxSummary.input.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Steuerfrei</span>
+              <span>{{ useCurrency(taxSummary.input.net0) }}</span>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+    <div class="grid min-w-0 gap-4 xl:grid-cols-2">
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-semibold">Buchungskonten</span>
+            <UBadge color="neutral" variant="soft">{{ accountRows.length }}</UBadge>
+          </div>
+        </template>
+
+        <div class="min-w-0">
+          <UTable
+              :data="accountRows"
+              :columns="normalizeTableColumns(accountColumns)"
+              :loading="loading"
+              :on-select="openAccount"
+          >
+            <template #empty>
+              <div class="flex flex-col items-center justify-center py-10 text-center">
+                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+                <p class="font-medium">Keine Buchungskonten im ausgewaehlten Zeitraum</p>
+              </div>
+            </template>
+
+            <template #label-cell="{ row }">
+              <div class="truncate font-medium">{{ row.original.label }}</div>
+            </template>
+
+            <template #bookings-cell="{ row }">
+              <div class="text-right">{{ row.original.bookings }}</div>
+            </template>
+
+            <template #net-cell="{ row }">
+              <div class="text-right tabular-nums">{{ useCurrency(row.original.net) }}</div>
+            </template>
+
+            <template #tax-cell="{ row }">
+              <div class="text-right tabular-nums">{{ useCurrency(row.original.tax) }}</div>
+            </template>
+
+            <template #gross-cell="{ row }">
+              <div class="text-right font-medium tabular-nums">{{ useCurrency(row.original.gross) }}</div>
+            </template>
+          </UTable>
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-semibold">Eigene Buchungskonten</span>
+            <UBadge color="neutral" variant="soft">{{ ownAccountRows.length }}</UBadge>
+          </div>
+        </template>
+
+        <div class="min-w-0">
+          <UTable
+              :data="ownAccountRows"
+              :columns="normalizeTableColumns(ownAccountColumns)"
+              :loading="loading"
+              :on-select="openOwnAccount"
+          >
+            <template #empty>
+              <div class="flex flex-col items-center justify-center py-10 text-center">
+                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+                <p class="font-medium">Keine eigenen Buchungen im ausgewaehlten Zeitraum</p>
+              </div>
+            </template>
+
+            <template #label-cell="{ row }">
+              <div class="truncate font-medium">{{ row.original.label }}</div>
+            </template>
+
+            <template #bookings-cell="{ row }">
+              <div class="text-right">{{ row.original.bookings }}</div>
+            </template>
+
+            <template #income-cell="{ row }">
+              <div class="text-right text-primary-500 tabular-nums">{{ useCurrency(row.original.income) }}</div>
+            </template>
+
+            <template #expenses-cell="{ row }">
+              <div class="text-right text-error tabular-nums">{{ useCurrency(row.original.expenses) }}</div>
+            </template>
+
+            <template #balance-cell="{ row }">
+              <div class="text-right font-medium tabular-nums" :class="row.original.balance >= 0 ? 'text-primary-500' : 'text-error'">
+                {{ useCurrency(row.original.balance) }}
+              </div>
+            </template>
+          </UTable>
+        </div>
+      </UCard>
+    </div>
+  </UDashboardPanelContent>
+</template>

frontend/pages/accounting/tax.vue

@@ -126,164 +126,162 @@ onMounted(loadData)
 </script>
 
 <template>
-  <div>
+  <UDashboardNavbar title="USt-Auswertung">
-    <UDashboardNavbar title="USt-Auswertung">
+    <template #right>
-      <template #right>
+      <UButton
-        <UButton
+          icon="i-heroicons-arrow-path"
-            icon="i-heroicons-arrow-path"
+          variant="outline"
-            variant="outline"
+          @click="loadData"
-            @click="loadData"
+          :loading="loading"
-            :loading="loading"
+      >
+        Aktualisieren
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent class="p-4 md:p-6">
+    <div class="mb-6 flex flex-col gap-2">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+        Aktueller Zeitraum: {{ currentPeriod?.label }}
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Intervall: {{ periodType === "monthly" ? "monatlich" : periodType === "quarterly" ? "quartalsweise" : "jährlich" }}.
+        Berücksichtigt werden gebuchte Ausgangsrechnungen, Abschlags- und Stornorechnungen sowie gebuchte Eingangsbelege mit Datum.
+      </p>
+      <p v-if="currentPeriod" class="text-sm text-gray-500 dark:text-gray-400">
+        {{ currentPeriod.range }}
+      </p>
+    </div>
+
+    <div v-if="currentPeriod" class="grid gap-4 md:grid-cols-3">
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Berechnete USt</div>
+        <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ formatCurrency(currentPeriod.outputTax) }}
+        </div>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          19%: {{ formatCurrency(currentPeriod.output.tax19) }} | 7%: {{ formatCurrency(currentPeriod.output.tax7) }}
+        </div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Vorsteuer</div>
+        <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ formatCurrency(currentPeriod.inputTax) }}
+        </div>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          19%: {{ formatCurrency(currentPeriod.input.tax19) }} | 7%: {{ formatCurrency(currentPeriod.input.tax7) }}
+        </div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Verrechnetes Ergebnis</div>
+        <div
+            class="mt-2 text-2xl font-semibold"
+            :class="currentPeriod.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
         >
-          Aktualisieren
+          {{ formatCurrency(currentPeriod.balance) }}
-        </UButton>
+        </div>
-      </template>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-    </UDashboardNavbar>
+          {{ currentPeriod.outputCount }} Ausgangsbelege | {{ currentPeriod.inputCount }} Eingangsbelege
+        </div>
+      </UCard>
+    </div>
 
-    <UDashboardPanelContent class="p-4 md:p-6">
+    <div v-if="currentPeriod" class="mt-6 grid gap-4 xl:grid-cols-2">
-      <div class="mb-6 flex flex-col gap-2">
+      <UCard>
-        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-          Aktueller Zeitraum: {{ currentPeriod?.label }}
-        </h2>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Intervall: {{ periodType === "monthly" ? "monatlich" : periodType === "quarterly" ? "quartalsweise" : "jährlich" }}.
-          Berücksichtigt werden gebuchte Ausgangsrechnungen, Abschlags- und Stornorechnungen sowie gebuchte Eingangsbelege mit Datum.
-        </p>
-        <p v-if="currentPeriod" class="text-sm text-gray-500 dark:text-gray-400">
-          {{ currentPeriod.range }}
-        </p>
-      </div>
-
-      <div v-if="currentPeriod" class="grid gap-4 md:grid-cols-3">
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Berechnete USt</div>
-          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
-            {{ formatCurrency(currentPeriod.outputTax) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            19%: {{ formatCurrency(currentPeriod.output.tax19) }} | 7%: {{ formatCurrency(currentPeriod.output.tax7) }}
-          </div>
-        </UCard>
-
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Vorsteuer</div>
-          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
-            {{ formatCurrency(currentPeriod.inputTax) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            19%: {{ formatCurrency(currentPeriod.input.tax19) }} | 7%: {{ formatCurrency(currentPeriod.input.tax7) }}
-          </div>
-        </UCard>
-
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Verrechnetes Ergebnis</div>
-          <div
-              class="mt-2 text-2xl font-semibold"
-              :class="currentPeriod.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
-          >
-            {{ formatCurrency(currentPeriod.balance) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            {{ currentPeriod.outputCount }} Ausgangsbelege | {{ currentPeriod.inputCount }} Eingangsbelege
-          </div>
-        </UCard>
-      </div>
-
-      <div v-if="currentPeriod" class="mt-6 grid gap-4 xl:grid-cols-2">
-        <UCard>
-          <template #header>
-            <div class="font-semibold">Ausgangsrechnungen</div>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex items-center justify-between">
-              <span>Netto 19%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>USt 19%</span>
-              <span>{{ formatCurrency(currentPeriod.output.tax19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 7%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>USt 7%</span>
-              <span>{{ formatCurrency(currentPeriod.output.tax7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 0%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net0) }}</span>
-            </div>
-          </div>
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <div class="font-semibold">Eingangsbelege</div>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex items-center justify-between">
-              <span>Netto 19%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Vorsteuer 19%</span>
-              <span>{{ formatCurrency(currentPeriod.input.tax19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 7%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Vorsteuer 7%</span>
-              <span>{{ formatCurrency(currentPeriod.input.tax7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 0%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net0) }}</span>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <UCard class="mt-6">
         <template #header>
-          <div class="font-semibold">Aktueller und vorherige Zeiträume</div>
+          <div class="font-semibold">Ausgangsrechnungen</div>
+        </template>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 19%</span>
+            <span>{{ formatCurrency(currentPeriod.output.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 7%</span>
+            <span>{{ formatCurrency(currentPeriod.output.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 0%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <div class="font-semibold">Eingangsbelege</div>
+        </template>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 19%</span>
+            <span>{{ formatCurrency(currentPeriod.input.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 7%</span>
+            <span>{{ formatCurrency(currentPeriod.input.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 0%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <UCard class="mt-6">
+      <template #header>
+        <div class="font-semibold">Aktueller und vorherige Zeiträume</div>
+      </template>
+
+      <UTable
+          :columns="normalizeTableColumns(columns)"
+          :data="periods"
+          :loading="loading"
+          :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
+      >
+        <template #label-cell="{ row }">
+          <div class="flex items-center gap-2">
+            <span>{{ row.original.label }}</span>
+            <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
+          </div>
         </template>
 
-        <UTable
+        <template #outputTax-cell="{ row }">
-            :columns="columns"
+          {{ formatCurrency(row.original.outputTax) }}
-            :rows="periods"
+        </template>
-            :loading="loading"
-            :empty-state="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
-        >
-          <template #label-data="{ row }">
-            <div class="flex items-center gap-2">
-              <span>{{ row.label }}</span>
-              <UBadge v-if="row.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
-            </div>
-          </template>
 
-          <template #outputTax-data="{ row }">
+        <template #inputTax-cell="{ row }">
-            {{ formatCurrency(row.outputTax) }}
+          {{ formatCurrency(row.original.inputTax) }}
-          </template>
+        </template>
 
-          <template #inputTax-data="{ row }">
+        <template #balance-cell="{ row }">
-            {{ formatCurrency(row.inputTax) }}
+            <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
-          </template>
+              {{ formatCurrency(row.original.balance) }}
-
-          <template #balance-data="{ row }">
-            <span :class="row.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
-              {{ formatCurrency(row.balance) }}
             </span>
-          </template>
+        </template>
 
-          <template #documents-data="{ row }">
+        <template #documents-cell="{ row }">
-            {{ row.outputCount }} / {{ row.inputCount }}
+          {{ row.original.outputCount }} / {{ row.original.inputCount }}
-          </template>
+        </template>
-        </UTable>
+      </UTable>
-      </UCard>
+    </UCard>
-    </UDashboardPanelContent>
+  </UDashboardPanelContent>
-  </div>
 </template>

frontend/pages/accounts/index.vue

@@ -158,7 +158,7 @@ setupPage()
       <UButton
           icon="i-heroicons-x-mark"
           variant="outline"
-          color="rose"
+          color="error"
           @click="clearSearchString()"
           v-if="searchString.length > 0"
       />
@@ -194,20 +194,20 @@ setupPage()
     </template>
   </UDashboardToolbar>
   <UTable
-      :rows="filteredRows"
+      :data="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :on-select="(row) => router.push(`/accounts/show/${row.original.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
-    <template #allocations-data="{row}">
+    <template #allocations-cell="{row}">
-        <span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
+        <span v-if="dataLoaded">{{row.original.allocations ? row.original.allocations : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
 
     </template>
-    <template #saldo-data="{row}">
+    <template #saldo-cell="{row}">
-      <span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
+      <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
     </template>
   </UTable>

frontend/pages/accounts/show/[id].vue

@@ -1,62 +1,44 @@
 <script setup>
 
-import dayjs from "dayjs";
-
 const route = useRoute()
 const router = useRouter()
 
 const itemInfo = ref(null)
 const statementallocations = ref([])
 const incominginvoices = ref([])
+const currentAccountId = computed(() => String(route.params.id))
+const sameAccount = (value) => String(value ?? "") === currentAccountId.value
 
 const setup = async () => {
   itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
-  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bankstatement(*)"))
-  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+      .filter((allocation) => sameAccount(allocation.account?.id || allocation.account))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+      .filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
 }
 
 setup()
 
-const selectAllocation = (allocation) => {
-  if(allocation.type === "statementallocation") {
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
-  } else if(allocation.type === "incominginvoice") {
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
-  }
-}
-
 const renderedAllocations = computed(() => {
+  const statementRows = statementallocations.value.map((allocation) => ({
+    ...allocation,
+    type: "statementallocation",
+    amount: Number(allocation.amount || 0)
+  }))
 
-  let tempstatementallocations = statementallocations.value.map(i => {
+  const incomingInvoiceRows = incominginvoices.value.flatMap((invoice) => {
-    return {
+    return (invoice.accounts || [])
-      ...i,
+        .filter((account) => sameAccount(account.account?.id || account.account))
-      type: "statementallocation",
+        .map((account, index) => ({
-      date: i.bs_id.date,
+          id: `${invoice.id}-${index}`,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
+          incominginvoiceid: invoice.id,
-    }
+          type: "incominginvoice",
+          amount: Number(account.amountGross || account.amountNet || 0),
+          expense: invoice.expense
+        }))
   })
 
-
+  return [...statementRows, ...incomingInvoiceRows]
-  let incominginvoicesallocations = []
-
-  incominginvoices.value.forEach(i => {
-
-    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
-      return {
-        ...x,
-        incominginvoiceid: i.id,
-        type: "incominginvoice",
-        amount: x.amountGross ? x.amountGross : x.amountNet,
-        date: i.date,
-        partner: i.vendor.name,
-        description: i.description,
-        color: i.expense ? "red" : "green",
-        expense: i.expense
-      }
-    }))
-  })
-
-  return [...tempstatementallocations, ... incominginvoicesallocations]
 })
 
 const saldo = computed(() => {
@@ -106,7 +88,7 @@ const saldo = computed(() => {
   </UDashboardNavbar>
   <UDashboardPanelContent>
     <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
-      <template #item="{item}">
+      <template #content="{item}">
         <UCard class="mt-5" v-if="item.label === 'Information'">
           <div class="text-wrap">
             <table class="w-full" v-if="itemInfo">
@@ -135,25 +117,12 @@ const saldo = computed(() => {
           </div>
         </UCard>
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
-          <UTable
+          <EntityShowSubOwnAccountsStatements
-              v-if="statementallocations"
+              v-if="itemInfo"
-            :rows="renderedAllocations"
+              :item="itemInfo"
-              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+              top-level-type="accounts"
-              @select="(i) => selectAllocation(i)"
+              platform="desktop"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+          />
-          >
-            <template #amount-data="{row}">
-              <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
-              <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
-              <span v-else>{{useCurrency(row.amount)}}</span>
-            </template>
-            <template #date-data="{row}">
-              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
-            </template>
-            <template #description-data="{row}">
-              {{row.description ? row.description : ''}}
-            </template>
-          </UTable>
         </UCard>
       </template>
     </UTabs>

frontend/pages/banking/index.vue

@@ -504,7 +504,7 @@ onMounted(() => {
             placeholder="Konten"
             class="w-48"
         />
-        <UDivider orientation="vertical" class="h-6"/>
+        <USeparator orientation="vertical" class="h-6"/>
         <div class="flex items-center gap-2">
           <USelectMenu
               v-model="selectedPeriod"
@@ -601,17 +601,18 @@ onMounted(() => {
   </div>
   <PageLeaveGuard :when="isSyncing"/>
 
-  <UModal v-model="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
+  <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="flex items-center justify-between gap-3">
+        <template #header>
-          <div>
+          <div class="flex items-center justify-between gap-3">
-            <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
+            <div>
-            <div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
+              <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
+              <div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
+            </div>
+            <UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
           </div>
-          <UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
+        </template>
-        </div>
-      </template>
 
       <div v-if="rowsWithSuggestions.length > 0" class="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[520px]">
         <div class="lg:col-span-1 border rounded-lg overflow-hidden dark:border-gray-800">
@@ -633,7 +634,7 @@ onMounted(() => {
             </div>
             <div class="mt-2 flex flex-wrap gap-1">
               <UBadge v-if="entry.suggestions?.topDocument" size="xs" color="emerald" variant="subtle">Rechnung</UBadge>
-              <UBadge v-if="entry.suggestions?.topIncomingInvoice" size="xs" color="rose" variant="subtle">Eingangsbeleg</UBadge>
+              <UBadge v-if="entry.suggestions?.topIncomingInvoice" size="xs" color="error" variant="subtle">Eingangsbeleg</UBadge>
             </div>
           </div>
         </div>
@@ -690,7 +691,7 @@ onMounted(() => {
                   </UBadge>
                 </div>
               </div>
-              <UButton size="sm" color="rose" @click="handleAssignIncomingInvoice(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice, $event)">
+              <UButton size="sm" color="error" @click="handleAssignIncomingInvoice(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice, $event)">
                 Zuweisen
               </UButton>
               <UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionKey, $event)">
@@ -701,10 +702,11 @@ onMounted(() => {
         </div>
       </div>
 
-      <div v-else class="py-10 text-center text-gray-400">
+        <div v-else class="py-10 text-center text-gray-400">
-        <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
+          <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
-        <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
+          <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
-      </div>
+        </div>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -438,7 +438,7 @@ setup()
       <UBadge v-else color="amber" variant="subtle">Offen</UBadge>
     </template>
     <template #right>
-      <ArchiveButton color="rose" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
+      <ArchiveButton color="error" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
     </template>
   </UDashboardNavbar>
 
@@ -552,7 +552,7 @@ setup()
                   <div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div>
                   <UButton
                       icon="i-heroicons-trash"
-                      color="rose"
+                      color="error"
                       variant="ghost"
                       size="xs"
                       class="opacity-0 group-hover:opacity-100 transition-opacity"
@@ -571,14 +571,14 @@ setup()
             class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
           <div class="grid grid-cols-12 gap-4 items-end">
             <div class="col-span-12 md:col-span-3">
-              <UFormGroup label="Betrag" size="sm">
+              <UFormField label="Betrag" size="sm">
                 <UInput v-model="manualAllocationSum" type="number" step="0.01">
                   <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
                 </UInput>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-5">
-              <UFormGroup label="Konto / Manuelle Buchung" size="sm">
+              <UFormField label="Konto / Manuelle Buchung" size="sm">
                 <div class="flex gap-1">
                   <USelectMenu
                       class="w-full"
@@ -607,7 +607,7 @@ setup()
                     />
                   </UTooltip>
                 </div>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5">
               <UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal"
@@ -747,7 +747,7 @@ setup()
                   </div>
                   <UButton
                       size="xs"
-                      color="rose"
+                      color="error"
                       @click="saveAllocation({incominginvoice: invoice.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(invoice,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(invoice,true)), description: allocationDescription || 'Automatischer Vorschlag'})"
                   >
                     Beleg zuweisen
@@ -867,7 +867,7 @@ setup()
                           v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
                           icon="i-heroicons-check"
                           size="sm"
-                          color="rose"
+                          color="error"
                           variant="soft"
                           @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
                       />

frontend/pages/createDocument/index.vue

@@ -16,7 +16,7 @@
       </UInput>
       <UButton
           v-if="searchString.length > 0"
-          color="rose"
+          color="error"
           icon="i-heroicons-x-mark"
           variant="outline"
           @click="clearSearchString()"
@@ -55,82 +55,82 @@
         {{ getRowsForTab(item.key).length }}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
-            :columns="getColumnsForTab(item.key)"
+            :columns="normalizeTableColumns(getColumnsForTab(item.key))"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
-            :rows="getRowsForTab(item.key)"
+            :data="getRowsForTab(item.key)"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
             class="w-full"
-            @select="selectItem"
+            :on-select="selectItem"
         >
-          <template #type-data="{row}">
+          <template #type-cell="{row}">
-            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
+            <span v-if="row.original.type === 'cancellationInvoices'" class="text-cyan-500">{{
-                dataStore.documentTypesForCreation[row.type].labelSingle
+                dataStore.documentTypesForCreation[row.original.type].labelSingle
-              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
+              }} für {{ filteredRows.find(i => row.original.createddocument?.id === i.id)?.documentNumber }}</span>
-            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}</span>
           </template>
 
-          <template #state-data="{row}">
+          <template #state-cell="{row}">
-            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
+            <span v-if="row.original.state === 'Entwurf'" class="text-rose-500">{{ row.original.state }}</span>
             <span
-                v-if="row.state === 'Gebucht' && !hasCancellationInvoice(row)"
+                v-if="row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)"
                 class="text-primary-500"
             >
-              {{ row.state }}
+              {{ row.original.state }}
             </span>
             <span
-                v-else-if="row.state === 'Gebucht' && hasCancellationInvoice(row) && ['invoices','advanceInvoices'].includes(row.type)"
+                v-else-if="row.original.state === 'Gebucht' && hasCancellationInvoice(row.original) && ['invoices','advanceInvoices'].includes(row.original.type)"
                 class="text-cyan-500"
             >
-              Storniert mit {{ getCancellationInvoice(row)?.documentNumber }}
+              Storniert mit {{ getCancellationInvoice(row.original)?.documentNumber }}
             </span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{ row.original.state }}</span>
           </template>
 
-          <template #partner-data="{row}">
+          <template #partner-cell="{row}">
-            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
+            <span v-if="row.original.customer && row.original.customer.name.length < 21">{{ row.original.customer ? row.original.customer.name : "" }}</span>
-            <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
+            <UTooltip v-else-if="row.original.customer && row.original.customer.name.length > 20" :text="row.original.customer.name">
-              {{ row.customer.name.substring(0, 20) }}...
+              {{ row.original.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
 
-          <template #reference-data="{row}">
+          <template #reference-cell="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
-            <span v-else>{{ row.documentNumber }}</span>
+            <span v-else>{{ row.original.documentNumber }}</span>
           </template>
 
-          <template #date-data="{row}">
+          <template #date-cell="{row}">
-            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
+            <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.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.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
           </template>
 
-          <template #dueDate-data="{row}">
+          <template #dueDate-cell="{row}">
              <span
-                 v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !hasCancellationInvoice(row)"
+                 v-if="row.original.state === 'Gebucht' && row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type) && !hasCancellationInvoice(row.original)"
-                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+                 :class="dayjs(row.original.documentDate).add(row.original.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row.original) ? ['text-rose-500'] : '' "
              >
-               {{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
+               {{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays, 'day').format("DD.MM.YY") : '' }}
              </span>
           </template>
 
-          <template #paid-data="{row}">
+          <template #paid-cell="{row}">
             <div
-                v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !hasCancellationInvoice(row)">
+                v-if="(row.original.type === 'invoices' ||row.original.type === 'advanceInvoices') && row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)">
-              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+              <span v-if="useSum().getIsPaid(row.original,items)" class="text-primary-500">Bezahlt</span>
               <span v-else class="text-rose-600">Offen</span>
             </div>
           </template>
 
-          <template #amount-data="{row}">
+          <template #amount-cell="{row}">
-            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+            <span v-if="row.original.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row.original, items)) }}</span>
           </template>
 
-          <template #amountOpen-data="{row}">
+          <template #amountOpen-cell="{row}">
             <span
-                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !hasCancellationInvoice(row) && !useSum().getIsPaid(row,items) ">
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.original.type) && row.original.state !== 'Entwurf' && !hasCancellationInvoice(row.original) && !useSum().getIsPaid(row.original,items) ">
-              {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row, items)) }}
+              {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row.original, items)) }}
             </span>
           </template>
         </UTable>
@@ -246,7 +246,15 @@ const types = computed(() => {
   return templateTypes.filter((type) => selectedTypes.value.find(i => i.key === type.key))
 })
 
-const selectItem = (item) => {
+const unwrapSelectedRow = (itemLike) => itemLike?.original || itemLike
+
+const selectItem = (itemLike) => {
+  const item = unwrapSelectedRow(itemLike)
+
+  if (!item?.id) {
+    return
+  }
+
   if (item.state === "Entwurf") {
     router.push(`/createDocument/edit/${item.id}`)
   } else {

frontend/pages/createDocument/serialInvoice.vue

@@ -44,15 +44,15 @@
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="filterOptions"
+          :items="filterOptions"
-          option-attribute="name"
+          label-key="name"
-          value-attribute="name"
+          value-key="name"
           multiple
           class="hidden lg:block"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -93,16 +93,16 @@
   </div>
 
   <UTable
-      :rows="filteredRows"
+      :data="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
+      :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+      empty="Keine Belege anzuzeigen"
   >
-    <template #actions-data="{ row }">
+    <template #actions-cell="{ row }">
       <div @click.stop>
-        <UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
+        <UDropdown :items="getActionItems(row.original)" :popper="{ placement: 'bottom-end' }">
           <UButton
               color="gray"
               variant="ghost"
@@ -112,53 +112,54 @@
       </div>
     </template>
 
-    <template #type-data="{row}">
+    <template #type-cell="{row}">
-      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      {{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
     </template>
-    <template #partner-data="{row}">
+    <template #partner-cell="{row}">
-      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+      <span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
 
     </template>
-    <template #amount-data="{row}">
+    <template #amount-cell="{row}">
-      {{displayCurrency(calculateDocSum(row))}}
+      {{displayCurrency(calculateDocSum(row.original))}}
     </template>
-    <template #serialConfig.active-data="{row}">
+    <template #serialConfig.active-cell="{row}">
-      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+      <span v-if="row.original.serialConfig.active" class="text-primary">Ja</span>
       <span v-else class="text-rose-600">Nein</span>
     </template>
-    <template #contract-data="{row}">
+    <template #contract-cell="{row}">
-      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+      <span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
     </template>
-    <template #serialConfig.intervall-data="{row}">
+    <template #serialConfig.intervall-cell="{row}">
-      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
-      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+      <span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
     </template>
-    <template #payment_type-data="{row}">
+    <template #payment_type-cell="{row}">
-      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
+      <span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
-      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+      <span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
     </template>
   </UTable>
 
-  <UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+  <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <div class="flex items-center justify-between">
-            Serienrechnungen manuell ausführen
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-          </h3>
+              Serienrechnungen manuell ausführen
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+            </h3>
-        </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
-      </template>
+          </div>
+        </template>
 
       <div class="space-y-4">
-        <UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
+        <UFormField label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="executionDate" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" />
           </div>
-        </UFormGroup>
+        </UFormField>
 
-        <UDivider label="Vorlagen auswählen" />
+        <USeparator label="Vorlagen auswählen" />
 
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
@@ -172,9 +173,9 @@
 
             <USelectMenu
                 v-model="selectedExecutionIntervall"
-                :options="executionIntervallOptions"
+                :items="executionIntervallOptions"
-                option-attribute="label"
+                label-key="label"
-                value-attribute="value"
+                value-key="value"
                 size="sm"
                 class="w-full sm:w-52"
             />
@@ -204,24 +205,24 @@
         <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
           <UTable
               v-model="selectedExecutionRows"
-              :rows="filteredExecutionList"
+              :data="filteredExecutionList"
-              :columns="executionColumns"
+              :columns="normalizeTableColumns(executionColumns)"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
           >
-            <template #partner-data="{row}">
+            <template #partner-cell="{row}">
-              {{row.customer ? row.customer.name : "-"}}
+              {{row.original.customer ? row.original.customer.name : "-"}}
             </template>
-            <template #amount-data="{row}">
+            <template #amount-cell="{row}">
-              {{displayCurrency(calculateDocSum(row))}}
+              {{displayCurrency(calculateDocSum(row.original))}}
             </template>
-            <template #serialConfig.intervall-data="{row}">
+            <template #serialConfig.intervall-cell="{row}">
-              {{ getIntervallLabel(row.serialConfig?.intervall) }}
+              {{ getIntervallLabel(row.original.serialConfig?.intervall) }}
             </template>
-            <template #contract-data="{row}">
+            <template #contract-cell="{row}">
-              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+              {{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
             </template>
-            <template #plant-data="{row}">
+            <template #plant-cell="{row}">
-              {{ row.plant?.name || "-" }}
+              {{ row.original.plant?.name || "-" }}
             </template>
           </UTable>
         </div>
@@ -231,58 +232,61 @@
         </div>
       </div>
 
-      <template #footer>
+        <template #footer>
-        <div class="flex justify-end gap-2">
+          <div class="flex justify-end gap-2">
-          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+            <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
-          <UButton
+            <UButton
-              color="primary"
+                color="primary"
-              :loading="isExecuting"
+                :loading="isExecuting"
-              :disabled="selectedExecutionRows.length === 0"
+                :disabled="selectedExecutionRows.length === 0"
-              @click="executeSerialInvoices"
+                @click="executeSerialInvoices"
-          >
+            >
-            Jetzt ausführen
+              Jetzt ausführen
-          </UButton>
+            </UButton>
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
-  <USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+  <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+    <template #body>
-      <template #header>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <div class="flex items-center justify-between">
-            Alle Ausführungen
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-          </h3>
+              Alle Ausführungen
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
+            </h3>
-        </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
-      </template>
-
-      <div class="space-y-4 overflow-y-auto h-full p-1">
-        <div v-if="executionsLoading" class="flex justify-center py-4">
-          <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
-        </div>
-
-        <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
-          Keine abgeschlossenen Ausführungen gefunden.
-        </div>
-
-        <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-          <div class="flex justify-between items-start mb-2">
-            <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
-            <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
-              {{ getStatusLabel(exec.status) }}
-            </UBadge>
           </div>
-          <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+        </template>
-            <div>
+
-              <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+        <div class="space-y-4 overflow-y-auto h-full p-1">
-              {{exec.summary}}
+          <div v-if="executionsLoading" class="flex justify-center py-4">
+            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
+          </div>
+
+          <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
+            Keine abgeschlossenen Ausführungen gefunden.
+          </div>
+
+          <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+            <div class="flex justify-between items-start mb-2">
+              <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
+              <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
+                {{ getStatusLabel(exec.status) }}
+              </UBadge>
+            </div>
+            <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+              <div>
+                <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+                {{exec.summary}}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </UCard>
-    </UCard>
+    </template>
   </USlideover>
 
 </template>

frontend/pages/createDocument/show/[id].vue

@@ -94,7 +94,7 @@ const openBankstatements = () => {
         <UButton
             @click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)"
             variant="outline"
-            color="rose"
+            color="error"
             :disabled="links.find(i => i.type === 'cancellationInvoices')"
         >
           Stornieren

frontend/pages/createdletters/[mode]/[[id]].vue

@@ -13,6 +13,7 @@ const itemInfo = ref({
 })
 const showDocument = ref(false)
 const uri = ref("")
+const openTab = ref("0")
 
 const setupPage = async () => {
   letterheads.value = await useEntities("letterheads").select("*")
@@ -23,7 +24,9 @@ const setupPage = async () => {
 setupPage()
 
 const onChangeTab = (index) => {
-  if(index === 1) {
+  openTab.value = String(index)
+
+  if(String(index) === "1") {
     generateDocument()
   }
 }
@@ -78,8 +81,8 @@ const contentChanged = (content) => {
   <UDashboardNavbar title="Anschreiben bearbeiten"/>
   {{itemInfo}}
   <UDashboardPanelContent>
-    <UTabs @change="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
+    <UTabs v-model="openTab" @update:model-value="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
-      <template #item="{item}">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <Tiptap
               class="mt-3"

frontend/pages/email/new.vue

@@ -162,7 +162,7 @@ const sendEmail = async () => {
 
 
   if(!res.success) {
-    toast.add({title: "Fehler beim Absenden der E-Mail", color: "rose"})
+    toast.add({title: "Fehler beim Absenden der E-Mail", color: "error"})
 
   } else {
     navigateTo("/")
@@ -210,34 +210,34 @@ const sendEmail = async () => {
 
       <div class="scrollContainer mt-3">
         <div class="flex-col flex w-full">
-          <UFormGroup
+          <UFormField
               label="Absender"
           >
             <USelectMenu
-                :options="emailAccounts"
+                :items="emailAccounts"
-                option-attribute="email"
+                label-key="email"
-                value-attribute="id"
+                value-key="id"
                 v-model="emailData.account"
             />
-          </UFormGroup>
+          </UFormField>
-          <UDivider class="my-3"/>
+          <USeparator class="my-3"/>
-          <UFormGroup
+          <UFormField
               label="Empfänger"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.to"
             />
-          </UFormGroup>
+          </UFormField>
-          <UFormGroup
+          <UFormField
               label="Kopie"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.cc"
             />
-          </UFormGroup>
+          </UFormField>
-          <UFormGroup
+          <UFormField
               label="Blindkopie"
           >
             <UInput
@@ -245,17 +245,17 @@ const sendEmail = async () => {
                 placeholder=""
                 v-model="emailData.bcc"
             />
-          </UFormGroup>
+          </UFormField>
-          <UFormGroup
+          <UFormField
               label="Betreff"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.subject"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
-        <UDivider class="my-3"/>
+        <USeparator class="my-3"/>
         <div id="parentAttachments" class="flex flex-col justify-center mt-3">
           <span class="font-medium mb-2 text-xl">Anhänge</span>
           <!--        <UIcon

frontend/pages/export/create/sepa.vue

@@ -39,7 +39,7 @@ const createExport = async () => {
       :loading="true"
       v-model="selected"
       :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
-      :rows="createddocuments" />
+      :data="createddocuments" />
 </template>
 
 <style scoped>

frontend/pages/export/index.vue

@@ -89,7 +89,7 @@ const createExport = async () => {
   if(res.success) {
     toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
   } else {
-    toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"})
+    toast.add({title: "Es gab einen Fehler beim erstellen", color: "error"})
   }
 
 }
@@ -110,38 +110,39 @@ const createExport = async () => {
   </UDashboardNavbar>
 
   <UTable
-      :rows="filteredExports"
+      :data="filteredExports"
-      :columns="[
+      :columns="normalizeTableColumns([
         { key: 'created_at', label: 'Erstellt am' },
         { key: 'start_date', label: 'Start' },
         { key: 'end_date', label: 'Ende' },
         { key: 'valid_until', label: 'Gültig bis' },
         { key: 'type', label: 'Typ' },
         { key: 'download', label: 'Download' },
-    ]"
+      ])"
   >
-    <template #created_at-data="{row}">
+    <template #created_at-cell="{row}">
-      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+      {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #start_date-data="{row}">
+    <template #start_date-cell="{row}">
-      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+      {{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #end_date-data="{row}">
+    <template #end_date-cell="{row}">
-      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+      {{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #valid_until-data="{row}">
+    <template #valid_until-cell="{row}">
-      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+      {{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #download-data="{row}">
+    <template #download-cell="{row}">
-      <UButton @click="downloadFile(row)">Download</UButton>
+      <UButton @click="downloadFile(row.original)">Download</UButton>
     </template>
   </UTable>
 
-  <UModal v-model="showCreateExportModal">
+  <UModal v-model:open="showCreateExportModal">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        Export erstellen
+        <template #header>
-      </template>
+          Export erstellen
+        </template>
 
       <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
         <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
@@ -180,7 +181,7 @@ const createExport = async () => {
         </div>
       </div>
       <div class="flex gap-4">
-        <UFormGroup label="Start:" class="flex-1">
+        <UFormField label="Start:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -192,9 +193,9 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.start_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ende:" class="flex-1">
+        <UFormField label="Ende:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -206,18 +207,19 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.end_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
       </div>
 
-      <template #footer>
+        <template #footer>
-        <div class="flex justify-end">
+          <div class="flex justify-end">
-          <UButton @click="createExport">
+            <UButton @click="createExport">
-            Erstellen
+              Erstellen
-          </UButton>
+            </UButton>
-        </div>
+          </div>
-      </template>
+        </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
 </template>

frontend/pages/files/index.vue

@@ -350,8 +350,8 @@ const syncdokubox = async () => {
       <UBreadcrumb :links="breadcrumbLinks"/>
     </template>
     <template #right>
-      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }">
+      <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">
-        <template #label>
+        <template #default>
           <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/>
           <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
         </template>
@@ -453,30 +453,31 @@ const syncdokubox = async () => {
     </div>
   </UDashboardPanelContent>
 
-  <UModal v-model="createFolderModalOpen">
+  <UModal v-model:open="createFolderModalOpen">
-    <UCard>
+    <template #content>
-      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
+      <UCard>
+        <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
 
       <div class="space-y-4">
-        <UFormGroup label="Name" required>
+        <UFormField label="Name" required>
           <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup
+        <UFormField
             label="Standard Dateityp (Tag)"
             :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
         >
           <USelectMenu
               v-model="createFolderData.standardFiletype"
-              :options="filetags"
+              :items="filetags"
-              value-attribute="id"
+              value-key="id"
-              option-attribute="name"
+              label-key="name"
               placeholder="Kein Standardtyp"
               searchable
               clear-search-on-close
               :disabled="isParentTypeMandatory"
           />
-        </UFormGroup>
+        </UFormField>
 
         <UCheckbox
             v-model="createFolderData.standardFiletypeIsOptional"
@@ -485,27 +486,30 @@ const syncdokubox = async () => {
         />
       </div>
 
-      <template #footer>
+        <template #footer>
-        <div class="flex justify-end gap-2">
+          <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+            <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="createFolder">Erstellen</UButton>
+            <UButton color="primary" @click="createFolder">Erstellen</UButton>
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
-  <UModal v-model="renameModalOpen">
+  <UModal v-model:open="renameModalOpen">
-    <UCard>
+    <template #content>
-      <template #header><h3 class="font-bold">Umbenennen</h3></template>
+      <UCard>
-      <UFormGroup label="Neuer Name">
+        <template #header><h3 class="font-bold">Umbenennen</h3></template>
-        <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
+        <UFormField label="Neuer Name">
-      </UFormGroup>
+          <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
-      <template #footer>
+        </UFormField>
-        <div class="flex justify-end gap-2">
+        <template #footer>
-          <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+          <div class="flex justify-end gap-2">
-          <UButton color="primary" @click="updateName">Speichern</UButton>
+            <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
-        </div>
+            <UButton color="primary" @click="updateName">Speichern</UButton>
-      </template>
+          </div>
-    </UCard>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/pages/incomingInvoices/[mode]/[id].vue

@@ -1,6 +1,7 @@
 <script setup>
 import InputGroup from "~/components/InputGroup.vue";
 import dayjs from "dayjs";
+import { parseDate } from "@internationalized/date"
 import { useDraggable } from '@vueuse/core'
 
 // --- Standard Setup & Data ---
@@ -44,6 +45,9 @@ const costcentres = ref([])
 const vendors = ref([])
 const accounts = ref([])
 const loadedFileId = ref(null)
+const invoiceFiles = ref([])
+const paymentTypeItems = ['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']
+const files = useFiles()
 
 const setup = async () => {
   // 1. Daten laden
@@ -67,7 +71,9 @@ const setup = async () => {
 
   // Datei laden
   if (itemInfo.value.files && itemInfo.value.files.length > 0) {
-    loadedFileId.value = itemInfo.value.files[itemInfo.value.files.length-1].id
+    invoiceFiles.value = await files.selectSomeDocuments(itemInfo.value.files.map((file) => file.id))
+    const latestPdf = [...invoiceFiles.value].reverse().find((file) => file?.path?.toLowerCase().includes('.pdf'))
+    loadedFileId.value = latestPdf?.id || null
   }
 
   if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
@@ -98,6 +104,23 @@ const taxOptions = ref([
   { label: "Keine USt", percentage: 0, key: "null" },
 ])
 
+const getCalendarValue = (value) => {
+  if (!value) return undefined
+
+  const formatted = dayjs(value).format('YYYY-MM-DD')
+  return formatted ? parseDate(formatted) : undefined
+}
+
+const setDateField = (field, value) => {
+  itemInfo.value[field] = value ? dayjs(value.toString()).toDate() : null
+}
+
+const setDateFieldToToday = (field) => {
+  itemInfo.value[field] = dayjs().toDate()
+}
+
+const getDateButtonLabel = (value, emptyLabel = "Kein Datum") => value ? dayjs(value).format('DD.MM.YYYY') : emptyLabel
+
 const totalCalculated = computed(() => {
   let totalNet = 0
   let totalAmount19Tax = 0
@@ -157,7 +180,7 @@ const updateIncomingInvoice = async (setBooked = false) => {
     toast.add({
       title: "Buchen nicht möglich",
       description: "Bitte beheben Sie zuerst die rot markierten Pflichtfehler.",
-      color: "rose"
+      color: "error"
     })
     return
   }
@@ -220,7 +243,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
     <template #right>
       <ArchiveButton
           v-if="mode !== 'show'"
-          color="rose"
+          color="error"
           variant="outline"
           type="incominginvoices"
           @confirmed="useEntities('incominginvoices').archive(route.params.id)"
@@ -286,7 +309,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
           <UAlert
               v-if="findIncomingInvoiceErrors.length > 0"
               title="Prüfung erforderlich"
-              :color="hasBlockingIncomingInvoiceErrors ? 'rose' : 'orange'"
+              :color="hasBlockingIncomingInvoiceErrors ? 'error' : 'orange'"
               variant="soft"
               icon="i-heroicons-exclamation-triangle"
           >
@@ -323,30 +346,30 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               <div class="flex justify-between items-center">
                 <h3 class="font-semibold">Stammdaten</h3>
                 <div class="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
-                  <UButton size="xs" :variant="itemInfo.expense ? 'solid' : 'ghost'" color="rose" @click="itemInfo.expense = true" :disabled="mode === 'show'">Ausgabe</UButton>
+                  <UButton size="xs" :variant="itemInfo.expense ? 'solid' : 'ghost'" color="error" @click="itemInfo.expense = true" :disabled="mode === 'show'">Ausgabe</UButton>
                   <UButton size="xs" :variant="!itemInfo.expense ? 'solid' : 'ghost'" color="emerald" @click="itemInfo.expense = false" :disabled="mode === 'show'">Einnahme</UButton>
                 </div>
               </div>
             </template>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <UFormGroup label="Lieferant / Partner" class="md:col-span-2">
+              <UFormField label="Lieferant / Partner" class="md:col-span-2">
                 <div class="flex gap-2">
                   <USelectMenu
                       class="w-full"
                       v-model="itemInfo.vendor"
-                      :options="vendors"
+                      :items="vendors"
-                      option-attribute="name"
+                      label-key="name"
-                      value-attribute="id"
+                      value-key="id"
-                      searchable
+                      :search-input="{ placeholder: 'Lieferant suchen...' }"
                       :disabled="mode === 'show'"
-                      :search-attributes="['name', 'vendorNumber']"
+                      :filter-fields="['name', 'vendorNumber']"
-                      placeholder="Lieferant suchen..."
+                      :color="itemInfo.vendor ? 'primary' : 'error'"
                   >
-                    <template #label>
+                    <template #default>
                       {{ vendors.find(v => v.id === itemInfo.vendor)?.name || 'Bitte wählen' }}
                     </template>
-                    <template #option="{ option }">
+                    <template #item="{ item: option }">
                       <span class="font-mono text-xs opacity-75 mr-2">{{ option.vendorNumber }}</span> {{ option.name }}
                     </template>
                   </USelectMenu>
@@ -354,7 +377,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                       v-if="mode !== 'show'"
                       icon="i-heroicons-x-mark"
                       variant="outline"
-                      color="rose"
+                      color="error"
                       :disabled="!itemInfo.vendor"
                       @click="itemInfo.vendor = null"
                   />
@@ -365,37 +388,85 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                       @return-data="(data) => itemInfo.vendor = data.id"
                   />
                 </div>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsnummer">
+              <UFormField label="Rechnungsnummer">
-                <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
+                <UInput class="w-full" v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" :color="itemInfo.reference ? 'primary' : 'error'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Zahlart">
+              <UFormField label="Zahlart">
-                <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
+                <USelectMenu v-model="itemInfo.paymentType" :items="paymentTypeItems" :disabled="mode === 'show'" class="w-full" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsdatum">
+              <UFormField label="Rechnungsdatum">
-                <UPopover :popper="{ placement: 'bottom-start' }">
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <UButton
-                  <template #panel="{ close }">
+                      block
-                    <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
+                      icon="i-heroicons-calendar"
+                      :label="getDateButtonLabel(itemInfo.date)"
+                      :disabled="mode === 'show'"
+                      :color="itemInfo.date ? 'neutral' : 'error'"
+                      variant="outline"
+                      class="w-full justify-start"
+                  />
+                  <template #content>
+                    <div class="p-2">
+                      <UCalendar
+                          :model-value="getCalendarValue(itemInfo.date)"
+                          @update:model-value="(value) => { setDateField('date', value); if (!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date }"
+                          :week-starts-on="1"
+                      />
+                      <div class="flex justify-end px-2 pb-2">
+                        <UButton
+                            size="xs"
+                            color="gray"
+                            variant="soft"
+                            icon="i-heroicons-calendar-days"
+                            label="Heute"
+                            @click="() => { setDateFieldToToday('date'); if (!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date }"
+                        />
+                      </div>
+                    </div>
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Fälligkeitsdatum">
+              <UFormField label="Fälligkeitsdatum">
-                <UPopover :popper="{ placement: 'bottom-start' }">
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <UButton
-                  <template #panel="{ close }">
+                      block
-                    <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+                      icon="i-heroicons-calendar"
+                      :label="getDateButtonLabel(itemInfo.dueDate)"
+                      :disabled="mode === 'show'"
+                      :color="itemInfo.dueDate ? 'neutral' : 'error'"
+                      variant="outline"
+                      class="w-full justify-start"
+                  />
+                  <template #content>
+                    <div class="p-2">
+                      <UCalendar
+                          :model-value="getCalendarValue(itemInfo.dueDate)"
+                          @update:model-value="(value) => setDateField('dueDate', value)"
+                          :week-starts-on="1"
+                      />
+                      <div class="flex justify-end px-2 pb-2">
+                        <UButton
+                            size="xs"
+                            color="gray"
+                            variant="soft"
+                            icon="i-heroicons-calendar-days"
+                            label="Heute"
+                            @click="setDateFieldToToday('dueDate')"
+                        />
+                      </div>
+                    </div>
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Beschreibung / Notiz" class="md:col-span-2">
+              <UFormField label="Beschreibung / Notiz" class="md:col-span-2">
-                <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
+                <UTextarea class="w-full" v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
             </div>
           </UCard>
 
@@ -404,7 +475,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               <h3 class="font-semibold text-lg">Positionen</h3>
               <div class="flex items-center gap-2 text-sm">
                 <span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span>
-                <UToggle v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
+                <USwitch v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
                 <span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span>
               </div>
             </div>
@@ -419,7 +490,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               <UButton
                   v-if="itemInfo.accounts.length > 1 && mode !== 'show'"
                   icon="i-heroicons-trash"
-                  color="rose"
+                  color="error"
                   variant="ghost"
                   size="xs"
                   class="absolute top-2 right-2"
@@ -428,48 +499,50 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
 
               <div class="grid grid-cols-12 gap-3">
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Konto / Kategorie">
+                  <UFormField label="Konto / Kategorie">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.account"
-                        :options="accounts"
+                        :items="accounts"
-                        searchable
+                        :search-input="{ placeholder: 'Kategorie wählen' }"
-                        placeholder="Kategorie wählen"
+                        label-key="label"
-                        option-attribute="label"
+                        value-key="id"
-                        value-attribute="id"
                         :disabled="mode === 'show'"
-                        :search-attributes="['label', 'number']"
+                        :filter-fields="['label', 'number']"
+                        :color="item.account ? 'primary' : 'error'"
                     >
-                      <template #option="{ option }">
+                      <template #item="{ item: option }">
                         <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
                       </template>
-                      <template #label>
+                      <template #default>
                         {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Kostenstelle">
+                  <UFormField label="Kostenstelle">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.costCentre"
-                        :options="costcentres"
+                        :items="costcentres"
-                        searchable
+                        :search-input="{ placeholder: 'Optional' }"
-                        option-attribute="name"
+                        label-key="name"
-                        value-attribute="id"
+                        value-key="id"
-                        placeholder="Optional"
                         :disabled="mode === 'show'"
                     >
-                      <template #label>
+                      <template #default>
                         {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Netto)">
+                  <UFormField label="Betrag (Netto)">
                     <UInput
+                        class="w-full"
                         type="number"
                         step="0.01"
                         :disabled="mode === 'show' || !useNetMode"
@@ -478,12 +551,13 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Brutto)">
+                  <UFormField label="Betrag (Brutto)">
                     <UInput
+                        class="w-full"
                         type="number"
                         step="0.01"
                         :disabled="mode === 'show' || useNetMode"
@@ -492,28 +566,30 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerschlüssel">
+                  <UFormField label="Steuerschlüssel">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.taxType"
-                        :options="taxOptions"
+                        :items="taxOptions"
-                        value-attribute="key"
+                        value-key="key"
-                        option-attribute="label"
+                        label-key="label"
                         :disabled="mode === 'show'"
-                        @change="recalculateItem(item, 'taxType')"
+                        @update:model-value="recalculateItem(item, 'taxType')"
+                        :color="item.taxType ? 'primary' : 'error'"
                     />
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerbetrag" help="Automatisch berechnet">
+                  <UFormField label="Steuerbetrag" help="Automatisch berechnet">
-                    <UInput :model-value="item.amountTax" disabled color="gray" >
+                    <UInput class="w-full" :model-value="item.amountTax" disabled color="gray" >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 flex justify-end gap-2">
@@ -538,7 +614,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 </div>
 
                 <div class="col-span-12">
-                  <UInput v-model="item.description" :disabled="mode === 'show'" placeholder="Positionstext (optional)" icon="i-heroicons-bars-3-bottom-left" variant="none" class="border-b border-gray-100 dark:border-gray-800" />
+                  <UInput v-model="item.description" :disabled="mode === 'show'" placeholder="Positionstext (optional)" icon="i-heroicons-bars-3-bottom-left" variant="none" class="w-full border-b border-gray-100 dark:border-gray-800" />
                 </div>
               </div>
             </UCard>

frontend/pages/incomingInvoices/index.vue

@@ -148,7 +148,15 @@ const isPaid = (item) => {
   return Math.abs(amountPaid) === Math.abs(Number(getInvoiceSum(item)))
 }
 
-const selectIncomingInvoice = (invoice) => {
+const unwrapInvoiceRow = (invoiceLike) => invoiceLike?.original || invoiceLike
+
+const selectIncomingInvoice = (invoiceLike) => {
+  const invoice = unwrapInvoiceRow(invoiceLike)
+
+  if (!invoice?.id) {
+    return
+  }
+
   if (invoice.state === "Gebucht") {
     router.push(`/incomingInvoices/show/${invoice.id}`)
   } else {
@@ -191,7 +199,7 @@ const selectIncomingInvoice = (invoice) => {
       <UButton
           icon="i-heroicons-x-mark"
           variant="outline"
-          color="rose"
+          color="error"
           @click="clearSearchString()"
           v-if="searchString.length > 0"
       />
@@ -203,15 +211,15 @@ const selectIncomingInvoice = (invoice) => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template #label>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -220,11 +228,11 @@ const selectIncomingInvoice = (invoice) => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -244,42 +252,42 @@ const selectIncomingInvoice = (invoice) => {
         {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80dvh; overflow-y: scroll">
         <UTable
-            v-model:sort="sort"
+            v-model:sorting="sort"
             sort-mode="manual"
-            @update:sort="setupPage"
+            @update:sorting="setupPage"
-            :rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
+            :data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
-            :columns="columns"
+            :columns="normalizeTableColumns(columns)"
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            @select="(i) => selectIncomingInvoice(i) "
+            :on-select="selectIncomingInvoice"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
-          <template #reference-data="{row}">
+          <template #reference-cell="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
-            <span v-else>{{row.reference}}</span>
+            <span v-else>{{row.original.reference}}</span>
           </template>
-          <template #state-data="{row}">
+          <template #state-cell="{row}">
-            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
+            <span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
-            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
+            <span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
           </template>
-          <template #date-data="{row}">
+          <template #date-cell="{row}">
-            {{dayjs(row.date).format("DD.MM.YYYY")}}
+            {{dayjs(row.original.date).format("DD.MM.YYYY")}}
           </template>
-          <template #vendor-data="{row}">
+          <template #vendor-cell="{row}">
-            {{row.vendor ? row.vendor.name : ""}}
+            {{row.original.vendor ? row.original.vendor.name : ""}}
           </template>
-          <template #amount-data="{row}">
+          <template #amount-cell="{row}">
-            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+            {{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
           </template>
-          <template #dueDate-data="{row}">
+          <template #dueDate-cell="{row}">
-            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+            <span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
           </template>
-          <template #paid-data="{row}">
+          <template #paid-cell="{row}">
-            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+            <span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
             <span v-else class="text-rose-600">Offen</span>
           </template>
         </UTable>

frontend/pages/index.client.vue

@@ -8,6 +8,7 @@ import DisplayBankaccounts from "~/components/displayBankaccounts.vue"
 import DisplayProjectsInPhases from "~/components/displayProjectsInPhases.vue"
 import DisplayOpenTasks from "~/components/displayOpenTasks.vue"
 import DisplayTaxSummary from "~/components/displayTaxSummary.vue"
+import DisplayBWASummary from "~/components/displayBWASummary.vue"
 
 setPageLayout("default")
 
@@ -78,6 +79,15 @@ const DASHBOARD_WIDGETS = [
     defaultLayout: { x: 4, y: 7, w: 4, h: 3 },
     minW: 3,
     minH: 3
+  },
+  {
+    id: "bwa-summary",
+    title: "BWA aktuell",
+    description: "Einnahmen, Ausgaben und Ergebnis des aktuellen Monats",
+    component: markRaw(DisplayBWASummary),
+    defaultLayout: { x: 8, y: 7, w: 4, h: 3 },
+    minW: 3,
+    minH: 3
   }
 ]
 
@@ -348,110 +358,108 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div>
+  <UDashboardNavbar title="Home">
-    <UDashboardNavbar title="Home">
+    <template #right>
-      <template #right>
+      <div class="flex items-center gap-2">
-        <div class="flex items-center gap-2">
+        <UButton
-          <UButton
             :icon="isEditMode ? 'i-heroicons-check' : 'i-heroicons-pencil-square'"
             :color="isEditMode ? 'primary' : 'gray'"
             :variant="isEditMode ? 'solid' : 'ghost'"
             @click="toggleEditMode"
-          >
+        >
-            {{ isEditMode ? "Bearbeitung beenden" : "Dashboard bearbeiten" }}
+          {{ isEditMode ? "Bearbeitung beenden" : "Dashboard bearbeiten" }}
-          </UButton>
+        </UButton>
-          <UButton
+        <UButton
             v-if="isEditMode && hiddenWidgets.length > 0"
             icon="i-heroicons-plus"
             color="white"
             variant="soft"
             @click="manageCardsOpen = true"
-          >
+        >
-            Karte hinzufügen
+          Karte hinzufügen
-          </UButton>
+        </UButton>
-          <UButton
+        <UButton
             v-if="isEditMode"
             icon="i-heroicons-squares-2x2"
             color="gray"
             variant="ghost"
             @click="manageCardsOpen = true"
-          >
+        >
-            Karten verwalten
+          Karten verwalten
-          </UButton>
+        </UButton>
-        </div>
+      </div>
-      </template>
+    </template>
-    </UDashboardNavbar>
+  </UDashboardNavbar>
 
-    <UDashboardPanelContent>
+  <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto">
-    <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid">
+    <div
-      <div
+        v-for="widget in visibleWidgets"
-          v-for="widget in visibleWidgets"
+        :key="widget.id"
-          :key="widget.id"
+        :class="['grid-stack-item', isEditMode ? 'dashboard-widget-editing' : '']"
-          :class="['grid-stack-item', isEditMode ? 'dashboard-widget-editing' : '']"
+        :data-widget-id="widget.id"
-          :data-widget-id="widget.id"
+        :gs-x="widget.x"
-          :gs-x="widget.x"
+        :gs-y="widget.y"
-          :gs-y="widget.y"
+        :gs-w="widget.w"
-          :gs-w="widget.w"
+        :gs-h="widget.h"
-          :gs-h="widget.h"
+        :gs-min-w="widget.minW"
-          :gs-min-w="widget.minW"
+        :gs-min-h="widget.minH"
-          :gs-min-h="widget.minH"
+    >
-      >
+      <div class="grid-stack-item-content dashboard-grid-item">
-          <div class="grid-stack-item-content dashboard-grid-item">
+        <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
-            <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
+          <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
-              <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
+            <div class="flex items-start justify-between gap-3">
-              <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
-                <div class="min-w-0">
+                <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
-                  <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
+                  {{ widget.title }}
-                    {{ widget.title }}
-                  </div>
-                  <p class="mt-1 text-sm">
-                    {{ widget.description }}
-                  </p>
-                </div>
-                <div class="dashboard-widget-header-actions">
-                  <div :id="`dashboard-widget-header-actions-${widget.id}`" class="dashboard-widget-header-target" />
-                  <UButtonGroup v-if="isEditMode" size="xs">
-                    <UButton
-                        color="gray"
-                        variant="soft"
-                        icon="i-heroicons-arrows-pointing-out"
-                        class="dashboard-widget-drag-handle"
-                    />
-                    <UButton
-                        color="gray"
-                        variant="soft"
-                        icon="i-heroicons-x-mark"
-                        :disabled="visibleWidgets.length <= 1"
-                        @click="removeWidget(widget.id)"
-                    />
-                  </UButtonGroup>
                 </div>
+                <p class="mt-1 text-sm">
+                  {{ widget.description }}
+                </p>
+              </div>
+              <div class="dashboard-widget-header-actions">
+                <div :id="`dashboard-widget-header-actions-${widget.id}`" class="dashboard-widget-header-target" />
+                <UButtonGroup v-if="isEditMode" size="xs">
+                  <UButton
+                      color="gray"
+                      variant="soft"
+                      icon="i-heroicons-arrows-pointing-out"
+                      class="dashboard-widget-drag-handle"
+                  />
+                  <UButton
+                      color="gray"
+                      variant="soft"
+                      icon="i-heroicons-x-mark"
+                      :disabled="visibleWidgets.length <= 1"
+                      @click="removeWidget(widget.id)"
+                  />
+                </UButtonGroup>
               </div>
             </div>
-            <div class="dashboard-widget-body">
+          </div>
-              <component
+          <div class="dashboard-widget-body">
-                  :is="widget.component"
+            <component
-                  v-bind="widget.id === 'income-expense'
+                :is="widget.component"
+                v-bind="widget.id === 'income-expense'
                       ? { headerTarget: `#dashboard-widget-header-actions-${widget.id}` }
                       : {}"
-              />
+            />
-            </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <div v-else class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
+  <div v-else class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
-      <p class="text-sm">
+    <p class="text-sm">
-        Es sind aktuell keine Dashboard-Karten sichtbar.
+      Es sind aktuell keine Dashboard-Karten sichtbar.
-      </p>
+    </p>
-      <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
+    <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
-        Karte hinzufügen
+      Karte hinzufügen
-      </UButton>
+    </UButton>
-    </div>
+  </div>
-    </UDashboardPanelContent>
 
-    <UModal v-model="manageCardsOpen">
+  <UModal v-model:open="manageCardsOpen">
+    <template #content>
       <UCard>
         <template #header>
           <div class="flex items-center justify-between gap-3">
@@ -469,9 +477,9 @@ onBeforeUnmount(() => {
 
         <div class="space-y-3">
           <div
-            v-for="definition in DASHBOARD_WIDGETS"
+              v-for="definition in DASHBOARD_WIDGETS"
-            :key="definition.id"
+              :key="definition.id"
-            class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
+              class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
           >
             <div>
               <p class="font-medium">{{ definition.title }}</p>
@@ -479,29 +487,29 @@ onBeforeUnmount(() => {
             </div>
 
             <UButton
-              v-if="getWidgetLayout(definition.id)?.visible"
+                v-if="getWidgetLayout(definition.id)?.visible"
-              color="gray"
+                color="gray"
-              variant="soft"
+                variant="soft"
-              icon="i-heroicons-minus"
+                icon="i-heroicons-minus"
-              :disabled="visibleWidgets.length <= 1"
+                :disabled="visibleWidgets.length <= 1"
-              @click="removeWidget(definition.id)"
+                @click="removeWidget(definition.id)"
             >
               Entfernen
             </UButton>
             <UButton
-              v-else
+                v-else
-              color="primary"
+                color="primary"
-              variant="soft"
+                variant="soft"
-              icon="i-heroicons-plus"
+                icon="i-heroicons-plus"
-              @click="addWidget(definition.id)"
+                @click="addWidget(definition.id)"
             >
               Hinzufügen
             </UButton>
           </div>
         </div>
       </UCard>
-    </UModal>
+    </template>
-  </div>
+  </UModal>
 </template>
 
 <style scoped>

frontend/pages/login.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -7,16 +9,23 @@ const auth = useAuthStore()
 const toast = useToast()
 const router = useRouter()
 
-const doLogin = async (data:any) => {
+const state = reactive({
+  email: '',
+  password: ''
+})
+
+const loading = ref(false)
+
+const doLogin = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    await auth.login(data.email, data.password)
+    await auth.login(event.data.email, event.data.password)
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Einloggen erfolgreich"})
-
     await router.push("/")
-
   } catch (err: any) {
-    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"})
+    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -29,60 +38,42 @@ const doLogin = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
+    <div class="mt-6 space-y-5">
-        title="Login"
+      <div class="space-y-1">
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+        <h1 class="text-xl font-semibold">Login</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten.
-            name: 'email',
+        </p>
-            type: 'text',
+      </div>
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }, {
-            name: 'password',
-            label: 'Passwort',
-            type: 'password',
-            placeholder: 'Dein Passwort'
-          }]"
-        :loading="false"
-        @submit="doLogin"
-        :submit-button="{label: 'Weiter'}"
-        divider="oder"
-    >
-      <template #password-hint>
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-      </template>
-    </UAuthForm>
-  </UCard>
-<!--  <div v-else class="mt-20 m-2 p-2">
-    <UColorModeImage
-        light="/Logo.png"
-        dark="/Logo_Dark.png"
-    />
 
-    <UAuthForm
+      <UForm :state="state" class="space-y-4" @submit="doLogin">
-        title="Login"
+        <UFormField label="E-Mail" name="email">
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+          <UInput
-        align="bottom"
+              v-model="state.email"
-        :fields="[{
+              type="email"
-            name: 'email',
+              class="w-full"
-            type: 'text',
+              placeholder="Deine E-Mail Adresse"
-            label: 'Email',
+              autocomplete="email"
-            placeholder: 'Deine E-Mail Adresse'
+          />
-          }, {
+        </UFormField>
-            name: 'password',
+
-            label: 'Passwort',
+        <UFormField label="Passwort" name="password">
-            type: 'password',
+          <template #hint>
-            placeholder: 'Dein Passwort'
+            <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-          }]"
+          </template>
-        :loading="false"
+          <UInput
-        @submit="doLogin"
+              v-model="state.password"
-        :submit-button="{label: 'Weiter'}"
+              type="password"
-        divider="oder"
+              class="w-full"
-    >
+              placeholder="Dein Passwort"
-      <template #password-hint>
+              autocomplete="current-password"
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+          />
-      </template>
+        </UFormField>
-    </UAuthForm>
+
-  </div>-->
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Weiter
+        </UButton>
+      </UForm>
+    </div>
+  </UCard>
 </template>

frontend/pages/organisation/plantafel.vue

@@ -423,7 +423,7 @@ onMounted(() => {
             Urlaub
           </UButton>
           <UButton
-            color="rose"
+            color="error"
             variant="soft"
             icon="i-heroicons-heart"
             @click="openAbsenceModal('sick')"
@@ -453,25 +453,26 @@ onMounted(() => {
       />
     </UDashboardPanelContent>
 
-    <UModal v-model="isAbsenceModalOpen">
+    <UModal v-model:open="isAbsenceModalOpen">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #content>
-        <template #header>
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-          <div class="flex items-center justify-between">
+          <template #header>
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            <div class="flex items-center justify-between">
-              {{ absenceModalTitle }}
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            </h3>
+                {{ absenceModalTitle }}
-            <UButton
+              </h3>
-              color="gray"
+              <UButton
-              variant="ghost"
+                color="gray"
-              icon="i-heroicons-x-mark-20-solid"
+                variant="ghost"
-              class="-my-1"
+                icon="i-heroicons-x-mark-20-solid"
-              @click="isAbsenceModalOpen = false"
+                class="-my-1"
-            />
+                @click="isAbsenceModalOpen = false"
-          </div>
+              />
-        </template>
+            </div>
+          </template>
 
         <div class="space-y-4">
-          <UFormGroup label="Profil">
+          <UFormField label="Profil">
             <USelectMenu
               v-model="absenceForm.userId"
               :options="profileOptions"
@@ -479,51 +480,52 @@ onMounted(() => {
               option-attribute="label"
               searchable
             />
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup label="Typ">
+          <UFormField label="Typ">
             <USelectMenu
               v-model="absenceForm.type"
               :options="absenceTypeOptions"
               value-attribute="value"
               option-attribute="label"
             />
-          </UFormGroup>
+          </UFormField>
 
           <div class="grid grid-cols-2 gap-4">
-            <UFormGroup label="Start">
+            <UFormField label="Start">
               <div class="flex items-center gap-2">
                 <UInput v-model="absenceForm.startDate" type="date" class="flex-1" />
                 <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('startDate')" />
               </div>
-            </UFormGroup>
+            </UFormField>
-            <UFormGroup label="Ende">
+            <UFormField label="Ende">
               <div class="flex items-center gap-2">
                 <UInput v-model="absenceForm.endDate" type="date" class="flex-1" />
                 <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('endDate')" />
               </div>
-            </UFormGroup>
+            </UFormField>
           </div>
 
-          <UFormGroup label="Notiz">
+          <UFormField label="Notiz">
             <UTextarea
               v-model="absenceForm.description"
               :placeholder="absenceForm.type === 'sick' ? 'z. B. Krankmeldung eingegangen' : 'z. B. Sommerurlaub'"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
 
-        <template #footer>
+          <template #footer>
-          <div class="flex justify-end gap-2">
+            <div class="flex justify-end gap-2">
-            <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
+              <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
-              Abbrechen
+                Abbrechen
-            </UButton>
+              </UButton>
-            <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
+              <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
-              Speichern
+                Speichern
-            </UButton>
+              </UButton>
-          </div>
+            </div>
-        </template>
+          </template>
-      </UCard>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>

frontend/pages/password-change.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -6,25 +8,31 @@ definePageMeta({
 const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  oldPassword: '',
+  newPassword: ''
+})
 
+const loading = ref(false)
 
-
+const doChange = async (event: FormSubmitEvent<typeof state>) => {
-const doChange = async (data:any) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/api/auth/password/change", {
+    await useNuxtApp().$api("/api/auth/password/change", {
       method: "POST",
       body: {
-        old_password: data.oldPassword,
+        old_password: event.data.oldPassword,
-        new_password: data.newPassword,
+        new_password: event.data.newPassword,
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Ändern erfolgreich"})
     await auth.logout()
     return navigateTo("/login")
   } catch (err: any) {
-    toast.add({title:"Es gab ein Problem beim ändern",color:"rose"})
+    toast.add({title:"Es gab ein Problem beim ändern",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -37,26 +45,39 @@ const doChange = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
+    <div class="mt-6 space-y-5">
-        title="Passwort zurücksetzen"
+      <div class="space-y-1">
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        <h1 class="text-xl font-semibold">Passwort ändern</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihr aktuelles und Ihr neues Passwort ein.
-            name: 'oldPassword',
+        </p>
-            label: 'Altes Passwort',
+      </div>
-            type: 'password',
+
-            placeholder: 'Dein altes Passwort'
+      <UForm :state="state" class="space-y-4" @submit="doChange">
-          },{
+        <UFormField label="Altes Passwort" name="oldPassword">
-            name: 'newPassword',
+          <UInput
-            label: 'Neues Passwort',
+              v-model="state.oldPassword"
-            type: 'password',
+              type="password"
-            placeholder: 'Dein neues Passwort'
+              class="w-full"
-          }]"
+              placeholder="Dein altes Passwort"
-        :loading="false"
+              autocomplete="current-password"
-        @submit="doChange"
+          />
-        :submit-button="{label: 'Ändern'}"
+        </UFormField>
-        divider="oder"
+
-    >
+        <UFormField label="Neues Passwort" name="newPassword">
-    </UAuthForm>
+          <UInput
+              v-model="state.newPassword"
+              type="password"
+              class="w-full"
+              placeholder="Dein neues Passwort"
+              autocomplete="new-password"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Ändern
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
 </template>

frontend/pages/password-reset.vue

@@ -1,28 +1,34 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
 
-const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  email: ''
+})
 
+const loading = ref(false)
 
-
+const doReset = async (event: FormSubmitEvent<typeof state>) => {
-const doReset = async (data:any) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/auth/password/reset", {
+    await useNuxtApp().$api("/auth/password/reset", {
       method: "POST",
       body: {
-        email: data.email
+        email: event.data.email
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Zurücksetzen erfolgreich"})
     return navigateTo("/login")
   } catch (err: any) {
-    toast.add({title:"Problem beim zurücksetzen",color:"rose"})
+    toast.add({title:"Problem beim zurücksetzen",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -35,21 +41,29 @@ const doReset = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
+    <div class="mt-6 space-y-5">
-        title="Passwort zurücksetzen"
+      <div class="space-y-1">
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        <h1 class="text-xl font-semibold">Passwort zurücksetzen</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten.
-            name: 'email',
+        </p>
-            type: 'text',
+      </div>
-            label: 'Email',
+
-            placeholder: 'Deine E-Mail Adresse'
+      <UForm :state="state" class="space-y-4" @submit="doReset">
-          }]"
+        <UFormField label="E-Mail" name="email">
-        :loading="false"
+          <UInput
-        @submit="doReset"
+              v-model="state.email"
-        :submit-button="{label: 'Zurücksetzen'}"
+              type="email"
-        divider="oder"
+              class="w-full"
-    >
+              placeholder="Deine E-Mail Adresse"
-    </UAuthForm>
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Zurücksetzen
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
 </template>

frontend/pages/projecttypes/[mode]/[[id]].vue

@@ -9,18 +9,20 @@ defineShortcuts({
     router.push("/projecttypes")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
+    const currentIndex = Number(openTab.value)
-      openTab.value -= 1
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
+    const currentIndex = Number(openTab.value)
-      openTab.value += 1
+    if(currentIndex < 3) {
+      openTab.value = String(currentIndex + 1)
     }
   },
 })
 
-const openTab = ref(0)
+const openTab = ref("0")
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -129,7 +131,7 @@ const addPhase = () => {
         v-if="itemInfo.id && mode == 'show'"
         v-model="openTab"
     >
-      <template #item="{ item }">
+      <template #content="{ item }">
         <div v-if="item.label === 'Informationen'" class="flex flex-row">
           <div class="w-1/2 mr-3">
             <UCard class="mt-5">
@@ -152,24 +154,24 @@ const addPhase = () => {
 
     <UForm v-else-if="mode === 'edit' || mode === 'create'">
       <UAlert
-          color="rose"
+          color="error"
           variant="outline"
           class="mb-5"
           v-if="mode === 'edit'"
           description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert."
       />
 
-      <UFormGroup
+      <UFormField
           label="Name:"
       >
         <UInput
             v-model="itemInfo.name"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UDivider class="mt-5">
+      <USeparator class="mt-5">
         Initiale Phasen
-      </UDivider>
+      </USeparator>
       <UButton
           class="mt-3"
           @click="addPhase"
@@ -247,44 +249,46 @@ const addPhase = () => {
                   {{ button.label }}
                 </UButton>
 
-                <UModal v-model="openQuickActionModal">
+                <UModal v-model:open="openQuickActionModal">
-                  <UCard>
+                  <template #content>
-                    <div class="flex items-center justify-between">
+                    <UCard>
-                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                      <div class="flex items-center justify-between">
-                        Schnellaktion hinzufügen
+                        <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                      </h3>
+                          Schnellaktion hinzufügen
-                      <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
+                        </h3>
-                    </div>
+                        <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
-                    <div class="flex flex-col">
+                      </div>
-                      <UButton
+                      <div class="flex flex-col">
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
+                            class="my-1"
-                      <UButton
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
+                            class="my-1"
-                      <UButton
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
+                            class="my-1"
-                      <UButton
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
+                            class="my-1"
-                      <UButton
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
+                            class="my-1"
-                      <UButton
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
-                          class="my-1"
+                        <UButton
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
 
-                    </div>
+                      </div>
 
-                  </UCard>
+                    </UCard>
+                  </template>
                 </UModal>
               </td>
               <td>
                 <UButton
                     class="my-2 ml-2"
                     variant="outline"
-                    color="rose"
+                    color="error"
                     @click="itemInfo.initialPhases = itemInfo.initialPhases.filter(i => i !== phase)"
                 >X</UButton>
               </td>

frontend/pages/projecttypes/index.vue

@@ -87,16 +87,16 @@ const filteredRows = computed(() => {
   </UDashboardNavbar>
 
   <UTable
-      :rows="filteredRows"
+      :data="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/projecttypes/show/${i.id}`) "
+      :on-select="(i) => router.push(`/projecttypes/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
   >
-    <template #name-data="{row}">
+    <template #name-cell="{row}">
-      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{ row.name }}</span>
+      <span class="text-primary-500 font-bold" v-if="row.original === filteredRows[selectedItem]">{{ row.original.name }}</span>
-      <span v-else>{{ row.name }}</span>
+      <span v-else>{{ row.original.name }}</span>
     </template>
 
   </UTable>

frontend/pages/roles/[mode]/[[id]].vue

@@ -8,13 +8,15 @@ defineShortcuts({
     router.push("/roles")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
+    const currentIndex = Number(openTab.value)
-      openTab.value -= 1
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
+    const currentIndex = Number(openTab.value)
-      openTab.value += 1
+    if(currentIndex < 3) {
+      openTab.value = String(currentIndex + 1)
     }
   },
 })
@@ -32,7 +34,7 @@ const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
     rights: []
 })
-const openTab = ref(0)
+const openTab = ref("0")
 
 //Functions
 const setupPage = async () => {
@@ -120,7 +122,7 @@ setupPage()
     class="p-5"
     v-model="openTab"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
         <div class="w-1/2 mr-5">
           <UCard>
@@ -157,15 +159,15 @@ setupPage()
       v-else-if="mode == 'edit' || mode == 'create'"
       class="p-5"
   >
-    <UFormGroup
+    <UFormField
         label="Name:"
     >
       <UInput
           v-model="itemInfo.name"
           autofocus
       />
-    </UFormGroup>
+    </UFormField>
-    <UFormGroup
+    <UFormField
         label="Rechte:"
     >
       <USelectMenu
@@ -176,14 +178,14 @@ setupPage()
           multiple
       >
       </USelectMenu>
-    </UFormGroup>
+    </UFormField>
-    <UFormGroup
+    <UFormField
         label="Beschreibung:"
     >
       <UTextarea
           v-model="itemInfo.description"
       />
-    </UFormGroup>
+    </UFormField>
   </UForm>
 </template>
 

frontend/pages/settings/admin.vue

@@ -51,7 +51,7 @@ const savingUser = ref(false)
 const savingTenant = ref(false)
 const creatingUser = ref(false)
 const creatingTenant = ref(false)
-const activeTab = ref(0)
+const activeTab = ref("0")
 const createUserModalOpen = ref(false)
 const createTenantModalOpen = ref(false)
 const createdUserPassword = ref("")
@@ -105,12 +105,14 @@ const userTableColumns = [
   { key: "tenant_count", label: "Tenants" },
   { key: "is_admin", label: "Admin" },
 ]
+const normalizedUserTableColumns = normalizeTableColumns(userTableColumns)
 
 const tenantTableColumns = [
   { key: "name", label: "Tenant" },
   { key: "short", label: "Kürzel" },
   { key: "user_count", label: "Benutzer" },
 ]
+const normalizedTenantTableColumns = normalizeTableColumns(tenantTableColumns)
 
 const userTableRows = computed(() =>
   sortedUsers.value.map((user) => ({
@@ -470,7 +472,7 @@ onMounted(async () => {
       :items="tabItems"
       class="admin-tabs h-full"
     >
-      <template #item="{ item }">
+      <template #content="{ item }">
         <div v-if="item.label === 'Benutzer'" class="admin-grid mt-5 grid grid-cols-1 xl:grid-cols-3 gap-5">
           <UCard class="admin-card xl:col-span-1">
             <div class="flex items-center justify-between mb-4">
@@ -490,9 +492,9 @@ onMounted(async () => {
             <div class="admin-scroll">
               <UTable
                 v-if="!loading"
-                :rows="userTableRows"
+                :data="userTableRows"
-                :columns="userTableColumns"
+                :columns="normalizedUserTableColumns"
-                @select="selectUser"
+                :on-select="selectUser"
               />
 
               <USkeleton v-else class="h-80" />
@@ -517,53 +519,53 @@ onMounted(async () => {
               </div>
 
               <UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormGroup label="E-Mail">
+                <UFormField label="E-Mail">
                   <UInput v-model="userForm.email" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Profil Vorname">
+                <UFormField label="Profil Vorname">
                   <UInput v-model="userForm.profile_defaults.first_name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Profil Nachname">
+                <UFormField label="Profil Nachname">
                   <UInput v-model="userForm.profile_defaults.last_name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Tenants">
+                <UFormField label="Tenants">
                   <USelectMenu
                     :model-value="userForm.tenant_ids"
-                    :options="tenantOptions"
+                    :items="tenantOptions"
-                    value-attribute="value"
+                    value-key="value"
-                    option-attribute="label"
+                    label-key="label"
                     multiple
                     @update:model-value="updateUserTenants"
                   />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Administrative Freigabe">
+                <UFormField label="Administrative Freigabe">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.is_admin" />
+                    <USwitch v-model="userForm.is_admin" />
                     <span class="text-sm text-gray-600">Darf Administrationsseite und Admin-API nutzen</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Multi-Tenant">
+                <UFormField label="Multi-Tenant">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.multiTenant" />
+                    <USwitch v-model="userForm.multiTenant" />
                     <span class="text-sm text-gray-600">Benutzer darf mehreren Tenants zugeordnet sein</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Passwortwechsel erzwingen">
+                <UFormField label="Passwortwechsel erzwingen">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.must_change_password" />
+                    <USwitch v-model="userForm.must_change_password" />
                     <span class="text-sm text-gray-600">Beim nächsten Login muss das Passwort geändert werden</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
               </UForm>
 
               <div>
-                <UDivider label="Rollen pro Tenant" class="mb-4" />
+                <USeparator label="Rollen pro Tenant" class="mb-4" />
 
                 <div
                   v-if="userForm.tenant_ids.length"
@@ -584,33 +586,33 @@ onMounted(async () => {
                         </div>
                       </div>
 
-                      <UFormGroup label="Rolle">
+                      <UFormField label="Rolle">
                         <USelectMenu
                           :model-value="getRoleForTenant(tenantId)"
-                          :options="getRoleOptionsForTenant(tenantId)"
+                          :items="getRoleOptionsForTenant(tenantId)"
-                          value-attribute="value"
+                          value-key="value"
-                          option-attribute="label"
+                          label-key="label"
                           placeholder="Rolle auswählen"
                           @update:model-value="(value) => setRoleForTenant(tenantId, value)"
                         />
-                      </UFormGroup>
+                      </UFormField>
 
-                      <UFormGroup label="Freies Profil">
+                      <UFormField label="Freies Profil">
                         <USelectMenu
                           :model-value="getProfileAssignmentForTenant(tenantId)"
-                          :options="[
+                          :items="[
                             { label: 'Neues Profil erzeugen', value: null },
                             ...getFreeProfilesForTenant(tenantId).map((profile) => ({
                               label: profile.full_name || `${profile.first_name} ${profile.last_name}`,
                               value: profile.id,
                             }))
                           ]"
-                          value-attribute="value"
+                          value-key="value"
-                          option-attribute="label"
+                          label-key="label"
                           placeholder="Profil auswählen"
                           @update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
                         />
-                      </UFormGroup>
+                      </UFormField>
                     </div>
                   </UCard>
                 </div>
@@ -625,7 +627,7 @@ onMounted(async () => {
               </div>
 
               <div>
-                <UDivider label="Profile im System" class="mb-4" />
+                <USeparator label="Profile im System" class="mb-4" />
                 <div class="flex flex-wrap gap-2">
                   <UBadge
                     v-for="profile in userForm.profiles"
@@ -672,9 +674,9 @@ onMounted(async () => {
             <div class="admin-scroll">
               <UTable
                 v-if="!loading"
-                :rows="tenantTableRows"
+                :data="tenantTableRows"
-                :columns="tenantTableColumns"
+                :columns="normalizedTenantTableColumns"
-                @select="selectTenant"
+                :on-select="selectTenant"
               />
 
               <USkeleton v-else class="h-80" />
@@ -699,17 +701,17 @@ onMounted(async () => {
               </div>
 
               <UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormGroup label="Name">
+                <UFormField label="Name">
                   <UInput v-model="tenantForm.name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Kürzel">
+                <UFormField label="Kürzel">
                   <UInput v-model="tenantForm.short" />
-                </UFormGroup>
+                </UFormField>
               </UForm>
 
               <div>
-                <UDivider label="Zugeordnete Benutzer" class="mb-4" />
+                <USeparator label="Zugeordnete Benutzer" class="mb-4" />
                 <div class="flex flex-wrap gap-2">
                   <UBadge
                     v-for="user in getUsersForTenant(tenantForm.id)"
@@ -740,50 +742,51 @@ onMounted(async () => {
     </UTabs>
   </UDashboardPanelContent>
 
-  <UModal v-model="createUserModalOpen">
+  <UModal v-model:open="createUserModalOpen">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="text-lg font-semibold">Benutzer anlegen</div>
+        <template #header>
-      </template>
+          <div class="text-lg font-semibold">Benutzer anlegen</div>
+        </template>
 
       <UForm
         :state="createUserForm"
         class="space-y-4"
         @submit.prevent="createUser"
       >
-        <UFormGroup label="E-Mail">
+        <UFormField label="E-Mail">
           <UInput v-model="createUserForm.email" type="email" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Initialpasswort">
+        <UFormField label="Initialpasswort">
           <UInput
             v-model="createUserForm.password"
             type="text"
             placeholder="Leer lassen für automatisches Passwort"
           />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Vorname für neues Profil">
+        <UFormField label="Vorname für neues Profil">
           <UInput v-model="createUserForm.first_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Nachname für neues Profil">
+        <UFormField label="Nachname für neues Profil">
           <UInput v-model="createUserForm.last_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Administrative Freigabe">
+        <UFormField label="Administrative Freigabe">
           <div class="flex items-center gap-3 h-10">
-            <UToggle v-model="createUserForm.is_admin" />
+            <USwitch v-model="createUserForm.is_admin" />
             <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
           </div>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Multi-Tenant">
+        <UFormField label="Multi-Tenant">
           <div class="flex items-center gap-3 h-10">
-            <UToggle v-model="createUserForm.multiTenant" />
+            <USwitch v-model="createUserForm.multiTenant" />
             <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
           </div>
-        </UFormGroup>
+        </UFormField>
 
         <div class="flex justify-end gap-3 pt-2">
           <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
@@ -793,28 +796,30 @@ onMounted(async () => {
             Benutzer anlegen
           </UButton>
         </div>
-      </UForm>
+        </UForm>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
-  <UModal v-model="createTenantModalOpen">
+  <UModal v-model:open="createTenantModalOpen">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="text-lg font-semibold">Tenant anlegen</div>
+        <template #header>
-      </template>
+          <div class="text-lg font-semibold">Tenant anlegen</div>
+        </template>
 
       <UForm
         :state="createTenantForm"
         class="space-y-4"
         @submit.prevent="createTenant"
       >
-        <UFormGroup label="Name">
+        <UFormField label="Name">
           <UInput v-model="createTenantForm.name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Kürzel">
+        <UFormField label="Kürzel">
           <UInput v-model="createTenantForm.short" />
-        </UFormGroup>
+        </UFormField>
 
         <UAlert
           title="Seed-Daten"
@@ -831,8 +836,9 @@ onMounted(async () => {
             Tenant anlegen
           </UButton>
         </div>
-      </UForm>
+        </UForm>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
   <div class="mx-5 mb-5">

frontend/pages/settings/banking/index.vue

@@ -68,7 +68,7 @@ const addAccount = async (account) => {
     }
   } catch (error) {
     console.error(error)
-    toast.add({title: "Es gab einen Fehler beim Hinzufügen des Accounts", color:"rose"})
+    toast.add({title: "Es gab einen Fehler beim Hinzufügen des Accounts", color:"error"})
   }
 }
 
@@ -85,7 +85,7 @@ const updateAccount = async (account) => {
     setupPage()
   } catch (error) {
     console.log(error)
-    toast.add({title: "Es gab einen Fehler beim Aktualisieren des Accounts", color:"rose"})
+    toast.add({title: "Es gab einen Fehler beim Aktualisieren des Accounts", color:"error"})
   }
 }
 
@@ -101,16 +101,17 @@ setupPage()
         + Bankverbindung
       </UButton>
       <USlideover
-          v-model="showAddBankRequisition"
+          v-model:open="showAddBankRequisition"
       >
-        <UCard
+        <template #body>
-            class="h-full"
+          <UCard
-        >
+              class="h-full"
-          <template #header>
+          >
-            <p>Bankverbindung hinzufügen</p>
+            <template #header>
-          </template>
+              <p>Bankverbindung hinzufügen</p>
+            </template>
 
-          <UFormGroup
+          <UFormField
               label="BIC:"
               class="flex-auto"
           >
@@ -127,7 +128,7 @@ setupPage()
               </UButton>
             </InputGroup>
 
-          </UFormGroup>
+          </UFormField>
           <UAlert
               v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
               title="Bank gefunden"
@@ -137,51 +138,54 @@ setupPage()
               class="mt-3"
               :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
           />
-          <UAlert
+            <UAlert
-              v-else-if="showAlert && !bankData.id"
+                v-else-if="showAlert && !bankData.id"
-              title="Bank nicht gefunden"
+                title="Bank nicht gefunden"
-              icon="i-heroicons-x-circle"
+                icon="i-heroicons-x-circle"
-              color="rose"
+                color="error"
-              variant="outline"
+                variant="outline"
-              class="mt-3"
+                class="mt-3"
-          />
+            />
 
-        </UCard>
+          </UCard>
+        </template>
       </USlideover>
     </template>
   </UDashboardNavbar>
 
-  <UModal v-model="showReqData">
+  <UModal v-model:open="showReqData">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        Verfügbare Bankkonten
+        <template #header>
-      </template>
+          Verfügbare Bankkonten
-      <div
+        </template>
-          v-for="account in reqData.accounts"
+        <div
-          :key="account.id"
+            v-for="account in reqData.accounts"
-          class="p-2 m-3 flex justify-between"
+            :key="account.id"
-      >
+            class="p-2 m-3 flex justify-between"
-        {{account.iban}} - {{account.owner_name}}
+        >
+          {{account.iban}} - {{account.owner_name}}
 
-        <UButton
+          <UButton
-            @click="addAccount(account)"
+              @click="addAccount(account)"
-            v-if="!bankaccounts.find(i => i.iban === account.iban)"
+              v-if="!bankaccounts.find(i => i.iban === account.iban)"
-        >
+          >
-          Hinzufügen
+            Hinzufügen
-        </UButton>
+          </UButton>
-        <UButton
+          <UButton
-            @click="updateAccount(account)"
+              @click="updateAccount(account)"
-            v-else
+              v-else
-        >
+          >
-          Aktualisieren
+            Aktualisieren
-        </UButton>
+          </UButton>
-      </div>
+        </div>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
   <UTable
-      :rows="bankaccounts"
+      :data="bankaccounts"
-      :columns="[
+      :columns="normalizeTableColumns([
         {
           key: 'expired',
           label: 'Aktiv'
@@ -198,23 +202,23 @@ setupPage()
           key: 'balance',
           label: 'Saldo'
         },
-    ]"
+      ])"
   >
-    <template #expired-data="{row}">
+    <template #expired-cell="{ row }">
-      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
+      <span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
       <span v-else class="text-primary">Aktiv</span>
       <UButton
-          v-if="row.expired"
+          v-if="row.original.expired"
           variant="outline"
           class="ml-2"
-          @click="generateLink(row.bankId)"
+          @click="generateLink(row.original.bankId)"
       >Aktualisieren</UButton>
     </template>
-    <template #balance-data="{row}">
+    <template #balance-cell="{ row }">
-      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
+      {{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
     </template>
-    <template #iban-data="{row}">
+    <template #iban-cell="{ row }">
-      {{row.iban.match(/.{1,5}/g).join(" ")}}
+      {{ row.original.iban.match(/.{1,5}/g).join(" ") }}
     </template>
   </UTable>
 

frontend/pages/settings/emailaccounts/[mode]/[[id]].vue

@@ -57,15 +57,15 @@ const saveAccount = async () => {
     </template>
   </UDashboardNavbar>
   <UForm class="w-2/3 mx-auto mt-5">
-    <UFormGroup
+    <UFormField
       label="E-Mail Adresse"
     >
       <UInput
         v-model="itemInfo.email"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="Passwort"
     >
       <UInput
@@ -73,61 +73,61 @@ const saveAccount = async () => {
           v-model="itemInfo.password"
           placeholder="********"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UDivider> IMAP </UDivider>
+    <USeparator label="IMAP"/>
 
-    <UFormGroup
+    <UFormField
         label="IMAP Host"
     >
       <UInput
           v-model="itemInfo.imap_host"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="IMAP Port"
     >
       <UInput
           type="number"
           v-model="itemInfo.imap_port"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="IMAP SSL"
     >
-      <UToggle
+      <USwitch
           v-model="itemInfo.imap_ssl"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UDivider> SMTP </UDivider>
+    <USeparator label="SMTP"/>
 
-    <UFormGroup
+    <UFormField
         label="SMTP Host"
     >
       <UInput
           v-model="itemInfo.smtp_host"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="SMTP Port"
     >
       <UInput
           type="number"
           v-model="itemInfo.smtp_port"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="SMTP SSL"
     >
-      <UToggle
+      <USwitch
           v-model="itemInfo.smtp_ssl"
       />
-    </UFormGroup>
+    </UFormField>
 
   </UForm>
 </template>

frontend/pages/settings/emailaccounts/index.vue

@@ -32,22 +32,23 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 <template>
   <UModal
-    v-model="showEmailAddressModal"
+    v-model:open="showEmailAddressModal"
   >
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        E-Mail Adresse
+        <template #header>
-      </template>
+          E-Mail Adresse
-<!--      <UFormGroup
+        </template>
+<!--      <UFormField
         label="E-Mail Adresse:"
       >
 
-      </UFormGroup>-->
+      </UFormField>-->
 
       <UInput
           v-model="createEMailAddress"
       />
-<!--      <UFormGroup
+<!--      <UFormField
         label="Account Typ:"
       >
         <USelectMenu
@@ -56,15 +57,16 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
           value-attribute="key"
           v-model="createEMailType"
         />
-      </UFormGroup>-->
+      </UFormField>-->
-      <template #footer>
+        <template #footer>
-        <UButton
+          <UButton
-            @click="createAccount"
+              @click="createAccount"
-        >
+          >
-          Erstellen
+            Erstellen
-        </UButton>
+          </UButton>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
 
   </UModal>
   <UDashboardNavbar title="E-Mail Konten">
@@ -80,12 +82,12 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
       </template>
   </UDashboardNavbar>
   <UTable
-    :rows="items"
+    :data="items"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
     class="w-full"
-    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
+    :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
     :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
+    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
   >
   </UTable>
 </template>

frontend/pages/settings/externalDevices.vue

@@ -33,13 +33,13 @@ const labelPrinterURI = ref("")
         Etikettendrucker
       </template>
 
-      <UFormGroup
+      <UFormField
         label="IP-Adresse:"
       >
         <UInput
           v-model="labelPrinterURI"
         />
-      </UFormGroup>
+      </UFormField>
 
       <UButton
         @click="setupPrinter"

frontend/pages/settings/index.vue

@@ -37,11 +37,11 @@ const isLight = computed({
       :items="items"
       class="h-100 p-5"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Profil'">
 
-          <UDivider
+          <USeparator
               class="my-3"
               label="Profil"
           />
@@ -58,12 +58,12 @@ const isLight = computed({
 
         </div>
         <div v-else-if="item.label === 'Projekte'">
-          <UDivider
+          <USeparator
             label="Phasenvorlagen"
           />
         </div>
         <div v-else-if="item.label === 'Dokumente'">
-          <UDivider
+          <USeparator
               label="Tags"
               class="mb-3"
           />

frontend/pages/settings/numberRanges.vue

@@ -80,7 +80,7 @@ const updateNumberRanges = async (range) => {
   <UDashboardToolbar>
     <UAlert
         title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
-        color="rose"
+        color="error"
         variant="outline"
         icon="i-heroicons-exclamation-triangle"
     />

frontend/pages/settings/tenant.vue

@@ -168,11 +168,13 @@ setupPage()
         }
     ]"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <div v-if="item.label === 'Dokubox'">
         <UAlert
             class="mt-5"
             title="DOKUBOX"
+            color="neutral"
+            variant="outline"
         >
           <template #description>
             <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
@@ -190,17 +192,17 @@ setupPage()
       <div v-if="item.label === 'Rechnung & Kontakt'">
           <UCard class="mt-5">
             <UForm class="w-1/2">
-            <UFormGroup
+            <UFormField
                 label="Firmenname:"
             >
               <UInput v-model="businessInfo.name"/>
-            </UFormGroup>
+            </UFormField>
-            <UFormGroup
+            <UFormField
                 label="Straße + Hausnummer:"
             >
               <UInput v-model="businessInfo.street"/>
-            </UFormGroup>
+            </UFormField>
-            <UFormGroup
+            <UFormField
                 label="PLZ + Ort"
                 class="w-full"
             >
@@ -208,41 +210,41 @@ setupPage()
                 <UInput v-model="businessInfo.zip"/>
                 <UInput v-model="businessInfo.city" class="flex-auto"/>
               </InputGroup>
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({businessInfo: businessInfo})"
             >
               Speichern
             </UButton>
-            <UFormGroup
+            <UFormField
                 label="Kontenrahmen:"
                 class="mt-6"
             >
               <USelectMenu
                   v-model="accountChart"
-                  :options="accountChartOptions"
+                  :items="accountChartOptions"
-                  option-attribute="label"
+                  label-key="label"
-                  value-attribute="value"
+                  value-key="value"
               />
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({accountChart: accountChart})"
             >
               Kontenrahmen speichern
             </UButton>
-            <UFormGroup
+            <UFormField
                 label="USt-Auswertung:"
                 class="mt-6"
             >
               <USelectMenu
                   v-model="taxEvaluationPeriod"
-                  :options="TAX_EVALUATION_PERIOD_OPTIONS"
+                  :items="TAX_EVALUATION_PERIOD_OPTIONS"
-                  option-attribute="label"
+                  label-key="label"
-                  value-attribute="value"
+                  value-key="value"
               />
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})"
@@ -258,7 +260,7 @@ setupPage()
           <UAlert
               title="Funktionen ausblenden"
               description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
-              color="rose"
+              color="error"
               variant="outline"
               class="mb-5"
           />

frontend/pages/settings/texttemplates.vue

@@ -49,7 +49,7 @@ const refreshData = async () => {
     // select() filtert bereits archivierte Einträge, wenn dataType.isArchivable true ist
     texttemplates.value = await select()
   } catch (e) {
-    toast.add({ title: 'Fehler beim Laden', description: e.message, color: 'rose' })
+    toast.add({ title: 'Fehler beim Laden', description: e.message, color: 'error' })
   } finally {
     loading.value = false
   }
@@ -93,7 +93,7 @@ const handleCreate = async () => {
     editTemplateModalOpen.value = false
     await refreshData()
   } catch (e) {
-    toast.add({ title: 'Fehler', description: 'Konnte nicht erstellt werden.', color: 'rose' })
+    toast.add({ title: 'Fehler', description: 'Konnte nicht erstellt werden.', color: 'error' })
   } finally {
     isSaving.value = false
   }
@@ -109,7 +109,7 @@ const handleUpdate = async () => {
     editTemplateModalOpen.value = false
     await refreshData()
   } catch (e) {
-    toast.add({title: 'Fehler', description: 'Konnte nicht gespeichert werden.', color: 'rose'})
+    toast.add({title: 'Fehler', description: 'Konnte nicht gespeichert werden.', color: 'error'})
   } finally {
     isSaving.value = false
   }
@@ -122,7 +122,7 @@ const handleArchive = async (row) => {
 
     await refreshData()
   } catch (e) {
-    toast.add({title: 'Fehler', description: 'Konnte nicht archiviert werden.', color: 'rose'})
+    toast.add({title: 'Fehler', description: 'Konnte nicht archiviert werden.', color: 'error'})
   }
 }
 
@@ -160,45 +160,45 @@ const getDocLabel = (type) => {
 
     <UTable
         class="mt-3"
-        :rows="texttemplates"
+        :data="texttemplates"
         :loading="loading"
         v-model:expand="expand"
-        :empty-state="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
+        :empty="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
-        :columns="[
+        :columns="normalizeTableColumns([
         { key: 'name', label: 'Bezeichnung' },
         { key: 'documentType', label: 'Verwendung' },
         { key: 'pos', label: 'Position' },
         { key: 'default', label: 'Standard' },
         { key: 'actions', label: '' }
-      ]"
+        ])"
     >
-      <template #name-data="{ row }">
+      <template #name-cell="{ row }">
-        <span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span>
+        <span class="font-medium text-gray-900 dark:text-white">{{ row.original.name }}</span>
       </template>
 
-      <template #documentType-data="{ row }">
+      <template #documentType-cell="{ row }">
         <UBadge color="gray" variant="soft">
-          {{ getDocLabel(row.documentType) }}
+          {{ getDocLabel(row.original.documentType) }}
         </UBadge>
       </template>
 
-      <template #pos-data="{ row }">
+      <template #pos-cell="{ row }">
         <div class="flex items-center gap-2">
           <UIcon
-              :name="row.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'"
+              :name="row.original.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'"
               class="w-4 h-4 text-gray-500"
           />
-          <span>{{ row.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
+          <span>{{ row.original.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
         </div>
       </template>
 
-      <template #default-data="{ row }">
+      <template #default-cell="{ row }">
-        <UIcon v-if="row.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
+        <UIcon v-if="row.original.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
         <span v-else class="text-gray-400">-</span>
       </template>
 
-      <template #actions-data="{ row }">
+      <template #actions-cell="{ row }">
-        <UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row)"/>
+        <UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row.original)"/>
       </template>
 
       <template #expand="{ row }">
@@ -206,13 +206,13 @@ const getDocLabel = (type) => {
           <div class="mb-4">
             <h4 class="text-sm font-bold uppercase text-gray-500 mb-1">Vorschau</h4>
             <p class="text-gray-800 dark:text-gray-200 whitespace-pre-line p-3 bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 text-sm">
-              {{ row.text }}
+              {{ row.original.text }}
             </p>
           </div>
 
           <div class="flex justify-end gap-3">
             <ButtonWithConfirm
-                color="rose"
+                color="error"
                 variant="soft"
                 icon="i-heroicons-archive-box"
                 @confirmed="handleArchive(row)"
@@ -236,26 +236,27 @@ const getDocLabel = (type) => {
     </UTable>
   </UDashboardPanelContent>
 
-  <UModal v-model="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
+  <UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
-    <UCard>
+    <template #content>
-      <template #header>
+      <UCard>
-        <div class="flex justify-between items-center">
+        <template #header>
-          <h3 class="text-lg font-semibold">
+          <div class="flex justify-between items-center">
-            {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
+            <h3 class="text-lg font-semibold">
-          </h3>
+              {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
+            </h3>
-        </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
-      </template>
+          </div>
+        </template>
 
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 
         <div class="lg:col-span-2 space-y-4">
-          <UFormGroup label="Bezeichnung" required>
+          <UFormField label="Bezeichnung" required>
             <UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/>
-          </UFormGroup>
+          </UFormField>
 
           <div class="grid grid-cols-2 gap-4">
-            <UFormGroup label="Dokumententyp" required>
+            <UFormField label="Dokumententyp" required>
               <USelectMenu
                   v-model="itemInfo.documentType"
                   :options="Object.keys(dataStore.documentTypesForCreation || {})
@@ -264,9 +265,9 @@ const getDocLabel = (type) => {
                   option-attribute="label"
                   value-attribute="key"
               />
-            </UFormGroup>
+            </UFormField>
 
-            <UFormGroup label="Position" required>
+            <UFormField label="Position" required>
               <USelectMenu
                   v-model="itemInfo.pos"
                   :options="[
@@ -276,10 +277,10 @@ const getDocLabel = (type) => {
                   option-attribute="label"
                   value-attribute="key"
               />
-            </UFormGroup>
+            </UFormField>
           </div>
 
-          <UFormGroup label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
+          <UFormField label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
             <UTextarea
                 ref="textareaRef"
                 v-model="itemInfo.text"
@@ -287,7 +288,7 @@ const getDocLabel = (type) => {
                 placeholder="Sehr geehrte Damen und Herren..."
                 class="font-mono text-sm"
             />
-          </UFormGroup>
+          </UFormField>
 
           <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
         </div>
@@ -342,34 +343,35 @@ const getDocLabel = (type) => {
 
       </div>
 
-      <template #footer>
+        <template #footer>
-        <div class="flex justify-end gap-3">
+          <div class="flex justify-end gap-3">
-          <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
+            <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
-            Abbrechen
+              Abbrechen
-          </UButton>
+            </UButton>
 
-          <UButton
+            <UButton
-              v-if="!itemInfo.id"
+                v-if="!itemInfo.id"
-              color="primary"
+                color="primary"
-              :loading="isSaving"
+                :loading="isSaving"
-              @click="handleCreate"
+                @click="handleCreate"
-              icon="i-heroicons-plus"
+                icon="i-heroicons-plus"
-          >
+            >
-            Erstellen
+              Erstellen
-          </UButton>
+            </UButton>
 
-          <UButton
+            <UButton
-              v-else
+                v-else
-              color="primary"
+                color="primary"
-              :loading="isSaving"
+                :loading="isSaving"
-              @click="handleUpdate"
+                @click="handleUpdate"
-              icon="i-heroicons-check"
+                icon="i-heroicons-check"
-          >
+            >
-            Speichern
+              Speichern
-          </UButton>
+            </UButton>
-        </div>
+          </div>
-      </template>
+        </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 

frontend/pages/staff/profiles/[id].vue

@@ -179,99 +179,99 @@ onMounted(fetchProfile)
         </div>
       </div>
 
-      <UDivider label="Persönliche Daten" />
+      <USeparator label="Persönliche Daten" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Vorname">
+        <UFormField label="Vorname">
           <UInput v-model="profile.first_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Nachname">
+        <UFormField label="Nachname">
           <UInput v-model="profile.last_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="E-Mail">
+        <UFormField label="E-Mail">
           <UInput v-model="profile.email" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Telefon (Mobil)">
+        <UFormField label="Telefon (Mobil)">
           <UInput v-model="profile.mobile_tel" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Telefon (Festnetz)">
+        <UFormField label="Telefon (Festnetz)">
           <UInput v-model="profile.fixed_tel" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Geburtstag">
+        <UFormField label="Geburtstag">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="profile.birthday" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('birthday')" />
           </div>
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
     <UCard v-if="!pending && profile" class="mt-3">
-      <UDivider label="Vertragsinformationen" />
+      <USeparator label="Vertragsinformationen" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Vertragsart">
+        <UFormField label="Vertragsart">
           <UInput v-model="profile.contract_type"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Status">
+        <UFormField label="Status">
           <UInput v-model="profile.status"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Position">
+        <UFormField label="Position">
           <UInput v-model="profile.position"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Qualifikation">
+        <UFormField label="Qualifikation">
           <UInput v-model="profile.qualification"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Eintrittsdatum">
+        <UFormField label="Eintrittsdatum">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="profile.entry_date" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('entry_date')" />
           </div>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Wöchentliche Arbeitszeit (Std)">
+        <UFormField label="Wöchentliche Arbeitszeit (Std)">
           <UInput type="number" v-model="profile.weekly_working_hours" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Bezahlte Urlaubstage (Jahr)">
+        <UFormField label="Bezahlte Urlaubstage (Jahr)">
           <UInput type="number" v-model="profile.annual_paid_leave_days" />
-        </UFormGroup>
+        </UFormField>
-        <UFormGroup label="Aktiv">
+        <UFormField label="Aktiv">
           <div class="flex items-center gap-3">
-            <UToggle v-model="profile.active" color="primary" />
+            <USwitch v-model="profile.active" color="primary" />
             <span class="text-sm text-gray-600">
         </span>
           </div>
-        </UFormGroup>
+        </UFormField>
       </UForm>
 
     </UCard>
 
     <UCard v-if="!pending && profile" class="mt-3">
-      <UDivider label="Adresse & Standort" />
+      <USeparator label="Adresse & Standort" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Straße und Hausnummer">
+        <UFormField label="Straße und Hausnummer">
           <UInput v-model="profile.address_street"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="PLZ">
+        <UFormField label="PLZ">
           <UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ort">
+        <UFormField label="Ort">
           <UInput v-model="profile.address_city"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Bundesland">
+        <UFormField label="Bundesland">
           <USelectMenu
               v-model="profile.state_code"
               :options="bundeslaender"
@@ -279,13 +279,13 @@ onMounted(fetchProfile)
               option-attribute="name"
               placeholder="Bundesland auswählen"
           />
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
 
 
     <UCard v-if="!pending && profile" class="mt-3">
-      <UDivider label="Wöchentliche Arbeitsstunden" />
+      <USeparator label="Wöchentliche Arbeitsstunden" />
 
       <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <div
@@ -313,23 +313,23 @@ onMounted(fetchProfile)
     </UCard>
 
     <UCard v-if="!pending && profile" class="mt-3">
-      <UDivider label="Sonstiges" />
+      <USeparator label="Sonstiges" />
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Kleidergröße (Oberteil)">
+        <UFormField label="Kleidergröße (Oberteil)">
           <UInput v-model="profile.clothing_size_top" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Kleidergröße (Hose)">
+        <UFormField label="Kleidergröße (Hose)">
           <UInput v-model="profile.clothing_size_bottom" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Schuhgröße">
+        <UFormField label="Schuhgröße">
           <UInput v-model="profile.clothing_size_shoe" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Token-ID">
+        <UFormField label="Token-ID">
           <UInput v-model="profile.token_id" />
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
 

frontend/pages/staff/profiles/index.vue

@@ -39,9 +39,9 @@
       </template>
   </UDashboardNavbar>
   <UTable
-    :rows="items"
+    :data="items"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
-    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
+    :on-select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
   >
 
   </UTable>

frontend/pages/staff/time/[id]/evaluate.vue

@@ -29,7 +29,16 @@ const platformIsNative = ref(false)
 const selectedPresetRange = ref("Dieser Monat bis heute")
 const selectedStartDay = ref("")
 const selectedEndDay = ref("")
-const openTab = ref(0)
+const openTab = ref("0")
+const presetRangeItems = [
+  'Dieser Monat bis heute',
+  'Diese Woche',
+  'Dieser Monat',
+  'Dieses Jahr',
+  'Letzte Woche',
+  'Letzter Monat',
+  'Letztes Jahr'
+]
 
 const showDocument = ref(false)
 const uri = ref("")
@@ -131,7 +140,7 @@ async function loadWorkingTimeInfo() {
 
   workingTimeInfo.value = data;
 
-  openTab.value = 0
+  openTab.value = "0"
 }
 
 // 📄 PDF generieren
@@ -172,12 +181,12 @@ async function saveFile() {
     toast.add({title:"Auswertung erfolgreich gespeichert"})
     fileSaved.value = true
   } catch (error) {
-    toast.add({title:"Fehler beim Speichern der Auswertung", color: "rose"})
+    toast.add({title:"Fehler beim Speichern der Auswertung", color: "error"})
   }
 }
 
-async function onTabChange(index: number) {
+async function onTabChange(index: string | number) {
-  if (index === 1) await generateDocument()
+  if (String(index) === "1") await generateDocument()
 }
 
 // Initialisierung
@@ -204,52 +213,44 @@ await setupPage()
       </template>
     </UDashboardNavbar>
 
-    <UDashboardToolbar>
+    <UDashboardToolbar class="py-3">
       <template #left>
-        <UFormGroup label="Zeitraum:">
+        <UFormField label="Zeitraum:">
           <USelectMenu
-              :options="[
+              :items="presetRangeItems"
-            'Dieser Monat bis heute',
-            'Diese Woche',
-            'Dieser Monat',
-            'Dieses Jahr',
-            'Letzte Woche',
-            'Letzter Monat',
-            'Letztes Jahr'
-          ]"
               v-model="selectedPresetRange"
               @change="changeRange"
           />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Start:">
+        <UFormField label="Start:">
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover :content="{ side: 'bottom', align: 'start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="selectedStartDay ? $dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum wählen'"
             />
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ende:">
+        <UFormField label="Ende:">
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover :content="{ side: 'bottom', align: 'start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="selectedEndDay ? $dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum wählen'"
             />
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
       </template>
       <template #right>
         <UTooltip
             :text="fileSaved ? 'Bericht bereits gespeichert' : 'Bericht speichern'"
-            v-if="openTab === 1 && uri"
+            v-if="openTab === '1' && uri"
         >
           <UButton
               icon="i-mdi-content-save"
@@ -265,9 +266,9 @@ await setupPage()
       <UTabs
           :items="[{ label: 'Information' }, { label: 'Bericht' }]"
           v-model="openTab"
-          @change="onTabChange"
+          @update:model-value="onTabChange"
       >
-        <template #item="{ item }">
+        <template #content="{ item }">
           <div v-if="item.label === 'Information'">
 
             <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5">
@@ -294,39 +295,39 @@ await setupPage()
             <UDashboardPanel>
               <UTable
                   v-if="workingTimeInfo"
-                  :rows="workingTimeInfo.spans"
+                  :data="workingTimeInfo.spans"
-                  :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
+                  :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
-                  :columns="[
+                  :columns="normalizeTableColumns([
                 { key: 'status', label: 'Status' },
                 { key: 'startedAt', label: 'Start' },
                 { key: 'endedAt', label: 'Ende' },
                 { key: 'duration', label: 'Dauer' },
                 { key: 'type', label: 'Typ' }
-              ]"
+                  ])"
-                  @select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)"
+                  :on-select="(row) => router.push(`/workingtimes/edit/${row.original.sourceEventIds[0]}`)"
               >
-                <template #status-data="{row}">
+                <template #status-cell="{ row }">
-                  <span v-if="row.status === 'approved'" class="text-primary-500">Genehmigt</span>
+                  <span v-if="row.original.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.original.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.original.status === 'factual'" class="text-gray-500">Faktisch</span>
-                  <span v-else-if="row.status === 'draft'" class="text-red-500">Entwurf</span>
+                  <span v-else-if="row.original.status === 'draft'" class="text-error-500">Entwurf</span>
-                  <span v-else>{{ row.status }}</span>
+                  <span v-else>{{ row.original.status }}</span>
                 </template>
 
-                <template #startedAt-data="{ row }">
+                <template #startedAt-cell="{ row }">
-                  {{ $dayjs(row.startedAt).format('HH:mm DD.MM.YY') }} Uhr
+                  {{ $dayjs(row.original.startedAt).format('HH:mm DD.MM.YY') }} Uhr
                 </template>
 
-                <template #endedAt-data="{ row }">
+                <template #endedAt-cell="{ row }">
-                  {{ $dayjs(row.endedAt).format('HH:mm DD.MM.YY') }} Uhr
+                  {{ $dayjs(row.original.endedAt).format('HH:mm DD.MM.YY') }} Uhr
                 </template>
 
-                <template #duration-data="{ row }">
+                <template #duration-cell="{ row }">
-                  {{ formatSpanDuration(row.startedAt, row.endedAt) }}
+                  {{ formatSpanDuration(row.original.startedAt, row.original.endedAt) }}
                 </template>
 
-                <template #type-data="{ row }">
+                <template #type-cell="{ row }">
-                  {{ row.type.charAt(0).toUpperCase() + row.type.slice(1).replace('_', ' ') }}
+                  {{ row.original.type.charAt(0).toUpperCase() + row.original.type.slice(1).replace('_', ' ') }}
                 </template>
               </UTable>
             </UDashboardPanel>
@@ -360,15 +361,7 @@ await setupPage()
     <div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900">
       <USelectMenu
           v-model="selectedPresetRange"
-          :options="[
+          :items="presetRangeItems"
-          'Dieser Monat bis heute',
-          'Diese Woche',
-          'Dieser Monat',
-          'Dieses Jahr',
-          'Letzte Woche',
-          'Letzter Monat',
-          'Letztes Jahr'
-        ]"
           @change="changeRange"
           placeholder="Zeitraum wählen"
           class="w-full"
@@ -377,13 +370,13 @@ await setupPage()
       <div class="grid grid-cols-2 gap-3">
         <div>
           <p class="text-xs text-gray-500 mb-1">Start</p>
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover :content="{ side: 'bottom', align: 'start' }">
             <UButton
                 icon="i-heroicons-calendar"
                 class="w-full"
                 :label="$dayjs(selectedStartDay).format('DD.MM.YYYY')"
             />
-            <template #panel>
+            <template #content>
               <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
             </template>
           </UPopover>
@@ -391,13 +384,13 @@ await setupPage()
 
         <div>
           <p class="text-xs text-gray-500 mb-1">Ende</p>
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover :content="{ side: 'bottom', align: 'start' }">
             <UButton
                 icon="i-heroicons-calendar"
                 class="w-full"
                 :label="$dayjs(selectedEndDay).format('DD.MM.YYYY')"
             />
-            <template #panel>
+            <template #content>
               <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
             </template>
           </UPopover>
@@ -408,12 +401,11 @@ await setupPage()
     <UTabs
         :items="[{ label: 'Information' }, { label: 'Bericht' }]"
         v-model="openTab"
-        @change="onTabChange"
+        @update:model-value="onTabChange"
         class="mt-3 mx-3"
     >
-      <template #item="{ item }">
+      <template #content="{ item }">
-
+          <div v-if="item.label === 'Information'" class="space-y-4">
-        <div v-if="item.label === 'Information'" class="space-y-4">
 
           <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3">
             <template #header>
@@ -459,7 +451,7 @@ await setupPage()
 
         <div v-else-if="item.label === 'Bericht'">
           <UButton
-              v-if="uri && !fileSaved"
+              v-if="openTab === '1' && uri && !fileSaved"
               icon="i-mdi-content-save"
               color="primary"
               class="w-full mb-3"

frontend/pages/staff/time/index.vue

@@ -32,6 +32,10 @@ const rejectReason = ref("")
 const users = ref([])
 const selectedUser = ref(auth.user.id)
 const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
+const userItems = computed(() => users.value.map(u => ({
+  label: u.full_name || u.email,
+  value: u.user_id
+})))
 
 // DATA
 const entries = ref([])
@@ -61,7 +65,7 @@ const typeLabel = {
 const typeColor = {
   work: "gray",
   vacation: "yellow",
-  sick: "rose",
+  sick: "error",
   holiday: "blue",
   other: "gray"
 }
@@ -130,7 +134,7 @@ async function confirmReject() {
     showRejectModal.value = false
     await load()
   } catch (e) {
-    toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' })
+    toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'error' })
   } finally {
     loading.value = false
     entryToReject.value = null
@@ -167,10 +171,10 @@ onMounted(async () => {
           <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 }))"
+                :items="userItems"
                 placeholder="Benutzer auswählen"
-                value-attribute="value"
+                value-key="value"
-                option-attribute="label"
+                label-key="label"
                 class="min-w-[220px]"
                 :clearable="false"
             />
@@ -211,11 +215,11 @@ onMounted(async () => {
           </div>
 
           <template v-if="isViewingSelf">
-            <UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
+            <UButton v-if="active" color="error" 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" />
+            <UButton color="error" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
           </template>
 
           <UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
@@ -227,8 +231,8 @@ onMounted(async () => {
 
       <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
         <UTable
-            :rows="entries"
+            :data="entries"
-            :columns="[
+            :columns="normalizeTableColumns([
               { key: 'actions', label: 'Aktionen', class: 'w-32' },
               { key: 'state', label: 'Status' },
               { key: 'started_at', label: 'Start' },
@@ -236,50 +240,50 @@ onMounted(async () => {
               { 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' }"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
         >
-          <template #state-data="{ row }">
+          <template #state-cell="{ row }">
-            <UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
+            <UBadge v-if="row.original.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.original.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
-            <UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
+            <UBadge v-else-if="row.original.state === 'rejected'" color="error" variant="subtle">Abgelehnt</UBadge>
             <UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
           </template>
-          <template #type-data="{ row }">
+          <template #type-cell="{ row }">
-            <UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
+            <UBadge :color="typeColor[row.original.type] || 'gray'" variant="soft">{{ typeLabel[row.original.type] || row.original.type }}</UBadge>
           </template>
-          <template #started_at-data="{ row }">
+          <template #started_at-cell="{ row }">
-            <span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
+            <span v-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY") }}</span>
-            <span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY HH:mm") }}</span>
           </template>
-          <template #stopped_at-data="{ row }">
+          <template #stopped_at-cell="{ row }">
-            <span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
+            <span v-if="!row.original.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-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY") }}</span>
-            <span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY HH:mm") }}</span>
           </template>
-          <template #duration_minutes-data="{ row }">
+          <template #duration_minutes-cell="{ row }">
-            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
+            {{ row.original.duration_minutes ? useFormatDuration(row.original.duration_minutes) : "-" }}
           </template>
-          <template #actions-data="{ row }">
+          <template #actions-cell="{ row }">
             <div class="flex items-center gap-1">
-              <UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
+              <UTooltip text="Einreichen" v-if="(row.original.state === 'draft' || row.original.state === 'factual') && row.original.stopped_at">
-                <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
+                <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row.original)" :loading="loading" />
               </UTooltip>
-              <UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
+              <UTooltip text="Genehmigen" v-if="row.original.state === 'submitted' && canViewAll">
-                <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
+                <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row.original)" :loading="loading" />
               </UTooltip>
-              <UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
+              <UTooltip text="Ablehnen" v-if="(row.original.state === 'submitted' || row.original.state === 'approved') && canViewAll">
-                <UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
+                <UButton size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row.original)" :loading="loading" />
               </UTooltip>
-              <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
+              <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.original.state)">
-                <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
+                <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row.original)" />
               </UTooltip>
             </div>
           </template>
-          <template #description-data="{ row }">
+          <template #description-cell="{ row }">
-            <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
+            <span v-if="row.original.type === 'vacation'">{{ row.original.vacation_reason }}</span>
-            <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
+            <span v-else-if="row.original.type === 'sick'">{{ row.original.sick_reason }}</span>
-            <span v-else>{{row.description}}</span>
+            <span v-else>{{ row.original.description }}</span>
           </template>
         </UTable>
       </UCard>
@@ -334,7 +338,7 @@ onMounted(async () => {
 
                     <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-if="entry.state === 'rejected'" color="error" size="xs" variant="solid">Abgelehnt</UBadge>
                     <UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
                   </div>
                 </div>
@@ -363,7 +367,7 @@ onMounted(async () => {
 
                   <UButton
                       v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
-                      size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
+                      size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
                       @click="openRejectModal(entry)" :loading="loading"
                   />
 
@@ -403,7 +407,7 @@ onMounted(async () => {
             </div>
             <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-if="active" color="error" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
                 <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
               </template>
             </div>
@@ -422,7 +426,7 @@ onMounted(async () => {
             </div>
             <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-if="row.state === 'rejected'" color="error">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>
@@ -444,30 +448,32 @@ onMounted(async () => {
       :default-user-id="selectedUser"
   />
 
-  <UModal v-model="showRejectModal">
+  <UModal v-model:open="showRejectModal">
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+    <template #content>
-      <template #header>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <div class="flex items-center justify-between">
+        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <div class="flex items-center justify-between">
-            Zeiteintrag ablehnen
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-          </h3>
+              Zeiteintrag ablehnen
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
+            </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>
+          <UFormField label="Grund (optional)" name="reason">
+            <UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
+          </UFormField>
         </div>
-      </template>
+        <template #footer>
-      <div class="space-y-4">
+          <div class="flex justify-end gap-2">
-        <p class="text-sm text-gray-500">
+            <UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
-          Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
+            <UButton color="error" :loading="loading" @click="confirmReject">Bestätigen</UButton>
-        </p>
+          </div>
-        <UFormGroup label="Grund (optional)" name="reason">
+        </template>
-          <UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
+      </UCard>
-        </UFormGroup>
+    </template>
-      </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>

frontend/pages/standardEntity/[type]/index.vue

@@ -73,6 +73,24 @@ const sort = ref({
   column: dataType.sortColumn || "created_at",
   direction: 'desc'
 })
+const sorting = computed({
+  get: () => [{
+    id: sort.value.column,
+    desc: sort.value.direction === 'desc'
+  }],
+  set: (value) => {
+    const nextSort = Array.isArray(value) ? value[0] : undefined
+    if (!nextSort?.id) {
+      return
+    }
+
+    sort.value = {
+      column: nextSort.id,
+      direction: nextSort.desc ? 'desc' : 'asc'
+    }
+    setupPage()
+  }
+})
 
 const columnsToFilter = ref({})
 
@@ -282,6 +300,33 @@ const handleFilterChange = async (action,column) => {
   setupPage()
 }
 
+const truncateValue = (value, maxLength) => {
+  if (value === null || value === undefined || value === '') {
+    return '\u00A0'
+  }
+
+  const stringValue = String(value)
+  if (!maxLength || stringValue.length <= maxLength) {
+    return stringValue
+  }
+
+  return `${stringValue.substring(0, maxLength)}...`
+}
+
+const getDistinctFilterItems = (columnKey) => {
+  return (itemsMeta.value?.distinctValues?.[columnKey] || []).map((value) => ({
+    label: String(value),
+    value
+  }))
+}
+
+const isDistinctFilterActive = (columnKey) => {
+  const available = itemsMeta.value?.distinctValues?.[columnKey] || []
+  const selected = columnsToFilter.value[columnKey] || []
+
+  return selected.length > 0 && selected.length !== available.length
+}
+
 
 
 </script>
@@ -313,7 +358,7 @@ const handleFilterChange = async (action,column) => {
         <UButton
             icon="i-heroicons-x-mark"
             variant="outline"
-            color="rose"
+            color="error"
             @click="clearSearchString()"
 
         />
@@ -336,11 +381,11 @@ const handleFilterChange = async (action,column) => {
     <template #left>
       <UTooltip :text="`${dataType.label} pro Seite`">
         <USelectMenu
-            :options="[{value:10},{value:15, disabled: itemsMeta.total < 15},{value:25, disabled: itemsMeta.total < 25},{value:50, disabled: itemsMeta.total < 50},{value:100, disabled: itemsMeta.total < 100},{value:250, disabled: itemsMeta.total < 250}]"
+            :items="[{value:10},{value:15, disabled: itemsMeta.total < 15},{value:25, disabled: itemsMeta.total < 25},{value:50, disabled: itemsMeta.total < 50},{value:100, disabled: itemsMeta.total < 100},{value:250, disabled: itemsMeta.total < 250}]"
             v-model="pageLimit"
-            value-attribute="value"
+            value-key="value"
-            option-attribute="value"
+            label-key="value"
-            @change="setupPage"
+            @update:model-value="setupPage"
         />
       </UTooltip>
       <UPagination
@@ -363,15 +408,15 @@ const handleFilterChange = async (action,column) => {
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
             multiple
             class="hidden lg:block"
             by="key"
             :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-            :ui-menu="{ width: 'min-w-max' }"
+            :content="{ width: 'min-w-max' }"
-            @change="tempStore.modifyColumns(type,selectedColumns)"
+            @update:model-value="tempStore.modifyColumns(type, selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
@@ -382,18 +427,15 @@ const handleFilterChange = async (action,column) => {
   <div v-if="!platformIsNative">
     <UTable
         :loading="loading"
-        :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+        v-model:sorting="sorting"
-        sort-mode="manual"
-        v-model:sort="sort"
-        @update:sort="setupPage"
         v-if="dataType && columns && items.length > 0  && !loading"
-        :rows="items"
+        :data="items"
-        :columns="columns"
+        :columns="normalizeTableColumns(columns)"
         class="w-full"
         style="height: 85dvh"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+        :on-select="(row) => router.push(`/standardEntity/${type}/show/${row.original.id}`)"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+        :empty="`Keine ${dataType.label} anzuzeigen`"
     >
       <template
           v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
@@ -414,33 +456,26 @@ const handleFilterChange = async (action,column) => {
               :text="!columnsToFilter[column.key]?.length > 0 ? `Keine Einträge für ${column.label} verfügbar`  : `${column.label} Spalte nach Einträgen filtern`"
           >
             <USelectMenu
-                :options="itemsMeta?.distinctValues?.[column.key]"
+                class="min-w-0"
+                :items="getDistinctFilterItems(column.key)"
                 v-model="columnsToFilter[column.key]"
                 multiple
-                @change="handleFilterChange('change', column.key)"
+                @update:model-value="handleFilterChange('change', column.key)"
-                searchable
+                :search-input="{ placeholder: 'Suche...' }"
-                searchable-placeholder="Suche..."
+                value-key="value"
-                :search-attributes="[column.key]"
+                label-key="label"
-                :ui-menu="{ width: 'min-w-max' }"
+                :content="{ width: 'min-w-max' }"
-                clear-search-on-close
+                :disabled="getDistinctFilterItems(column.key).length === 0"
             >
 
               <template #empty>
                 Keine Einträge in der Spalte {{column.label}}
               </template>
-              <template #default="{open}">
+              <template #default="slotProps">
-                <UButton
+                <span class="inline-flex min-w-0 items-center">
-                    :disabled="!columnsToFilter[column.key]?.length > 0"
-                    :variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'"
-                    :color="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'primary' : 'white'"
-                >
                   <span class="truncate">{{ column.label }}</span>
-
+                </span>
-                  <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
-                </UButton>
               </template>
-
-
             </USelectMenu>
           </UTooltip>
           <UButton
@@ -458,7 +493,7 @@ const handleFilterChange = async (action,column) => {
             <UButton
                 @click="handleFilterChange('reset',column.key)"
                 variant="outline"
-                color="rose"
+                color="error"
             >
               X
             </UButton>
@@ -468,48 +503,54 @@ const handleFilterChange = async (action,column) => {
         </InputGroup>
 
       </template>
-      <template #name-data="{row}">
+      <template #name-cell="{row}">
       <span
-          v-if="row.id === items[selectedItem].id"
+          v-if="row.original.id === items[selectedItem]?.id"
-          class="text-primary-500 font-bold">
+          class="block truncate text-primary-500 font-bold">
         <UTooltip
-            :text="row.name"
+            :text="row.original.name"
         >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>      </span>
-        <span v-else>
+        <span v-else class="block truncate">
         <UTooltip
-            :text="row.name"
+            :text="row.original.name"
         >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>
       </span>
       </template>
-      <template #fullName-data="{row}">
+      <template #fullName-cell="{row}">
       <span
-          v-if="row.id === items[selectedItem].id"
+          v-if="row.original.id === items[selectedItem]?.id"
-          class="text-primary-500 font-bold">{{row.fullName}}
+          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
       </span>
-        <span v-else>
+        <span v-else class="block truncate">
-        {{row.fullName}}
+        {{ row.original.fullName }}
       </span>
       </template>
-      <template #licensePlate-data="{row}">
+      <template #licensePlate-cell="{row}">
       <span
-          v-if="row.id === items[selectedItem].id"
+          v-if="row.original.id === items[selectedItem]?.id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
+          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
       </span>
-        <span v-else>
+        <span v-else class="block truncate">
-        {{row.licensePlate}}
+        {{ row.original.licensePlate }}
       </span>
       </template>
       <template
           v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
-          v-slot:[`${column.key}-data`]="{row}">
+          v-slot:[`${column.key}-cell`]="{row}">
-        <component v-if="column.component" :is="column.component" :row="row"></component>
+        <component v-if="column.component" :is="column.component" :row="row.original"></component>
-        <span v-else-if="row[column.key]">
+        <span v-else-if="row.original[column.key]" class="block truncate">
-        <UTooltip :text="row[column.key]">
+        <UTooltip :text="String(row.original[column.key])">
-        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
+          <span class="block truncate">
+            {{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
+          </span>
       </UTooltip>
       </span>
 
@@ -550,7 +591,7 @@ const handleFilterChange = async (action,column) => {
             v-if="searchString.length > 0"
             icon="i-heroicons-x-mark"
             variant="ghost"
-            color="rose"
+            color="error"
             @click="clearSearchString()"
 
         />
@@ -639,70 +680,75 @@ const handleFilterChange = async (action,column) => {
     </UDashboardPanelContent>
     <!-- Mobile Filter Slideover -->
     <USlideover
-        v-model="showMobileFilter"
+        v-model:open="showMobileFilter"
         side="bottom"
         :ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }"
         class="pb-[env(safe-area-inset-bottom)]"
     >
-      <!-- Header -->
+      <template #body>
-      <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
+        <!-- Header -->
-        <h2 class="text-xl font-bold">Filter</h2>
+        <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
-        <UButton
+          <h2 class="text-xl font-bold">Filter</h2>
-            icon="i-heroicons-x-mark"
+          <UButton
-            variant="ghost"
+              icon="i-heroicons-x-mark"
-            @click="showMobileFilter = false"
+              variant="ghost"
-        />
+              @click="showMobileFilter = false"
-      </div>
-
-      <!-- Scrollable content -->
-      <div class="flex-1 overflow-y-auto p-4 space-y-6">
-
-        <div
-            v-for="column in dataType.templateColumns.filter(c => c.distinct)"
-            :key="column.key"
-            class="space-y-2"
-        >
-          <p class="font-semibold">{{ column.label }}</p>
-
-          <USelectMenu
-              v-model="columnsToFilter[column.key]"
-              :options="itemsMeta?.distinctValues?.[column.key]"
-              multiple
-              searchable
-              :search-attributes="[column.key]"
-              placeholder="Auswählen…"
-              :ui-menu="{ width: '100%' }"
           />
         </div>
 
-      </div>
+        <!-- Scrollable content -->
+        <div class="flex-1 overflow-y-auto p-4 space-y-6">
 
-      <!-- Footer FIXED in card -->
+          <div
-      <div
+              v-for="column in dataType.templateColumns.filter(c => c.distinct)"
-          class="
+              :key="column.key"
-        flex justify-between gap-3
+              class="space-y-2"
-        px-4 py-4 border-t flex-shrink-0
+          >
-        bg-white dark:bg-gray-900
+            <p class="font-semibold">{{ column.label }}</p>
-        rounded-b-2xl
-      "
-      >
-        <UButton
-            color="rose"
-            variant="outline"
-            class="flex-1"
-            @click="resetMobileFilters"
-        >
-          Zurücksetzen
-        </UButton>
 
-        <UButton
+            <USelectMenu
-            color="primary"
+                v-model="columnsToFilter[column.key]"
-            class="flex-1"
+                :items="getDistinctFilterItems(column.key)"
-            @click="applyMobileFilters"
+                multiple
+                value-key="value"
+                label-key="label"
+                :search-input="{ placeholder: `${column.label} filtern...` }"
+                :filter-fields="['label']"
+                placeholder="Auswählen…"
+                :content="{ width: 'w-full' }"
+                class="w-full"
+            />
+          </div>
+
+        </div>
+
+        <!-- Footer FIXED in card -->
+        <div
+            class="
+          flex justify-between gap-3
+          px-4 py-4 border-t flex-shrink-0
+          bg-white dark:bg-gray-900
+          rounded-b-2xl
+        "
         >
-          Anwenden
+          <UButton
-        </UButton>
+              color="error"
-      </div>
+              variant="outline"
+              class="flex-1"
+              @click="resetMobileFilters"
+          >
+            Zurücksetzen
+          </UButton>
+
+          <UButton
+              color="primary"
+              class="flex-1"
+              @click="applyMobileFilters"
+          >
+            Anwenden
+          </UButton>
+        </div>
+      </template>
     </USlideover>