KI-AGENT: Tabellen-Empty-States ohne JSON rendern

Ersetzt ungültige UTable-Empty-Props durch einen gemeinsamen Empty-State-Slot, damit leere Tabellen keine Objekt-/JSON-Ausgabe mehr anzeigen.

frontend/components/EntityShowSubCreatedDocuments.vue

@@ -267,7 +267,6 @@ const selectItem = (item) => {
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
         :on-select="(row) => selectItem(row.original)"
         style="height: 70vh"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
     >
       <template #type-cell="{ row }">
         {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
@@ -312,6 +311,9 @@ const selectItem = (item) => {
       <template #amount-cell="{ row }">
         <span v-if="!deliveryNoteLikeDocumentTypes.includes(row.original.type)">{{ useCurrency(useSum().getCreatedDocumentSum(row.original, createddocuments)) }}</span>
       </template>
+      <template #empty>
+        <TableEmptyState label="Keine Belege anzuzeigen" />
+      </template>
     </UTable>
 
 

frontend/components/EntityShowSubOwnAccountsStatements.vue

@@ -254,7 +254,6 @@ const selectAllocation = (allocationLike) => {
             :columns="normalizeTableColumns(columns)"
             :on-select="selectAllocation"
             class="w-full"
-            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen im ausgewählten Zeitraum' }"
         >
           <template #amount-cell="{ row }">
             <span class="text-right text-error" v-if="row.original.amount < 0 || row.original.color === 'red'">{{ useCurrency(row.original.amount) }}</span>
@@ -275,6 +274,9 @@ const selectAllocation = (allocationLike) => {
               <div class="max-w-[22rem] truncate">{{ hasContent(row.original.description) ? row.original.description : '-' }}</div>
             </UTooltip>
           </template>
+          <template #empty>
+            <TableEmptyState label="Keine Buchungen im ausgewählten Zeitraum" />
+          </template>
         </UTable>
       </div>
 

frontend/components/EntityShowSubTimes.vue

@@ -69,7 +69,6 @@ const columns = [
         class="mt-3"
         :columns="normalizeTableColumns(columns)"
         :data="props.item.times"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #state-cell="{ row }">
                 <span
@@ -102,6 +101,9 @@ const columns = [
       <template #project-cell="{ row }">
         {{ row.original.project ? row.original.project.name : "" }}
       </template>
+      <template #empty>
+        <TableEmptyState label="Noch keine Einträge" />
+      </template>
     </UTable>
   </UCard>
 

frontend/components/EntityTable.vue

@@ -110,7 +110,6 @@
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="handleSelect"
-      :empty="`Keine ${dataType.label} anzuzeigen`"
   >
     <template #name-cell="{ row }">
       <span
@@ -161,6 +160,9 @@
       </span>
 
     </template>
+    <template #empty>
+      <TableEmptyState :label="`Keine ${dataType.label} anzuzeigen`" />
+    </template>
   </UTable>
 </template>
 

frontend/components/TableEmptyState.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    default: 'i-heroicons-circle-stack-20-solid'
+  },
+  label: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-2 py-6 text-center text-muted">
+    <UIcon :name="icon" class="size-6" />
+    <span>{{ label }}</span>
+  </div>
+</template>

frontend/components/costcentreDisplay.vue

@@ -224,7 +224,6 @@ setupPage()
         v-if="!loading"
         :data="reportRows"
         :columns="columns"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Eingangsbelege mit dieser Kostenstelle oder ihren Unterkostenstellen gefunden' }"
         class="w-full"
     >
       <template #reference-cell="{ row }">
@@ -264,6 +263,9 @@ setupPage()
       <template #amountGross-cell="{ row }">
         <div class="text-right font-medium tabular-nums">{{ currency(row.original.amountGross) }}</div>
       </template>
+      <template #empty>
+        <TableEmptyState label="Keine Eingangsbelege mit dieser Kostenstelle oder ihren Unterkostenstellen gefunden" />
+      </template>
     </UTable>
 
     <UProgress v-else animation="carousel" class="w-3/4 mx-auto" />

frontend/components/displayOpenTasks.vue

@@ -25,8 +25,11 @@ setupPage()
     :data="openTasks"
     :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
     :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
-    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine offenen Aufgaben' }"
+  >
-  />
+    <template #empty>
+      <TableEmptyState label="Keine offenen Aufgaben" />
+    </template>
+  </UTable>
 </template>
 
 <style scoped>

frontend/pages/accounting/bwa.vue

@@ -585,7 +585,6 @@ onMounted(setupPage)
               :columns="normalizeTableColumns(accountColumns)"
               :loading="loading"
               :on-select="openAccount"
-              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungskonten im ausgewählten Zeitraum' }"
           >
             <template #label-cell="{ row }">
               <div class="truncate font-medium">{{ row.original.label }}</div>
@@ -606,6 +605,9 @@ onMounted(setupPage)
             <template #gross-cell="{ row }">
               <div class="text-right font-medium tabular-nums">{{ useCurrency(row.original.gross) }}</div>
             </template>
+            <template #empty>
+              <TableEmptyState label="Keine Buchungskonten im ausgewählten Zeitraum" />
+            </template>
           </UTable>
         </div>
       </UCard>
@@ -624,7 +626,6 @@ onMounted(setupPage)
               :columns="normalizeTableColumns(ownAccountColumns)"
               :loading="loading"
               :on-select="openOwnAccount"
-              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine eigenen Buchungen im ausgewählten Zeitraum' }"
           >
             <template #label-cell="{ row }">
               <div class="truncate font-medium">{{ row.original.label }}</div>
@@ -647,6 +648,9 @@ onMounted(setupPage)
                 {{ useCurrency(row.original.balance) }}
               </div>
             </template>
+            <template #empty>
+              <TableEmptyState label="Keine eigenen Buchungen im ausgewählten Zeitraum" />
+            </template>
           </UTable>
         </div>
         </UCard>
@@ -664,11 +668,13 @@ onMounted(setupPage)
             :data="depreciationRows"
             :columns="normalizeTableColumns(depreciationColumns)"
             :loading="loading"
-            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Abschreibungen im ausgewählten Zeitraum' }"
         >
           <template #amount-cell="{ row }">
             <div class="text-right text-amber-600 dark:text-amber-400 tabular-nums">{{ useCurrency(row.original.amount) }}</div>
           </template>
+          <template #empty>
+            <TableEmptyState label="Keine Abschreibungen im ausgewählten Zeitraum" />
+          </template>
         </UTable>
       </UCard>
   </UDashboardPanelContent>

frontend/pages/accounting/cashbooks/index.vue

@@ -117,7 +117,6 @@ onMounted(loadCashbooks)
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="(row) => router.push(`/accounting/cashbooks/${row.original?.id || row.id}`)"
-      :empty="{ icon: 'i-heroicons-banknotes', label: 'Keine Kassenbücher angelegt' }"
   >
     <template #datevNumber-cell="{ row }">
       <span class="font-mono">{{ row.original.datevNumber }}</span>
@@ -128,6 +127,9 @@ onMounted(loadCashbooks)
     <template #syncedAt-cell="{ row }">
       {{ row.original.createdAt ? new Date(row.original.createdAt).toLocaleDateString("de-DE") : "-" }}
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine Kassenbücher angelegt" icon="i-heroicons-banknotes" />
+    </template>
   </UTable>
 
   <UModal v-model:open="createCashbookModalOpen">

frontend/pages/accounting/tax.vue

@@ -255,7 +255,6 @@ onMounted(loadData)
           :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">
@@ -281,6 +280,9 @@ onMounted(loadData)
         <template #documents-cell="{ row }">
           {{ row.original.outputCount }} / {{ row.original.inputCount }}
         </template>
+        <template #empty>
+          <TableEmptyState label="Keine Daten für die USt-Auswertung vorhanden" icon="i-heroicons-calculator" />
+        </template>
       </UTable>
     </UCard>
   </UDashboardPanelContent>

frontend/pages/accounts/index.vue

@@ -199,7 +199,6 @@ setupPage()
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="(row) => router.push(`/accounts/show/${row.original.id}`)"
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
     <template #allocations-cell="{row}">
         <span v-if="dataLoaded">{{row.original.allocations ? row.original.allocations : null}}</span>
@@ -210,6 +209,9 @@ setupPage()
       <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine Buchungen anzuzeigen" />
+    </template>
   </UTable>
 
 

frontend/pages/administration/tenants/[id].vue

@@ -347,8 +347,11 @@ onMounted(async () => {
         ])"
         :on-select="(row) => router.push(`/administration/users/${row.original?.id || row.id}`)"
         class="mt-4"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugeordneten Benutzer gefunden' }"
+      >
-      />
+        <template #empty>
+          <TableEmptyState label="Keine zugeordneten Benutzer gefunden" />
+        </template>
+      </UTable>
     </UCard>
 
     <USkeleton v-if="loading" class="h-80" />

frontend/pages/administration/tenants/index.vue

@@ -179,8 +179,11 @@ onMounted(async () => {
     :columns="normalizeTableColumns(templateColumns)"
     :loading="loading"
     :on-select="(row) => router.push(`/administration/tenants/${row.original?.id || row.id}`)"
-    :empty="{ icon: 'i-heroicons-building-office-2', label: 'Keine Tenants gefunden' }"
+  >
-  />
+    <template #empty>
+      <TableEmptyState label="Keine Tenants gefunden" icon="i-heroicons-building-office-2" />
+    </template>
+  </UTable>
 
   <UModal v-model:open="createTenantModalOpen">
     <template #content>

frontend/pages/administration/users/index.vue

@@ -136,8 +136,11 @@ onMounted(async () => {
     :columns="normalizeTableColumns(templateColumns)"
     :loading="loading"
     :on-select="(row) => router.push(`/administration/users/${row.original?.id || row.id}`)"
-    :empty="{ icon: 'i-heroicons-users', label: 'Keine Benutzer gefunden' }"
+  >
-  />
+    <template #empty>
+      <TableEmptyState label="Keine Benutzer gefunden" icon="i-heroicons-users" />
+    </template>
+  </UTable>
 
   <UModal v-model:open="createUserModalOpen">
     <template #content>

frontend/pages/createDocument/index.vue

@@ -60,7 +60,6 @@
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
             :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"
@@ -134,6 +133,9 @@
               {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row.original, items)) }}
             </span>
           </template>
+          <template #empty>
+            <TableEmptyState label="Keine Belege anzuzeigen" />
+          </template>
         </UTable>
       </div>
     </template>

frontend/pages/createDocument/serialInvoice.vue

@@ -98,7 +98,6 @@
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="(row) => router.push(`/createDocument/edit/${row.original?.id || row.id}`)"
-      empty="Keine Belege anzuzeigen"
   >
     <template #actions-cell="{ row }">
       <div @click.stop>
@@ -137,6 +136,9 @@
       <span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
       <span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine Belege anzuzeigen" />
+    </template>
   </UTable>
 
   <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
@@ -211,7 +213,6 @@
               :get-row-id="(row) => row.id"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
               :on-select="toggleExecutionRow"
-              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
           >
             <template #select-header="{ table }">
               <div class="flex justify-center" @click.stop>
@@ -244,6 +245,9 @@
             <template #plant-cell="{row}">
               {{ row.original.plant?.name || "-" }}
             </template>
+            <template #empty>
+              <TableEmptyState label="Keine Belege anzuzeigen" />
+            </template>
           </UTable>
         </div>
 

frontend/pages/export/create/sepa.vue

@@ -97,7 +97,6 @@ const createExport = async () => {
         { key: 'documentDate', label: 'Belegdatum' },
         { key: 'outgoingsepamandate', label: 'SEPA-Mandat' },
       ])"
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine SEPA-Belege anzuzeigen' }"
   >
     <template #customer-cell="{ row }">
       {{ row.original.customer?.name || "-" }}
@@ -105,6 +104,9 @@ const createExport = async () => {
     <template #outgoingsepamandate-cell="{ row }">
       {{ row.original.outgoingsepamandate?.reference || "-" }}
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine SEPA-Belege anzuzeigen" />
+    </template>
   </UTable>
 </template>
 

frontend/pages/export/index.vue

@@ -154,7 +154,6 @@ const createExport = async () => {
         { key: 'type', label: 'Typ' },
         { key: 'download', label: 'Download' },
       ])"
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Exporte anzuzeigen' }"
   >
     <template #created_at-cell="{row}">
       {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
@@ -171,6 +170,9 @@ const createExport = async () => {
     <template #download-cell="{row}">
       <UButton @click="downloadFile(row.original)">Download</UButton>
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine Exporte anzuzeigen" />
+    </template>
   </UTable>
 
   <UModal v-model:open="showCreateExportModal">

frontend/pages/incomingInvoices/index.vue

@@ -278,7 +278,6 @@ const selectIncomingInvoice = (invoiceLike) => {
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
             :on-select="selectIncomingInvoice"
-            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
           <template #reference-cell="{row}">
             <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
@@ -310,6 +309,9 @@ const selectIncomingInvoice = (invoiceLike) => {
             <span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
             <span v-else class="text-rose-600">Offen</span>
           </template>
+          <template #empty>
+            <TableEmptyState label="Keine Belege anzuzeigen" />
+          </template>
         </UTable>
       </div>
 

frontend/pages/projecttypes/index.vue

@@ -92,13 +92,14 @@ const filteredRows = computed(() => {
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="(i) => router.push(`/projecttypes/show/${i.id}`) "
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
   >
     <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>
-
+    <template #empty>
+      <TableEmptyState label="Keine Projekttypen anzuzeigen" />
+    </template>
   </UTable>
 </template>
 

frontend/pages/settings/banking/index.vue

@@ -203,7 +203,6 @@ setupPage()
           label: 'Saldo'
         },
       ])"
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Bankkonten anzuzeigen' }"
   >
     <template #expired-cell="{ row }">
       <span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
@@ -221,6 +220,9 @@ setupPage()
     <template #iban-cell="{ row }">
       {{ row.original.iban.match(/.{1,5}/g).join(" ") }}
     </template>
+    <template #empty>
+      <TableEmptyState label="Keine Bankkonten anzuzeigen" />
+    </template>
   </UTable>
 
 </template>

frontend/pages/settings/emailaccounts/index.vue

@@ -87,8 +87,10 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
     class="w-full"
     :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
     :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
   >
+    <template #empty>
+      <TableEmptyState label="Keine E-Mail Konten anzuzeigen" />
+    </template>
   </UTable>
 </template>
 

frontend/pages/settings/letterheads.vue

@@ -197,7 +197,6 @@ onMounted(refreshData)
         { key: 'path', label: 'Datei' },
         { key: 'actions', label: '' }
       ])"
-      :empty="{ icon: 'i-heroicons-document', label: 'Keine Briefpapiere gefunden' }"
     >
       <template #name-cell="{ row }">
         <span class="font-medium text-gray-900 dark:text-white">
@@ -260,6 +259,9 @@ onMounted(refreshData)
           </ButtonWithConfirm>
         </div>
       </template>
+      <template #empty>
+        <TableEmptyState label="Keine Briefpapiere gefunden" icon="i-heroicons-document" />
+      </template>
     </UTable>
   </UDashboardPanelContent>
 

frontend/pages/settings/texttemplates.vue

@@ -163,7 +163,6 @@ const getDocLabel = (type) => {
         :data="texttemplates"
         :loading="loading"
         v-model:expand="expand"
-        :empty="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
         :columns="normalizeTableColumns([
         { key: 'name', label: 'Bezeichnung' },
         { key: 'documentType', label: 'Verwendung' },
@@ -233,6 +232,9 @@ const getDocLabel = (type) => {
           </div>
         </div>
       </template>
+      <template #empty>
+        <TableEmptyState label="Keine Textvorlagen gefunden" icon="i-heroicons-document-text" />
+      </template>
     </UTable>
   </UDashboardPanelContent>
 

frontend/pages/staff/profiles/index.vue

@@ -79,8 +79,11 @@
     :columns="normalizeTableColumns(columns)"
     :loading="pending"
     :on-select="(row) => navigateTo(`/staff/profiles/${row.original?.id || row.id}`)"
-    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Mitarbeiterprofile gefunden' }"
+  >
-  />
+    <template #empty>
+      <TableEmptyState label="Keine Mitarbeiterprofile gefunden" />
+    </template>
+  </UTable>
 </template>
 
 <style scoped>

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

@@ -296,7 +296,6 @@ await setupPage()
               <UTable
                   v-if="workingTimeInfo"
                   :data="workingTimeInfo.spans"
-                  :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
                   :columns="normalizeTableColumns([
                 { key: 'status', label: 'Status' },
                 { key: 'startedAt', label: 'Start' },
@@ -329,6 +328,9 @@ await setupPage()
                 <template #type-cell="{ row }">
                   {{ row.original.type.charAt(0).toUpperCase() + row.original.type.slice(1).replace('_', ' ') }}
                 </template>
+                <template #empty>
+                  <TableEmptyState label="Keine Anwesenheiten" />
+                </template>
               </UTable>
             </UDashboardPanel>
           </div>

frontend/pages/staff/time/index.vue

@@ -241,7 +241,6 @@ onMounted(async () => {
               { key: 'type', label: 'Typ' },
               { key: 'description', label: 'Beschreibung' },
             ])"
-            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
         >
           <template #state-cell="{ row }">
             <UBadge v-if="row.original.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
@@ -285,6 +284,9 @@ onMounted(async () => {
             <span v-else-if="row.original.type === 'sick'">{{ row.original.sick_reason }}</span>
             <span v-else>{{ row.original.description }}</span>
           </template>
+          <template #empty>
+            <TableEmptyState label="Keine Zeiten anzuzeigen" />
+          </template>
         </UTable>
       </UCard>
 

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

@@ -446,7 +446,6 @@ const isDistinctFilterActive = (columnKey) => {
         style="height: 85dvh"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
         :on-select="(row) => router.push(`/standardEntity/${type}/show/${row.original.id}`)"
-        :empty="`Keine ${dataType.label} anzuzeigen`"
     >
       <template
           v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
@@ -566,6 +565,9 @@ const isDistinctFilterActive = (columnKey) => {
       </span>
 
       </template>
+      <template #empty>
+        <TableEmptyState :label="`Keine ${dataType.label} anzuzeigen`" />
+      </template>
     </UTable>
     <UCard
         class="w-1/3 mx-auto mt-10"

frontend/pages/support/index.vue

@@ -73,7 +73,6 @@ const filteredRows = computed(() => {
   </UDashboardToolbar>
   <UTable
     :data="filteredRows"
-    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
     :on-select="(i) => router.push(`/support/${i.id}`)"
     :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'}])"
   >
@@ -93,6 +92,9 @@ const filteredRows = computed(() => {
     <template #ticketmessages-cell="{ row }">
      {{row.original.ticketmessages.length}}
     </template>
+    <template #empty>
+      <TableEmptyState :label="`Keine Tickets anzuzeigen`" />
+    </template>
   </UTable>
 </template>
 

frontend/pages/tasks/index.vue

@@ -461,7 +461,6 @@ onMounted(async () => {
         :data="filteredTasks"
         :columns="normalizedListColumns"
         :on-select="(task) => openTaskViaRoute(task)"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
     >
       <template #actions-cell="{ row }">
         <UButton
@@ -490,13 +489,19 @@ onMounted(async () => {
       <template #plant-cell="{ row }">
         {{ getEntityLabel(plantOptions, row.original.plant?.id || row.original.plant) || "-" }}
       </template>
+      <template #empty>
+        <TableEmptyState label="Keine Aufgaben anzuzeigen" />
+      </template>
     </UTable>
     <UTable
         v-else
         :data="[]"
         :columns="normalizedListColumns"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
+    >
-    />
+      <template #empty>
+        <TableEmptyState label="Keine Aufgaben anzuzeigen" />
+      </template>
+    </UTable>
   </UDashboardPanelContent>
 
   <UModal v-model:open="isModalOpen" :prevent-close="saving || deleting">