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>