Start UI Change

2026-03-21 21:13:22 +01:00
parent cfd84b773f
commit b009ac845f
65 changed files with 2837 additions and 2114 deletions
--- a/frontend/pages/accounting/tax.vue
+++ b/frontend/pages/accounting/tax.vue
@@ -253,7 +253,7 @@ onMounted(loadData)
        </template>

        <UTable
-            :columns="columns"
+            :columns="normalizeTableColumns(columns)"
            :rows="periods"
            :loading="loading"
            :empty-state="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
--- a/frontend/pages/accounts/index.vue
+++ b/frontend/pages/accounts/index.vue
@@ -195,7 +195,7 @@ setupPage()
  </UDashboardToolbar>
  <UTable
      :rows="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
      @select="(i) => router.push(`/accounts/show/${i.id}`)"
@@ -219,4 +219,4 @@ setupPage()

 <style scoped>

-</style>
+</style>
--- a/frontend/pages/accounts/show/[id].vue
+++ b/frontend/pages/accounts/show/[id].vue
@@ -138,7 +138,7 @@ const saldo = computed(() => {
          <UTable
              v-if="statementallocations"
            :rows="renderedAllocations"
-              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+              :columns="normalizeTableColumns([{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' }"
          >
@@ -167,4 +167,4 @@ td {
  padding-bottom: 0.15em;
  padding-top: 0.15em;
 }
-</style>
+</style>
--- a/frontend/pages/banking/index.vue
+++ b/frontend/pages/banking/index.vue
@@ -601,7 +601,7 @@ onMounted(() => {
  </div>
  <PageLeaveGuard :when="isSyncing"/>

-  <UModal v-model="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
+  <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
    <UCard>
      <template #header>
        <div class="flex items-center justify-between gap-3">
--- a/frontend/pages/createDocument/edit/[[id]].vue
+++ b/frontend/pages/createDocument/edit/[[id]].vue
@@ -2453,7 +2453,7 @@ 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
@@ -2472,11 +2472,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                </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
@@ -2525,7 +2525,7 @@ 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
@@ -2544,11 +2544,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                </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,7 +2670,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                        v-if="row.agriculture"
                        @click="row.showEditDiesel = true"
                    />
-                    <UModal v-model="row.showEdit">
+                    <UModal v-model:open="row.showEdit">
                      <UCard>
                        <!--                        <template #header>
                                                  Zeile bearbeiten
@@ -2842,7 +2842,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {


                    </UModal>
-                    <UModal v-model="row.showEditDiesel">
+                    <UModal v-model:open="row.showEditDiesel">
                      <UCard>
                        <template #header>
                          Dieselverbrauch bearbeiten
--- a/frontend/pages/createDocument/index.vue
+++ b/frontend/pages/createDocument/index.vue
@@ -58,7 +58,7 @@
    <template #item="{item}">
      <div style="height: 80vh; overflow-y: scroll">
        <UTable
-            :columns="getColumnsForTab(item.key)"
+            :columns="normalizeTableColumns(getColumnsForTab(item.key))"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
            :rows="getRowsForTab(item.key)"
            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
--- a/frontend/pages/createDocument/serialInvoice.vue
+++ b/frontend/pages/createDocument/serialInvoice.vue
@@ -94,7 +94,7 @@

  <UTable
      :rows="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
@@ -139,7 +139,7 @@
    </template>
  </UTable>

-  <UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+  <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
    <UCard>
      <template #header>
        <div class="flex items-center justify-between">
@@ -205,7 +205,7 @@
          <UTable
              v-model="selectedExecutionRows"
              :rows="filteredExecutionList"
-              :columns="executionColumns"
+              :columns="normalizeTableColumns(executionColumns)"
              :ui="{ th: { base: 'whitespace-nowrap' } }"
          >
            <template #partner-data="{row}">
@@ -247,7 +247,7 @@
    </UCard>
  </UModal>

-  <USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+  <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex items-center justify-between">
--- a/frontend/pages/export/index.vue
+++ b/frontend/pages/export/index.vue
@@ -111,14 +111,14 @@ const createExport = async () => {

  <UTable
      :rows="filteredExports"
-      :columns="[
+      :columns="normalizeTableColumns([
        { key: 'created_at', label: 'Erstellt am' },
        { key: 'start_date', label: 'Start' },
        { key: 'end_date', label: 'Ende' },
        { key: 'valid_until', label: 'Gültig bis' },
        { key: 'type', label: 'Typ' },
        { key: 'download', label: 'Download' },
-    ]"
+      ])"
  >
    <template #created_at-data="{row}">
      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
@@ -137,7 +137,7 @@ const createExport = async () => {
    </template>
  </UTable>

-  <UModal v-model="showCreateExportModal">
+  <UModal v-model:open="showCreateExportModal">
    <UCard>
      <template #header>
        Export erstellen
@@ -223,4 +223,4 @@ const createExport = async () => {
 </template>

 <style scoped>
-</style>
+</style>
--- a/frontend/pages/files/index.vue
+++ b/frontend/pages/files/index.vue
@@ -453,7 +453,7 @@ const syncdokubox = async () => {
    </div>
  </UDashboardPanelContent>

-  <UModal v-model="createFolderModalOpen">
+  <UModal v-model:open="createFolderModalOpen">
    <UCard>
      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>

@@ -494,7 +494,7 @@ const syncdokubox = async () => {
    </UCard>
  </UModal>

-  <UModal v-model="renameModalOpen">
+  <UModal v-model:open="renameModalOpen">
    <UCard>
      <template #header><h3 class="font-bold">Umbenennen</h3></template>
      <UFormGroup label="Neuer Name">
--- a/frontend/pages/incomingInvoices/index.vue
+++ b/frontend/pages/incomingInvoices/index.vue
@@ -251,7 +251,7 @@ const selectIncomingInvoice = (invoice) => {
            sort-mode="manual"
            @update:sort="setupPage"
            :rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
-            :columns="columns"
+            :columns="normalizeTableColumns(columns)"
            class="w-full"
            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
            @select="(i) => selectIncomingInvoice(i) "
--- a/frontend/pages/index.client.vue
+++ b/frontend/pages/index.client.vue
@@ -382,8 +382,7 @@ onBeforeUnmount(() => {
      </template>
    </UDashboardNavbar>

-    <UDashboardPanelContent>
-    <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid">
+    <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"
@@ -396,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']">
@@ -449,57 +448,58 @@ onBeforeUnmount(() => {
        Karte hinzufügen
      </UButton>
    </div>
-    </UDashboardPanelContent>

-    <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>
--- a/frontend/pages/organisation/plantafel.vue
+++ b/frontend/pages/organisation/plantafel.vue
@@ -453,7 +453,7 @@ onMounted(() => {
      />
    </UDashboardPanelContent>

-    <UModal v-model="isAbsenceModalOpen">
+    <UModal v-model:open="isAbsenceModalOpen">
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
--- a/frontend/pages/projecttypes/[mode]/[[id]].vue
+++ b/frontend/pages/projecttypes/[mode]/[[id]].vue
@@ -247,7 +247,7 @@ const addPhase = () => {
                  {{ button.label }}
                </UButton>

-                <UModal v-model="openQuickActionModal">
+                <UModal v-model:open="openQuickActionModal">
                  <UCard>
                    <div class="flex items-center justify-between">
                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
@@ -301,4 +301,4 @@ const addPhase = () => {

 <style scoped>

-</style>
+</style>
--- a/frontend/pages/projecttypes/index.vue
+++ b/frontend/pages/projecttypes/index.vue
@@ -88,7 +88,7 @@ const filteredRows = computed(() => {

  <UTable
      :rows="filteredRows"
-      :columns="columns"
+      :columns="normalizeTableColumns(columns)"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
      @select="(i) => router.push(`/projecttypes/show/${i.id}`) "
@@ -104,4 +104,4 @@ const filteredRows = computed(() => {

 <style scoped>

-</style>
+</style>
--- a/frontend/pages/settings/admin.vue
+++ b/frontend/pages/settings/admin.vue
@@ -105,12 +105,14 @@ const userTableColumns = [
  { key: "tenant_count", label: "Tenants" },
  { key: "is_admin", label: "Admin" },
 ]
+const normalizedUserTableColumns = normalizeTableColumns(userTableColumns)

 const tenantTableColumns = [
  { key: "name", label: "Tenant" },
  { key: "short", label: "Kürzel" },
  { key: "user_count", label: "Benutzer" },
 ]
+const normalizedTenantTableColumns = normalizeTableColumns(tenantTableColumns)

 const userTableRows = computed(() =>
  sortedUsers.value.map((user) => ({
@@ -491,7 +493,7 @@ onMounted(async () => {
              <UTable
                v-if="!loading"
                :rows="userTableRows"
-                :columns="userTableColumns"
+                :columns="normalizedUserTableColumns"
                @select="selectUser"
              />

@@ -673,7 +675,7 @@ onMounted(async () => {
              <UTable
                v-if="!loading"
                :rows="tenantTableRows"
-                :columns="tenantTableColumns"
+                :columns="normalizedTenantTableColumns"
                @select="selectTenant"
              />

@@ -740,7 +742,7 @@ onMounted(async () => {
    </UTabs>
  </UDashboardPanelContent>

-  <UModal v-model="createUserModalOpen">
+  <UModal v-model:open="createUserModalOpen">
    <UCard>
      <template #header>
        <div class="text-lg font-semibold">Benutzer anlegen</div>
@@ -797,7 +799,7 @@ onMounted(async () => {
    </UCard>
  </UModal>

-  <UModal v-model="createTenantModalOpen">
+  <UModal v-model:open="createTenantModalOpen">
    <UCard>
      <template #header>
        <div class="text-lg font-semibold">Tenant anlegen</div>
--- a/frontend/pages/settings/banking/index.vue
+++ b/frontend/pages/settings/banking/index.vue
@@ -151,7 +151,7 @@ setupPage()
    </template>
  </UDashboardNavbar>

-  <UModal v-model="showReqData">
+  <UModal v-model:open="showReqData">
    <UCard>
      <template #header>
        Verfügbare Bankkonten
@@ -181,7 +181,7 @@ setupPage()

  <UTable
      :rows="bankaccounts"
-      :columns="[
+      :columns="normalizeTableColumns([
        {
          key: 'expired',
          label: 'Aktiv'
@@ -198,7 +198,7 @@ setupPage()
          key: 'balance',
          label: 'Saldo'
        },
-    ]"
+      ])"
  >
    <template #expired-data="{row}">
      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
--- a/frontend/pages/settings/emailaccounts/index.vue
+++ b/frontend/pages/settings/emailaccounts/index.vue
@@ -34,10 +34,11 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
  <UModal
    v-model="showEmailAddressModal"
  >
-    <UCard>
-      <template #header>
-        E-Mail Adresse
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          E-Mail Adresse
+        </template>
 <!--      <UFormGroup
        label="E-Mail Adresse:"
      >
@@ -57,14 +58,15 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
          v-model="createEMailType"
        />
      </UFormGroup>-->
-      <template #footer>
-        <UButton
-            @click="createAccount"
-        >
-          Erstellen
-        </UButton>
-      </template>
-    </UCard>
+        <template #footer>
+          <UButton
+              @click="createAccount"
+          >
+            Erstellen
+          </UButton>
+        </template>
+      </UCard>
+    </template>

  </UModal>
  <UDashboardNavbar title="E-Mail Konten">
@@ -81,7 +83,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
  </UDashboardNavbar>
  <UTable
    :rows="items"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
    class="w-full"
    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
--- a/frontend/pages/settings/texttemplates.vue
+++ b/frontend/pages/settings/texttemplates.vue
@@ -164,13 +164,13 @@ const getDocLabel = (type) => {
        :loading="loading"
        v-model:expand="expand"
        :empty-state="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
-        :columns="[
+        :columns="normalizeTableColumns([
        { key: 'name', label: 'Bezeichnung' },
        { key: 'documentType', label: 'Verwendung' },
        { key: 'pos', label: 'Position' },
        { key: 'default', label: 'Standard' },
        { key: 'actions', label: '' }
-      ]"
+        ])"
    >
      <template #name-data="{ row }">
        <span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span>
@@ -236,7 +236,7 @@ const getDocLabel = (type) => {
    </UTable>
  </UDashboardPanelContent>

-  <UModal v-model="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
+  <UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
    <UCard>
      <template #header>
        <div class="flex justify-between items-center">
--- a/frontend/pages/staff/profiles/index.vue
+++ b/frontend/pages/staff/profiles/index.vue
@@ -40,7 +40,7 @@
  </UDashboardNavbar>
  <UTable
    :rows="items"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
  >

@@ -49,4 +49,4 @@

 <style scoped>

-</style>
+</style>
--- a/frontend/pages/staff/time/[id]/evaluate.vue
+++ b/frontend/pages/staff/time/[id]/evaluate.vue
@@ -296,13 +296,13 @@ await setupPage()
                  v-if="workingTimeInfo"
                  :rows="workingTimeInfo.spans"
                  :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
-                  :columns="[
+                  :columns="normalizeTableColumns([
                { key: 'status', label: 'Status' },
                { key: 'startedAt', label: 'Start' },
                { key: 'endedAt', label: 'Ende' },
                { key: 'duration', label: 'Dauer' },
                { key: 'type', label: 'Typ' }
-              ]"
+                  ])"
                  @select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)"
              >
                <template #status-data="{row}">
@@ -479,4 +479,4 @@ await setupPage()
  </template>


-</template>
+</template>
--- a/frontend/pages/staff/time/index.vue
+++ b/frontend/pages/staff/time/index.vue
@@ -228,7 +228,7 @@ onMounted(async () => {
      <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
        <UTable
            :rows="entries"
-            :columns="[
+            :columns="normalizeTableColumns([
              { key: 'actions', label: 'Aktionen', class: 'w-32' },
              { key: 'state', label: 'Status' },
              { key: 'started_at', label: 'Start' },
@@ -236,7 +236,7 @@ onMounted(async () => {
              { key: 'duration_minutes', label: 'Dauer' },
              { key: 'type', label: 'Typ' },
              { key: 'description', label: 'Beschreibung' },
-            ]"
+            ])"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
        >
          <template #state-data="{ row }">
@@ -444,7 +444,7 @@ onMounted(async () => {
      :default-user-id="selectedUser"
  />

-  <UModal v-model="showRejectModal">
+  <UModal v-model:open="showRejectModal">
    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex items-center justify-between">
@@ -470,4 +470,4 @@ onMounted(async () => {
      </template>
    </UCard>
  </UModal>
-</template>
+</template>
--- a/frontend/pages/standardEntity/[type]/index.vue
+++ b/frontend/pages/standardEntity/[type]/index.vue
@@ -388,7 +388,7 @@ const handleFilterChange = async (action,column) => {
        @update:sort="setupPage"
        v-if="dataType && columns && items.length > 0  && !loading"
        :rows="items"
-        :columns="columns"
+        :columns="normalizeTableColumns(columns)"
        class="w-full"
        style="height: 85dvh"
        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@@ -428,7 +428,7 @@ const handleFilterChange = async (action,column) => {
              <template #empty>
                Keine Einträge in der Spalte {{column.label}}
              </template>
-              <template #default="{open}">
+              <template #default="slotProps">
                <UButton
                    :disabled="!columnsToFilter[column.key]?.length > 0"
                    :variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'"
@@ -436,7 +436,7 @@ const handleFilterChange = async (action,column) => {
                >
                  <span class="truncate">{{ column.label }}</span>

-                  <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
+                  <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[slotProps?.open && 'transform rotate-90']" />
                </UButton>
              </template>

--- a/frontend/pages/support/[id].vue
+++ b/frontend/pages/support/[id].vue
@@ -65,7 +65,7 @@ const addMessage = async () => {
      >
        + Eintrag
      </UButton>
-      <UModal v-model="showAddEntryModal">
+      <UModal v-model:open="showAddEntryModal">
        <UCard>
          <template #header>
            Eintrag hinzufügen
--- a/frontend/pages/support/index.vue
+++ b/frontend/pages/support/index.vue
@@ -75,7 +75,7 @@ const filteredRows = computed(() => {
    :rows="filteredRows"
    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
    @select="(i) => router.push(`/support/${i.id}`)"
-    :columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]"
+    :columns="normalizeTableColumns([{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}])"
  >
    <template #tenant-data="{ row }">
     {{row.tenant.name}}
--- a/frontend/pages/tasks/index.vue
+++ b/frontend/pages/tasks/index.vue
@@ -88,6 +88,7 @@ const listColumns = [
  { key: "customer", label: "Kunde" },
  { key: "plant", label: "Objekt" }
 ]
+const normalizedListColumns = normalizeTableColumns(listColumns)

 function getEmptyTask() {
  return {
@@ -458,7 +459,7 @@ onMounted(async () => {
    <UTable
        v-else-if="filteredTasks.length"
        :rows="filteredTasks"
-        :columns="listColumns"
+        :columns="normalizedListColumns"
        @select="(task) => openTaskViaRoute(task)"
    >
      <template #actions-data="{ row }">
@@ -497,7 +498,7 @@ onMounted(async () => {
    />
  </UDashboardPanelContent>

-  <UModal v-model="isModalOpen" :prevent-close="saving || deleting">
+  <UModal v-model:open="isModalOpen" :prevent-close="saving || deleting">
    <UCard>
      <template #header>
        <div class="flex items-center justify-between">
--- a/frontend/pages/wiki/[[id]].vue
+++ b/frontend/pages/wiki/[[id]].vue
@@ -91,7 +91,7 @@
      </div>
    </main>

-    <UModal v-model="isModalOpen">
+    <UModal v-model:open="isModalOpen">
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
@@ -236,4 +236,4 @@ function showSavedFeedback() {
 .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
 :deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
-</style>
+</style>