#22 - vacation calendar (#51)

* change layout

* change layout

* #22 - wip

* wip

* wip

* #22 - wip

* #22 - wip

* #22 - wip

* #22 - wip

* #22 - fix

* #22 - wip

* #22 - added some tests

* #22 - wip

* #22 - wip

* #22 - fix

* #22 - wip

* #22 - wip

* #22 - wip

* #22 - fix

* #22 - fix

* #22 - fix

* #22 - fix

* #22 - fix

* #22 - fix

* #22 - cr fixes

* #22 - cr fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Composables/monthInfo.js

@@ -0,0 +1,60 @@
+const months = [
+  {
+    'name': 'Styczeń',
+    'value': 'january',
+  },
+  {
+    'name': 'Luty',
+    'value': 'february',
+  },
+  {
+    'name': 'Marzec',
+    'value': 'march',
+  },
+  {
+    'name': 'Kwiecień',
+    'value': 'april',
+  },
+  {
+    'name': 'Maj',
+    'value': 'may',
+  },
+  {
+    'name': 'Czerwiec',
+    'value': 'june',
+  },
+  {
+    'name': 'Lipiec',
+    'value': 'july',
+  },
+  {
+    'name': 'Sierpień',
+    'value': 'august',
+  },
+  {
+    'name': 'Wrzesień',
+    'value': 'september',
+  },
+  {
+    'name': 'Październik',
+    'value': 'october',
+  },
+  {
+    'name': 'Listopad',
+    'value': 'november',
+  },
+  {
+    'name': 'Grudzień',
+    'value': 'december',
+  },
+]
+
+export function useMonthInfo() {
+  const getMonths = () => months
+  const findMonth = value => months.find(month => month.value === value)
+
+  return {
+    getMonths,
+    findMonth,
+  }
+}

resources/js/Composables/statusInfo.js

