From 5869f88c1acff035b2766b12490c137eed1c2c17 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Fri, 24 Apr 2026 14:42:53 +0200
Subject: [PATCH] Vereinheitliche Empty States in Tabellen

---
 .../EntityShowSubCreatedDocuments.vue           |  7 +------
 .../EntityShowSubOwnAccountsStatements.vue      |  8 +-------
 frontend/components/EntityShowSubTimes.vue      |  7 +------
 frontend/components/displayOpenTasks.vue        |  9 +++------
 frontend/pages/accounting/bwa.vue               | 17 +++--------------
 frontend/pages/administration/tenants/[id].vue  |  1 +
 frontend/pages/createDocument/serialInvoice.vue |  1 +
 frontend/pages/export/create/sepa.vue           |  7 ++++---
 frontend/pages/export/index.vue                 |  1 +
 frontend/pages/settings/banking/index.vue       |  1 +
 frontend/pages/staff/profiles/index.vue         |  9 ++-------
 frontend/pages/tasks/index.vue                  |  9 +++++----
 12 files changed, 24 insertions(+), 53 deletions(-)

diff --git a/frontend/components/EntityShowSubCreatedDocuments.vue b/frontend/components/EntityShowSubCreatedDocuments.vue
index 5ceeccc..51e1d88 100644
--- a/frontend/components/EntityShowSubCreatedDocuments.vue
+++ b/frontend/components/EntityShowSubCreatedDocuments.vue
@@ -267,13 +267,8 @@ 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 #empty>
-        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
-          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
-          <span>Keine Belege anzuzeigen</span>
-        </div>
-      </template>
       <template #type-cell="{ row }">
         {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
       </template>
diff --git a/frontend/components/EntityShowSubOwnAccountsStatements.vue b/frontend/components/EntityShowSubOwnAccountsStatements.vue
index 36d60c7..2793f30 100644
--- a/frontend/components/EntityShowSubOwnAccountsStatements.vue
+++ b/frontend/components/EntityShowSubOwnAccountsStatements.vue
@@ -254,14 +254,8 @@ 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 #empty>
-            <div class="flex flex-col items-center justify-center py-10 text-center">
-              <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
-              <p class="font-medium">Keine Buchungen im ausgewählten Zeitraum</p>
-            </div>
-          </template>
-
           <template #amount-cell="{ row }">
             <span class="text-right text-error" v-if="row.original.amount < 0 || row.original.color === 'red'">{{ useCurrency(row.original.amount) }}</span>
             <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{ useCurrency(row.original.amount) }}</span>
diff --git a/frontend/components/EntityShowSubTimes.vue b/frontend/components/EntityShowSubTimes.vue
index f0834d2..112250b 100644
--- a/frontend/components/EntityShowSubTimes.vue
+++ b/frontend/components/EntityShowSubTimes.vue
@@ -69,13 +69,8 @@ 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 #empty>
-        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
-          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
-          <span>Noch keine Einträge</span>
-        </div>
-      </template>
       <template #state-cell="{ row }">
                 <span
                     v-if="row.original.state === 'Entwurf'"
diff --git a/frontend/components/displayOpenTasks.vue b/frontend/components/displayOpenTasks.vue
index 515d1a9..86619a3 100644
--- a/frontend/components/displayOpenTasks.vue
+++ b/frontend/components/displayOpenTasks.vue
@@ -22,14 +22,11 @@ setupPage()
 
 <template>
   <UTable
-      v-if="openTasks.length > 0"
     :data="openTasks"
-      :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
-      :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
+    :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' }"
   />
-  <div v-else>
-    <p  class="text-center font-bold">Keine offenen Aufgaben</p>
-  </div>
 </template>
 
 <style scoped>
diff --git a/frontend/pages/accounting/bwa.vue b/frontend/pages/accounting/bwa.vue
index 215010e..624978b 100644
--- a/frontend/pages/accounting/bwa.vue
+++ b/frontend/pages/accounting/bwa.vue
@@ -585,14 +585,8 @@ 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 #empty>
-              <div class="flex flex-col items-center justify-center py-10 text-center">
-                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
-                <p class="font-medium">Keine Buchungskonten im ausgewaehlten Zeitraum</p>
-              </div>
-            </template>
-
             <template #label-cell="{ row }">
               <div class="truncate font-medium">{{ row.original.label }}</div>
             </template>
