resources/js/Shared/Widgets/PendingVacationRequests.vue

@@ -52,16 +52,27 @@
             </div>
           </li>
           <li v-if="! requests.length">
-            <p class="py-2">
-              Brak danych
-            </p>
+            <EmptyState class="text-gray-700">
+              <template #head>
+                <CollectionIcon class="mx-auto w-12 h-12" />
+              </template>
+              <template #title>
+                Brak wniosków
+              </template>
+              <template #text>
+                Nie ma oczekujących wniosków
+              </template>
+            </EmptyState>
           </li>
         </ul>
       </div>
-      <div class="mt-6">
+      <div
+        v-if="requests.length"
+        class="mt-6"
+      >
         <InertiaLink
           href="/vacation/requests"
-          :data="{status: 'waiting_for_action'}"
+          :data="{ status: 'waiting_for_action' }"
           class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
         >
           Zobacz wszystkie
@@ -73,6 +84,8 @@
 
 <script setup>
 import VacationType from '@/Shared/VacationType'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { CollectionIcon } from '@heroicons/vue/solid'
 
 defineProps({
   requests: Object,