2. Zwischenstand

This reverts commit 6c3c318f86.

backend/db/migrations/0021_admin_user_flag.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "auth_users"
+ADD COLUMN "is_admin" boolean NOT NULL DEFAULT false;

backend/db/migrations/0022_task_dependencies.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "tasks"
+ADD COLUMN "dependency_ids" jsonb NOT NULL DEFAULT '[]'::jsonb;

backend/db/migrations/0023_tax_evaluation_period.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "tenants"
+ADD COLUMN "taxEvaluationPeriod" text DEFAULT 'monthly' NOT NULL;

backend/db/migrations/meta/_journal.json

@@ -148,6 +148,20 @@
       "when": 1773835200000,
       "tag": "0021_admin_user_flag",
       "breakpoints": true
+    },
+    {
+      "idx": 21,
+      "version": "7",
+      "when": 1773925200000,
+      "tag": "0022_task_dependencies",
+      "breakpoints": true
+    },
+    {
+      "idx": 22,
+      "version": "7",
+      "when": 1774080000000,
+      "tag": "0023_tax_evaluation_period",
+      "breakpoints": true
     }
   ]
 }

backend/db/schema/tenants.ts

@@ -161,6 +161,10 @@ export const tenants = pgTable(
             .notNull()
             .default(14),
 
+        taxEvaluationPeriod: text("taxEvaluationPeriod")
+            .notNull()
+            .default("monthly"),
+
         dokuboxEmailAddresses: jsonb("dokuboxEmailAddresses").default([]),
 
         dokuboxkey: uuid("dokuboxkey").notNull().defaultRandom(),

backend/src/modules/serialexecution.service.ts

@@ -1,6 +1,5 @@
 import dayjs from "dayjs";
 import quarterOfYear from "dayjs/plugin/quarterOfYear";
-import Handlebars from "handlebars";
 import axios from "axios";
 import { eq, inArray, and } from "drizzle-orm"; // Drizzle Operatoren
 
@@ -10,6 +9,7 @@ import { saveFile } from "../utils/files";
 import {FastifyInstance} from "fastify";
 import {useNextNumberRangeNumber} from "../utils/functions";
 import {createInvoicePDF} from "../utils/pdf"; // Achtung: Muss Node.js Buffer unterstützen!
+import { documentTemplateHandlebars } from "../utils/handlebars";
 
 dayjs.extend(quarterOfYear);
 
@@ -609,8 +609,8 @@ export function getDocumentDataBackend(
         };
     };
 
-    const templateStartText = Handlebars.compile(itemInfo.startText || "");
-    const templateEndText = Handlebars.compile(itemInfo.endText || "");
+    const templateStartText = documentTemplateHandlebars.compile(itemInfo.startText || "");
+    const templateEndText = documentTemplateHandlebars.compile(itemInfo.endText || "");
 
     // --- 6. Title Sums Formatting ---
     let returnTitleSums: Record<string, string> = {};

backend/src/routes/admin.ts