@@ -630,14 +624,8 @@ 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 #empty>
-              <div class="flex flex-col items-center justify-center py-10 text-center">
-                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
-                <p class="font-medium">Keine eigenen Buchungen im ausgewaehlten Zeitraum</p>
-              </div>
-            </template>
-
             <template #label-cell="{ row }">
               <div class="truncate font-medium">{{ row.original.label }}</div>
             </template>
@@ -676,6 +664,7 @@ 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>
diff --git a/frontend/pages/administration/tenants/[id].vue b/frontend/pages/administration/tenants/[id].vue
index 1009deb..8f4a6a0 100644
--- a/frontend/pages/administration/tenants/[id].vue
+++ b/frontend/pages/administration/tenants/[id].vue
@@ -197,6 +197,7 @@ 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' }"
       />
     </UCard>
 
diff --git a/frontend/pages/createDocument/serialInvoice.vue b/frontend/pages/createDocument/serialInvoice.vue
index 90dec02..86b4318 100644
--- a/frontend/pages/createDocument/serialInvoice.vue
+++ b/frontend/pages/createDocument/serialInvoice.vue
@@ -211,6 +211,7 @@
               :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>
diff --git a/frontend/pages/export/create/sepa.vue b/frontend/pages/export/create/sepa.vue
index 5470967..4e45b18 100644
--- a/frontend/pages/export/create/sepa.vue
+++ b/frontend/pages/export/create/sepa.vue
@@ -35,13 +35,14 @@ const createExport = async () => {
     </template>
   </UDashboardNavbar>
   <UTable
-      v-if="createddocuments.length > 0"
       :loading="true"
       v-model="selected"
       :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
-      :data="createddocuments" />
+      :data="createddocuments"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine SEPA-Belege anzuzeigen' }"
+  />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/pages/export/index.vue b/frontend/pages/export/index.vue
index fcd7521..0ca8124 100644
--- a/frontend/pages/export/index.vue
+++ b/frontend/pages/export/index.vue
@@ -154,6 +154,7 @@ 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")}}
diff --git a/frontend/pages/settings/banking/index.vue b/frontend/pages/settings/banking/index.vue
index 03f5715..149fa34 100644
--- a/frontend/pages/settings/banking/index.vue
+++ b/frontend/pages/settings/banking/index.vue
@@ -203,6 +203,7 @@ 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>
diff --git a/frontend/pages/staff/profiles/index.vue b/frontend/pages/staff/profiles/index.vue
index a118a40..9920ef0 100644
--- a/frontend/pages/staff/profiles/index.vue
+++ b/frontend/pages/staff/profiles/index.vue
@@ -79,13 +79,8 @@
     :columns="normalizeTableColumns(columns)"
     :loading="pending"
     :on-select="(row) => navigateTo(`/staff/profiles/${row.original?.id || row.id}`)"
-  >
-    <template #empty>
-      <div class="py-10 text-center text-sm text-gray-500">
-        Keine Mitarbeiterprofile gefunden.
-      </div>
-    </template>
-  </UTable>
+    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Mitarbeiterprofile gefunden' }"
+  />
 </template>
 
 <style scoped>
diff --git a/frontend/pages/tasks/index.vue b/frontend/pages/tasks/index.vue
index 757907e..594de6e 100644
--- a/frontend/pages/tasks/index.vue
+++ b/frontend/pages/tasks/index.vue
@@ -461,6 +461,7 @@ 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,11 +491,11 @@ onMounted(async () => {
         {{ getEntityLabel(plantOptions, row.original.plant?.id || row.original.plant) || "-" }}
       </template>
     </UTable>
-    <UAlert
+    <UTable
         v-else
-        icon="i-heroicons-circle-stack-20-solid"
-        title="Keine Aufgaben anzuzeigen"
-        variant="subtle"
+        :data="[]"
+        :columns="normalizedListColumns"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
     />
   </UDashboardPanelContent>