#90 - user profile (#125)

* fix css focuses * #90 - wip * #90 - fix to generate PDF * #90 - wip * #90 - wip * #90 - wip * #90 - wip * #90 - fix to calendar * #90 - wip * #90 - fix * #90 - fix lint * #90 - fix * Apply suggestions from code review Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com> Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com> * #90 - cr fixes * #90 - fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl> Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com> Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
2022-04-14 11:58:45 +02:00
parent 459b62500e
commit cc981b02b4
62 changed files with 765 additions and 251 deletions
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@@ -14,8 +14,8 @@ const types = [
    text: 'Urlop wypoczynkowy',
    value: 'vacation',
    icon: WhiteBalanceSunnyIcon,
-    color: 'text-amber-300',
-    border: 'border-amber-300',
+    color: 'text-yellow-500',
+    border: 'border-yellow-500',
  },
  {
    text: 'Urlop na żądanie',
--- a/resources/js/Pages/AnnualSummary.vue
+++ b/resources/js/Pages/AnnualSummary.vue
@@ -39,7 +39,7 @@
                offset-distance="0"
              >
                <div :class="[day.isPendingVacation && 'mx-0.5']">
-                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]">
+                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
                    <time
                      :datetime="day.date.toISODate()"
                      :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -58,7 +58,7 @@
                hover
                offset-distance="0"
              >
-                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent">
+                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
                  <time
                    :datetime="day.date.toISODate()"
                    :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -74,7 +74,7 @@
              </Popper>
              <button
                v-else
-                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"
+                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
              >
                <time
                  :datetime="day.date.toISODate()"
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -11,20 +11,21 @@
            v-if="previousMonth"
            as="button"
            :href="`/vacation/calendar/${previousMonth.value}`"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
          >
            <ChevronLeftIcon class="w-5 h-5" />
          </InertiaLink>
          <span
            v-else
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
          >
            <ChevronLeftIcon class="w-5 h-5" />
          </span>
          <InertiaLink
+            v-if="years.current.year === years.selected.year"
            as="button"
            :href="`/vacation/calendar/${currentMonth.value}`"
-            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex"
+            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex"
          >
            Dzisiaj
          </InertiaLink>
@@ -32,13 +33,13 @@
            v-if="nextMonth"
            as="button"
            :href="`/vacation/calendar/${nextMonth.value}`"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
          >
            <ChevronRightIcon class="w-5 h-5" />
          </InertiaLink>
          <span
            v-else
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9"
          >
            <ChevronRightIcon class="w-5 h-5" />
          </span>
--- a/resources/js/Pages/Dashboard.vue
+++ b/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>
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/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">
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -112,7 +112,7 @@
        </ListboxLabel>
        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
          >
            <span class="block truncate">{{ form.role.label }}</span>
@@ -166,7 +166,7 @@
        </ListboxLabel>
        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
          >
            <span class="block truncate">{{ form.employmentForm.label }}</span>
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -112,7 +112,7 @@
        </ListboxLabel>
        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
          >
            <span class="block truncate">{{ form.role.label }}</span>
@@ -170,7 +170,7 @@
        </ListboxLabel>
        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
          >
            <span class="block truncate">{{ form.employmentForm.label }}</span>
