#90 - wip

resources/js/Pages/Dashboard.vue

@@ -14,8 +14,14 @@
         v-else
         :requests="vacationRequests.data"
       />
-      <AbsenceList :absences="absences.data" />
-      <UpcomingHolidays :holidays="holidays.data" />
+      <AbsenceList
+        v-if="years.current.year === years.selected.year"
+        :absences="absences.data"
+      />
+      <UpcomingHolidays
+        v-if="years.current.year === years.selected.year"
+        :holidays="holidays.data"
+      />
     </div>
   </div>
 </template>
@@ -35,5 +41,6 @@ defineProps({
   holidays: Object,
   can: Object,
   stats: Object,
+  years: Object,
 })
 </script>

resources/js/Pages/Holidays/Index.vue

@@ -49,9 +49,9 @@
             <tr
               v-for="holiday in holidays.data"
               :key="holiday.id"
-              class="hover:bg-blumilk-25"
+              :class="[holiday.isPast ? 'bg-gray-100' : 'hover:bg-blumilk-25']"
             >
-              <td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <td class="p-4 text-sm font-semibold text-gray-700 capitalize whitespace-nowrap">
                 {{ holiday.name }}
               </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">

resources/js/Pages/Users/Index.vue

@@ -46,6 +46,12 @@
               >
                 Rola
               </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Ostatnia aktywność
+              </th>
               <th
                 scope="col"
                 class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
@@ -97,6 +103,9 @@
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.role }}
               </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ user.lastActiveAt ? DateTime.fromSQL(user.lastActiveAt).toRelative() : '-' }}
+              </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.position }}
               </td>
@@ -150,7 +159,7 @@
                             :href="`/users/${user.id}`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
+                            <BanIcon class="mr-2 w-5 h-5 text-red-500" /> Zablokuj
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -201,8 +210,9 @@ import { ref, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 import { debounce } from 'lodash'
 import { SearchIcon } from '@heroicons/vue/outline'
-import { DotsVerticalIcon, PencilIcon, TrashIcon, RefreshIcon } from '@heroicons/vue/solid'
+import { DotsVerticalIcon, PencilIcon, BanIcon, RefreshIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { DateTime } from 'luxon'
 import Pagination from '@/Shared/Pagination'
 
 const props = defineProps({

resources/js/Shared/Layout/AppLayout.vue

@@ -3,6 +3,7 @@
     <MainMenu
       :auth="auth"
       :years="years"
+      :vacation-requests-count="vacationRequestsCount"
     />
     <main class="flex flex-col flex-1 py-8 lg:ml-64">
       <div class="lg:px-4">
@@ -21,6 +22,7 @@ const props = defineProps({
   flash: Object,
   auth: Object,
   years: Object,
+  vacationRequestsCount: Number,
 })
 
 const toast = useToast()

resources/js/Shared/MainMenu.vue

@@ -76,7 +76,7 @@
                   v-for="item in navigation"
                   :key="item.name"
                   :href="item.href"
-                  :class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
+                  :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
                   @click="sidebarOpen = false;"
                 >
                   <component
@@ -84,6 +84,12 @@
                     class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
                   />
                   {{ item.name }}
+                  <span
+                    v-if="item.badge"
+                    class="py-0.5 px-2.5 ml-3 text-xs font-semibold text-gray-600 bg-gray-100 rounded-full 2xl:inline-block"
+                  >
+                    {{ item.badge }}
+                  </span>
                 </InertiaLink>
               </div>
             </div>
@@ -117,13 +123,19 @@
             v-for="item in navigation"
             :key="item.name"
             :href="item.href"
-            :class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
+            :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
           >
             <component
               :is="item.icon"
               class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
             />
             {{ item.name }}
+            <span
+              v-if="item.badge"
+              class="py-0.5 px-2.5 ml-3 text-xs font-semibold text-gray-600 bg-gray-100 rounded-full 2xl:inline-block"
+            >
+              {{ item.badge }}
+            </span>
           </InertiaLink>
         </div>
       </nav>
@@ -288,6 +300,7 @@ import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
 const props = defineProps({
   auth: Object,
   years: Object,
+  vacationRequestsCount: Number,
 })
 
 const sidebarOpen = ref(false)
@@ -297,42 +310,43 @@ const navigation = computed(() =>
     {
       name: 'Moje wnioski',
       href: '/vacation/requests/me',
-      component: 'VacationRequest/Index',
+      section: 'VacationRequest',
       icon: DocumentTextIcon,
-      can: true,
+      can: !props.auth.can.listAllVacationRequests,
     },
     {
       name: 'Lista wniosków',
       href: '/vacation/requests',
-      component: 'VacationRequest/IndexForApprovers',
+      section: 'VacationRequest',
       icon: CollectionIcon,
       can: props.auth.can.listAllVacationRequests,
+      badge: props.vacationRequestsCount,
     },
     {
       name: 'Kalendarz urlopów',
       href: '/vacation/calendar',
-      component: 'Calendar',
+      section: 'Calendar',
       icon: CalendarIcon,
       can: true,
     },
     {
       name: 'Wykorzystanie urlopu',
       href: '/vacation/monthly-usage',
-      component: 'MonthlyUsage',
+      section: 'MonthlyUsage',
       icon: AdjustmentsIcon,
       can: props.auth.can.listMonthlyUsage,
     },
     {
       name: 'Dni wolne',
       href: '/holidays',
-      component: 'Holidays/Index',
+      section: 'Holidays/',
       icon: StarIcon,
       can: true,
     },
     {
       name: 'Limity urlopów',
       href: '/vacation/limits',
-      component: 'VacationLimits',
+      section: 'VacationLimits',
       icon: SunIcon,
       can: props.auth.can.manageVacationLimits,
     },
@@ -340,14 +354,14 @@ const navigation = computed(() =>
 
       name: 'Podsumowanie roczne',
       href: '/vacation/annual-summary',
-      component: 'AnnualSummary',
+      section: 'AnnualSummary',
       icon: ClipboardListIcon,
       can: true,
     },
     {
       name: 'Użytkownicy',
       href: '/users',
-      component: 'Users/Index',
+      section: 'Users/',
       icon: UserGroupIcon,
       can: props.auth.can.manageUsers,
     },

resources/js/Shared/Widgets/UserVacationRequests.vue

@@ -53,6 +53,7 @@
 
 <script setup>
 import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
+import Status from '@/Shared/Status'
 
 defineProps({
   requests: Object,

resources/js/app.js

@@ -3,6 +3,7 @@ import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
 import { InertiaProgress } from '@inertiajs/progress'
 import AppLayout from '@/Shared/Layout/AppLayout'
 import Flatpickr from 'flatpickr'
+import { Settings } from 'luxon'
 import { Polish } from 'flatpickr/dist/l10n/pl.js'
 import Toast from 'vue-toastification'
 
@@ -44,3 +45,4 @@ Flatpickr.setDefaults({
   disableMobile: true,
 })
 
+Settings.defaultLocale = 'pl'