resources/js/Pages/Dashboard.vue

@@ -20,9 +20,11 @@
     <div class="grid grid-cols-1 gap-4">
       <VacationStats :stats="stats" />
       <AbsenceList
+        v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"
       />
       <HomeOfficeList
+        v-if="years.current.year === years.selected.year && remoteDays.data.length"
         :remote-days="remoteDays.data"
       />
       <UpcomingHolidays

resources/js/Shared/Feedbacks/EmptyState.vue

@@ -8,10 +8,7 @@
         No search result
       </slot>
     </h3>
-    <p
-      v-if="showDescription"
-      class="text-sm"
-    >
+    <p class="text-sm">
       <slot name="text">
         Try a different search query
       </slot>
@@ -21,11 +18,4 @@
 
 <script setup>
 import { SearchIcon } from '@heroicons/vue/solid'
-
-defineProps({
-  showDescription: {
-    type: Boolean,
-    default: true,
-  },
-})
 </script>

resources/js/Shared/Widgets/AbsenceList.vue

@@ -6,10 +6,7 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
-        v-if="absences.length"
-        class="divide-y divide-gray-200"
-      >
+      <ul class="divide-y divide-gray-200">
         <li
           v-for="absence in absences"
           :key="absence.user.id"
@@ -29,25 +26,11 @@
           </div>
         </li>
       </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <SunIcon class="mx-auto w-12 h-12" />
-        </template>
-        <template #title>
-          Brak nieobecności
-        </template>
-      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import { SunIcon } from '@heroicons/vue/solid'
-
 defineProps({
   absences: Object,
 })

resources/js/Shared/Widgets/HomeOfficeList.vue

@@ -6,10 +6,7 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
-        v-if="remoteDays.length"
-        class="divide-y divide-gray-200"
-      >
+      <ul class="divide-y divide-gray-200">
         <li
           v-for="day in remoteDays"
           :key="day.user.id"
@@ -29,28 +26,11 @@
           </div>
         </li>
       </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <HomeCityIcon
-            class="flex justify-center"
-            size="48"
-          />
-        </template>
-        <template #title>
-          Nikt nie pracuje z domu
-        </template>
-      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import HomeCityIcon from 'vue-material-design-icons/HomeCity'
-
 defineProps({
   remoteDays: Object,
 })