@@ -30,6 +30,7 @@ export default async function adminRoutes(server: FastifyInstance) {
 
     const createTenantSeeds = async (tenantId: number, createdBy: string) => {
         const currentYear = new Date().getFullYear();
+        const timestamp = new Date();
 
         const insertedTags = await server.db
             .insert(filetags)
@@ -84,77 +85,148 @@ export default async function adminRoutes(server: FastifyInstance) {
         const deliveryTag = insertedTags.find((tag) => tag.createdDocumentType === "deliveryNotes");
         const incomingInvoiceTag = insertedTags.find((tag) => tag.incomingDocumentType === "invoices");
 
-        await server.db
+        const insertedFolders = await server.db
             .insert(folders)
             .values([
                 {
                     tenant: tenantId,
                     name: "Ausgangsrechnungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-document-text",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Angebote",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-document-duplicate",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Auftragsbestätigungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-clipboard-document-check",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Lieferscheine",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-truck",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Eingangsrechnungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-inbox-arrow-down",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Belege Bankeinzahlung",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-banknotes",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+            ])
+            .returning({
+                id: folders.id,
+                name: folders.name,
+            });
+
+        const folderByName = new Map(insertedFolders.map((folder) => [folder.name, folder.id]));
+
+        await server.db
+            .insert(folders)
+            .values([
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Ausgangsrechnungen"),
                     function: "invoices",
                     year: currentYear,
                     icon: "i-heroicons-document-text",
                     standardFiletype: invoiceTag?.id,
                     standardFiletypeIsOptional: false,
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
                 {
                     tenant: tenantId,
-                    name: "Angebote",
+                    name: String(currentYear),
+                    parent: folderByName.get("Angebote"),
                     function: "quotes",
                     year: currentYear,
                     icon: "i-heroicons-document-duplicate",
                     standardFiletype: quoteTag?.id,
                     standardFiletypeIsOptional: false,
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
                 {
                     tenant: tenantId,
-                    name: "Auftragsbestätigungen",
+                    name: String(currentYear),
+                    parent: folderByName.get("Auftragsbestätigungen"),
                     function: "confirmationOrders",
                     year: currentYear,
                     icon: "i-heroicons-clipboard-document-check",
                     standardFiletype: confirmationTag?.id,
                     standardFiletypeIsOptional: false,
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
                 {
                     tenant: tenantId,
-                    name: "Lieferscheine",
+                    name: String(currentYear),
+                    parent: folderByName.get("Lieferscheine"),
                     function: "deliveryNotes",
                     year: currentYear,
                     icon: "i-heroicons-truck",
                     standardFiletype: deliveryTag?.id,
                     standardFiletypeIsOptional: false,
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
                 {
                     tenant: tenantId,
-                    name: "Eingangsrechnungen",
+                    name: String(currentYear),
+                    parent: folderByName.get("Eingangsrechnungen"),
                     function: "incomingInvoices",
                     year: currentYear,
                     icon: "i-heroicons-inbox-arrow-down",
                     standardFiletype: incomingInvoiceTag?.id,
                     standardFiletypeIsOptional: false,
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
                 {
                     tenant: tenantId,
-                    name: "Belege Bankeinzahlung",
+                    name: String(currentYear),
+                    parent: folderByName.get("Belege Bankeinzahlung"),
                     function: "deposit",
                     year: currentYear,
                     icon: "i-heroicons-banknotes",
                     isSystemUsed: true,
-                    updatedAt: new Date(),
+                    updatedAt: timestamp,
                     updatedBy: createdBy,
                 },
             ]);

backend/src/routes/auth/me.ts

@@ -57,6 +57,7 @@ export default async function meRoutes(server: FastifyInstance) {
                     businessInfo: tenants.businessInfo,
                     numberRanges: tenants.numberRanges,
                     accountChart: tenants.accountChart,
+                    taxEvaluationPeriod: tenants.taxEvaluationPeriod,
                     dokuboxkey: tenants.dokuboxkey,
                     standardEmailForInvoices: tenants.standardEmailForInvoices,
                     standardPaymentDays: tenants.standardPaymentDays,

backend/src/routes/files.ts

@@ -237,7 +237,7 @@ export default async function fileRoutes(server: FastifyInstance) {
                 // MULTIPLE PRESIGNED URLs
                 // -------------------------------------------------
                 if (!ids || !Array.isArray(ids) || ids.length === 0) {
-                    return reply.code(400).send({ error: "No ids provided" })
+                    return { files: [] }
                 }
 
                 const rows = await server.db

backend/src/routes/functions.ts

@@ -2,6 +2,10 @@ import { FastifyInstance } from "fastify";
 import {createInvoicePDF, createTimeSheetPDF} from "../utils/pdf";
 import {encodeBase64ToNiimbot, generateLabel, useNextNumberRangeNumber} from "../utils/functions";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { execFile } from "node:child_process";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { promisify } from "node:util";
 import dayjs from "dayjs";
 //import { ready as zplReady } from 'zpl-renderer-js'
 //import { renderZPL } from "zpl-image";
@@ -28,6 +32,31 @@ dayjs.extend(isSameOrBefore)
 dayjs.extend(duration)
 dayjs.extend(timezone)
 
+const execFileAsync = promisify(execFile)
+
+function resolveGitRoot() {
+    const searchRoots = [
+        process.cwd(),
+        path.resolve(process.cwd(), ".."),
+        path.resolve(__dirname, "../../.."),
+        path.resolve(__dirname, "../../../.."),
+    ]
+
+    for (const startDir of searchRoots) {
+        let currentDir = startDir
+
+        while (currentDir && currentDir !== path.dirname(currentDir)) {
+            if (existsSync(path.join(currentDir, ".git"))) {
+                return currentDir
+            }
+
+            currentDir = path.dirname(currentDir)
+        }
+    }
+
+    return null
+}
+
 export default async function functionRoutes(server: FastifyInstance) {
     const streamToBuffer = async (stream: any): Promise<Buffer> =>
         new Promise((resolve, reject) => {
@@ -162,6 +191,55 @@ export default async function functionRoutes(server: FastifyInstance) {
         }
     })
 
+    server.get('/functions/changelog', async (req, reply) => {
+        const { limit } = req.query as { limit?: string | number }
+        const parsedLimit = Number(limit)
+        const safeLimit = Number.isFinite(parsedLimit)
+            ? Math.min(Math.max(parsedLimit, 1), 50)
+            : 15
+
+        const gitRoot = resolveGitRoot()
+
+        if (!gitRoot) {
+            return reply.code(500).send({ error: 'Git repository not found' })
+        }
+
+        try {
+            const { stdout } = await execFileAsync('git', [
+                '-C',
+                gitRoot,
+                'log',
+                `--max-count=${safeLimit}`,
+                '--date=iso-strict',
+                '--pretty=format:%H%x1f%h%x1f%s%x1f%an%x1f%aI%x1e'
+            ])
+
+            const entries = stdout
+                .split('\x1e')
+                .map(entry => entry.trim())
+                .filter(Boolean)
+                .map(entry => {
+                    const [hash, shortHash, subject, authorName, committedAt] = entry.split('\x1f')
+
+                    return {
+                        hash,
+                        shortHash,
+                        subject,
+                        authorName,
+                        committedAt
+                    }
+                })
+
+            return reply.send({
+                repositoryRoot: gitRoot,
+                entries
+            })
+        } catch (err) {
+            req.log.error(err)
+            return reply.code(500).send({ error: 'Failed to load changelog' })
+        }
+    })
+
     server.post('/functions/serial/start', async (req, reply) => {
         console.log(req.body)
         const {executionDate,templateIds,tenantId} = req.body as {executionDate:string,templateIds:Number[],tenantId:Number}

backend/src/utils/handlebars.ts

@@ -0,0 +1,26 @@
+import Handlebars from "handlebars";
+
+const createDocumentTemplateHandlebars = () => {
+    const instance = Handlebars.create();
+
+    instance.registerHelper("eq", (left, right) => left === right);
+    instance.registerHelper("ne", (left, right) => left !== right);
+    instance.registerHelper("gt", (left, right) => left > right);
+    instance.registerHelper("gte", (left, right) => left >= right);
+    instance.registerHelper("lt", (left, right) => left < right);
+    instance.registerHelper("lte", (left, right) => left <= right);
+    instance.registerHelper("and", (...args) => args.slice(0, -1).every(Boolean));
+    instance.registerHelper("or", (...args) => args.slice(0, -1).some(Boolean));
+    instance.registerHelper("not", (value) => !value);
+    instance.registerHelper("includes", (collection, value) => {
+        if (Array.isArray(collection) || typeof collection === "string") {
+            return collection.includes(value);
+        }
+
+        return false;
+    });
+
+    return instance;
+};
+
+export const documentTemplateHandlebars = createDocumentTemplateHandlebars();

frontend/app.config.ts

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

frontend/app.vue

@@ -47,14 +47,16 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="safearea">
-    <NuxtLayout>
-      <NuxtPage/>
-    </NuxtLayout>
-    <UNotifications/>
-    <USlideovers />
-    <UModals/>
-  </div>
+  <UApp>
+    <div class="safearea">
+      <NuxtLayout>
+        <NuxtPage/>
+      </NuxtLayout>
+      <UNotifications/>
+      <USlideovers />
+      <UModals/>
+    </div>
+  </UApp>
 
 
 
@@ -136,4 +138,4 @@ useSeoMeta({
 .scroll {
   overflow-y: scroll;
 }
-</style>
+</style>

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

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">
-    <UCard>
-      <template #header>Neue Bankverbindung erstellen</template>
-      <div class="space-y-3">
-        <UFormGroup label="IBAN">
-          <InputGroup>
-            <UInput
-                v-model="createPayload.iban"
-                @blur="resolveCreatePayloadFromIban"
-                @keydown.enter.prevent="resolveCreatePayloadFromIban"
-            />
-            <UButton
-                color="gray"
-                variant="outline"
-                :loading="resolvingIban"
-                @click="resolveCreatePayloadFromIban"
-            >
-              Ermitteln
-            </UButton>
-          </InputGroup>
-        </UFormGroup>
-        <UFormGroup label="BIC">
-          <UInput v-model="createPayload.bic" />
-        </UFormGroup>
-        <UFormGroup label="Bankinstitut">
-          <UInput v-model="createPayload.bankName" />
-        </UFormGroup>
-        <UFormGroup label="Beschreibung (optional)">
-          <UInput v-model="createPayload.description" />
-        </UFormGroup>
-      </div>
-      <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>
+  <UModal v-model:open="showCreate">
+    <template #content>
+      <UCard>
+        <template #header>Neue Bankverbindung erstellen</template>
+        <div class="space-y-3">
+          <UFormField label="IBAN">
+            <InputGroup>
+              <UInput
+                  v-model="createPayload.iban"
+                  @blur="resolveCreatePayloadFromIban"
+                  @keydown.enter.prevent="resolveCreatePayloadFromIban"
+              />
+              <UButton
+                  color="gray"
+                  variant="outline"
+                  :loading="resolvingIban"
+                  @click="resolveCreatePayloadFromIban"
+              >
+                Ermitteln
+              </UButton>
+            </InputGroup>
+          </UFormField>
+          <UFormField label="BIC">
+            <UInput v-model="createPayload.bic" />
+          </UFormField>
+          <UFormField label="Bankinstitut">
+            <UInput v-model="createPayload.bankName" />
+          </UFormField>
+          <UFormField label="Beschreibung (optional)">
+            <UInput v-model="createPayload.description" />
+          </UFormField>
         </div>
-      </template>
-    </UCard>
+        <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>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/ButtonWithConfirm.vue

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

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 (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</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="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;
 }
-</style>
+
+: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"
-                option-attribute="label"
+                value-key="value"
+                label-key="label"
                 @change="getItemsBySelectedResource"
             >
 
             </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <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'"
-                value-attribute="id"
+                :label-key="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
+                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"
-                option-attribute="name"
-                :options="folders"
+                value-key="id"
+                label-key="name"
+                :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"
-                option-attribute="name"
-                :options="filetypes"
+                value-key="id"
+                label-key="name"
+                :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"
-                option-attribute="key"
-                :options="documentboxes"
+                value-key="id"
+                label-key="key"
+                :items="documentboxes"
                 @change="updateDocument"
             />
           </InputGroup>
 
         </div>
       </div>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
@@ -362,4 +364,4 @@ const moveFile = async () => {
   aspect-ratio: 1/ 1.414;
 }
 
-</style>
+</style>

frontend/components/DocumentUploadModal.vue

@@ -78,84 +78,86 @@ 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
-          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"
-      >
-        <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'"
+        <div
+            v-if="isOverDropZone"
+            class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
         >
-          <UInput
-              v-if="selectedFiles.length === 0"
-              type="file"
-              id="fileUploadInput"
-              multiple
-              accept="image/jpeg, image/png, image/gif, application/pdf"
-              @change="onFileInputChange"
-          />
+          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+            Dateien hier ablegen
+          </span>
+        </div>
 
-          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
-            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
-          </div>
-        </UFormGroup>
+        <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="Typ:"
-            class="mt-3"
-        >
-          <USelectMenu
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              searchable-placeholder="Suchen..."
-              :options="availableFiletypes"
-              v-model="props.fileData.type"
-              :disabled="!props.fileData.typeEnabled"
+          <UFormField
+              label="Datei:"
+              :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
           >
-            <template #label>
-              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
-              <span v-else>Kein Typ ausgewählt</span>
-            </template>
-          </USelectMenu>
-        </UFormGroup>
+            <UInput
+                v-if="selectedFiles.length === 0"
+                type="file"
+                id="fileUploadInput"
+                multiple
+                accept="image/jpeg, image/png, image/gif, application/pdf"
+                @change="onFileInputChange"
+            />
 
-        <template #footer>
-          <UButton
-              @click="uploadFiles"
-              :loading="uploadInProgress"
-              :disabled="uploadInProgress || selectedFiles.length === 0"
-          >Hochladen</UButton>
-        </template>
-      </UCard>
-    </div>
+            <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+              Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+            </div>
+          </UFormField>
+
+          <UFormField
+              label="Typ:"
+              class="mt-3"
+          >
+            <USelectMenu
+                option-attribute="name"
+                value-attribute="id"
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="availableFiletypes"
+                v-model="props.fileData.type"
+                :disabled="!props.fileData.typeEnabled"
+            >
+              <template #label>
+                <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+                <span v-else>Kein Typ ausgewählt</span>
+              </template>
+            </USelectMenu>
+          </UFormField>
+
+          <template #footer>
+            <UButton
+                @click="uploadFiles"
+                :loading="uploadInProgress"
+                :disabled="uploadInProgress || selectedFiles.length === 0"
+            >Hochladen</UButton>
+          </template>
+        </UCard>
+      </div>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 /* Optional: Animationen für das Overlay */
-</style>
+</style>

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
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :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"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :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
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :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"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :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
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :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"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :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
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :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"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :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/EntityShow.vue

@@ -28,14 +28,16 @@ defineShortcuts({
     router.back()
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    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) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    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 #header>
-            <div class="flex items-center justify-between">
-              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                Schlussrechnung konfigurieren
-              </h3>
-              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-            </div>
-          </template>
+        <template #content>
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                  Schlussrechnung konfigurieren
+                </h3>
+                <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showFinalInvoiceConfig = false" />
+              </div>
+            </template>
 
-          <UFormGroup
-              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"
+            <UFormField
+                label="Rechnungsvorlage"
             >
-              Weiter
-            </UButton>
-          </template>
-        </UCard>
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
+                  value-key="id"
+                  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,48 @@ 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)"
-        :columns="columns"
+        :data="props.item.createddocuments.filter(i => !i.archived)"
+        :columns="normalizeTableColumns(columns)"
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        :on-select="(row) => selectItem(row.original)"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         style="height: 70vh"
     >
-      <template #type-data="{row}">
-        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      <template #type-cell="{ row }">
+        {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
       </template>
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
         <span
-            v-if="row.state === 'Entwurf'"
-            class="text-rose-500"
+            v-if="row.original.state === 'Entwurf'"
+            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 +287,19 @@ const selectItem = (item) => {
           <span v-else class="text-rose-600">Offen</span>
         </div>
       </template>-->
-      <template #reference-data="{row}">
-        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
-        <span v-else>{{row.documentNumber}}</span>
+      <template #reference-cell="{ row }">
+        <span v-if="row.original === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+        <span v-else>{{ row.original.documentNumber }}</span>
       </template>
-      <template #date-data="{row}">
-        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      <template #date-cell="{ row }">
+        <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).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}">
-        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      <template #dueDate-cell="{ row }">
+        <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}">
-        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      <template #amount-cell="{ row }">
+        <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>
-    <!-- Header -->
-    <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
-      <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
-      <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
-    </div>
-
-    <!-- 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"
-        />
+  <UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
+    <template #content>
+      <!-- Header -->
+      <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
+        <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
+        <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
       </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"
+      <!-- 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 -->
+        <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>
-
-      <UAlert
-          v-else
-          title="Nicht unterstützter Dateityp"
-          icon="i-heroicons-exclamation-triangle"
-      />
-    </div>
+    </template>
   </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

@@ -77,21 +77,21 @@ const renderedAllocations = computed(() => {
   <UCard class="mt-5">
     <UTable
         v-if="props.item.statementallocations"
-        :rows="renderedAllocations"
-        :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
-        @select="(i) => selectAllocation(i)"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+        :data="renderedAllocations"
+        :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+        :on-select="(i) => selectAllocation(i)"
+        :empty="{ 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 #amount-cell="{row}">
+        <span class="text-right text-rose-600" 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-data="{row}">
-        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+      <template #date-cell="{row}">
+        {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
       </template>
-      <template #description-data="{row}">
-        {{row.description ? row.description : ''}}
+      <template #description-cell="{row}">
+        {{row.original.description ? row.original.description : ''}}
       </template>
     </UTable>
   </UCard>

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,40 @@ const columns = [
   <UCard class="mt-5">
     <UTable
         class="mt-3"
-        :columns="columns"
-        :rows="props.item.times"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :columns="normalizeTableColumns(columns)"
+        :data="props.item.times"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
                 <span
-                    v-if="row.state === 'Entwurf'"
-                    class="text-rose-500"
-                >{{row.state}}</span>
+                    v-if="row.original.state === 'Entwurf'"
+                    class="text-error-500"
+                >{{ 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}">
-        {{row.profile ? row.profile.fullName : "" }}
+      <template #user-cell="{ row }">
+        {{ row.original.profile ? row.original.profile.fullName : "" }}
       </template>
 
-      <template #startDate-data="{row}">
-        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+      <template #startDate-cell="{ row }">
+        {{ dayjs(row.original.startDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #endDate-data="{row}">
-        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+      <template #endDate-cell="{ row }">
+        {{ dayjs(row.original.endDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #duration-data="{row}">
-        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+      <template #duration-cell="{ row }">
+        {{ 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}">
-        {{row.project ? row.project.name : "" }}
+      <template #project-cell="{ row }">
+        {{ 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({
-    column: dataType.sortColumn || "date",
-    direction: 'desc'
-  })
+  const sorting = ref([{
+    id: dataType.sortColumn || "date",
+    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"
-      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
+      v-model:sorting="sorting"
+      @update:sorting="handleSortChange"
       v-if="dataType && columns"
-      :rows="props.rows"
-      :columns="props.columns"
+      :data="props.rows"
+      :columns="normalizedColumns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(getShowRoute(type, i.id))"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+      :on-select="handleSelect"
+      :empty="`Keine ${dataType.label} anzuzeigen`"
   >
-<!--    <template
-        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}">
+    <template #name-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">
-        <UTooltip
-            :text="row.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}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold"
+      >
+        <UTooltip :text="row.original.name">
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>      </span>
-      <span v-else>
-        <UTooltip
-          :text="row.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 v-else class="block truncate">
+        <UTooltip :text="row.original.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 === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.fullName}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
       </span>
-      <span v-else>
-        {{row.fullName}}
+      <span v-else class="block truncate">
+        {{ row.original.fullName }}
       </span>
     </template>
-    <template #licensePlate-data="{row}">
+    <template #licensePlate-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
       </span>
-      <span v-else>
-        {{row.licensePlate}}
+      <span v-else class="block truncate">
+        {{ 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}">
-      <component v-if="column.component" :is="column.component" :row="row"></component>
-      <span v-else-if="row[column.key]">
-        <UTooltip :text="row[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 : ''}`: ''}}
-      </UTooltip>
+        v-slot:[`${column.key}-cell`]="{ row }">
+      <component v-if="column.component" :is="column.component" :row="row.original"></component>
+      <span v-else-if="row.original[column.key]" class="block truncate">
+        <UTooltip :text="String(row.original[column.key])">
+          <span class="block truncate">
+            {{ `${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>
-    <UCard>
-      <template #header>
-        <span class="font-bold">{{messageToShow.title}}</span>
-      </template>
-      <p class=" my-2" v-html="messageToShow.description"></p>
-      <UButton
-          variant="outline"
-          @click="markMessageAsRead"
-      >Gelesen</UButton>
-    </UCard>
+  <UModal v-model:open="showMessageModal" prevent-close>
+    <template #content>
+      <UCard>
+        <template #header>
+          <span class="font-bold">{{messageToShow.title}}</span>
+        </template>
+        <p class=" my-2" v-html="messageToShow.description"></p>
+        <UButton
+            variant="outline"
+            @click="markMessageAsRead"
+        >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,18 +123,20 @@ function onSelect (option) {
   />
 
   <UModal
-      v-model="showCommandPalette"
+      v-model:open="showCommandPalette"
   >
-    <UCommandPalette
-        v-model="selectedCommand"
-        :groups="groups"
-        :autoselect="false"
-        @update:model-value="onSelect"
-        ref="commandPaletteRef"
-    />
+    <template #content>
+      <UCommandPalette
+          v-model="selectedCommand"
+          :groups="groups"
+          :autoselect="false"
+          @update:model-value="onSelect"
+          ref="commandPaletteRef"
+      />
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</style>

frontend/components/HelpSlideover.vue

@@ -1,6 +1,16 @@
 <script setup>
+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('')
@@ -122,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
 }
@@ -133,10 +143,25 @@ const resetContactRequest = () => {
     title: "",
   }
 }
+
+const lastOpenedLabel = computed(() => {
+  if (!seenState.value.lastOpenedAt) return 'Noch nicht geöffnet'
+
+  return dayjs(seenState.value.lastOpenedAt).format('DD.MM.YYYY HH:mm')
+})
+
+const changelogEntries = computed(() => entries.value.slice(0, 12))
+
+watch(isHelpSlideoverOpen, async (isOpen) => {
+  if (!isOpen || shortcuts.value) return
+
+  await refresh(true)
+  markAsSeen()
+})
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isHelpSlideoverOpen">
+  <USlideover v-model:open="isHelpSlideoverOpen" side="right">
     <template #title>
       <UButton
           v-if="shortcuts"
@@ -150,30 +175,94 @@ const resetContactRequest = () => {
       {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
     </template>
 
-    <div v-if="shortcuts" class="space-y-6">
-      <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
+    <template #body>
+      <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">
-        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
-          {{ category.title }}
-        </p>
+        <div v-for="(category, index) in filteredCategories" :key="index">
+          <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
+            {{ category.title }}
+          </p>
 
-        <div class="space-y-2">
-          <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>
+          <div class="space-y-2">
+            <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>
 
-            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
-              <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
-                {{ shortcut }}
-              </UKbd>
+              <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
+                <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
+                  {{ shortcut }}
+                </UKbd>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-else class="flex flex-col gap-y-3">
-      <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
-    </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>
+
+          <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
@@ -181,29 +270,29 @@ const resetContactRequest = () => {
         @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;
-        <UFormGroup
+        </UFormField>&ndash;&gt;
+        <UFormField
           label="Titel:"
         >
           <UInput
             v-model="contactRequestData.title"
           />
-        </UFormGroup>
-        <UFormGroup
+        </UFormField>
+        <UFormField
           label="Nachricht:"
         >
           <UTextarea
               v-model="contactRequestData.message"
               rows="6"
           />
-        </UFormGroup>
+        </UFormField>
         <InputGroup class="mt-3">
           <UButton
             type="submit"
@@ -213,7 +302,7 @@ const resetContactRequest = () => {
           </UButton>
           <UButton
             type="reset"
-            color="rose"
+            color="error"
             variant="outline"
             :disabled="!contactRequestData.title && !contactRequestData.message"
           >
@@ -224,5 +313,6 @@ const resetContactRequest = () => {
       </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 #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Eintrag hinzufügen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
-        </div>
-      </template>
+    <template #content>
+      <UCard class="h-full">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Eintrag hinzufügen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
+          </div>
+        </template>
 
-      <UFormGroup
-        label="Text:"
-      >
-        <UTextarea
-          v-model="addHistoryItemData.text"
-          @keyup.meta.enter="addHistoryItem"
-        />
-<!-- TODO: Add Dropdown and Checking for Usernames  -->
-<!--        <template #help>
-          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
-        </template>-->
+        <UFormField
+          label="Text:"
+        >
+          <UTextarea
+            v-model="addHistoryItemData.text"
+            @keyup.meta.enter="addHistoryItem"
+          />
+  <!-- TODO: Add Dropdown and Checking for Usernames  -->
+  <!--        <template #help>
+            <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
+          </template>-->
 
-      </UFormGroup>
+        </UFormField>
 
 
-      <template #footer>
-        <UButton @click="addHistoryItem">Speichern</UButton>
-      </template>
-    </UCard>
+        <template #footer>
+          <UButton @click="addHistoryItem">Speichern</UButton>
+        </template>
+      </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,21 +18,23 @@ const handleClick = async () => {
 <template>
   <!-- Printer Button -->
 
-  <UModal v-model="showPrinterInfo">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-semibold">Drucker Informationen</h3>
-          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
-        </div>
-      </template>
-      <p>Seriennummer: {{labelPrinter.info.serial}}</p>
-      <p>MAC: {{labelPrinter.info.mac}}</p>
-      <p>Modell: {{labelPrinter.info.modelId}}</p>
-      <p>Charge: {{labelPrinter.info.charge}}</p>
-      <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
-      <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
-    </UCard>
+  <UModal v-model:open="showPrinterInfo">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold">Drucker Informationen</h3>
+            <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
+          </div>
+        </template>
+        <p>Seriennummer: {{labelPrinter.info.serial}}</p>
+        <p>MAC: {{labelPrinter.info.mac}}</p>
+        <p>Modell: {{labelPrinter.info.modelId}}</p>
+        <p>Charge: {{labelPrinter.info.charge}}</p>
+        <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
+        <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+      </UCard>
+    </template>
   </UModal>
 
   <UButton
@@ -50,4 +52,4 @@ const handleClick = async () => {
 
 <style scoped>
 
-</style>
+</style>

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 : []
@@ -18,6 +22,18 @@ const showMemberRelationsNav = computed(() => {
 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 = [
@@ -36,7 +52,7 @@ const links = computed(() => {
       to: "/wiki",
       icon: "i-heroicons-book-open"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const documentChildren = [
     featureEnabled("files") ? {
@@ -56,7 +72,7 @@ const links = computed(() => {
       icon: "i-heroicons-archive-box",
       disabled: true
     } : null,
-  ].filter(Boolean)
+  ]
 
   const communicationChildren = [
     featureEnabled("helpdesk") ? {
@@ -71,7 +87,7 @@ const links = computed(() => {
       icon: "i-heroicons-envelope",
       disabled: true
     } : null,
-  ].filter(Boolean)
+  ]
 
   const contactsChildren = [
     showMembersNav.value && featureEnabled("members") ? {
@@ -94,7 +110,7 @@ const links = computed(() => {
       to: "/standardEntity/contacts",
       icon: "i-heroicons-user-group"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const staffChildren = [
     featureEnabled("staffTime") ? {
@@ -102,7 +118,7 @@ const links = computed(() => {
       to: "/staff/time",
       icon: "i-heroicons-clock",
     } : null,
-  ].filter(Boolean)
+  ]
 
   const accountingChildren = [
     featureEnabled("createDocument") ? {
@@ -120,6 +136,11 @@ const links = computed(() => {
       to: "/incomingInvoices",
       icon: "i-heroicons-document-text",
     } : null,
+    (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
+      label: "USt-Auswertung",
+      to: "/accounting/tax",
+      icon: "i-heroicons-calculator",
+    } : null,
     featureEnabled("costcentres") ? {
       label: "Kostenstellen",
       to: "/standardEntity/costcentres",
@@ -140,7 +161,7 @@ const links = computed(() => {
       to: "/banking",
       icon: "i-heroicons-document-text",
     } : null,
-  ].filter(Boolean)
+  ]
 
   const inventoryChildren = [
     has("spaces") && featureEnabled("spaces") ? {
@@ -168,7 +189,7 @@ const links = computed(() => {
       to: "/standardEntity/inventoryitemgroups",
       icon: "i-heroicons-puzzle-piece"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const masterDataChildren = [
     has("products") && featureEnabled("products") ? {
@@ -221,7 +242,7 @@ const links = computed(() => {
       to: "/standardEntity/vehicles",
       icon: "i-heroicons-truck"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const settingsChildren = [
     featureEnabled("settingsNumberRanges") ? {
@@ -259,24 +280,32 @@ const links = computed(() => {
       to: "/export",
       icon: "i-heroicons-clipboard-document-list"
     } : null,
-  ].filter(Boolean)
+  ]
 
-  return [
+  const visibleOrganisationChildren = visibleItems(organisationChildren)
+  const visibleDocumentChildren = visibleItems(documentChildren)
+  const visibleCommunicationChildren = visibleItems(communicationChildren)
+  const visibleContactsChildren = visibleItems(contactsChildren)
+  const visibleStaffChildren = visibleItems(staffChildren)
+  const visibleAccountingChildren = visibleItems(accountingChildren)
+  const visibleInventoryChildren = visibleItems(inventoryChildren)
+  const visibleMasterDataChildren = visibleItems(masterDataChildren)
+  const visibleSettingsChildren = visibleItems(settingsChildren)
+
+  return visibleItems([
     ...(auth.profile?.pinned_on_navigation || []).map(pin => {
       if (pin.type === "external") {
         return {
           label: pin.label,
           to: pin.link,
           icon: pin.icon,
-          target: "_blank",
-          pinned: true
+          target: "_blank"
         }
       } 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,
-          pinned: true
+          icon: pin.icon
         }
       }
     }),
@@ -293,55 +322,6 @@ const links = computed(() => {
       to: "/historyitems",
       icon: "i-heroicons-book-open"
     } : null,
-    ...(organisationChildren.length > 0 ? [{
-      label: "Organisation",
-      icon: "i-heroicons-rectangle-stack",
-      defaultOpen: false,
-      children: organisationChildren
-    }] : []),
-    ...(documentChildren.length > 0 ? [{
-      label: "Dokumente",
-      icon: "i-heroicons-rectangle-stack",
-      defaultOpen: false,
-      children: documentChildren
-    }] : []),
-    ...(communicationChildren.length > 0 ? [{
-      label: "Kommunikation",
-      icon: "i-heroicons-megaphone",
-      defaultOpen: false,
-      children: communicationChildren
-    }] : []),
-    ...(contactsChildren.length > 0 ? [{
-      label: "Kontakte",
-      defaultOpen: false,
-      icon: "i-heroicons-user-group",
-      children: contactsChildren
-    }] : []),
-    ...(staffChildren.length > 0 ? [{
-      label: "Mitarbeiter",
-      defaultOpen: false,
-      icon: "i-heroicons-user-group",
-      children: staffChildren
-    }] : []),
-    ...(accountingChildren.length > 0 ? [{
-      label: "Buchhaltung",
-      defaultOpen: false,
-      icon: "i-heroicons-chart-bar-square",
-      children: accountingChildren
-    }] : []),
-    ...(inventoryChildren.length > 0 ? [{
-      label: "Lager",
-      icon: "i-heroicons-puzzle-piece",
-      defaultOpen: false,
-      children: inventoryChildren
-    }] : []),
-    ...(masterDataChildren.length > 0 ? [{
-      label: "Stammdaten",
-      defaultOpen: false,
-      icon: "i-heroicons-clipboard-document",
-      children: masterDataChildren
-    }] : []),
-
     ...(has("projects") && featureEnabled("projects")) ? [{
       label: "Projekte",
       to: "/standardEntity/projects",
@@ -357,90 +337,139 @@ const links = computed(() => {
       to: "/standardEntity/plants",
       icon: "i-heroicons-clipboard-document"
     }] : [],
-    ...(settingsChildren.length > 0 ? [{
+    ...(visibleOrganisationChildren.length > 0 ? [{
+      label: "Organisation",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: visibleOrganisationChildren
+    }] : []),
+    ...(visibleDocumentChildren.length > 0 ? [{
+      label: "Dokumente",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: visibleDocumentChildren
+    }] : []),
+    ...(visibleCommunicationChildren.length > 0 ? [{
+      label: "Kommunikation",
+      icon: "i-heroicons-megaphone",
+      defaultOpen: false,
+      children: visibleCommunicationChildren
+    }] : []),
+    ...(visibleContactsChildren.length > 0 ? [{
+      label: "Kontakte",
+      defaultOpen: false,
+      icon: "i-heroicons-user-group",
+      children: visibleContactsChildren
+    }] : []),
+    ...(visibleStaffChildren.length > 0 ? [{
+      label: "Mitarbeiter",
+      defaultOpen: false,
+      icon: "i-heroicons-user-group",
+      children: visibleStaffChildren
+    }] : []),
+    ...(visibleAccountingChildren.length > 0 ? [{
+      label: "Buchhaltung",
+      defaultOpen: false,
+      icon: "i-heroicons-chart-bar-square",
+      children: visibleAccountingChildren
+    }] : []),
+    ...(visibleInventoryChildren.length > 0 ? [{
+      label: "Lager",
+      icon: "i-heroicons-puzzle-piece",
+      defaultOpen: false,
+      children: visibleInventoryChildren
+    }] : []),
+    ...(visibleMasterDataChildren.length > 0 ? [{
+      label: "Stammdaten",
+      defaultOpen: false,
+      icon: "i-heroicons-clipboard-document",
+      children: visibleMasterDataChildren
+    }] : []),
+
+
+    ...(visibleSettingsChildren.length > 0 ? [{
       label: "Einstellungen",
       defaultOpen: false,
       icon: "i-heroicons-cog-8-tooth",
-      children: settingsChildren
+      children: visibleSettingsChildren
     }] : []),
-  ].filter(Boolean)
+  ])
 })
 
-const accordionItems = computed(() =>
-    links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
-)
+const navItems = computed(() =>
+  links.value
+    .filter(Boolean)
+    .map((item, index) => {
+      const children = Array.isArray(item.children)
+        ? item.children.map((child, childIndex) => ({
+          ...child,
+          value: child.id || child.label || `${index}-${childIndex}`,
+          active: isRouteActive(child.to)
+        }))
+        : undefined
 
-const buttonItems = computed(() =>
-    links.value.filter(item => !item.children || item.children.length === 0)
+      const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
+
+      return {
+        ...item,
+        children,
+        value: item.id || item.label || String(index),
+        defaultOpen: item.defaultOpen || active,
+        active,
+        tooltip: true,
+        popover: true,
+        trailingIcon: children?.length ? undefined : ''
+      }
+    })
 )
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <UButton
-        v-for="item in buttonItems"
-        :key="item.label"
-        variant="ghost"
-        :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
-        :icon="item.pinned ? 'i-heroicons-star' : item.icon"
-        class="w-full"
-        :to="item.to"
-        :target="item.target"
-        @click="item.click ? item.click() : null"
-    >
-      <UIcon
-          v-if="item.pinned"
-          :name="item.icon"
-          class="w-5 h-5 me-2"
-      />
-      {{ item.label }}
-    </UButton>
-  </div>
-
-  <UDivider class="my-2"/>
-
-  <UAccordion
-      :items="accordionItems"
-      :multiple="false"
-      class="mt-2"
+  <UNavigationMenu
+      :items="navItems"
+      orientation="vertical"
+      :collapsed="props.collapsed"
+      tooltip
+      popover
+      color="neutral"
+      highlight
+      highlight-color="primary"
+      class="w-full"
+      :ui="{
+        root: 'w-full',
+        list: 'space-y-1',
+        link: 'min-w-0 rounded-lg px-2.5 py-2',
+        linkLeadingIcon: 'size-5 shrink-0',
+        linkLabel: 'truncate',
+        childList: 'ms-0 space-y-1 border-l border-default ps-3',
+        childLink: 'min-w-0 rounded-lg px-2 py-1.5',
+        childLinkLabel: 'truncate'
+      }"
   >
-    <template #default="{ item, open }">
-      <UButton
-          variant="ghost"
-          :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
-          :icon="item.icon"
-          class="w-full"
+    <template #item-leading="{ item, active }">
+      <UIcon
+          v-if="item.icon"
+          :name="item.icon"
+          class="size-5 shrink-0"
+          :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 }}
-        <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']"
-          />
-        </template>
-      </UButton>
+        {{ item.badge }}
+      </UBadge>
+      <UIcon
+          v-else-if="item.children?.length"
+          name="i-heroicons-chevron-down-20-solid"
+          class="size-4 shrink-0 transition-transform"
+          :class="active ? 'text-primary' : 'text-muted'"
+      />
     </template>
-
-    <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"/>
+  </UNavigationMenu>
 </template>

frontend/components/NotificationsSlideover.vue

@@ -36,28 +36,30 @@ const setNotificationAsRead = async (notification) => {
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
-    <NuxtLink
-        v-for="notification in notifications"
-        :key="notification.id"
-        :to="notification.link"
-        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>
+  <USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
+    <template #body>
+      <NuxtLink
+          v-for="notification in notifications"
+          :key="notification.id"
+          :to="notification.link"
+          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>
 
-      <div class="text-sm flex-1">
-        <p class="flex items-center justify-between">
-          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
+        <div class="text-sm flex-1">
+          <p class="flex items-center justify-between">
+            <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))" />
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          {{ notification.message }}
-        </p>
-      </div>
-    </NuxtLink>
-  </UDashboardSlideover>
+            <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 class="text-gray-500 dark:text-gray-400">
+            {{ notification.message }}
+          </p>
+        </div>
+      </NuxtLink>
+    </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"
-            option-attribute="fullName"
-            value-attribute="id"
+            :items="data.profiles"
+            label-key="fullName"
+            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"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.projects"
+            label-key="name"
+            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"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.services"
+            label-key="name"
+            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>
-    <UCard>
-      <template #header>
-        <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
-      </template>
+  <UModal v-model:open="auth.sessionWarningVisible" prevent-close>
+    <template #content>
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
+        </template>
 
-      <p class="text-sm text-gray-600 dark:text-gray-300">
-        Deine Sitzung endet in
-        <span class="font-semibold">{{ remainingTimeLabel }}</span>.
-        Bitte bestätige, um eingeloggt zu bleiben.
-      </p>
+        <p class="text-sm text-gray-600 dark:text-gray-300">
+          Deine Sitzung endet in
+          <span class="font-semibold">{{ remainingTimeLabel }}</span>.
+          Bitte bestätige, um eingeloggt zu bleiben.
+        </p>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton variant="outline" color="gray" @click="onLogout">
-            Abmelden
-          </UButton>
-          <UButton color="primary" @click="onRefresh">
-            Eingeloggt bleiben
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton variant="outline" color="gray" @click="onLogout">
+              Abmelden
+            </UButton>
+            <UButton color="primary" @click="onRefresh">
+              Eingeloggt bleiben
+            </UButton>
+          </div>
+        </template>
+      </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">
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-        </div>
-      </template>
+  <UModal v-model:open="isOpen">
+    <template #content>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
 
-      <UForm :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">
-          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
-        </UFormGroup>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Start Datum" name="start_date">
+              <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">
-          <UFormGroup label="Start Datum" name="start_date">
-            <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>
-          </UFormGroup>
-          <UFormGroup label="Start Zeit" name="start_time">
-            <UInput type="time" v-model="state.start_time" />
-          </UFormGroup>
-        </div>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Ende Datum" name="end_date">
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.end_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Ende Zeit" name="end_time">
+              <UInput type="time" v-model="state.end_time" />
+            </UFormField>
+          </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">
-          <UFormGroup label="Ende Datum" name="end_date">
-            <div class="flex items-center gap-2">
-              <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>
+          <UFormField label="Beschreibung / Notiz" name="description">
+            <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
+          </UFormField>
 
-        <UFormGroup label="Beschreibung / Notiz" name="description">
-          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
-        </UFormGroup>
-
-        <div class="flex justify-end gap-2 pt-4">
-          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
-          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
-        </div>
-      </UForm>
-    </UCard>
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+            <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
+          </div>
+        </UForm>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/StandardEntityModal.vue

@@ -61,33 +61,35 @@ setupPage()
 
 <template>
   <UModal :fullscreen="props.mode === 'show'">
-    <EntityShow
-        v-if="loaded && props.mode === 'show'"
-        :type="props.type"
-        :item="item"
-        @updateNeeded="setupPage"
-        :key="item"
-        :in-modal="true"
-    />
-    <EntityEdit
-        v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
-        :type="props.type"
-        :item="item"
-        :inModal="true"
-        @return-data="(data) => emit('return-data',data)"
-        :createQuery="props.createQuery"
-        :mode="props.mode"
-    />
-<!--    <EntityList
-        v-else-if="loaded && props.mode === 'list'"
-        :type="props.type"
-        :items="items"
-    />-->
-    <UProgress
-        v-else
-        animation="carousel"
-        class="p-5 mt-10"
-    />
+    <template #content>
+      <EntityShow
+          v-if="loaded && props.mode === 'show'"
+          :type="props.type"
+          :item="item"
+          @updateNeeded="setupPage"
+          :key="item"
+          :in-modal="true"
+      />
+      <EntityEdit
+          v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
+          :type="props.type"
+          :item="item"
+          :inModal="true"
+          @return-data="(data) => emit('return-data',data)"
+          :createQuery="props.createQuery"
+          :mode="props.mode"
+      />
+  <!--    <EntityList
+          v-else-if="loaded && props.mode === 'list'"
+          :type="props.type"
+          :items="items"
+      />-->
+      <UProgress
+          v-else
+          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"
-    value-attribute="id"
-    class="w-40"
-    @change="auth.switchTenant(selectedTenant)"
-    v-model="selectedTenant"
+      :items="tenantItems"
+      :content="{ align: 'start', side: 'bottom', sideOffset: 6 }"
+      :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+      class="block w-40"
+      :avatar="{
+        alt: activeTenantName,
+        text: tenantInitials,
+        loading: 'lazy'
+    }"
   >
-    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
-      <UAvatar :alt="auth.activeTenantData?.name" size="md" />
-
-      <span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span>
-    </UButton>
-
-    <template #option="{option}">
-      {{option.name}}
+    <template #default="{ open }">
+      <UButton
+          color="gray"
+          variant="ghost"
+          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']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ activeTenantName }}
+        </span>
+      </UButton>
     </template>
   </USelectMenu>
-</template>
+</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/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(() => [
-  [{
-    slot: 'account',
-    label: '',
-    disabled: true
-  }],  [/*{
-    label: 'Mein Profil',
-    icon: 'i-heroicons-user',
-    to: `/profiles/show/${profileStore.activeProfile.id}`
-  },*/{
-    label: 'Passwort ändern',
+const userItems = computed(() => [[
+  {
+    label: 'Passwort aendern',
     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']">
-<!--        <template #leading>
-          <UAvatar :alt="auth.user.email"  size="xs" />
-        </template>-->
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ auth.user.email }}
+        </span>
 
         <template #trailing>
-          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
+          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
         </template>
       </UButton>
     </template>
-
-    <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>
+  </UDropdownMenu>
 </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,9 +102,10 @@ const startImport = () => {
         </template>
 
       </UCard>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</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"
-            value-attribute="value"
-            option-attribute="label"
+            :items="granularityOptions"
+            value-key="value"
+            label-key="label"
             class="w-28"
           />
 
           <USelectMenu
             v-model="selectedYear"
-            :options="yearOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="yearOptions"
+            value-key="value"
+            label-key="label"
             class="w-24"
           />
 
           <USelectMenu
             v-if="granularity === 'month'"
             v-model="selectedMonth"
-            :options="monthOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="monthOptions"
+            value-key="value"
+            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"
-          value-attribute="value"
-          option-attribute="label"
+          :items="granularityOptions"
+          value-key="value"
+          label-key="label"
           class="w-28"
         />
 
         <USelectMenu
           v-model="selectedYear"
-          :options="yearOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="yearOptions"
+          value-key="value"
+          label-key="label"
           class="w-24"
         />
 
         <USelectMenu
           v-if="granularity === 'month'"
           v-model="selectedMonth"
-          :options="monthOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="monthOptions"
+          value-key="value"
+          label-key="label"
           class="w-36"
         />
       </div>

frontend/components/displayOpenBalances.vue

@@ -16,27 +16,23 @@ const setupPage = async () => {
   let documents = items.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
 
   let draftDocuments = documents.filter(i => i.state === "Entwurf")
-  let finalizedDocuments = documents.filter(i => i.state === "Gebucht")
-
-  finalizedDocuments = finalizedDocuments.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, documents).toFixed(2))
-
-  finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === x.id))
+  let finalizedDocuments = documents.filter(i => useSum().isOpenCreatedDocument(i, items))
 
 
 
   finalizedDocuments.forEach(i => {
     if(dayjs().subtract(i.paymentDays,"days").isAfter(i.documentDate)) {
-      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
       unpaidOverdueInvoicesCount.value += 1
     } else {
-      unpaidInvoicesSum.value += useSum().getCreatedDocumentSum(i, items) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
       unpaidInvoicesCount.value += 1
     }
   })
   //unpaidInvoicesCount.value = finalizedDocuments.length
 
   draftDocuments.forEach(i => {
-    draftInvoicesSum.value +=  useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+    draftInvoicesSum.value +=  useSum().getCreatedDocumentOpenAmount(i, items)
   })
   draftInvoicesCount.value = draftDocuments.length
 

frontend/components/displayOpenTasks.vue

@@ -23,9 +23,9 @@ setupPage()
 <template>
   <UTable
       v-if="openTasks.length > 0"
-    :rows="openTasks"
-      :columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]"
-      @select="(i) => router.push(`/tasks/show/${i.id}`)"
+    :data="openTasks"
+      :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
+      :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>
-    <UFormGroup
+    </UFormField>
+    <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/displayTaxSummary.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+import {
+  formatTaxEvaluationPeriodLabel,
+  formatTaxEvaluationPeriodRange,
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown,
+  getTaxEvaluationPeriodBounds,
+  normalizeTaxEvaluationPeriod
+} from "~/composables/useTaxEvaluation"
+
+dayjs.extend(customParseFormat)
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const summary = ref({
+  label: "",
+  range: "",
+  outputTax: 0,
+  inputTax: 0,
+  balance: 0,
+  outputCount: 0,
+  inputCount: 0,
+})
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR"
+  }).format(Number(value || 0))
+}
+
+const loadSummary = async () => {
+  loading.value = true
+
+  try {
+    const periodType = normalizeTaxEvaluationPeriod(auth.activeTenantData?.taxEvaluationPeriod)
+    const bounds = getTaxEvaluationPeriodBounds(dayjs(), periodType)
+
+    const [docs, incoming] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select()
+    ])
+
+    const outputDocs = (docs || []).filter((doc: any) => {
+      if (doc?.state !== "Gebucht") return false
+      if (!["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)) 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 (invoice?.state !== "Gebucht" || !invoice?.date) return false
+
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    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)
+
+    summary.value = {
+      label: formatTaxEvaluationPeriodLabel(bounds.start, periodType),
+      range: formatTaxEvaluationPeriodRange(bounds.start, periodType),
+      outputTax: Number(outputTax.toFixed(2)),
+      inputTax: Number(inputTax.toFixed(2)),
+      balance: Number((outputTax - inputTax).toFixed(2)),
+      outputCount: outputDocs.length,
+      inputCount: inputDocs.length,
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadSummary)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="tax-summary-top">
+      <div>
+        <p class="tax-summary-period">{{ summary.label }}</p>
+        <p class="tax-summary-range">{{ summary.range }}</p>
+      </div>
+      <UButton
+          size="xs"
+          variant="soft"
+          color="gray"
+          icon="i-heroicons-arrow-top-right-on-square"
+          @click="navigateTo('/accounting/tax')"
+      >
+        Details
+      </UButton>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">USt Rechnungen</span>
+      <span class="tax-summary-value text-amber-600 dark:text-amber-400">
+        {{ loading ? "..." : formatCurrency(summary.outputTax) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">Vorsteuer</span>
+      <span class="tax-summary-value text-sky-600 dark:text-sky-400">
+        {{ loading ? "..." : formatCurrency(summary.inputTax) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">Ergebnis</span>
+      <span
+          class="tax-summary-value"
+          :class="summary.balance >= 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ loading ? "..." : formatCurrency(summary.balance) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-meta">
+      {{ summary.outputCount }} Ausgangsbelege | {{ summary.inputCount }} Eingangsbelege
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tax-summary-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.tax-summary-period {
+  margin: 0;
+  font-weight: 700;
+  color: rgb(17 24 39);
+}
+
+.tax-summary-range,
+.tax-summary-meta {
+  margin: 0;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+
+.tax-summary-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.tax-summary-label {
+  color: rgb(55 65 81);
+}
+
+.tax-summary-value {
+  font-weight: 700;
+  text-align: right;
+}
+
+:deep(.dark) .tax-summary-period {
+  color: rgb(243 244 246);
+}
+
+:deep(.dark) .tax-summary-range,
+:deep(.dark) .tax-summary-meta,
+:deep(.dark) .tax-summary-label {
+  color: rgb(156 163 175);
+}
+</style>

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()
@@ -80,16 +84,16 @@ const setRowData = (row) => {
       >
         <td>
           <USelectMenu
-              searchable
-              :search-attributes="['name']"
-            :options="products"
-            value-attribute="id"
-            option-attribute="name"
+            :items="products"
+            label-key="name"
+            value-key="id"
+            :search-input="productSearchInput"
+            :filter-fields="['name']"
             v-model="product.product"
-            :color="product.product ? 'primary' : 'rose'"
+            :color="product.product ? 'primary' : 'error'"
             @change="setRowData(product)"
           >
-            <template #label>
+            <template #default>
               {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
             </template>
           </USelectMenu>
@@ -104,9 +108,9 @@ const setRowData = (row) => {
         </td>
         <td>
           <USelectMenu
-            :options="units"
-            value-attribute="id"
-            option-attribute="name"
+            :items="units"
+            label-key="name"
+            value-key="id"
             v-model="product.unit"
           ></USelectMenu>
         </td>
@@ -123,7 +127,7 @@ const setRowData = (row) => {
             icon="i-heroicons-x-mark"
             @click="removeProductFromMaterialComposition(product.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
       </tr>
@@ -135,4 +139,4 @@ const setRowData = (row) => {
 td {
   margin-bottom: 0.5em;
 }
-</style>
+</style>

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>
-    <UFormGroup label="Höhe">
+    </UFormField>
+    <UFormField label="Höhe">
       <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
-    </UFormGroup>
-    <UFormGroup label="ZPL">
+    </UFormField>
+    <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()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
       >
         <td>
           <USelectMenu
-              searchable
-              :search-attributes="['name']"
-              :options="hourrates"
-              value-attribute="id"
-              option-attribute="name"
-              v-model="row.hourrate"
-              :color="row.hourrate ? 'primary' : 'rose'"
-              @change="setRowData(row)"
+            :items="hourrates"
+            label-key="name"
+            value-key="id"
+            :search-input="hourrateSearchInput"
+            :filter-fields="['name']"
+            v-model="row.hourrate"
+            :color="row.hourrate ? 'primary' : 'error'"
+            @change="setRowData(row)"
           >
 <!--            <template #label>
               {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
@@ -106,10 +110,10 @@ const setRowData = (row) => {
         </td>
         <td>
           <USelectMenu
-            :options="units"
+            :items="units"
             disabled
-            value-attribute="id"
-            option-attribute="name"
+            label-key="name"
+            value-key="id"
             v-model="row.unit"
           ></USelectMenu>
         </td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
       </tr>
@@ -146,4 +150,4 @@ const setRowData = (row) => {
 td {
   margin-bottom: 0.5em;
 }
-</style>
+</style>

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 */
@@ -269,4 +343,4 @@ const addVideo = () => {
   mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
   .ProseMirror-selectednode { outline: 2px solid #3b82f6; }
 }
-</style>
+</style>

frontend/components/wiki/WikiEntityWidget.vue

@@ -98,17 +98,19 @@
       </div>
     </div>
 
-    <UModal v-model="isCreateModalOpen">
-      <div class="p-5">
-        <h3 class="font-bold mb-4">Neue Seite</h3>
-        <form @submit.prevent="createPage">
-          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
-          <div class="mt-4 flex justify-end gap-2">
-            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
-            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
-          </div>
-        </form>
-      </div>
+    <UModal v-model:open="isCreateModalOpen">
+      <template #content>
+        <div class="p-5">
+          <h3 class="font-bold mb-4">Neue Seite</h3>
+          <form @submit.prevent="createPage">
+            <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+            <div class="mt-4 flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+              <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+            </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
   }
@@ -233,4 +235,4 @@ watch(() => [props.entityId, props.entityUuid], fetchList)
 <style scoped>
 .custom-scrollbar::-webkit-scrollbar { width: 4px; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
-</style>
+</style>

frontend/composables/useChangelog.ts

@@ -0,0 +1,155 @@
+import { createSharedComposable } from '@vueuse/core'
+
+type ChangelogEntry = {
+  hash: string
+  shortHash: string
+  subject: string
+  authorName: string
+  committedAt: string
+}
+
+type ChangelogSeenState = {
+  lastOpenedAt: string | null
+  latestSeenHash: string | null
+}
+
+const defaultSeenState = (): ChangelogSeenState => ({
+  lastOpenedAt: null,
+  latestSeenHash: null
+})
+
+let changelogRequest: Promise<void> | null = null
+
+const _useChangelog = () => {
+  const auth = useAuthStore()
+
+  const entries = useState<ChangelogEntry[]>('changelog:entries', () => [])
+  const pending = useState<boolean>('changelog:pending', () => false)
+  const error = useState<string | null>('changelog:error', () => null)
+  const loadedKey = useState<string | null>('changelog:loaded-key', () => null)
+  const seenState = useState<ChangelogSeenState>('changelog:seen-state', defaultSeenState)
+
+  const scopeKey = computed(() => {
+    const userId = auth.user?.id
+    const tenantId = auth.activeTenant
+
+    if (!userId || !tenantId) return null
+
+    return `${userId}:${tenantId}`
+  })
+
+  const storageKey = computed(() => {
+    if (!scopeKey.value) return null
+
+    return `fedeo:changelog:last-opened:${scopeKey.value}`
+  })
+
+  const latestEntry = computed(() => entries.value[0] || null)
+
+  const hasUnread = computed(() => {
+    if (!latestEntry.value?.hash) return false
+
+    return latestEntry.value.hash !== seenState.value.latestSeenHash
+  })
+
+  function loadSeenState() {
+    if (!process.client || !storageKey.value) {
+      seenState.value = defaultSeenState()
+      return
+    }
+
+    try {
+      const raw = localStorage.getItem(storageKey.value)
+
+      if (!raw) {
+        seenState.value = defaultSeenState()
+        return
+      }
+
+      const parsed = JSON.parse(raw)
+
+      seenState.value = {
+        lastOpenedAt: parsed?.lastOpenedAt || null,
+        latestSeenHash: parsed?.latestSeenHash || null
+      }
+    } catch (err) {
+      console.error('Could not parse changelog seen state', err)
+      seenState.value = defaultSeenState()
+    }
+  }
+
+  async function refresh(force = false) {
+    if (!process.client || !scopeKey.value) return
+    if (!force && loadedKey.value === scopeKey.value && entries.value.length) return
+    if (changelogRequest) return changelogRequest
+
+    changelogRequest = (async () => {
+      pending.value = true
+      error.value = null
+
+      try {
+        const response = await useNuxtApp().$api('/api/functions/changelog', {
+          query: { limit: 20 }
+        })
+
+        entries.value = Array.isArray(response?.entries) ? response.entries : []
+        loadedKey.value = scopeKey.value
+      } catch (err: any) {
+        error.value = err?.data?.error || err?.message || 'Changelog konnte nicht geladen werden.'
+      } finally {
+        pending.value = false
+      }
+    })()
+
+    try {
+      await changelogRequest
+    } finally {
+      changelogRequest = null
+    }
+  }
+
+  function markAsSeen() {
+    if (!process.client || !storageKey.value) return
+
+    const nextState = {
+      lastOpenedAt: new Date().toISOString(),
+      latestSeenHash: latestEntry.value?.hash || null
+    }
+
+    seenState.value = nextState
+
+    try {
+      localStorage.setItem(storageKey.value, JSON.stringify(nextState))
+    } catch (err) {
+      console.error('Could not persist changelog seen state', err)
+    }
+  }
+
+  watch(storageKey, () => {
+    loadSeenState()
+  }, { immediate: true })
+
+  watch(scopeKey, (nextScopeKey, previousScopeKey) => {
+    if (!process.client || !nextScopeKey) return
+
+    if (nextScopeKey !== previousScopeKey) {
+      entries.value = []
+      loadedKey.value = null
+    }
+
+    void refresh(true)
+  }, { immediate: true })
+
+  return {
+    entries,
+    pending,
+    error,
+    latestEntry,
+    hasUnread,
+    seenState,
+    refresh,
+    markAsSeen
+  }
+}
+
+export const useChangelog = createSharedComposable(_useChangelog)

frontend/composables/useFiles.ts

@@ -36,6 +36,9 @@ export const useFiles = () => {
         let data = []
         data = await useEntities("files").select("*, incominginvoice(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)")
 
+        if (!Array.isArray(data) || data.length === 0) {
+            return []
+        }
 
 
         const res =  await useNuxtApp().$api("/api/files/presigned",{
@@ -138,4 +141,4 @@ export const useFiles = () => {
 
 
     return {uploadFiles, selectDocuments, selectSomeDocuments, selectDocument, downloadFile, dataURLtoFile}
-}
+}

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/useSum.js

@@ -1,5 +1,16 @@
 
 export const useSum = () => {
+    const unwrapCreatedDocuments = (createddocuments = []) => {
+        if (Array.isArray(createddocuments)) return createddocuments
+        if (Array.isArray(createddocuments?.value)) return createddocuments.value
+        return []
+    }
+
+    const getCreatedDocumentLinkId = (value) => {
+        if (value && typeof value === "object") return value.id
+        return value
+    }
+
     const getIncomingInvoiceSum = (invoice) => {
         let sum = 0
         invoice.accounts.forEach(account => {
@@ -15,6 +26,7 @@ export const useSum = () => {
     }
 
     const getCreatedDocumentSum = (createddocument,createddocuments = []) => {
+        const availableCreatedDocuments = unwrapCreatedDocuments(createddocuments)
         let totalNet = 0
         let total19 = 0
         let total7 = 0
@@ -44,7 +56,9 @@ export const useSum = () => {
 
 
         createddocument.usedAdvanceInvoices.forEach(advanceInvoiceId => {
-            let advanceInvoice = createddocuments.find(i => i.id === advanceInvoiceId)
+            let advanceInvoice = availableCreatedDocuments.find(i => i.id === advanceInvoiceId)
+
+            if (!advanceInvoice) return
 
             let priceNet = advanceInvoice.rows.find(i => i.advanceInvoiceData).price
 
@@ -59,6 +73,24 @@ export const useSum = () => {
         return Number(sumToPay.toFixed(2))
     }
 
+    const hasCancellationInvoice = (createddocument, createddocuments = []) => {
+        const availableCreatedDocuments = unwrapCreatedDocuments(createddocuments)
+
+        return availableCreatedDocuments.some((document) => {
+            return document.type === "cancellationInvoices"
+                && document.state !== "Entwurf"
+                && !document.archived
+                && getCreatedDocumentLinkId(document.createddocument) === createddocument.id
+        })
+    }
+
+    const getCreatedDocumentOpenAmount = (createddocument, createddocuments = []) => {
+        let amountPaid = 0
+        createddocument.statementallocations.forEach(allocation => amountPaid += allocation.amount)
+
+        return Number((getCreatedDocumentSum(createddocument, createddocuments) - amountPaid).toFixed(2))
+    }
+
     const getCreatedDocumentSumDetailed = (createddocument) => {
         let totalNet = 0
         let total19 = 0
@@ -124,12 +156,24 @@ export const useSum = () => {
     }
 
     const getIsPaid = (createddocument,createddocuments) => {
-        let amountPaid = 0
-        createddocument.statementallocations.forEach(allocation => amountPaid += allocation.amount)
-
-        return Number(amountPaid.toFixed(2)) === getCreatedDocumentSum(createddocument,createddocuments)
+        return getCreatedDocumentOpenAmount(createddocument, createddocuments) === 0
     }
 
-    return {getIncomingInvoiceSum, getCreatedDocumentSum, getCreatedDocumentSumDetailed, getIsPaid}
+    const isOpenCreatedDocument = (createddocument, createddocuments = []) => {
+        return ['invoices', 'advanceInvoices'].includes(createddocument.type)
+            && createddocument.state === "Gebucht"
+            && !hasCancellationInvoice(createddocument, createddocuments)
+            && !getIsPaid(createddocument, createddocuments)
+    }
+
+    return {
+        getIncomingInvoiceSum,
+        getCreatedDocumentSum,
+        getCreatedDocumentSumDetailed,
+        getCreatedDocumentOpenAmount,
+        getIsPaid,
+        hasCancellationInvoice,
+        isOpenCreatedDocument
+    }
 
 }

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/composables/useTaxEvaluation.ts

@@ -0,0 +1,162 @@
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+
+dayjs.extend(customParseFormat)
+
+export const TAX_EVALUATION_PERIOD_OPTIONS = [
+    { label: "Monatlich", value: "monthly" },
+    { label: "Quartalsweise", value: "quarterly" },
+    { label: "Jährlich", value: "yearly" },
+]
+
+export const normalizeTaxEvaluationPeriod = (value?: string) => {
+    if (value === "quarterly" || value === "yearly") return value
+    return "monthly"
+}
+
+const ZERO_BREAKDOWN = () => ({
+    net19: 0,
+    tax19: 0,
+    net7: 0,
+    tax7: 0,
+    net0: 0,
+})
+
+const isTaxFreeDocument = (taxType?: string | null) => {
+    return ["13b UStG", "19 UStG", "12.3 UStG"].includes(String(taxType || ""))
+}
+
+export const getTaxEvaluationPeriodBounds = (
+    referenceDate: dayjs.ConfigType,
+    period: string
+) => {
+    const normalized = normalizeTaxEvaluationPeriod(period)
+    const base = dayjs(referenceDate)
+
+    if (normalized === "yearly") {
+        return {
+            start: base.startOf("year"),
+            end: base.endOf("year"),
+        }
+    }
+
+    if (normalized === "quarterly") {
+        const quarterStartMonth = Math.floor(base.month() / 3) * 3
+        const start = base.month(quarterStartMonth).startOf("month")
+
+        return {
+            start,
+            end: start.add(2, "month").endOf("month"),
+        }
+    }
+
+    return {
+        start: base.startOf("month"),
+        end: base.endOf("month"),
+    }
+}
+
+export const shiftTaxEvaluationPeriodStart = (
+    periodStart: dayjs.ConfigType,
+    period: string,
+    offset: number
+) => {
+    const normalized = normalizeTaxEvaluationPeriod(period)
+    const base = dayjs(periodStart)
+
+    if (normalized === "yearly") return base.add(offset, "year").startOf("year")
+    if (normalized === "quarterly") return base.add(offset * 3, "month").startOf("month")
+    return base.add(offset, "month").startOf("month")
+}
+
+export const formatTaxEvaluationPeriodLabel = (
+    periodStart: dayjs.ConfigType,
+    period: string
+) => {
+    const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
+    const normalized = normalizeTaxEvaluationPeriod(period)
+
+    if (normalized === "yearly") {
+        return start.format("YYYY")
+    }
+
+    if (normalized === "quarterly") {
+        return `Q${Math.floor(start.month() / 3) + 1} ${start.format("YYYY")}`
+    }
+
+    return start.format("MMMM YYYY")
+}
+
+export const formatTaxEvaluationPeriodRange = (
+    periodStart: dayjs.ConfigType,
+    period: string
+) => {
+    const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
+    return `${start.format("DD.MM.YYYY")} - ${end.format("DD.MM.YYYY")}`
+}
+
+export const getCreatedDocumentTaxBreakdown = (doc: any) => {
+    const breakdown = ZERO_BREAKDOWN()
+
+    if (!doc || isTaxFreeDocument(doc.taxType)) {
+        return breakdown
+    }
+
+    ;(doc.rows || []).forEach((row: any) => {
+        if (!row || ["pagebreak", "title", "text"].includes(row.mode)) return
+
+        const quantity = Number(row.quantity || 0)
+        const price = Number(row.price || 0)
+        const discountPercent = Number(row.discountPercent || 0)
+        const taxPercent = Number(row.taxPercent || 0)
+        const net = Number((quantity * price * (1 - discountPercent / 100)).toFixed(2))
+
+        if (!Number.isFinite(net) || net === 0) return
+
+        if (taxPercent === 19) {
+            breakdown.net19 += net
+            breakdown.tax19 += Number((net * 0.19).toFixed(2))
+        } else if (taxPercent === 7) {
+            breakdown.net7 += net
+            breakdown.tax7 += Number((net * 0.07).toFixed(2))
+        } else {
+            breakdown.net0 += net
+        }
+    })
+
+    return {
+        net19: Number(breakdown.net19.toFixed(2)),
+        tax19: Number(breakdown.tax19.toFixed(2)),
+        net7: Number(breakdown.net7.toFixed(2)),
+        tax7: Number(breakdown.tax7.toFixed(2)),
+        net0: Number(breakdown.net0.toFixed(2)),
+    }
+}
+
+export const getIncomingInvoiceTaxBreakdown = (invoice: any) => {
+    const breakdown = ZERO_BREAKDOWN()
+
+    ;(invoice?.accounts || []).forEach((account: any) => {
+        const taxType = String(account?.taxType || "")
+        const amountNet = Number(account?.amountNet || 0)
+        const amountTax = Number(account?.amountTax || 0)
+
+        if (taxType === "19") {
+            breakdown.net19 += amountNet
+            breakdown.tax19 += amountTax
+        } else if (taxType === "7") {
+            breakdown.net7 += amountNet
+            breakdown.tax7 += amountTax
+        } else {
+            breakdown.net0 += amountNet
+        }
+    })
+
+    return {
+        net19: Number(breakdown.net19.toFixed(2)),
+        tax19: Number(breakdown.tax19.toFixed(2)),
+        net7: Number(breakdown.net7.toFixed(2)),
+        tax7: Number(breakdown.tax7.toFixed(2)),
+        net0: Number(breakdown.net0.toFixed(2)),
+    }
+}

frontend/layouts/default.vue

@@ -16,6 +16,7 @@ const route = useRoute()
 const auth = useAuthStore()
 const labelPrinter = useLabelPrinterStore()
 const calculatorStore = useCalculatorStore()
+const { hasUnread, refresh: refreshChangelog } = useChangelog()
 
 const month = dayjs().format("MM")
 
@@ -114,7 +115,7 @@ const groups = computed(() => [
 ].filter(Boolean))
 
 // --- Footer Links nutzen jetzt den zentralen Calculator Store ---
-const footerLinks = computed(() => [
+const footerItems = computed(() => [
   {
     label: 'Taschenrechner',
     icon: 'i-heroicons-calculator',
@@ -123,10 +124,15 @@ const footerLinks = computed(() => [
   {
     label: 'Hilfe & Info',
     icon: 'i-heroicons-question-mark-circle',
+    badge: hasUnread.value ? 'Neu' : null,
     click: () => isHelpSlideoverOpen.value = true
   }
 ])
 
+onMounted(() => {
+  void refreshChangelog()
+})
+
 </script>
 
 <template>
@@ -234,48 +240,81 @@ const footerLinks = computed(() => [
         </UCard>
       </UContainer>
     </div>
-    <UDashboardLayout class="safearea" v-else>
-      <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
-        <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;"
-                          :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
-          <template #left>
+    <div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
+<!--      <div
+          class="border-b border-default bg-default px-3 py-2"
+          style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
+      >
+        <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">
-
-          <MainNav/>
-
-          <div class="flex-1"/>
-
-          <template #footer>
+          <template #default="{ collapsed }">
+            <MainNav :collapsed="collapsed" />
+          </template>
 
+          <template #footer="{ collapsed }">
             <div class="flex flex-col gap-3">
+              <div class="flex items-center gap-2">
+                <UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
+                <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
+              </div>
 
-              <UColorModeToggle class="ml-3"/>
               <LabelPrinterButton class="w-full"/>
 
-              <UDashboardSidebarLinks :links="footerLinks" class="w-full"/>
+              <div class="flex flex-col gap-1">
+                <UButton
+                    v-for="item in footerItems"
+                    :key="item.label"
+                    color="gray"
+                    variant="ghost"
+                    class="w-full"
+                    :icon="item.icon"
+                    @click="item.click ? item.click() : null"
+                >
+                  <span v-if="!collapsed">{{ item.label }}</span>
 
-              <UDivider class="sticky bottom-0 w-full"/>
+                  <template #trailing>
+                    <UBadge v-if="!collapsed && item.badge" color="primary" variant="solid" size="xs">
+                      {{ item.badge }}
+                    </UBadge>
+                  </template>
+                </UButton>
+              </div>
+
+              <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>
+
+        <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
           <slot/>
-        </UDashboardPanel>
-      </UDashboardPage>
+
+        </div>
+      </UDashboardGroup>
 
       <HelpSlideover/>
 
       <Calculator v-if="calculatorStore.isOpen"/>
-
-    </UDashboardLayout>
+    </div>
   </div>
 
   <div
@@ -306,7 +345,7 @@ const footerLinks = computed(() => [
       </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/tax.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+import {
+  formatTaxEvaluationPeriodLabel,
+  formatTaxEvaluationPeriodRange,
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown,
+  getTaxEvaluationPeriodBounds,
+  normalizeTaxEvaluationPeriod,
+  shiftTaxEvaluationPeriodStart
+} from "~/composables/useTaxEvaluation"
+
+dayjs.extend(customParseFormat)
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const createdDocuments = ref<any[]>([])
+const incomingInvoices = ref<any[]>([])
+
+const periodType = computed(() => normalizeTaxEvaluationPeriod(auth.activeTenantData?.taxEvaluationPeriod))
+
+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 loadData = async () => {
+  loading.value = true
+
+  try {
+    const [docs, incoming] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select()
+    ])
+
+    createdDocuments.value = (docs || []).filter(isRelevantOutputDocument)
+    incomingInvoices.value = (incoming || []).filter(isRelevantInputInvoice)
+  } finally {
+    loading.value = false
+  }
+}
+
+const periods = computed(() => {
+  const currentBounds = getTaxEvaluationPeriodBounds(dayjs(), periodType.value)
+
+  return Array.from({ length: 8 }, (_, index) => {
+    const start = shiftTaxEvaluationPeriodStart(currentBounds.start, periodType.value, -index)
+    const bounds = getTaxEvaluationPeriodBounds(start, periodType.value)
+
+    const outputDocs = createdDocuments.value.filter((doc) => {
+      const date = dayjs(doc.documentDate)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const inputDocs = incomingInvoices.value.filter((invoice) => {
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const output = outputDocs.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 = inputDocs.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))
+    const balance = Number((outputTax - inputTax).toFixed(2))
+
+    return {
+      key: bounds.start.format("YYYY-MM-DD"),
+      label: formatTaxEvaluationPeriodLabel(bounds.start, periodType.value),
+      range: formatTaxEvaluationPeriodRange(bounds.start, periodType.value),
+      isCurrent: index === 0,
+      outputTax,
+      inputTax,
+      balance,
+      output,
+      input,
+      outputCount: outputDocs.length,
+      inputCount: inputDocs.length,
+    }
+  })
+})
+
+const currentPeriod = computed(() => periods.value[0] || null)
+
+const columns = [
+  { key: "label", label: "Zeitraum" },
+  { key: "range", label: "Datumsbereich" },
+  { key: "outputTax", label: "USt Rechnungen" },
+  { key: "inputTax", label: "Vorsteuer" },
+  { key: "balance", label: "Ergebnis" },
+  { key: "documents", label: "Belege" },
+]
+
+onMounted(loadData)
+</script>
+
+<template>
+  <div>
+    <UDashboardNavbar title="USt-Auswertung">
+      <template #right>
+        <UButton
+            icon="i-heroicons-arrow-path"
+            variant="outline"
+            @click="loadData"
+            :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'"
+          >
+            {{ 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>
+        </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>
+
+          <template #outputTax-cell="{ row }">
+            {{ formatCurrency(row.original.outputTax) }}
+          </template>
+
+          <template #inputTax-cell="{ row }">
+            {{ formatCurrency(row.original.inputTax) }}
+          </template>
+
+          <template #balance-cell="{ row }">
+            <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
+              {{ formatCurrency(row.original.balance) }}
+            </span>
+          </template>
+
+          <template #documents-cell="{ row }">
+            {{ row.original.outputCount }} / {{ row.original.inputCount }}
+          </template>
+        </UTable>
+      </UCard>
+    </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"
-      :columns="columns"
+      :data="filteredRows"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/accounts/show/${i.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+      :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
-    <template #allocations-data="{row}">
-        <span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
+    <template #allocations-cell="{row}">
+        <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}">
-      <span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
+    <template #saldo-cell="{row}">
+      <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
     </template>
   </UTable>
@@ -219,4 +219,4 @@ setupPage()
 
 <style scoped>
 
-</style>
+</style>

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

@@ -106,7 +106,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">
@@ -137,21 +137,21 @@ const saldo = computed(() => {
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
           <UTable
               v-if="statementallocations"
-            :rows="renderedAllocations"
-              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
-              @select="(i) => selectAllocation(i)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+            :data="renderedAllocations"
+              :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+              :on-select="(i) => selectAllocation(i)"
+              :empty="{ 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 #amount-cell="{row}">
+              <span class="text-right text-rose-600" 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-data="{row}">
-              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+            <template #date-cell="{row}">
+              {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
             </template>
-            <template #description-data="{row}">
-              {{row.description ? row.description : ''}}
+            <template #description-cell="{row}">
+              {{row.original.description ? row.original.description : ''}}
             </template>
           </UTable>
         </UCard>
@@ -167,4 +167,4 @@ td {
   padding-bottom: 0.15em;
   padding-top: 0.15em;
 }
-</style>
+</style>

frontend/pages/banking/index.vue

@@ -67,12 +67,12 @@ const setupPage = async () => {
     incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
 
     const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
-    openDocuments.value = documents.filter(i => i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, createddocuments.value).toFixed(2))
+    openDocuments.value = documents.filter(i => useSum().isOpenCreatedDocument(i, createddocuments.value))
         .map(i => ({
           ...i,
           docTotal: useSum().getCreatedDocumentSum(i, createddocuments.value),
           statementTotal: Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0)),
-          openSum: (useSum().getCreatedDocumentSum(i, createddocuments.value) - Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0))).toFixed(2)
+          openSum: useSum().getCreatedDocumentOpenAmount(i, createddocuments.value).toFixed(2)
         }))
 
     openIncomingInvoices.value = invoiceItems
@@ -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' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between gap-3">
-          <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>
+  <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <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>
-        </div>
-      </template>
+        </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">
-        <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>
-      </div>
-    </UCard>
+        <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"/>
+          <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
+        </div>
+      </UCard>
+    </template>
   </UModal>
 </template>

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

@@ -53,13 +53,13 @@ const setup = async () => {
   customers.value = (await useEntities("customers").select())
   vendors.value = (await useEntities("vendors").select())
 
-  openDocuments.value = documents.filter(i => i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, createddocuments.value).toFixed(2))
+  openDocuments.value = documents.filter(i => useSum().isOpenCreatedDocument(i, createddocuments.value))
   openDocuments.value = openDocuments.value.map(i => {
     return {
       ...i,
       docTotal: useSum().getCreatedDocumentSum(i, createddocuments.value),
       statementTotal: Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0)),
-      openSum: (useSum().getCreatedDocumentSum(i, createddocuments.value) - Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0))).toFixed(2)
+      openSum: useSum().getCreatedDocumentOpenAmount(i, createddocuments.value).toFixed(2)
     }
   })
 
@@ -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/edit/[[id]].vue

@@ -1,9 +1,9 @@
 <script setup>
 import dayjs from "dayjs"
-import Handlebars from "handlebars"
 import { v4 as uuidv4 } from 'uuid';
 import {useFunctions} from "~/composables/useFunctions.js";
 import EntityModalButtons from "~/components/EntityModalButtons.vue";
+import { documentTemplateHandlebars } from "~/utils/handlebars";
 
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
@@ -1098,8 +1098,8 @@ const getDocumentData = async () => {
   })
 
   //Compile Start & EndText
-  const templateStartText = Handlebars.compile(itemInfo.value.startText);
-  const templateEndText = Handlebars.compile(itemInfo.value.endText);
+  const templateStartText = documentTemplateHandlebars.compile(itemInfo.value.startText);
+  const templateEndText = documentTemplateHandlebars.compile(itemInfo.value.endText);
 
   const generateContext = (itemInfo, contactData) => {
     return {
@@ -1283,7 +1283,9 @@ const generateDocument = async () => {
 }
 
 const onChangeTab = (index) => {
-  if (index === 1) {
+  selectedTab.value = String(index)
+
+  if (String(index) === "1") {
     generateDocument()
   }
 }
@@ -1441,13 +1443,13 @@ const saveDocument = async (state, resetup = false) => {
   if (resetup) await setupPage()
 }
 
-const selectedTab = ref(0)
+const selectedTab = ref("0")
 
 const closeDocument = async () => {
 
-  if(selectedTab.value === 0) {
+  if(selectedTab.value === "0") {
     await generateDocument()
-    selectedTab.value = 1
+    selectedTab.value = "1"
   } else {
     loaded.value = false
 
@@ -1609,7 +1611,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </template>
     <template #right>
       <ArchiveButton
-          color="rose"
+          color="error"
           type="createddocuments"
           v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
           variant="outline"
@@ -1628,7 +1630,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           @click="closeDocument"
           v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'"
       >
-        {{selectedTab === 0 ? "Vorschau zeigen" : "Fertigstellen"}}
+        {{selectedTab === '0' ? "Vorschau zeigen" : "Fertigstellen"}}
       </UButton>
       <UButton
           icon="i-mdi-content-save"
@@ -1640,13 +1642,13 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </template>
   </UDashboardNavbar>
   <UDashboardPanelContent>
-    <UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
-      <template #item="{item}">
+    <UTabs class="p-5" :items="tabItems" @update:model-value="onChangeTab" v-if="loaded" v-model="selectedTab">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <UAlert
               class="my-5"
               title="Vorhandene Probleme und Informationen:"
-              :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
+              :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'error' : 'white'"
               variant="outline"
               v-if="findDocumentErrors.length > 0"
           >
@@ -1664,7 +1666,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
           <InputGroup>
             <div class="w-1/3 mr-5">
-              <UFormGroup
+              <UFormField
                   label="Dokumenttyp:"
               >
                 <InputGroup>
@@ -1689,14 +1691,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 </InputGroup>
 
                 <USlideover
-                    v-model="showAdvanceInvoiceCalcModal"
+                    v-model:open="showAdvanceInvoiceCalcModal"
                 >
-                  <UCard class="h-full">
-                    <template #header>
-                      <UButton @click="importPositions">Übernehmen</UButton>
-                    </template>
+                  <template #body>
+                    <UCard class="h-full">
+                      <template #header>
+                        <UButton @click="importPositions">Übernehmen</UButton>
+                      </template>
 
-                    <UFormGroup
+                    <UFormField
                         label="Gesamtsumme:"
                     >
                       <UInput
@@ -1705,8 +1708,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.totalSumNet"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
-                    <UFormGroup
+                    </UFormField>
+                    <UFormField
                         label="Prozent:"
                     >
                       <UInput
@@ -1715,27 +1718,26 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.partPerPecentage"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
+                    </UFormField>
 
-                    <UFormGroup
-                        label="Abzurechnender Anteil:"
-                    >
-                      <UInput
-                          type="number"
-                          :step="0.01"
-                          v-model="advanceInvoiceData.part"
-                          @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
-                      />
-                    </UFormGroup>
-
-
-                  </UCard>
+                      <UFormField
+                          label="Abzurechnender Anteil:"
+                      >
+                        <UInput
+                            type="number"
+                            :step="0.01"
+                            v-model="advanceInvoiceData.part"
+                            @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
+                        />
+                      </UFormField>
+                    </UCard>
+                  </template>
 
                 </USlideover>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Steuertyp:"
                   v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
               >
@@ -1747,9 +1749,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     @change="setTaxType"
                     class="w-full"
                 ></USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Briefpapier:"
               >
                 <USelectMenu
@@ -1761,15 +1763,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     searchable-placeholder="Suche..."
                     :search-attributes="['name']"
                     class="w-full"
-                    :color="itemInfo.letterhead ? 'primary' : 'rose'"
+                    :color="itemInfo.letterhead ? 'primary' : 'error'"
                 >
                   <template #label>
                     {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
                   </template>
                 </USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Kunde:"
               >
                 <div class="flex flex-row">
@@ -1788,7 +1790,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       {{ option.name }}{{ option.nameAddition }}
                     </template>
                     <UButton
-                        :color="itemInfo.customer ? 'primary' : 'rose'"
+                        :color="itemInfo.customer ? 'primary' : 'error'"
                         variant="outline"
                         class="w-full"
                     >
@@ -1860,8 +1862,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
                 </UAlert>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Ansprechpartner:"
                   v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
               >
@@ -1902,7 +1904,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                     >Kontakt</UButton>-->
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.contact"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.contact = null"
@@ -1915,15 +1917,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Adresse:"
               >
                 <UInput
                     v-model="itemInfo.address.street"
                     :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
-                    :color="itemInfo.address.street ? 'primary' : 'rose'"
+                    :color="itemInfo.address.street ? 'primary' : 'error'"
                 />
                 <UInput
                     v-model="itemInfo.address.special"
@@ -1940,19 +1942,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       @input="sanitizeAddressZipInput"
                       @change="checkAddressZip"
                       :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.zip : 'PLZ'"
-                      :color="itemInfo.address.zip ? 'primary' : 'rose'"
+                      :color="itemInfo.address.zip ? 'primary' : 'error'"
                   />
                   <UInput
                       class="flex-auto"
                       v-model="itemInfo.address.city"
                       :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'"
-                      :color="itemInfo.address.city ? 'primary' : 'rose'"
+                      :color="itemInfo.address.city ? 'primary' : 'error'"
                   />
                 </InputGroup>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="w-2/3">
-              <UFormGroup
+              <UFormField
                   :label="itemInfo.documentNumberTitle + ':'"
                   v-if="itemInfo.type !== 'serialInvoices'"
               >
@@ -1961,10 +1963,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     placeholder="XXXX"
                     disabled
                 />
-              </UFormGroup>
+              </UFormField>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     class="w-80 mr-1"
                     label="Lieferdatumsart:"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -1975,8 +1977,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
 
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
                     v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
                     class="mr-1"
@@ -1994,8 +1996,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     </template>
                   </UPopover>
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="itemInfo.deliveryDateType + ' Ende:'"
                     v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
                 >
@@ -2012,11 +2014,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     label="Belegdatum:"
                     class="mr-1"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -2032,10 +2034,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
 
 
-                <UFormGroup
+                <UFormField
                     class="w-full"
                     label="Zahlungsziel in Tagen:"
                 >
@@ -2043,8 +2045,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       type="number"
                       v-model="itemInfo.paymentDays"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Zahlungsart:"
                 >
@@ -2066,8 +2068,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
                     </template>
                   </USelectMenu>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Individueller Aufschlag:"
                 >
@@ -2081,9 +2083,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                     </template>
                   </UInput>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
-              <UFormGroup
+              <UFormField
                   label="Mitarbeiter:"
               >
                 <USelectMenu
@@ -2093,22 +2095,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     value-attribute="id"
                     @change="setContactPersonData"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt Telefon:"
               >
                 <UInput
                     v-model="itemInfo.contactTel"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt E-Mail:"
               >
                 <UInput
                     v-model="itemInfo.contactEMail"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Objekt:"
               >
                 <InputGroup>
@@ -2132,7 +2134,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.plant"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.plant = null"
@@ -2145,8 +2147,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Projekt:"
               >
                 <InputGroup>
@@ -2171,7 +2173,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.project"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.project = null"
@@ -2184,8 +2186,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Vertrag:"
               >
                 <InputGroup>
@@ -2210,7 +2212,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.contract"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.contract = null"
@@ -2223,19 +2225,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
             </div>
           </InputGroup>
 
           <div v-if="itemInfo.type === 'serialInvoices'" class="mb-5">
-            <UDivider class="mt-5 mb-3">
+            <USeparator class="mt-5 mb-3">
               Einstellungen für die Serienrechnung
-            </UDivider>
+            </USeparator>
 
             <div class="flex flex-row">
               <div class="w-1/3">
-                <UFormGroup
+                <UFormField
                     label="Datum erste Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2249,8 +2251,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Datum letzte Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2264,7 +2266,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
                 <UCheckbox
                     v-model="itemInfo.serialConfig.active"
                     label="Aktiv"
@@ -2273,22 +2275,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
               </div>
               <div class="w-2/3">
-                <UFormGroup
+                <UFormField
                     label="Intervall:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.intervall"
                       :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Richtung:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.dateDirection"
                       :options="['Rückwirkend','Im Voraus']"
                   />
-                </UFormGroup>
+                </UFormField>
                 <UAlert
                     title="Anfangs- und Enddatum"
                     description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt"
@@ -2301,27 +2303,27 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
           </div>
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Titel:"
           >
             <UInput v-model="itemInfo.title" disabled/>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Beschreibung:"
               class="mt-3"
           >
             <UInput v-model="itemInfo.description"/>
-          </UFormGroup>
+          </UFormField>
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -2337,20 +2339,20 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
-          <UFormGroup
+          <UFormField
               label="Einleitung:"
           >
             <UTextarea
                 v-model="itemInfo.startText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
 
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
@@ -2389,7 +2391,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       v-if="row.mode === 'pagebreak'"
                       colspan="7"
                   >
-                    <UDivider/>
+                    <USeparator/>
                   </td>
                   <td
                       v-if="row.mode === 'text'"
@@ -2429,7 +2431,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           :disabled="itemInfo.type === 'cancellationInvoices'"
                           class="w-60"
                           :options="products"
-                          :color="row.product ? 'primary' : 'rose'"
+                          :color="row.product ? 'primary' : 'error'"
                           option-attribute="name"
                           value-attribute="id"
                           searchable
@@ -2453,14 +2455,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 icon="i-heroicons-magnifying-glass"
                                                 @click="showProductSelectionModal = true"
                                             />
-                                            <UModal v-model="showProductSelectionModal">
+                                            <UModal v-model:open="showProductSelectionModal">
                                               <UCard>
                                                 <template #header>
                                                   Artikel Auswählen
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Artikelkategorie:">
+                                                  <UFormField label="Artikelkategorie:">
                                                     <USelectMenu
                                                         v-if="productcategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
@@ -2468,15 +2470,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedProductcategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
-                                                    :columns="[
+                                                    :columns="normalizeTableColumns([
                                                         {key: 'name',label:'Name'},
                                                         {key: 'manufacturer',label:'Hersteller'},
                                                         {key: 'articleNumber',label:'Artikelnummer'},
-                                                    ]"
+                                                    ])"
                                                     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
                                                     @select=" (i) => {
                                                      row.product = i.id
@@ -2501,7 +2503,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           :disabled="itemInfo.type === 'cancellationInvoices'"
                           class="w-60"
                           :options="services"
-                          :color="row.service ? 'primary' : 'rose'"
+                          :color="row.service ? 'primary' : 'error'"
                           option-attribute="name"
                           value-attribute="id"
                           searchable
@@ -2525,14 +2527,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 icon="i-heroicons-magnifying-glass"
                                                 @click="showServiceSelectionModal = true"
                                             />
-                                            <UModal v-model="showServiceSelectionModal">
+                                            <UModal v-model:open="showServiceSelectionModal">
                                               <UCard>
                                                 <template #header>
                                                   Leistung Auswählen
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Leistungskategorie:">
+                                                  <UFormField label="Leistungskategorie:">
                                                     <USelectMenu
                                                         v-if="servicecategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
@@ -2540,15 +2542,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedServicecategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
-                                                    :columns="[
+                                                    :columns="normalizeTableColumns([
                                                           {key: 'name',label:'Name'},
                                                           {key: 'serviceNumber',label:'Leistungsnummer'},
                                                           {key: 'sellingPrice',label:'Verkaufspreis'},
-                                                      ]"
+                                                    ])"
                                                     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
                                                     @select=" (i) => {
                                                        row.service = i.id
@@ -2670,8 +2672,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         v-if="row.agriculture"
                         @click="row.showEditDiesel = true"
                     />
-                    <UModal v-model="row.showEdit">
-                      <UCard>
+                    <UModal v-model:open="row.showEdit">
+                      <template #content>
+                        <UCard>
                         <!--                        <template #header>
                                                   Zeile bearbeiten
                                                 </template>-->
@@ -2685,7 +2688,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </div>
                         </template>
                         <InputGroup>
-                          <UFormGroup
+                          <UFormField
                               label="Anzahl:"
                               class="flex-auto"
                           >
@@ -2695,8 +2698,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
 
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               label="Einheit:"
                               class="flex-auto"
                           >
@@ -2711,10 +2714,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
                               </template>
                             </USelectMenu>
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
-                        <UFormGroup
+                        <UFormField
                             label="Einzelpreis:"
                             v-if="itemInfo.type !== 'deliveryNotes'"
                         >
@@ -2743,8 +2746,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                   class="text-gray-500 dark:text-gray-400 text-xs"> </span>
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Umsatzsteuer:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2761,9 +2764,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               {{ row.taxPercent }} %
                             </template>
                           </USelectMenu>
-                        </UFormGroup>
+                        </UFormField>
 
-                        <UFormGroup
+                        <UFormField
                             label="Rabatt:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2778,25 +2781,25 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                             </template>
                           </UInput>
-                        </UFormGroup>
+                        </UFormField>
                         <InputGroup class="w-full mt-3">
-                          <UFormGroup
+                          <UFormField
                               label="Optional:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.alternative"
                                 v-model="row.optional"
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               class="ml-3"
                               label="Alternativ:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.optional"
                                 v-model="row.alternative"
                             />
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
                         <UAlert
@@ -2819,7 +2822,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </li>
                         </ul>
 
-                        <UFormGroup
+                        <UFormField
                             label="Beschreibung:"
                             class="mt-3"
                         >
@@ -2829,7 +2832,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           >
 
                           </UTextarea>
-                        </UFormGroup>
+                        </UFormField>
 
                         <!--                        <template #footer>
                                                   <UButton
@@ -2838,16 +2841,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                     Speichern
                                                   </UButton>
                                                 </template>-->
-                      </UCard>
-
-
+                        </UCard>
+                      </template>
                     </UModal>
-                    <UModal v-model="row.showEditDiesel">
-                      <UCard>
-                        <template #header>
-                          Dieselverbrauch bearbeiten
-                        </template>
-                        <UFormGroup
+                    <UModal v-model:open="row.showEditDiesel">
+                      <template #content>
+                        <UCard>
+                          <template #header>
+                            Dieselverbrauch bearbeiten
+                          </template>
+                        <UFormField
                             label="Menge Diesel:"
                         >
                           <UInput
@@ -2861,8 +2864,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis Diesel:"
                         >
                           <UInput
@@ -2875,8 +2878,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Menge AdBlue:"
                         >
                           <UInput
@@ -2888,8 +2891,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis AdBlue:"
                         >
                           <UInput
@@ -2901,18 +2904,17 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <template #footer>
-                          <UButton
-                              @click="row.showEditDiesel = false,
-                                      processDieselPosition()"
-                          >
-                            Speichern
-                          </UButton>
-                        </template>
-                      </UCard>
-
-
+                        </UFormField>
+                          <template #footer>
+                            <UButton
+                                @click="row.showEditDiesel = false,
+                                        processDieselPosition()"
+                            >
+                              Speichern
+                            </UButton>
+                          </template>
+                        </UCard>
+                      </template>
                     </UModal>
                   </td>
                   <td
@@ -2942,7 +2944,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     <UButton
                         :disabled="itemInfo.type === 'cancellationInvoices'"
                         variant="ghost"
-                        color="rose"
+                        color="error"
                         icon="i-heroicons-x-mark-16-solid"
                         @click="removePosition(row.id)"
                     />
@@ -2954,7 +2956,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           <UAlert
               v-else
               title="Keine Positionen hinzugefügt"
-              color="rose"
+              color="error"
               variant="outline"
               icon="i-heroicons-light-bulb"
           ></UAlert>
@@ -3004,12 +3006,12 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </UButton>
           </InputGroup>
 
-          <!--          <UDivider
+          <!--          <USeparator
                         class="mt-5 mb-3"
                         v-if="openAdvanceInvoices.length > 0 || itemInfo.usedAdvanceInvoices.length > 0"
                     >
                       Noch nicht abgerechnete Abschlagsrechnungen
-                    </UDivider>
+                    </USeparator>
 
                     <div
                         v-for="advanceInvoice in openAdvanceInvoices"
@@ -3029,7 +3031,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         <UButton
                           @click="itemInfo.usedAdvanceInvoices = itemInfo.usedAdvanceInvoices.filter(i => i !== advanceInvoice.id)"
                           :disabled="!itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)"
-                          color="rose"
+                          color="error"
                           variant="outline"
                         >
                           X
@@ -3037,7 +3039,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       </InputGroup>
                     </div>-->
 
-          <UDivider class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0">Überschriften</UDivider>
+          <USeparator class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0" label="Überschriften"/>
 
           <table>
             <tr v-for="sumKey in Object.keys(documentTotal.titleSums) ">
@@ -3046,7 +3048,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </tr>
           </table>
 
-          <UDivider class="my-3" v-if="itemInfo.rows.length > 0">Auswertung & Gesamt</UDivider>
+          <USeparator class="my-3" v-if="itemInfo.rows.length > 0" label="Auswertung & Gesamt"/>
 
 
           <div class="w-full flex justify-between" v-if="itemInfo.type !== 'deliveryNotes'">
@@ -3112,9 +3114,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </table>
           </div>
 
-          <!--          <UDivider
+          <!--          <USeparator
                         class="my-3"
-                    >Auswertung</UDivider>
+                    >Auswertung</USeparator>
 
                     <div class="w-full flex justify-end">
                       <table class="w-1/3">
@@ -3151,11 +3153,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
 
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -3171,16 +3173,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup
+          <UFormField
               label="Nachbemerkung:"
           >
             <UTextarea
                 v-model="itemInfo.endText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
         <div v-else-if="item.label === 'Vorschau'">
           <PDFViewer

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)"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
-            :rows="getRowsForTab(item.key)"
+            :columns="normalizeTableColumns(getColumnsForTab(item.key))"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :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}">
-            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
-                dataStore.documentTypesForCreation[row.type].labelSingle
-              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
-            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
+          <template #type-cell="{row}">
+            <span v-if="row.original.type === 'cancellationInvoices'" class="text-cyan-500">{{
+                dataStore.documentTypesForCreation[row.original.type].labelSingle
+              }} für {{ filteredRows.find(i => row.original.createddocument?.id === i.id)?.documentNumber }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}</span>
           </template>
 
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Entwurf'" class="text-rose-500">{{ row.original.state }}</span>
             <span
-                v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
+                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' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['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 {{ items.find(i => i.createddocument && i.createddocument.id === row.id).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}">
-            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
-            <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
-              {{ row.customer.name.substring(0, 20) }}...
+          <template #partner-cell="{row}">
+            <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.original.customer && row.original.customer.name.length > 20" :text="row.original.customer.name">
+              {{ row.original.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
 
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
-            <span v-else>{{ row.documentNumber }}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+            <span v-else>{{ row.original.documentNumber }}</span>
           </template>
 
-          <template #date-data="{row}">
-            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
-            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
+          <template #date-cell="{row}">
+            <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).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) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
-                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+                 v-if="row.original.state === 'Gebucht' && row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type) && !hasCancellationInvoice(row.original)"
+                 :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' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
-              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+                v-if="(row.original.type === 'invoices' ||row.original.type === 'advanceInvoices') && row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)">
+              <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}">
-            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+          <template #amount-cell="{row}">
+            <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' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">
-              {{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}
+                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.original, items)) }}
             </span>
           </template>
         </UTable>
@@ -264,13 +264,22 @@ const clearSearchString = () => {
   debouncedSearchString.value = ''
 }
 
+const getCancellationInvoice = (row) => {
+  return items.value.find((item) => {
+    const linkedDocumentId = item.createddocument?.id || item.createddocument
+    return item.type === 'cancellationInvoices'
+        && item.state !== 'Entwurf'
+        && !item.archived
+        && linkedDocumentId === row.id
+  })
+}
+
+const hasCancellationInvoice = (row) => Boolean(getCancellationInvoice(row))
+
 const openUnpaidInvoicesFilter = {
   name: 'Nur offene Rechnungen',
   filterFunction: (row) => {
-    return ['invoices', 'advanceInvoices'].includes(row.type)
-        && row.state === 'Gebucht'
-        && !useSum().getIsPaid(row, items.value)
-        && !items.value.find(i => i.linkedDocument && i.linkedDocument.id === row.id)
+    return useSum().isOpenCreatedDocument(row, items.value)
   }
 }
 
@@ -319,8 +328,6 @@ const getRowsForTab = (tabKey) => {
 }
 
 const isPaid = (item) => {
-  let amountPaid = 0
-  item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
-  return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
+  return useSum().getIsPaid(item, items.value)
 }
 </script>

frontend/pages/createDocument/serialInvoice.vue

@@ -44,15 +44,15 @@
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="filterOptions"
-          option-attribute="name"
-          value-attribute="name"
+          :items="filterOptions"
+          label-key="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"
-      :columns="columns"
+      :data="filteredRows"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+      :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: '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}">
-      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+    <template #type-cell="{row}">
+      {{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
     </template>
-    <template #partner-data="{row}">
-      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+    <template #partner-cell="{row}">
+      <span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
 
     </template>
-    <template #amount-data="{row}">
-      {{displayCurrency(calculateDocSum(row))}}
+    <template #amount-cell="{row}">
+      {{displayCurrency(calculateDocSum(row.original))}}
     </template>
-    <template #serialConfig.active-data="{row}">
-      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+    <template #serialConfig.active-cell="{row}">
+      <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}">
-      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+    <template #contract-cell="{row}">
+      <span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
     </template>
-    <template #serialConfig.intervall-data="{row}">
-      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
-      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+    <template #serialConfig.intervall-cell="{row}">
+      <span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
     </template>
-    <template #payment_type-data="{row}">
-      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
-      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+    <template #payment_type-cell="{row}">
+      <span v-if="row.original.payment_type === 'transfer'">Überweisung</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' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Serienrechnungen manuell ausführen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
-        </div>
-      </template>
+  <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Serienrechnungen manuell ausführen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+          </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"
-                option-attribute="label"
-                value-attribute="value"
+                :items="executionIntervallOptions"
+                label-key="label"
+                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"
-              :columns="executionColumns"
+              :data="filteredExecutionList"
+              :columns="normalizeTableColumns(executionColumns)"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
           >
-            <template #partner-data="{row}">
-              {{row.customer ? row.customer.name : "-"}}
+            <template #partner-cell="{row}">
+              {{row.original.customer ? row.original.customer.name : "-"}}
             </template>
-            <template #amount-data="{row}">
-              {{displayCurrency(calculateDocSum(row))}}
+            <template #amount-cell="{row}">
+              {{displayCurrency(calculateDocSum(row.original))}}
             </template>
-            <template #serialConfig.intervall-data="{row}">
-              {{ getIntervallLabel(row.serialConfig?.intervall) }}
+            <template #serialConfig.intervall-cell="{row}">
+              {{ getIntervallLabel(row.original.serialConfig?.intervall) }}
             </template>
-            <template #contract-data="{row}">
-              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+            <template #contract-cell="{row}">
+              {{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
             </template>
-            <template #plant-data="{row}">
-              {{ row.plant?.name || "-" }}
+            <template #plant-cell="{row}">
+              {{ row.original.plant?.name || "-" }}
             </template>
           </UTable>
         </div>
@@ -231,58 +232,61 @@
         </div>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
-          <UButton
-              color="primary"
-              :loading="isExecuting"
-              :disabled="selectedExecutionRows.length === 0"
-              @click="executeSerialInvoices"
-          >
-            Jetzt ausführen
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+            <UButton
+                color="primary"
+                :loading="isExecuting"
+                :disabled="selectedExecutionRows.length === 0"
+                @click="executeSerialInvoices"
+            >
+              Jetzt ausführen
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
-  <USlideover v-model="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 #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Alle Ausführungen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
-        </div>
-      </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>
+  <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+    <template #body>
+      <UCard class="flex flex-col flex-1" :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">
+              Alle Ausführungen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
           </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}}
+        </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">
+              <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'}]">
-      <template #item="{item}">
+    <UTabs v-model="openTab" @update:model-value="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
+      <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"
-                option-attribute="email"
-                value-attribute="id"
+                :items="emailAccounts"
+                label-key="email"
+                value-key="id"
                 v-model="emailData.account"
             />
-          </UFormGroup>
-          <UDivider class="my-3"/>
-          <UFormGroup
+          </UFormField>
+          <USeparator class="my-3"/>
+          <UFormField
               label="Empfänger"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.to"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Kopie"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.cc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Blindkopie"
           >
             <UInput
@@ -245,17 +245,17 @@ const sendEmail = async () => {
                 placeholder=""
                 v-model="emailData.bcc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <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"
-      :columns="[
+      :data="filteredExports"
+      :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}">
-      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+    <template #created_at-cell="{row}">
+      {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #start_date-data="{row}">
-      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+    <template #start_date-cell="{row}">
+      {{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #end_date-data="{row}">
-      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+    <template #end_date-cell="{row}">
+      {{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #valid_until-data="{row}">
-      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+    <template #valid_until-cell="{row}">
+      {{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #download-data="{row}">
-      <UButton @click="downloadFile(row)">Download</UButton>
+    <template #download-cell="{row}">
+      <UButton @click="downloadFile(row.original)">Download</UButton>
     </template>
   </UTable>
 
-  <UModal v-model="showCreateExportModal">
-    <UCard>
-      <template #header>
-        Export erstellen
-      </template>
+  <UModal v-model:open="showCreateExportModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          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,21 +207,22 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.end_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end">
-          <UButton @click="createExport">
-            Erstellen
-          </UButton>
-        </div>
-      </template>
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton @click="createExport">
+              Erstellen
+            </UButton>
+          </div>
+        </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
 </template>
 
 <style scoped>
-</style>
+</style>

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' }">
-        <template #label>
+      <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">
+        <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>
@@ -371,9 +371,9 @@ const syncdokubox = async () => {
       <UProgress animation="carousel" class="w-1/2"/>
     </div>
 
-    <div v-else>
-      <div v-if="displayMode === 'list'">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+      <div v-else>
+        <div v-if="displayMode === 'list'">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
           <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
           <tr>
             <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold sm:pl-6">Name</th>
@@ -412,6 +412,11 @@ const syncdokubox = async () => {
               </UDropdown>
             </td>
           </tr>
+          <tr v-if="renderedFileList.length === 0">
+            <td colspan="3" class="px-6 py-16 text-center text-sm text-gray-500">
+              Keine Dateien oder Ordner vorhanden.
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -438,34 +443,41 @@ const syncdokubox = async () => {
           />
           <span class="text-xs font-medium text-center truncate w-full">{{ entry.label }}</span>
         </div>
+        <div
+            v-if="renderedFileList.length === 0"
+            class="col-span-full rounded-xl border border-dashed border-gray-300 dark:border-gray-700 px-6 py-16 text-center text-sm text-gray-500"
+        >
+          Keine Dateien oder Ordner vorhanden.
+        </div>
       </div>
     </div>
   </UDashboardPanelContent>
 
-  <UModal v-model="createFolderModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
+  <UModal v-model:open="createFolderModalOpen">
+    <template #content>
+      <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"
-              value-attribute="id"
-              option-attribute="name"
+              :items="filetags"
+              value-key="id"
+              label-key="name"
               placeholder="Kein Standardtyp"
               searchable
               clear-search-on-close
               :disabled="isParentTypeMandatory"
           />
-        </UFormGroup>
+        </UFormField>
 
         <UCheckbox
             v-model="createFolderData.standardFiletypeIsOptional"
@@ -474,27 +486,30 @@ const syncdokubox = async () => {
         />
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="createFolder">Erstellen</UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="createFolder">Erstellen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
-  <UModal v-model="renameModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Umbenennen</h3></template>
-      <UFormGroup label="Neuer Name">
-        <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
-      </UFormGroup>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="updateName">Speichern</UButton>
-        </div>
-      </template>
-    </UCard>
+  <UModal v-model:open="renameModalOpen">
+    <template #content>
+      <UCard>
+        <template #header><h3 class="font-bold">Umbenennen</h3></template>
+        <UFormField label="Neuer Name">
+          <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
+        </UFormField>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="updateName">Speichern</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
-</template>
+</template>

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

@@ -157,7 +157,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 +220,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 +286,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,14 +323,14 @@ 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"
@@ -354,7 +354,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 +365,37 @@ 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'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Zahlart">
+              <UFormField label="Zahlart">
                 <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsdatum">
+              <UFormField label="Rechnungsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Fälligkeitsdatum">
+              <UFormField label="Fälligkeitsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
                   </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'" />
-              </UFormGroup>
+              </UFormField>
             </div>
           </UCard>
 
@@ -404,7 +404,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 +419,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,7 +428,7 @@ 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
                         v-model="item.account"
                         :options="accounts"
@@ -446,11 +446,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ 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
                         v-model="item.costCentre"
                         :options="costcentres"
@@ -464,11 +464,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ 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
                         type="number"
                         step="0.01"
@@ -478,11 +478,11 @@ 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
                         type="number"
                         step="0.01"
@@ -492,11 +492,11 @@ 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
                         v-model="item.taxType"
                         :options="taxOptions"
@@ -505,15 +505,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         :disabled="mode === 'show'"
                         @change="recalculateItem(item, 'taxType')"
                     />
-                  </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" >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 flex justify-end gap-2">

frontend/pages/incomingInvoices/index.vue

@@ -191,7 +191,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 +203,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 +220,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 +244,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"
-            :rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
-            :columns="columns"
+            @update:sorting="setupPage"
+            :data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
+            :columns="normalizeTableColumns(columns)"
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            @select="(i) => selectIncomingInvoice(i) "
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :on-select="(i) => selectIncomingInvoice(i) "
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
-            <span v-else>{{row.reference}}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
+            <span v-else>{{row.original.reference}}</span>
           </template>
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
           </template>
-          <template #date-data="{row}">
-            {{dayjs(row.date).format("DD.MM.YYYY")}}
+          <template #date-cell="{row}">
+            {{dayjs(row.original.date).format("DD.MM.YYYY")}}
           </template>
-          <template #vendor-data="{row}">
-            {{row.vendor ? row.vendor.name : ""}}
+          <template #vendor-cell="{row}">
+            {{row.original.vendor ? row.original.vendor.name : ""}}
           </template>
-          <template #amount-data="{row}">
-            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+          <template #amount-cell="{row}">
+            {{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
           </template>
-          <template #dueDate-data="{row}">
-            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+          <template #dueDate-cell="{row}">
+            <span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
           </template>
-          <template #paid-data="{row}">
-            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+          <template #paid-cell="{row}">
+            <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

@@ -7,6 +7,7 @@ import DisplayOpenBalances from "~/components/displayOpenBalances.vue"
 import DisplayBankaccounts from "~/components/displayBankaccounts.vue"
 import DisplayProjectsInPhases from "~/components/displayProjectsInPhases.vue"
 import DisplayOpenTasks from "~/components/displayOpenTasks.vue"
+import DisplayTaxSummary from "~/components/displayTaxSummary.vue"
 
 setPageLayout("default")
 
@@ -68,6 +69,15 @@ const DASHBOARD_WIDGETS = [
     defaultLayout: { x: 0, y: 7, w: 4, h: 3 },
     minW: 3,
     minH: 3
+  },
+  {
+    id: "tax-summary",
+    title: "USt aktuell",
+    description: "USt, Vorsteuer und Saldo des aktuellen Zeitraums",
+    component: markRaw(DisplayTaxSummary),
+    defaultLayout: { x: 4, y: 7, w: 4, h: 3 },
+    minW: 3,
+    minH: 3
   }
 ]
 
@@ -372,7 +382,7 @@ onBeforeUnmount(() => {
       </template>
     </UDashboardNavbar>
 
-    <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto h-80">
+    <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto">
       <div
           v-for="widget in visibleWidgets"
           :key="widget.id"
@@ -385,9 +395,9 @@ onBeforeUnmount(() => {
           :gs-min-w="widget.minW"
           :gs-min-h="widget.minH"
       >
-          <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-header border-b border-gray-200 dark:border-gray-800">
+        <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-header border-b border-gray-200 dark:border-gray-800">
               <div class="flex items-start justify-between gap-3">
                 <div class="min-w-0">
                   <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
@@ -430,7 +440,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div 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">
         Es sind aktuell keine Dashboard-Karten sichtbar.
       </p>
@@ -439,55 +449,57 @@ onBeforeUnmount(() => {
       </UButton>
     </div>
 
-    <UModal v-model="manageCardsOpen">
-      <UCard>
-        <template #header>
-          <div class="flex items-center justify-between gap-3">
-            <div>
-              <h2 class="font-semibold">Dashboard-Karten</h2>
-              <p class="text-sm">
-                Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
-              </p>
+    <UModal v-model:open="manageCardsOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between gap-3">
+              <div>
+                <h2 class="font-semibold">Dashboard-Karten</h2>
+                <p class="text-sm">
+                  Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
+                </p>
+              </div>
+              <UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard">
+                Zurücksetzen
+              </UButton>
             </div>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard">
-              Zurücksetzen
-            </UButton>
-          </div>
-        </template>
+          </template>
 
-        <div class="space-y-3">
-          <div
-            v-for="definition in DASHBOARD_WIDGETS"
-            :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"
-          >
-            <div>
-              <p class="font-medium">{{ definition.title }}</p>
-              <p class="text-sm">{{ definition.description }}</p>
+          <div class="space-y-3">
+            <div
+              v-for="definition in DASHBOARD_WIDGETS"
+              :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"
+            >
+              <div>
+                <p class="font-medium">{{ definition.title }}</p>
+                <p class="text-sm">{{ definition.description }}</p>
+              </div>
+
+              <UButton
+                v-if="getWidgetLayout(definition.id)?.visible"
+                color="gray"
+                variant="soft"
+                icon="i-heroicons-minus"
+                :disabled="visibleWidgets.length <= 1"
+                @click="removeWidget(definition.id)"
+              >
+                Entfernen
+              </UButton>
+              <UButton
+                v-else
+                color="primary"
+                variant="soft"
+                icon="i-heroicons-plus"
+                @click="addWidget(definition.id)"
+              >
+                Hinzufügen
+              </UButton>
             </div>
-
-            <UButton
-              v-if="getWidgetLayout(definition.id)?.visible"
-              color="gray"
-              variant="soft"
-              icon="i-heroicons-minus"
-              :disabled="visibleWidgets.length <= 1"
-              @click="removeWidget(definition.id)"
-            >
-              Entfernen
-            </UButton>
-            <UButton
-              v-else
-              color="primary"
-              variant="soft"
-              icon="i-heroicons-plus"
-              @click="addWidget(definition.id)"
-            >
-              Hinzufügen
-            </UButton>
           </div>
-        </div>
-      </UCard>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>

frontend/pages/login.vue

@@ -16,7 +16,7 @@ const doLogin = async (data:any) => {
     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"})
   }
 }
 </script>

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">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              {{ absenceModalTitle }}
-            </h3>
-            <UButton
-              color="gray"
-              variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
-              class="-my-1"
-              @click="isAbsenceModalOpen = false"
-            />
-          </div>
-        </template>
+    <UModal v-model:open="isAbsenceModalOpen">
+      <template #content>
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                {{ absenceModalTitle }}
+              </h3>
+              <UButton
+                color="gray"
+                variant="ghost"
+                icon="i-heroicons-x-mark-20-solid"
+                class="-my-1"
+                @click="isAbsenceModalOpen = false"
+              />
+            </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>
-            <UFormGroup label="Ende">
+            </UFormField>
+            <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>
-          <div class="flex justify-end gap-2">
-            <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
-              Abbrechen
-            </UButton>
-            <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
-              Speichern
-            </UButton>
-          </div>
-        </template>
-      </UCard>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
+                Abbrechen
+              </UButton>
+              <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
+                Speichern
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>

frontend/pages/password-change.vue

@@ -24,7 +24,7 @@ const doChange = async (data:any) => {
     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"})
   }
 }
 </script>

frontend/pages/password-reset.vue

@@ -22,7 +22,7 @@ const doReset = async (data:any) => {
     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"})
   }
 }
 </script>

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

@@ -9,18 +9,20 @@ defineShortcuts({
     router.push("/projecttypes")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    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">
-                  <UCard>
-                    <div class="flex items-center justify-between">
-                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                        Schnellaktion hinzufügen
-                      </h3>
-                      <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
-                    </div>
-                    <div class="flex flex-col">
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
+                <UModal v-model:open="openQuickActionModal">
+                  <template #content>
+                    <UCard>
+                      <div class="flex items-center justify-between">
+                        <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                          Schnellaktion hinzufügen
+                        </h3>
+                        <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
+                      </div>
+                      <div class="flex flex-col">
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
+                        <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>
@@ -301,4 +305,4 @@ const addPhase = () => {
 
 <style scoped>
 
-</style>
+</style>

frontend/pages/projecttypes/index.vue

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

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

@@ -8,13 +8,15 @@ defineShortcuts({
     router.push("/roles")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    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>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Rechte:"
     >
       <USelectMenu
@@ -176,14 +178,14 @@ setupPage()
           multiple
       >
       </USelectMenu>
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Beschreibung:"
     >
       <UTextarea
           v-model="itemInfo.description"
       />
-    </UFormGroup>
+    </UFormField>
   </UForm>
 </template>
 

frontend/pages/settings/admin.vue

@@ -0,0 +1,894 @@
+<script setup lang="ts">
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+
+type AdminRole = {
+  id: string
+  name: string
+  description?: string | null
+  tenant_id: number | null
+}
+
+type AdminTenant = {
+  id: number
+  name: string
+  short: string
+  user_count: number
+  locked?: string | null
+}
+
+type AdminUserProfile = {
+  id: string
+  user_id: string
+  tenant_id: number
+  full_name: string | null
+  first_name: string
+  last_name: string
+  email?: string | null
+  active: boolean
+}
+
+type AdminUser = {
+  id: string
+  email: string
+  display_name: string
+  multiTenant: boolean
+  must_change_password: boolean
+  is_admin: boolean
+  profile_defaults: {
+    first_name: string
+    last_name: string
+  }
+  tenant_ids: number[]
+  role_assignments: { tenant_id: number; role_id: string }[]
+  profile_assignments?: { tenant_id: number; profile_id?: string | null }[]
+  profiles: AdminUserProfile[]
+}
+
+const loading = ref(true)
+const savingUser = ref(false)
+const savingTenant = ref(false)
+const creatingUser = ref(false)
+const creatingTenant = ref(false)
+const activeTab = ref("0")
+const createUserModalOpen = ref(false)
+const createTenantModalOpen = ref(false)
+const createdUserPassword = ref("")
+
+const users = ref<AdminUser[]>([])
+const tenants = ref<AdminTenant[]>([])
+const roles = ref<AdminRole[]>([])
+const unassignedProfiles = ref<AdminUserProfile[]>([])
+
+const selectedUserId = ref<string | null>(null)
+const selectedTenantId = ref<number | null>(null)
+
+const userForm = ref<AdminUser | null>(null)
+const tenantForm = ref<AdminTenant | null>(null)
+const createUserForm = ref({
+  email: "",
+  password: "",
+  first_name: "",
+  last_name: "",
+  is_admin: false,
+  multiTenant: true,
+})
+const createTenantForm = ref({
+  name: "",
+  short: "",
+})
+
+const tabItems = [
+  { label: "Benutzer" },
+  { label: "Tenants" },
+]
+
+const sortedUsers = computed(() =>
+  [...users.value].sort((a, b) => a.display_name.localeCompare(b.display_name, "de"))
+)
+
+const sortedTenants = computed(() =>
+  [...tenants.value].sort((a, b) => a.name.localeCompare(b.name, "de"))
+)
+
+const tenantOptions = computed(() =>
+  sortedTenants.value.map((tenant) => ({
+    label: `${tenant.name} (${tenant.short})`,
+    value: tenant.id,
+  }))
+)
+
+const userTableColumns = [
+  { key: "display_name", label: "Benutzer" },
+  { key: "email", label: "E-Mail" },
+  { 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) => ({
+    ...user,
+    tenant_count: user.tenant_ids.length,
+    is_admin: user.is_admin ? "Ja" : "Nein",
+  }))
+)
+
+const tenantTableRows = computed(() => sortedTenants.value)
+
+const getRoleOptionsForTenant = (tenantId: number) =>
+  roles.value
+    .filter((role) => role.tenant_id === null || role.tenant_id === tenantId)
+    .map((role) => ({
+      label: role.tenant_id === null ? `${role.name} (global)` : role.name,
+      value: role.id,
+    }))
+
+const getUsersForTenant = (tenantId: number) =>
+  sortedUsers.value.filter((user) => user.tenant_ids.includes(tenantId))
+
+const getFreeProfilesForTenant = (tenantId: number) =>
+  unassignedProfiles.value.filter((profile) => profile.tenant_id === tenantId)
+
+const cloneUser = (user: AdminUser): AdminUser => ({
+  ...user,
+  profile_defaults: { ...user.profile_defaults },
+  tenant_ids: [...(user.tenant_ids || [])],
+  role_assignments: [...(user.role_assignments || [])],
+  profile_assignments: [...(user.profile_assignments || [])],
+  profiles: [...(user.profiles || [])],
+})
+
+const cloneTenant = (tenant: AdminTenant): AdminTenant => ({
+  ...tenant,
+})
+
+const normalizeUserAssignments = () => {
+  if (!userForm.value) return
+
+  const uniqueTenantIds = Array.from(new Set((userForm.value.tenant_ids || []).map(Number))).sort((a, b) => a - b)
+  const assignmentsByTenant = new Map<number, string>()
+  const profileAssignmentByTenant = new Map<number, string | null>()
+
+  for (const assignment of userForm.value.role_assignments || []) {
+    if (!uniqueTenantIds.includes(Number(assignment.tenant_id))) continue
+    if (assignmentsByTenant.has(Number(assignment.tenant_id))) continue
+    assignmentsByTenant.set(Number(assignment.tenant_id), assignment.role_id)
+  }
+
+  for (const assignment of userForm.value.profile_assignments || []) {
+    if (!uniqueTenantIds.includes(Number(assignment.tenant_id))) continue
+    profileAssignmentByTenant.set(Number(assignment.tenant_id), assignment.profile_id || null)
+  }
+
+  userForm.value.tenant_ids = uniqueTenantIds
+  userForm.value.role_assignments = uniqueTenantIds
+    .map((tenantId) => {
+      const roleId = assignmentsByTenant.get(tenantId)
+      return roleId ? { tenant_id: tenantId, role_id: roleId } : null
+    })
+    .filter(Boolean) as { tenant_id: number; role_id: string }[]
+  userForm.value.profile_assignments = uniqueTenantIds.map((tenantId) => ({
+    tenant_id: tenantId,
+    profile_id: profileAssignmentByTenant.get(tenantId) || null,
+  }))
+}
+
+const updateUserTenants = (tenantIds: number[] = []) => {
+  if (!userForm.value) return
+
+  userForm.value.tenant_ids = tenantIds
+  normalizeUserAssignments()
+}
+
+const setRoleForTenant = (tenantId: number, roleId?: string | null) => {
+  if (!userForm.value) return
+
+  userForm.value.role_assignments = (userForm.value.role_assignments || []).filter((assignment) => assignment.tenant_id !== tenantId)
+
+  if (roleId) {
+    userForm.value.role_assignments.push({
+      tenant_id: tenantId,
+      role_id: roleId,
+    })
+  }
+}
+
+const getRoleForTenant = (tenantId: number) => {
+  return userForm.value?.role_assignments?.find((assignment) => assignment.tenant_id === tenantId)?.role_id || null
+}
+
+const setProfileAssignmentForTenant = (tenantId: number, profileId?: string | null) => {
+  if (!userForm.value) return
+
+  userForm.value.profile_assignments = (userForm.value.profile_assignments || []).filter((assignment) => assignment.tenant_id !== tenantId)
+  userForm.value.profile_assignments.push({
+    tenant_id: tenantId,
+    profile_id: profileId || null,
+  })
+}
+
+const getProfileAssignmentForTenant = (tenantId: number) => {
+  return userForm.value?.profile_assignments?.find((assignment) => assignment.tenant_id === tenantId)?.profile_id || null
+}
+
+const selectUser = (row: any) => {
+  const user = users.value.find((entry) => entry.id === row.id)
+  if (!user) return
+
+  selectedUserId.value = user.id
+  userForm.value = cloneUser(user)
+  normalizeUserAssignments()
+}
+
+const selectTenant = (row: any) => {
+  const tenant = tenants.value.find((entry) => entry.id === row.id)
+  if (!tenant) return
+
+  selectedTenantId.value = tenant.id
+  tenantForm.value = cloneTenant(tenant)
+}
+
+const fetchOverview = async () => {
+  loading.value = true
+
+  try {
+    const response = await useNuxtApp().$api("/api/admin/overview")
+
+    users.value = response.users || []
+    tenants.value = response.tenants || []
+    roles.value = response.roles || []
+    unassignedProfiles.value = response.unassignedProfiles || []
+
+    if (!selectedUserId.value && users.value.length) {
+      selectUser(users.value[0])
+    } else if (selectedUserId.value) {
+      const currentUser = users.value.find((user) => user.id === selectedUserId.value)
+      if (currentUser) selectUser(currentUser)
+    }
+
+    if (!selectedTenantId.value && tenants.value.length) {
+      selectTenant(tenants.value[0])
+    } else if (selectedTenantId.value) {
+      const currentTenant = tenants.value.find((tenant) => tenant.id === selectedTenantId.value)
+      if (currentTenant) selectTenant(currentTenant)
+    }
+  } catch (err: any) {
+    console.error("[admin/fetchOverview]", err)
+    toast.add({
+      title: "Administration konnte nicht geladen werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const saveUser = async () => {
+  if (!userForm.value || savingUser.value) return
+
+  savingUser.value = true
+  normalizeUserAssignments()
+
+  try {
+    await useNuxtApp().$api(`/api/admin/users/${userForm.value.id}`, {
+      method: "PUT",
+      body: {
+        email: userForm.value.email,
+        multiTenant: userForm.value.multiTenant,
+        must_change_password: userForm.value.must_change_password,
+        is_admin: userForm.value.is_admin,
+      },
+    })
+
+    await useNuxtApp().$api(`/api/admin/users/${userForm.value.id}/access`, {
+      method: "PUT",
+      body: {
+        tenant_ids: userForm.value.tenant_ids,
+        role_assignments: userForm.value.role_assignments,
+        profile_defaults: userForm.value.profile_defaults,
+        profile_assignments: userForm.value.profile_assignments,
+      },
+    })
+
+    await fetchOverview()
+    await auth.fetchMe()
+
+    toast.add({
+      title: "Benutzer gespeichert",
+      color: "green",
+    })
+  } catch (err: any) {
+    console.error("[admin/saveUser]", err)
+    toast.add({
+      title: "Benutzer konnte nicht gespeichert werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    savingUser.value = false
+  }
+}
+
+const createUser = async () => {
+  if (creatingUser.value) return
+
+  creatingUser.value = true
+
+  try {
+    const response = await useNuxtApp().$api("/api/admin/users", {
+      method: "POST",
+      body: createUserForm.value,
+    })
+
+    createdUserPassword.value = response.initialPassword || ""
+    createUserModalOpen.value = false
+    createUserForm.value = {
+      email: "",
+      password: "",
+      first_name: "",
+      last_name: "",
+      is_admin: false,
+      multiTenant: true,
+    }
+
+    await fetchOverview()
+
+    if (response.user?.id) {
+      const createdUser = users.value.find((user) => user.id === response.user.id)
+      if (createdUser) selectUser(createdUser)
+    }
+
+    toast.add({
+      title: "Benutzer angelegt",
+      description: createdUserPassword.value ? `Initialpasswort: ${createdUserPassword.value}` : undefined,
+      color: "green",
+    })
+  } catch (err: any) {
+    console.error("[admin/createUser]", err)
+    toast.add({
+      title: "Benutzer konnte nicht angelegt werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    creatingUser.value = false
+  }
+}
+
+const saveTenant = async () => {
+  if (!tenantForm.value || savingTenant.value) return
+
+  savingTenant.value = true
+
+  try {
+    await useNuxtApp().$api(`/api/admin/tenants/${tenantForm.value.id}`, {
+      method: "PUT",
+      body: {
+        name: tenantForm.value.name,
+        short: tenantForm.value.short,
+      },
+    })
+
+    await fetchOverview()
+    await auth.fetchMe()
+
+    toast.add({
+      title: "Tenant gespeichert",
+      color: "green",
+    })
+  } catch (err: any) {
+    console.error("[admin/saveTenant]", err)
+    toast.add({
+      title: "Tenant konnte nicht gespeichert werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    savingTenant.value = false
+  }
+}
+
+const createTenant = async () => {
+  if (creatingTenant.value) return
+
+  creatingTenant.value = true
+
+  try {
+    const response = await useNuxtApp().$api("/api/admin/tenants", {
+      method: "POST",
+      body: createTenantForm.value,
+    })
+
+    createTenantModalOpen.value = false
+    createTenantForm.value = {
+      name: "",
+      short: "",
+    }
+
+    await fetchOverview()
+
+    if (response.tenant?.id) {
+      const createdTenant = tenants.value.find((tenant) => tenant.id === response.tenant.id)
+      if (createdTenant) selectTenant(createdTenant)
+    }
+
+    toast.add({
+      title: "Tenant angelegt",
+      description: "Standardordner und Datei-Tags wurden erstellt.",
+      color: "green",
+    })
+  } catch (err: any) {
+    console.error("[admin/createTenant]", err)
+    toast.add({
+      title: "Tenant konnte nicht angelegt werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    creatingTenant.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!auth.user?.is_admin) {
+    toast.add({
+      title: "Zugriff verweigert",
+      description: "Diese Seite ist nur für administrative Benutzer verfügbar.",
+      color: "red",
+    })
+    await router.push("/")
+    return
+  }
+
+  await fetchOverview()
+})
+</script>
+
+<template>
+  <UDashboardNavbar title="Administration" />
+
+  <UDashboardPanelContent class="p-5 overflow-hidden">
+    <UAlert
+      v-if="!auth.user?.is_admin"
+      title="Kein Zugriff"
+      description="Für diese Seite wird ein administrativer Benutzer benötigt."
+      color="red"
+      variant="soft"
+    />
+
+    <UTabs
+      v-else
+      v-model="activeTab"
+      :items="tabItems"
+      class="admin-tabs h-full"
+    >
+      <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">
+              <h2 class="text-lg font-semibold">Benutzer</h2>
+              <div class="flex items-center gap-2">
+                <UBadge variant="subtle">{{ users.length }}</UBadge>
+                <UButton
+                  size="sm"
+                  icon="i-heroicons-plus"
+                  @click="createUserModalOpen = true"
+                >
+                  Benutzer
+                </UButton>
+              </div>
+            </div>
+
+            <div class="admin-scroll">
+              <UTable
+                v-if="!loading"
+                :data="userTableRows"
+                :columns="normalizedUserTableColumns"
+                :on-select="selectUser"
+              />
+
+              <USkeleton v-else class="h-80" />
+            </div>
+          </UCard>
+
+          <UCard class="admin-card xl:col-span-2">
+            <div v-if="userForm" class="admin-scroll space-y-6">
+              <div class="flex items-start justify-between gap-4">
+                <div>
+                  <h2 class="text-lg font-semibold">{{ userForm.display_name }}</h2>
+                  <p class="text-sm text-gray-500">{{ userForm.email }}</p>
+                </div>
+
+                <UButton
+                  color="primary"
+                  :loading="savingUser"
+                  @click="saveUser"
+                >
+                  Benutzer speichern
+                </UButton>
+              </div>
+
+              <UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <UFormField label="E-Mail">
+                  <UInput v-model="userForm.email" />
+                </UFormField>
+
+                <UFormField label="Profil Vorname">
+                  <UInput v-model="userForm.profile_defaults.first_name" />
+                </UFormField>
+
+                <UFormField label="Profil Nachname">
+                  <UInput v-model="userForm.profile_defaults.last_name" />
+                </UFormField>
+
+                <UFormField label="Tenants">
+                  <USelectMenu
+                    :model-value="userForm.tenant_ids"
+                    :items="tenantOptions"
+                    value-key="value"
+                    label-key="label"
+                    multiple
+                    @update:model-value="updateUserTenants"
+                  />
+                </UFormField>
+
+                <UFormField label="Administrative Freigabe">
+                  <div class="flex items-center gap-3 h-10">
+                    <USwitch v-model="userForm.is_admin" />
+                    <span class="text-sm text-gray-600">Darf Administrationsseite und Admin-API nutzen</span>
+                  </div>
+                </UFormField>
+
+                <UFormField label="Multi-Tenant">
+                  <div class="flex items-center gap-3 h-10">
+                    <USwitch v-model="userForm.multiTenant" />
+                    <span class="text-sm text-gray-600">Benutzer darf mehreren Tenants zugeordnet sein</span>
+                  </div>
+                </UFormField>
+
+                <UFormField label="Passwortwechsel erzwingen">
+                  <div class="flex items-center gap-3 h-10">
+                    <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>
+                </UFormField>
+              </UForm>
+
+              <div>
+                <USeparator label="Rollen pro Tenant" class="mb-4" />
+
+                <div
+                  v-if="userForm.tenant_ids.length"
+                  class="grid grid-cols-1 md:grid-cols-2 gap-4"
+                >
+                  <UCard
+                    v-for="tenantId in userForm.tenant_ids"
+                    :key="tenantId"
+                    class="border border-gray-200"
+                  >
+                    <div class="space-y-3">
+                      <div>
+                        <div class="font-medium">
+                          {{ tenants.find((tenant) => tenant.id === tenantId)?.name || `Tenant ${tenantId}` }}
+                        </div>
+                        <div class="text-sm text-gray-500">
+                          {{ tenants.find((tenant) => tenant.id === tenantId)?.short || "" }}
+                        </div>
+                      </div>
+
+                      <UFormField label="Rolle">
+                        <USelectMenu
+                          :model-value="getRoleForTenant(tenantId)"
+                          :items="getRoleOptionsForTenant(tenantId)"
+                          value-key="value"
+                          label-key="label"
+                          placeholder="Rolle auswählen"
+                          @update:model-value="(value) => setRoleForTenant(tenantId, value)"
+                        />
+                      </UFormField>
+
+                      <UFormField label="Freies Profil">
+                        <USelectMenu
+                          :model-value="getProfileAssignmentForTenant(tenantId)"
+                          :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-key="value"
+                          label-key="label"
+                          placeholder="Profil auswählen"
+                          @update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
+                        />
+                      </UFormField>
+                    </div>
+                  </UCard>
+                </div>
+
+                <UAlert
+                  v-else
+                  title="Keine Tenant-Zuordnung"
+                  description="Weise dem Benutzer zuerst mindestens einen Tenant zu."
+                  color="amber"
+                  variant="soft"
+                />
+              </div>
+
+              <div>
+                <USeparator label="Profile im System" class="mb-4" />
+                <div class="flex flex-wrap gap-2">
+                  <UBadge
+                    v-for="profile in userForm.profiles"
+                    :key="profile.id"
+                    variant="subtle"
+                    color="gray"
+                  >
+                    {{ profile.full_name || `${profile.first_name} ${profile.last_name}` }} · Tenant {{ profile.tenant_id }}
+                  </UBadge>
+                </div>
+              </div>
+            </div>
+
+            <UAlert
+              v-else-if="!loading"
+              title="Kein Benutzer ausgewählt"
+              description="Wähle links einen Benutzer aus, um seine Zuordnungen zu bearbeiten."
+              color="gray"
+              variant="soft"
+            />
+
+            <div v-else class="admin-scroll">
+              <USkeleton class="h-80" />
+            </div>
+          </UCard>
+        </div>
+
+        <div v-else-if="item.label === 'Tenants'" 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">
+              <h2 class="text-lg font-semibold">Tenants</h2>
+              <div class="flex items-center gap-2">
+                <UBadge variant="subtle">{{ tenants.length }}</UBadge>
+                <UButton
+                  size="sm"
+                  icon="i-heroicons-plus"
+                  @click="createTenantModalOpen = true"
+                >
+                  Tenant
+                </UButton>
+              </div>
+            </div>
+
+            <div class="admin-scroll">
+              <UTable
+                v-if="!loading"
+                :data="tenantTableRows"
+                :columns="normalizedTenantTableColumns"
+                :on-select="selectTenant"
+              />
+
+              <USkeleton v-else class="h-80" />
+            </div>
+          </UCard>
+
+          <UCard class="admin-card xl:col-span-2">
+            <div v-if="tenantForm" class="admin-scroll space-y-6">
+              <div class="flex items-start justify-between gap-4">
+                <div>
+                  <h2 class="text-lg font-semibold">{{ tenantForm.name }}</h2>
+                  <p class="text-sm text-gray-500">Tenant-ID {{ tenantForm.id }}</p>
+                </div>
+
+                <UButton
+                  color="primary"
+                  :loading="savingTenant"
+                  @click="saveTenant"
+                >
+                  Tenant speichern
+                </UButton>
+              </div>
+
+              <UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <UFormField label="Name">
+                  <UInput v-model="tenantForm.name" />
+                </UFormField>
+
+                <UFormField label="Kürzel">
+                  <UInput v-model="tenantForm.short" />
+                </UFormField>
+              </UForm>
+
+              <div>
+                <USeparator label="Zugeordnete Benutzer" class="mb-4" />
+                <div class="flex flex-wrap gap-2">
+                  <UBadge
+                    v-for="user in getUsersForTenant(tenantForm.id)"
+                    :key="`${tenantForm.id}-${user.id}`"
+                    :color="user.is_admin ? 'primary' : 'gray'"
+                    variant="subtle"
+                  >
+                    {{ user.display_name }}
+                  </UBadge>
+                </div>
+              </div>
+            </div>
+
+            <UAlert
+              v-else-if="!loading"
+              title="Kein Tenant ausgewählt"
+              description="Wähle links einen Tenant aus, um ihn zu bearbeiten."
+              color="gray"
+              variant="soft"
+            />
+
+            <div v-else class="admin-scroll">
+              <USkeleton class="h-80" />
+            </div>
+          </UCard>
+        </div>
+      </template>
+    </UTabs>
+  </UDashboardPanelContent>
+
+  <UModal v-model:open="createUserModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Benutzer anlegen</div>
+        </template>
+
+      <UForm
+        :state="createUserForm"
+        class="space-y-4"
+        @submit.prevent="createUser"
+      >
+        <UFormField label="E-Mail">
+          <UInput v-model="createUserForm.email" type="email" />
+        </UFormField>
+
+        <UFormField label="Initialpasswort">
+          <UInput
+            v-model="createUserForm.password"
+            type="text"
+            placeholder="Leer lassen für automatisches Passwort"
+          />
+        </UFormField>
+
+        <UFormField label="Vorname für neues Profil">
+          <UInput v-model="createUserForm.first_name" />
+        </UFormField>
+
+        <UFormField label="Nachname für neues Profil">
+          <UInput v-model="createUserForm.last_name" />
+        </UFormField>
+
+        <UFormField label="Administrative Freigabe">
+          <div class="flex items-center gap-3 h-10">
+            <USwitch v-model="createUserForm.is_admin" />
+            <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
+          </div>
+        </UFormField>
+
+        <UFormField label="Multi-Tenant">
+          <div class="flex items-center gap-3 h-10">
+            <USwitch v-model="createUserForm.multiTenant" />
+            <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
+          </div>
+        </UFormField>
+
+        <div class="flex justify-end gap-3 pt-2">
+          <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
+            Abbrechen
+          </UButton>
+          <UButton type="submit" color="primary" :loading="creatingUser">
+            Benutzer anlegen
+          </UButton>
+        </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
+
+  <UModal v-model:open="createTenantModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Tenant anlegen</div>
+        </template>
+
+      <UForm
+        :state="createTenantForm"
+        class="space-y-4"
+        @submit.prevent="createTenant"
+      >
+        <UFormField label="Name">
+          <UInput v-model="createTenantForm.name" />
+        </UFormField>
+
+        <UFormField label="Kürzel">
+          <UInput v-model="createTenantForm.short" />
+        </UFormField>
+
+        <UAlert
+          title="Seed-Daten"
+          description="Beim Anlegen werden Standard-Datei-Tags und Systemordner für Dokumente und Eingangsbelege erzeugt."
+          color="primary"
+          variant="soft"
+        />
+
+        <div class="flex justify-end gap-3 pt-2">
+          <UButton color="gray" variant="soft" @click="createTenantModalOpen = false">
+            Abbrechen
+          </UButton>
+          <UButton type="submit" color="primary" :loading="creatingTenant">
+            Tenant anlegen
+          </UButton>
+        </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
+
+  <div class="mx-5 mb-5">
+    <UAlert
+      v-if="createdUserPassword"
+      title="Initialpasswort für neuen Benutzer"
+      :description="createdUserPassword"
+      color="amber"
+      variant="soft"
+      close-button
+      @close="createdUserPassword = ''"
+    />
+  </div>
+</template>
+
+<style scoped>
+.admin-tabs :deep(.tabs-content) {
+  height: 100%;
+  min-height: 0;
+}
+
+.admin-tabs :deep(.tab-pane) {
+  height: 100%;
+  min-height: 0;
+}
+
+.admin-grid {
+  height: calc(100vh - 13rem);
+  min-height: 0;
+}
+
+.admin-card {
+  height: 100%;
+  min-height: 0;
+}
+
+.admin-card :deep(.divide-y) {
+  height: 100%;
+}
+
+.admin-card :deep(.px-4.py-5.sm\:p-6) {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-scroll {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+}
+</style>

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
-            class="h-full"
-        >
-          <template #header>
-            <p>Bankverbindung hinzufügen</p>
-          </template>
+        <template #body>
+          <UCard
+              class="h-full"
+          >
+            <template #header>
+              <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
-              v-else-if="showAlert && !bankData.id"
-              title="Bank nicht gefunden"
-              icon="i-heroicons-x-circle"
-              color="rose"
-              variant="outline"
-              class="mt-3"
-          />
+            <UAlert
+                v-else-if="showAlert && !bankData.id"
+                title="Bank nicht gefunden"
+                icon="i-heroicons-x-circle"
+                color="error"
+                variant="outline"
+                class="mt-3"
+            />
 
-        </UCard>
+          </UCard>
+        </template>
       </USlideover>
     </template>
   </UDashboardNavbar>
 
-  <UModal v-model="showReqData">
-    <UCard>
-      <template #header>
-        Verfügbare Bankkonten
-      </template>
-      <div
-          v-for="account in reqData.accounts"
-          :key="account.id"
-          class="p-2 m-3 flex justify-between"
-      >
-        {{account.iban}} - {{account.owner_name}}
+  <UModal v-model:open="showReqData">
+    <template #content>
+      <UCard>
+        <template #header>
+          Verfügbare Bankkonten
+        </template>
+        <div
+            v-for="account in reqData.accounts"
+            :key="account.id"
+            class="p-2 m-3 flex justify-between"
+        >
+          {{account.iban}} - {{account.owner_name}}
 
-        <UButton
-            @click="addAccount(account)"
-            v-if="!bankaccounts.find(i => i.iban === account.iban)"
-        >
-          Hinzufügen
-        </UButton>
-        <UButton
-            @click="updateAccount(account)"
-            v-else
-        >
-          Aktualisieren
-        </UButton>
-      </div>
-    </UCard>
+          <UButton
+              @click="addAccount(account)"
+              v-if="!bankaccounts.find(i => i.iban === account.iban)"
+          >
+            Hinzufügen
+          </UButton>
+          <UButton
+              @click="updateAccount(account)"
+              v-else
+          >
+            Aktualisieren
+          </UButton>
+        </div>
+      </UCard>
+    </template>
   </UModal>
 
   <UTable
-      :rows="bankaccounts"
-      :columns="[
+      :data="bankaccounts"
+      :columns="normalizeTableColumns([
         {
           key: 'expired',
           label: 'Aktiv'
@@ -198,23 +202,23 @@ setupPage()
           key: 'balance',
           label: 'Saldo'
         },
-    ]"
+      ])"
   >
-    <template #expired-data="{row}">
-      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
+    <template #expired-cell="{ row }">
+      <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}">
-      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
+    <template #balance-cell="{ row }">
+      {{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
     </template>
-    <template #iban-data="{row}">
-      {{row.iban.match(/.{1,5}/g).join(" ")}}
+    <template #iban-cell="{ row }">
+      {{ 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>