@@ -0,0 +1,128 @@
+import {
+  CheckIcon as OutlineCheckIcon,
+  ClockIcon as OutlineClockIcon,
+  DocumentTextIcon as OutlineDocumentTextIcon,
+  ThumbDownIcon as OutlineThumbDownIcon,
+  ThumbUpIcon as OutlineThumbUpIcon,
+  XIcon as OutlineXIcon,
+} from '@heroicons/vue/outline'
+
+import {
+  CheckIcon as SolidCheckIcon,
+  ClockIcon as SolidClockIcon,
+  DocumentTextIcon as SolidDocumentTextIcon,
+  ThumbDownIcon as SolidThumbDownIcon,
+  ThumbUpIcon as SolidThumbUpIcon,
+  XIcon as SolidXIcon,
+} from '@heroicons/vue/solid'
+
+const statuses = [
+  {
+    text: 'Utworzony',
+    value: 'created',
+    outline: {
+      icon: OutlineDocumentTextIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-400',
+    },
+    solid: {
+      icon: SolidDocumentTextIcon,
+      color: 'text-gray-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od przełożonego technicznego',
+    value: 'waiting_for_technical',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od przełożonego administracyjnego',
+    value: 'waiting_for_administrative',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Odrzucony',
+    value: 'rejected',
+    outline: {
+      icon: OutlineThumbDownIcon,
+      foreground: 'text-white',
+      background: 'bg-rose-600',
+    },
+    solid: {
+      icon: SolidThumbDownIcon,
+      color: 'text-rose-600',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez przełożonego technicznego',
+    value: 'accepted_by_technical',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez przełożonego administracyjnego',
+    value: 'accepted_by_administrative',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zatwierdzony',
+    value: 'approved',
+    outline: {
+      icon: OutlineCheckIcon,
+      foreground: 'text-white',
+      background: 'bg-blumilk-500',
+    },
+    solid: {
+      icon: SolidCheckIcon,
+      color: 'text-blumilk-500',
+    },
+  },
+  {
+    text: 'Anulowany',
+    value: 'canceled',
+    outline: {
+      icon: OutlineXIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-900',
+    },
+    solid: {
+      icon: SolidXIcon,
+      color: 'text-gray-900',
+    },
+  },
+]
+
+export function useStatusInfo(status) {
+  return statuses.find(statusInfo => statusInfo.value === status)
+}

resources/js/Pages/Calendar.vue

@@ -0,0 +1,167 @@
+<template>
+  <InertiaHead title="Kalendarz urlopów" />
+  <div class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Kalendarz urlopów
+      </h2>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-center table-fixed text-sm border border-gray-300">
+        <thead>
+          <tr>
+            <th class="w-64 py-2 border border-gray-300">
+              <Menu
+                as="div"
+                class="relative inline-block text-left"
+              >
+                <div>
+                  <MenuButton
+                    class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                  >
+                    {{ selectedMonth.name }}
+                    <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
+                  </MenuButton>
+                </div>
+
+                <transition
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems
+                    class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  >
+                    <div class="py-1">
+                      <MenuItem
+                        v-for="(month, index) in months"
+                        :key="index"
+                        v-slot="{ active }"
+                      >
+                        <InertiaLink
+                          href="/vacation-calendar"
+                          :data="{ month: month.value }"
+                          :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
+                        >
+                          {{ month.name }}
+                          <CheckIcon
+                            v-if="currentMonth === month.value"
+                            class="h-5 w-5 text-blumilk-500 ml-2"
+                          />
+                        </InertiaLink>
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </transition>
+              </Menu>
+            </th>
+            <th
+              v-for="day in calendar"
+              :key="day.dayOfMonth"
+              class="border border-gray-300 text-lg font-semibold text-gray-900 py-4 px-2"
+              :class="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday }"
+            >
+              <div>
+                {{ day.dayOfMonth }}
+                <p class="font-normal mt-1 text-sm capitalize">
+                  {{ day.dayOfWeek }}
+                </p>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="user in users.data"
+            :key="user.id"
+          >
+            <th class="border border-gray-300 py-2 px-4">
+              <div class="flex justify-start items-center">
+                <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <img
+                    class="h-10 w-10 rounded-full"
+                    :src="user.avatar"
+                  >
+                </span>
+                <div class="ml-3">
+                  <div class="text-sm font-medium text-gray-900">
+                    {{ user.name }}
+                  </div>
+                </div>
+              </div>
+            </th>
+            <td
+              v-for="day in calendar"
+              :key="day.dayOfMonth"
+              class="border border-gray-300"
+              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
+            >
+              <div
+                v-if="day.vacations.includes(user.id)"
+                class="flex justify-center items-center"
+              >
+                <svg
+                  class="w-6 h-6 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 640 512"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M115.38 136.9l102.11 37.18c35.19-81.54 86.21-144.29 139-173.7-95.88-4.89-188.78 36.96-248.53 111.8-6.69 8.4-2.66 21.05 7.42 24.72zm132.25 48.16l238.48 86.83c35.76-121.38 18.7-231.66-42.63-253.98-7.4-2.7-15.13-4-23.09-4-58.02.01-128.27 69.17-172.76 171.15zM521.48 60.5c6.22 16.3 10.83 34.6 13.2 55.19 5.74 49.89-1.42 108.23-18.95 166.98l102.62 37.36c10.09 3.67 21.31-3.43 21.57-14.17 2.32-95.69-41.91-187.44-118.44-245.36zM560 447.98H321.06L386 269.5l-60.14-21.9-72.9 200.37H16c-8.84 0-16 7.16-16 16.01v32.01C0 504.83 7.16 512 16 512h544c8.84 0 16-7.17 16-16.01v-32.01c0-8.84-7.16-16-16-16z"
+                  />
+                </svg>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
+import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
+import {computed} from 'vue'
+import {useMonthInfo} from '@/Composables/monthInfo'
+
+export default {
+  name: 'VacationCalendar',
+  components: {
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItems,
+    CheckIcon,
+    ChevronDownIcon,
+  },
+  props: {
+    users: {
+      type: Object,
+      default: () => null,
+    },
+    calendar: {
+      type: Object,
+      default: () => null,
+    },
+    currentMonth: {
+      type: String,
+      default: () => 'january',
+    },
+  },
+  setup(props) {
+    const {getMonths, findMonth} = useMonthInfo()
+    const months = getMonths()
+
+    const selectedMonth = computed(() => findMonth(props.currentMonth))
+
+    return {
+      months,
+      selectedMonth,
+    }
+  },
+}
+</script>

resources/js/Pages/Dashboard.vue

@@ -37,7 +37,7 @@
               <div class="mt-5 flex justify-center sm:mt-0">
                 <InertiaLink
                   href="#"
-                  class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
                 >
                   View profile
                 </InertiaLink>

resources/js/Pages/Holidays/Create.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Dodaj dzień wolny" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Dodaj dzień wolny

resources/js/Pages/Holidays/Edit.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Edytuj dzień wolny" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Edytuj dzień wolny

resources/js/Pages/Holidays/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Dni wolne od pracy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -144,7 +144,7 @@ import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 
 export default {
-  name: 'HolidayINdex',
+  name: 'HolidayIndex',
   components: {
     DotsVerticalIcon,
     PencilIcon,

resources/js/Pages/Users/Create.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Dodawanie użytkownika" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Dodaj użytkownika

resources/js/Pages/Users/Edit.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Edycja użytkownika" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Edytuj użytkownika

resources/js/Pages/Users/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Użytkownicy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">

resources/js/Pages/VacationLimits.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Użytkownicy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">

resources/js/Pages/VacationRequest/Create.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Złóż wniosek urlopowy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Złóż wniosek urlopowy

resources/js/Pages/VacationRequest/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Twoje wnioski urlopowe" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -57,7 +57,7 @@
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
             >
               Dni urlopu
             </th>
@@ -84,7 +84,7 @@
                 {{ request.name }}
               </InertiaLink>
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
               {{ request.type }}
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -93,15 +93,18 @@
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.to }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-right text-sm text-gray-500">
-              {{ request.estimatedDays }}
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              {{ request.days.length }}
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              {{ request.state }}
+              <Status :status="request.state" />
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              <InertiaLink :href="`/vacation-requests/${request.id}`">
-                <ChevronRightIcon class="block w-6 h-6 fill-gray-400" />
+              <InertiaLink
+                :href="`/vacation-requests/${request.id}`"
+                class="flex justify-around"
+              >
+                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
               </InertiaLink>
             </td>
           </tr>
@@ -169,7 +172,19 @@
 </template>
 
 <script>
-import {ChevronRightIcon, DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/solid'
+import {
+  ChevronRightIcon,
+  ClockIcon,
+  DotsVerticalIcon,
+  PencilIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TrashIcon,
+  XIcon,
+  CheckIcon,
+  DocumentTextIcon,
+} from '@heroicons/vue/solid'
+import Status from '@/Shared/Status'
 
 export default {
   name: 'VacationRequestIndex',
@@ -178,6 +193,13 @@ export default {
     PencilIcon,
     TrashIcon,
     ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+    DocumentTextIcon,
+    ThumbDownIcon,
+    Status,
   },
   props: {
     requests: {

resources/js/Pages/VacationRequest/Show.vue

@@ -2,7 +2,7 @@
   <InertiaHead :title="`Wniosek ${request.name}`" />
   <div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
     <div class="space-y-6 xl:col-start-1 xl:col-span-2">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
         <div class="px-4 py-5 sm:px-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Informacje na temat wniosku
@@ -18,6 +18,14 @@
                 {{ request.name }}
               </dd>
             </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Pracownik
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {{ request.user.name }}
+              </dd>
+            </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Rodzaj urlopu
@@ -26,6 +34,14 @@
                 {{ request.type }}
               </dd>
             </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Obecny status
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                <Status :status="request.state" />
+              </dd>
+            </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Urlop od
@@ -47,16 +63,25 @@
                 Dni urlopu
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.estimatedDays }}
+                {{ request.days.length }}
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Komentarz
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd
+                v-if="request.comment != null"
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
                 {{ request.comment }}
               </dd>
+              <dd
+                v-else
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
+                -
+              </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
@@ -85,14 +110,15 @@
           </dl>
         </div>
       </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Zaakceptuj wniosek jako osoba techniczna
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
             <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie musiała go zaakceptować.
+              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+              musiała go zaakceptować.
             </p>
           </div>
           <div class="mt-5">
@@ -107,7 +133,7 @@
           </div>
         </div>
       </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Zaakceptuj wniosek jako osoba administracyjna
@@ -129,7 +155,7 @@
           </div>
         </div>
       </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Odrzuć wniosek
@@ -151,7 +177,7 @@
           </div>
         </div>
       </div>
-      <div class="bg-white shadow sm:rounded-lg border border-red-500">
+      <div class="bg-white shadow border border-red-500">
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Anuluj wniosek
@@ -175,7 +201,7 @@
       </div>
     </div>
     <div class="xl:col-start-3 xl:col-span-1 space-y-6">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
         <div class="px-4 py-5 sm:px-6">
           <h3 class="text-lg leading-6 font-medium text-gray-900">
             Historia wniosku
@@ -185,31 +211,12 @@
           <ul>
             <li
               v-for="(activity, index) in activities.data"
-              :key="activity.id"
+              :key="index"
             >
-              <div :class="{'relative pb-8': index !== activities.data.length - 1}">
-                <span
-                  v-if="(index !== activities.data.length - 1)"
-                  class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-                />
-                <div class="relative flex space-x-3">
-                  <div>
-                    <span class="bg-blumilk-500 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
-                      <ThumbUpIcon class="w-5 h-5 text-white" />
-                    </span>
-                  </div>
-                  <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                    <div>
-                      <p class="text-sm text-gray-500">
-                        {{ activity.to }}
-                      </p>
-                    </div>
-                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                      <time>{{ activity.date }}</time>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Activity
+                :activity="activity"
+                :last="index !== activities.data.length - 1"
+              />
             </li>
           </ul>
         </div>
@@ -219,14 +226,16 @@
 </template>
 
 <script>
-import { ThumbUpIcon } from '@heroicons/vue/outline'
-import {PaperClipIcon} from '@heroicons/vue/solid'
+import {PaperClipIcon} from '@heroicons/vue/outline'
+import Activity from '@/Shared/Activity'
+import Status from '@/Shared/Status'
 
 export default {
   name: 'VacationRequestShow',
   components: {
-    ThumbUpIcon,
+    Activity,
     PaperClipIcon,
+    Status,
   },
   props: {
     request: {

resources/js/Shared/Activity.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="{'relative pb-8': last}">
+    <span
+      v-if="last"
+      class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+    />
+    <div class="relative flex space-x-3">
+      <div>
+        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+          <component
+            :is="statusInfo.outline.icon"
+            class="w-5 h-5 text-white"
+          />
+        </span>
+      </div>
+      <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+        <div class="flex flex-col items-start">
+          <div class="text-sm font-medium text-gray-700">
+            {{ statusInfo.text }}
+          </div>
+          <div class="text-right text-sm whitespace-nowrap font-medium text-gray-400">
+            {{ activity.user }}
+          </div>
+        </div>
+        <div class="text-right text-sm whitespace-nowrap text-gray-500 flex flex-col">
+          <time>{{ activity.date }}</time>
+          <time>{{ activity.time }}</time>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
+
+export default {
+  name: 'VacationRequestActivity',
+  props: {
+    activity: {
+      type: Object,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const statusInfo = computed(() => useStatusInfo(props.activity.state))
+
+    return {
+      statusInfo,
+    }
+  },
+}
+</script>

resources/js/Shared/Layout/AppLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="min-h-full">
     <MainMenu />
-    <main class="-mt-24 pb-8">
-      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+    <main class="lg:ml-64 flex flex-col flex-1 py-8">
+      <div>
         <slot />
       </div>
     </main>

resources/js/Shared/MainMenu.vue

@@ -1,34 +1,198 @@
 <template>
-  <Popover
-    v-slot="{ open }"
-    as="header"
-    class="pb-24 bg-gradient-to-r from-blumilk-500 to-blumilk-600"
+  <TransitionRoot
+    as="template"
+    :show="sidebarOpen"
   >
-    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
-      <div class="relative flex flex-wrap items-center justify-center lg:justify-between">
-        <!-- Logo -->
-        <div class="absolute left-0 py-5 flex-shrink-0 lg:static">
-          <InertiaLink href="/">
-            <img
-              class="h-8 w-auto"
-              src="/img/logo-white.png"
-              alt="Workflow"
-            >
+    <Dialog
+      as="div"
+      class="fixed inset-0 flex z-40 lg:hidden"
+      @close="sidebarOpen = false"
+    >
+      <TransitionChild
+        as="template"
+        enter="transition-opacity ease-linear duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+      </TransitionChild>
+      <TransitionChild
+        as="template"
+        enter="transition ease-in-out duration-300 transform"
+        enter-from="-translate-x-full"
+        enter-to="translate-x-0"
+        leave="transition ease-in-out duration-300 transform"
+        leave-from="translate-x-0"
+        leave-to="-translate-x-full"
+      >
+        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700">
+          <TransitionChild
+            as="template"
+            enter="ease-in-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in-out duration-300"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <div class="absolute top-0 right-0 -mr-12 pt-2">
+              <button
+                type="button"
+                class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                @click="sidebarOpen = false"
+              >
+                <span class="sr-only">Close sidebar</span>
+                <XIcon
+                  class="h-6 w-6 text-white"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          </TransitionChild>
+          <div class="flex-shrink-0 flex items-center px-4">
+            <InertiaLink href="/">
+              <img
+                class="h-8 w-auto"
+                src="/img/logo-white.png"
+                alt="Workflow"
+              >
+            </InertiaLink>
+          </div>
+          <nav
+            class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"
+            aria-label="Sidebar"
+          >
+            <div class="px-2 space-y-1">
+              <InertiaLink
+                v-for="item in navigation"
+                :key="item.name"
+                :href="item.href"
+                :class="[item.current ? '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']"
+                :aria-current="item.current ? 'page' : undefined"
+              >
+                <component
+                  :is="item.icon"
+                  class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+                  aria-hidden="true"
+                />
+                {{ item.name }}
+              </InertiaLink>
+            </div>
+            <div class="mt-6 pt-6">
+              <div class="px-2 space-y-1">
+                <InertiaLink
+                  v-for="item in secondaryNavigation"
+                  :key="item.name"
+                  :href="item.href"
+                  class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
+                >
+                  <component
+                    :is="item.icon"
+                    class="mr-4 h-6 w-6 text-blumilk-200"
+                    aria-hidden="true"
+                  />
+                  {{ item.name }}
+                </InertiaLink>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </TransitionChild>
+      <div
+        class="flex-shrink-0 w-14"
+        aria-hidden="true"
+      />
+    </Dialog>
+  </TransitionRoot>
+
+  <!-- Static sidebar for desktop -->
+  <div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
+    <div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
+      <div class="flex items-center flex-shrink-0 px-4">
+        <InertiaLink href="/">
+          <img
+            class="h-8 w-auto"
+            src="/img/logo-white.png"
+            alt="Workflow"
+          >
+        </InertiaLink>
+      </div>
+      <nav
+        class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"
+        aria-label="Sidebar"
+      >
+        <div class="px-2 space-y-1">
+          <InertiaLink
+            v-for="item in navigation"
+            :key="item.name"
+            :href="item.href"
+            :class="[item.current ? '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']"
+            :aria-current="item.current ? 'page' : undefined"
+          >
+            <component
+              :is="item.icon"
+              class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+              aria-hidden="true"
+            />
+            {{ item.name }}
           </InertiaLink>
         </div>
+        <div class="mt-6 pt-6">
+          <div class="px-2 space-y-1">
+            <InertiaLink
+              v-for="item in secondaryNavigation"
+              :key="item.name"
+              :href="item.href"
+              class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
+            >
+              <component
+                :is="item.icon"
+                class="mr-4 h-6 w-6 text-blumilk-200"
+                aria-hidden="true"
+              />
+              {{ item.name }}
+            </InertiaLink>
+          </div>
+        </div>
+      </nav>
+    </div>
+  </div>
 
-        <!-- Right section on desktop -->
-        <div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
-          <div class="mr-4">
+  <div class="lg:pl-64 flex flex-col flex-1">
+    <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200">
+      <button
+        type="button"
+        class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
+        @click="sidebarOpen = true"
+      >
+        <span class="sr-only">Open sidebar</span>
+        <MenuAlt1Icon
+          class="h-6 w-6"
+          aria-hidden="true"
+        />
+      </button>
+      <div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
+        <div class="flex items-center">
+          <div>
             <Menu
               as="div"
               class="relative inline-block text-left"
             >
-              <div>
-                <MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-gray-300">
-                  {{ years.current }}
-                  <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
-                </MenuButton>
+              <div class="flex justify-center items-center">
+                <div class="mr-4">
+                  Wybrany rok:
+                </div>
+                <div>
+                  <MenuButton
+                    class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                  >
+                    {{ years.current }}
+                    <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
+                  </MenuButton>
+                </div>
               </div>
 
               <transition
@@ -39,7 +203,9 @@
                 leave-from-class="transform opacity-100 scale-100"
                 leave-to-class="transform opacity-0 scale-95"
               >
-                <MenuItems class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <MenuItems
+                  class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
                   <div class="py-1">
                     <MenuItem
                       v-for="(item, index) in years.navigation"
@@ -65,44 +231,42 @@
               </transition>
             </Menu>
           </div>
-
-          <button
-            type="button"
-            class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
-          >
-            <span class="sr-only">View notifications</span>
-            <BellIcon
-              class="h-6 w-6"
-              aria-hidden="true"
-            />
-          </button>
-
+        </div>
+        <div class="ml-4 flex items-center md:ml-6">
           <!-- Profile dropdown -->
           <Menu
             as="div"
-            class="ml-4 relative flex-shrink-0"
+            class="ml-3 relative"
           >
             <div>
               <MenuButton
-                class="rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
-                dusk="user-menu"
+                class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
               >
-                <span class="sr-only">{{ user.avatar }}</span>
                 <img
                   class="h-8 w-8 rounded-full"
                   :src="user.avatar"
-                  alt=""
+                  alt="Avatar"
                 >
+                <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
+                  <span class="sr-only">Open user menu for </span>
+                  {{ user.name }}
+                </span>
+                <ChevronDownIcon
+                  class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
+                  aria-hidden="true"
+                />
               </MenuButton>
             </div>
             <transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="transform opacity-0 scale-95"
+              enter-to-class="transform opacity-100 scale-100"
               leave-active-class="transition ease-in duration-75"
               leave-from-class="transform opacity-100 scale-100"
               leave-to-class="transform opacity-0 scale-95"
             >
               <MenuItems
-                class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-                dusk="user-menu-list"
+                class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
               >
                 <MenuItem
                   v-for="item in userNavigation"
@@ -122,208 +286,88 @@
             </transition>
           </Menu>
         </div>
-
-        <div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
-          <div class="lg:items-center">
-            <div class="hidden lg:block">
-              <nav class="flex space-x-4">
-                <InertiaLink
-                  v-for="item in navigation"
-                  :key="item.name"
-                  :href="item.href"
-                  :class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
-                  :aria-current="item.current ? 'page' : undefined"
-                >
-                  {{ item.name }}
-                </InertiaLink>
-              </nav>
-            </div>
-          </div>
-        </div>
-
-        <!-- Menu button -->
-        <div class="absolute right-0 flex-shrink-0 lg:hidden">
-          <!-- Mobile menu button -->
-          <PopoverButton
-            class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
-          >
-            <span class="sr-only">Open main menu</span>
-            <MenuIcon
-              v-if="!open"
-              class="block h-6 w-6"
-              aria-hidden="true"
-            />
-            <XIcon
-              v-else
-              class="block h-6 w-6"
-              aria-hidden="true"
-            />
-          </PopoverButton>
-        </div>
       </div>
     </div>
-
-    <TransitionRoot
-      as="template"
-      :show="open"
-    >
-      <div class="lg:hidden">
-        <TransitionChild
-          as="template"
-          enter="duration-150 ease-out"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="duration-150 ease-in"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
-        </TransitionChild>
-
-        <TransitionChild
-          as="template"
-          enter="duration-150 ease-out"
-          enter-from="opacity-0 scale-95"
-          enter-to="opacity-100 scale-100"
-          leave="duration-150 ease-in"
-          leave-from="opacity-100 scale-100"
-          leave-to="opacity-0 scale-95"
-        >
-          <PopoverPanel
-            focus
-            class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
-          >
-            <div
-              class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
-            >
-              <div class="pt-3 pb-2">
-                <div class="flex items-center justify-between px-4">
-                  <div>
-                    <img
-                      class="h-8 w-auto"
-                      src="/img/logo-white.png"
-                      alt="Workflow"
-                    >
-                  </div>
-                  <div class="-mr-2">
-                    <PopoverButton
-                      class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
-                    >
-                      <span class="sr-only">Close menu</span>
-                      <XIcon
-                        class="h-6 w-6"
-                        aria-hidden="true"
-                      />
-                    </PopoverButton>
-                  </div>
-                </div>
-                <div class="mt-3 px-2 space-y-1">
-                  <InertiaLink
-                    v-for="item in navigation"
-                    :key="item.name"
-                    :href="item.href"
-                    class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
-                  >
-                    {{ item.name }}
-                  </InertiaLink>
-                </div>
-              </div>
-              <div class="pt-4 pb-2">
-                <div class="flex items-center px-5">
-                  <div class="flex-shrink-0">
-                    <img
-                      class="h-10 w-10 rounded-full"
-                      :src="user.avatar"
-                      alt=""
-                    >
-                  </div>
-                  <div class="ml-3 min-w-0 flex-1">
-                    <div class="text-base font-medium text-gray-800 truncate">
-                      {{ user.name }}
-                    </div>
-                    <div class="text-sm font-medium text-gray-500 truncate">
-                      {{ user.email }}
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
-                  >
-                    <span class="sr-only">View notifications</span>
-                    <BellIcon
-                      class="h-6 w-6"
-                      aria-hidden="true"
-                    />
-                  </button>
-                </div>
-                <div class="mt-3 px-2 space-y-1">
-                  <InertiaLink
-                    v-for="item in userNavigation"
-                    :key="item.name"
-                    :method="item.method"
-                    :as="item.as"
-                    :href="item.href"
-                    class="block w-full text-left rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
-                  >
-                    {{ item.name }}
-                  </InertiaLink>
-                </div>
-              </div>
-            </div>
-          </PopoverPanel>
-        </TransitionChild>
-      </div>
-    </TransitionRoot>
-  </Popover>
+  </div>
 </template>
 
 <script>
+import {ref} from 'vue'
 import {
+  Dialog,
+  DialogOverlay,
   Menu,
   MenuButton,
   MenuItem,
   MenuItems,
-  Popover,
-  PopoverButton,
-  PopoverOverlay,
-  PopoverPanel,
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
-import {BellIcon, MenuIcon, XIcon} from '@heroicons/vue/outline'
+import {
+  BellIcon,
+  CogIcon,
+  HomeIcon,
+  CollectionIcon,
+  MenuAlt1Icon,
+  QuestionMarkCircleIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+  XIcon,
+  SunIcon,
+  StarIcon,
+  CalendarIcon,
+} from '@heroicons/vue/outline'
+import {
+  CashIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  OfficeBuildingIcon,
+  SearchIcon,
+} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {usePage} from '@inertiajs/inertia-vue3'
-import {ChevronDownIcon, CheckIcon} from '@heroicons/vue/solid'
 
 export default {
-  name: 'MainMenu',
   components: {
+    Dialog,
+    DialogOverlay,
     Menu,
     MenuButton,
     MenuItem,
     MenuItems,
-    Popover,
-    PopoverButton,
-    PopoverOverlay,
-    PopoverPanel,
     TransitionChild,
     TransitionRoot,
     BellIcon,
-    MenuIcon,
-    XIcon,
+    CashIcon,
+    CheckCircleIcon,
     ChevronDownIcon,
+    ChevronRightIcon,
+    MenuAlt1Icon,
+    OfficeBuildingIcon,
+    SearchIcon,
+    XIcon,
+    StarIcon,
+    HomeIcon,
     CheckIcon,
+    UserGroupIcon,
+    SunIcon,
+    CalendarIcon,
   },
   setup() {
+    const sidebarOpen = ref(false)
+
     const user = computed(() => usePage().props.value.auth.user)
     const years = computed(() => usePage().props.value.years)
 
     const navigation = [
-      {name: 'Strona główna', href: '/', current: true},
-      {name: 'Użytkownicy', href: '/users', current: false},
-      {name: 'Dostępne urlopy', href: '/vacation-limits', current: false},
-      {name: 'Dni wolne', href: '/holidays', current: false},
-      {name: 'Wnioski urlopowe', href: '/vacation-requests', current: false},
+      {name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
+      {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
+      {name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
+      {name: 'Twoje wnioski', href: '/vacation-requests', icon: CollectionIcon, current: false},
+      {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+      {name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false},
     ]
     const userNavigation = [
       {name: 'Your Profile', href: '#'},
@@ -331,12 +375,19 @@ export default {
       {name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
     ]
 
+    const secondaryNavigation = [
+      {name: 'Settings', href: '#', icon: CogIcon},
+      {name: 'Help', href: '#', icon: QuestionMarkCircleIcon},
+      {name: 'Privacy', href: '#', icon: ShieldCheckIcon},
+    ]
     return {
       user,
       years,
       navigation,
+      secondaryNavigation,
       userNavigation,
+      sidebarOpen,
     }
   },
 }
-</script>
+</script>

resources/js/Shared/Status.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center">
+    <component
+      :is="statusInfo.solid.icon"
+      :class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
+    />
+    <span>{{ statusInfo.text }}</span>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
+
+export default {
+  name: 'VacationRequestStatus',
+  props: {
+    status: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const statusInfo = computed(() => useStatusInfo(props.status))
+
+    return {
+      statusInfo,
+    }
+  },
+}
+</script>