Vereinheitliche Empty States in Tabellen

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>

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>

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'"

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'}])"
+    :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
-      :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
+    :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>

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>

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>
 

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>

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>
+</style>

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")}}

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>

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}`)"
-  >
+    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Mitarbeiterprofile gefunden' }"
-    <template #empty>
+  />
-      <div class="py-10 text-center text-sm text-gray-500">
-        Keine Mitarbeiterprofile gefunden.
-      </div>
-    </template>
-  </UTable>
 </template>
 
 <style scoped>

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"
+        :data="[]"
-        title="Keine Aufgaben anzuzeigen"
+        :columns="normalizedListColumns"
-        variant="subtle"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
     />
   </UDashboardPanelContent>