--- a/resources/js/Pages/Users/Index.vue
+++ b/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({
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -63,7 +63,7 @@
                  leave-to-class="opacity-0"
                >
                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm"
+                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
                  >
                    <ListboxOption
                      v-for="user in users.data"
@@ -156,7 +156,7 @@
                  leave-from-class="opacity-100"
                  leave-to-class="opacity-0"
                >
-                  <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm">
+                  <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
                    <ListboxOption
                      v-for="vacationType in vacationTypes"
                      :key="vacationType.value"
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -19,7 +19,7 @@
        <button
          v-for="(status, index) in statuses"
          :key="index"
-          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
+          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
          @click="form.status = status"
        >
          <span>{{ status.name }}</span>
@@ -140,7 +140,7 @@
            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
+                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
              >
                {{ request.name }}
              </InertiaLink>
@@ -163,13 +163,13 @@
            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around"
+                class="flex justify-around focus:outline-blumilk-500"
              >
                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
              </InertiaLink>
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="absolute inset-0"
+                class="absolute inset-0 focus:outline-blumilk-500"
              />
            </td>
          </tr>
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -219,7 +219,7 @@
            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
+                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
              >
                {{ request.name }}
              </InertiaLink>
@@ -257,13 +257,13 @@
            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around"
+                class="flex justify-around focus:outline-blumilk-500"
              >
                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
              </InertiaLink>
              <InertiaLink
                :href="`/vacation/requests/${request.id}`"
-                class="absolute inset-0"
+                class="absolute inset-0 focus:outline-blumilk-500"
              />
            </td>
          </tr>
--- a/resources/js/Shared/InertiaLink.js
+++ b/resources/js/Shared/InertiaLink.js
@@ -0,0 +1,65 @@
+import { h, ref } from 'vue'
+import { Inertia, mergeDataIntoQueryString, shouldIntercept } from '@inertiajs/inertia'
+
+export default {
+  name: 'InertiaLink',
+  props: {
+    as: {
+      type: String,
+      default: 'a',
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    href: {
+      type: String,
+    },
+    method: {
+      type: String,
+      default: 'get',
+    },
+    replace: {
+      type: Boolean,
+      default: false,
+    },
+    preserveScroll: {
+      type: Boolean,
+      default: false,
+    },
+    preserveState: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const processing = ref(false)
+
+    return props => {
+      const as = props.as.toLowerCase()
+      const method = props.method.toLowerCase()
+      const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, 'brackets')
+
+      return h(props.as, {
+        ...attrs,
+        ...as === 'a' ? { href } : {},
+        onClick: (event) => {
+          if (shouldIntercept(event)) {
+            event.preventDefault()
+
+            Inertia.visit(href, {
+              data: data,
+              method: method,
+              replace: props.replace,
+              preserveScroll: props.preserveScroll,
+              preserveState: props.preserveState ?? (method !== 'get'),
+              onBefore: () => !processing.value,
+              onStart: () => processing.value = true,
+              onFinish: () => processing.value = false,
+            })
+          }
+        },
+      }, slots)
+    }
+  },
+}
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/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()
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -71,12 +71,12 @@
              </InertiaLink>
            </div>
            <div class="pt-3 mt-3">
-              <div class="px-2 space-y-1">
+              <div class="py-1 px-2 space-y-1">
                <InertiaLink
                  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>
@@ -107,7 +113,7 @@
      <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800">
        <InertiaLink
          href="/"
-          :class="[$page.component === 'Dashboard' ? '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 === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 mt-1 text-sm leading-6 font-medium rounded-md']"
        >
          <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
          Strona główna
@@ -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>
@@ -152,7 +164,7 @@
                </div>
                <div>
                  <MenuButton
-                    class="inline-flex justify-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 focus:ring-offset-2 shadow-sm"
+                    class="inline-flex justify-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"
                  >
                    {{ years.selected.year }}
                    <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />
@@ -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,
    },
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/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,
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,10 +1,12 @@
 import { createApp, h } from 'vue'
-import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
+import { createInertiaApp, Head } 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'
+import InertiaLink from '@/Shared/InertiaLink'

 createInertiaApp({
  resolve: name => {
@@ -23,7 +25,7 @@ createInertiaApp({
        timeout: 3000,
        pauseOnFocusLoss: false,
      })
-      .component('InertiaLink', Link)
+      .component('InertiaLink', InertiaLink)
      .component('InertiaHead', Head)
      .mount(el)
  },
@@ -44,3 +46,4 @@ Flatpickr.setDefaults({
  disableMobile: true,
 })

+Settings.defaultLocale = 'pl'