- duplication of code removed

app/Domain/UserVacationStatsRetriever.php

@@ -105,11 +105,10 @@ class UserVacationStatsRetriever
 
     public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
     {
-        $limit = $user->vacationLimits()
+        return $user->vacationLimits()
             ->whereBelongsTo($yearPeriod)
-            ->first()?->days;
-
-        return $limit !== null;
+            ->first()
+            ?->hasVacation() ?? false;
     }
 
     protected function getLimitableVacationTypes(): Collection

resources/js/Pages/Dashboard.vue

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

resources/js/Shared/Widgets/AbsenceList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="absences.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="absence in absences"
           :key="absence.user.id"
@@ -26,11 +29,25 @@
           </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/Calendar/DayComponent.vue

@@ -13,8 +13,8 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
+      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
+      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
     ]"
   >
     <Popper

resources/js/Shared/Widgets/HomeOfficeList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="remoteDays.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="day in remoteDays"
           :key="day.user.id"
@@ -26,11 +29,28 @@
           </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,
 })

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -91,13 +91,13 @@
         </transition>
       </Menu>
     </div>
-    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
       <div
         v-if="calendarState.viewMode.isMonth"
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
         <div class="py-2 bg-white">
-          Pn
+          Pon
         </div>
         <div class="py-2 bg-white">
           Wt
@@ -106,19 +106,19 @@
           Śr
         </div>
         <div class="py-2 bg-white">
-          Cz
+          Czw
         </div>
         <div class="py-2 bg-white">
           Pt
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Sb
+          Sob
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Nd
+          Ndz
         </div>
       </div>
-      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
         <div
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
@@ -127,7 +127,7 @@
             v-for="(day, index) in days"
             :key="index"
             :day="day"
-            class="flex flex-col relative py-2 px-3"
+            class="flex flex-col relative py-3 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
           />
         </div>
@@ -378,7 +378,7 @@ function getVacationInfo(day) {
 
 <style lang="css">
 .day:nth-of-type(7n - 6):before {
-  content: "Pn";
+  content: "Pon";
 }
 
 .day:nth-of-type(7n - 5):before {
@@ -390,7 +390,7 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 3):before {
-  content: "Cz";
+  content: "Czw";
 }
 
 .day:nth-of-type(7n - 2):before {
@@ -398,10 +398,10 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 1):before {
-  content: "Sb";
+  content: "Sob";
 }
 
 .day:nth-of-type(7n):before {
-  content: "Nd";
+  content: "Ndz";
 }
 </style>

resources/js/Shared/Widgets/VacationStats.vue

@@ -11,6 +11,9 @@
         <dt class="font-medium text-gray-700 truncate text-md">
           Pozostało
         </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni do wykorzystania teraz.
+        </dt>
       </div>
       <div class="py-5 px-4 bg-white shadow-md sm:p-6">
         <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
@@ -19,6 +22,9 @@
         <dt class="font-medium text-gray-700 truncate text-md">
           Wykorzystane
         </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+        </dt>
       </div>
       <div class="py-5 px-4 bg-white shadow-md sm:p-6">
         <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
@@ -27,6 +33,9 @@
         <dd class="font-medium text-gray-700 truncate text-md">
           Rozpatrywane
         </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni czekające na akceptację przełożonych.
+        </dt>
       </div>
       <div class="py-5 px-4 bg-white shadow-md sm:p-6">
         <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
@@ -35,22 +44,9 @@
         <dd class="font-medium text-gray-700 truncate text-md">
           Limit urlopu
         </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          {{ stats.other }}
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Twój roczny limit urlopu wypoczynkowego.
         </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Inne urlopy
-        </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          {{ stats.homeOffice }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Praca zdalna
-        </dd>
       </div>
     </div>
     <div
@@ -64,6 +60,9 @@
         <dd class="font-medium text-gray-700 truncate text-md">
           Inne urlopy
         </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
+        </dt>
       </div>
       <div class="py-5 px-4 bg-white shadow-md sm:p-6">
         <dt class="mt-1 text-4xl font-semibold text-lime-500">
@@ -72,6 +71,9 @@
         <dd class="font-medium text-gray-700 truncate text-md">
           Praca zdalna
         </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni przepracowane poza biurem.
+        </dt>
       </div>
     </div>
   </section>