#74 - vacation calendar (#87)

* - polishing calendar * wip * wip * #74 - wip * #74 - wip * #74 - wip * #74 - fix icons Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-03-21 11:57:32 +01:00 · 2022-03-21 11:57:32 +01:00 · a0e60a3160
commit a0e60a3160
parent 8c1819aa01
13 changed files with 326 additions and 82 deletions
--- a/app/Domain/CalendarGenerator.php
+++ b/app/Domain/CalendarGenerator.php
@ -44,6 +44,7 @@ class CalendarGenerator
                "isWeekend" => $day->isWeekend(),
                "isHoliday" => $holidays->contains($day),
                "vacations" => $vacationsForDay->pluck("user_id"),
+                "vacationTypes" => $vacationsForDay->pluck("vacationRequest.type", "user_id"),
            ];
        }

@ -55,6 +56,7 @@ class CalendarGenerator
        return Vacation::query()
            ->whereBetween("date", [$period->start, $period->end])
            ->whereRelation("vacationRequest", fn(Builder $query) => $query->states(VacationRequestStatesRetriever::successStates()))
+            ->with("vacationRequest")
            ->get()
            ->groupBy(fn(Vacation $vacation) => $vacation->date->toDateString());
    }
--- a/app/Infrastructure/Http/Controllers/VacationCalendarController.php
+++ b/app/Infrastructure/Http/Controllers/VacationCalendarController.php
@ -22,20 +22,25 @@ class VacationCalendarController extends Controller
        ?string $month = null,
    ): Response {
        $month = Month::fromNameOrCurrent((string)$month);
+        $currentUser = $request->user();

        $yearPeriod = $yearPeriodRetriever->selected();
        $carbonMonth = Carbon::create($yearPeriod->year, $month->toCarbonNumber());

        $users = User::query()
+            ->where("id", "!=", $currentUser->id)
            ->orderBy("last_name")
            ->orderBy("first_name")
            ->get();

+        $users->prepend($currentUser);
+
        $calendar = $calendarGenerator->generate($carbonMonth);

        return inertia("Calendar", [
            "calendar" => $calendar,
-            "currentMonth" => $month->value,
+            "current" => Month::current(),
+            "selected" => $month->value,
            "users" => UserResource::collection($users),
            "can" => [
                "generateTimesheet" => $request->user()->can("generateTimesheet"),
--- a/app/Infrastructure/Http/Resources/VacationRequestResource.php
+++ b/app/Infrastructure/Http/Resources/VacationRequestResource.php
@ -16,7 +16,7 @@ class VacationRequestResource extends JsonResource
            "id" => $this->id,
            "name" => $this->name,
            "user" => new UserResource($this->user),
-            "type" => $this->type->label(),
+            "type" => $this->type,
            "state" => $this->state,
            "from" => $this->from->toDisplayString(),
            "to" => $this->to->toDisplayString(),
--- a/package-lock.json
+++ b/package-lock.json
@ -27,7 +27,9 @@
                "vue-echarts": "^6.0.2",
                "vue-flatpickr-component": "^9.0.5",
                "vue-loader": "^17.0.0",
-                "vue-toastification": "^2.0.0-rc.5"
+                "vue-material-design-icons": "^5.0.0",
+                "vue-toastification": "^2.0.0-rc.5",
+                "vue3-popper": "^1.4.2"
            },
            "devDependencies": {
                "eslint": "^8.10.0",
@ -1820,6 +1822,15 @@
                "node": ">= 8"
            }
        },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
        "node_modules/@tailwindcss/forms": {
            "version": "0.4.0",
            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
@ -3794,6 +3805,11 @@
            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
            "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
        },
+        "node_modules/debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+        },
        "node_modules/debug": {
            "version": "4.3.3",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -8968,6 +8984,11 @@
                "node": ">=8.9.0"
            }
        },
+        "node_modules/vue-material-design-icons": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
+            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
+        },
        "node_modules/vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -8990,6 +9011,21 @@
                "vue": "^3.0.2"
            }
        },
+        "node_modules/vue3-popper": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.4.2.tgz",
+            "integrity": "sha512-nc5vM//AJ8/DyNetjrrgkkLv7aKVdSsljvqlQ1tWhAV2lgA8tkn8xE6icDd0/kBt0Yo5Li8Pftf0H0C/hNmu1Q==",
+            "dependencies": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.20"
+            }
+        },
        "node_modules/watchpack": {
            "version": "2.3.1",
            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@ -10795,6 +10831,11 @@
                "fastq": "^1.6.0"
            }
        },
+        "@popperjs/core": {
+            "version": "2.11.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+        },
        "@tailwindcss/forms": {
            "version": "0.4.0",
            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
@ -12418,6 +12459,11 @@
            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
            "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
        },
+        "debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+        },
        "debug": {
            "version": "4.3.3",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -16166,6 +16212,11 @@
                }
            }
        },
+        "vue-material-design-icons": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
+            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
+        },
        "vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -16188,6 +16239,15 @@
            "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
            "requires": {}
        },
+        "vue3-popper": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.4.2.tgz",
+            "integrity": "sha512-nc5vM//AJ8/DyNetjrrgkkLv7aKVdSsljvqlQ1tWhAV2lgA8tkn8xE6icDd0/kBt0Yo5Li8Pftf0H0C/hNmu1Q==",
+            "requires": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            }
+        },
        "watchpack": {
            "version": "2.3.1",
            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@ -35,7 +35,9 @@
        "vue-echarts": "^6.0.2",
        "vue-flatpickr-component": "^9.0.5",
        "vue-loader": "^17.0.0",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-material-design-icons": "^5.0.0",
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-popper": "^1.4.2"
    },
    "devDependencies": {
        "eslint": "^8.10.0",
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@ -0,0 +1,76 @@
+import WhiteBalanceSunnyIcon from 'vue-material-design-icons/WhiteBalanceSunny.vue'
+import CommentAlertIcon from 'vue-material-design-icons/CommentAlert.vue'
+import StarShootingIcon from 'vue-material-design-icons/StarShooting.vue'
+import BabyCarriageIcon from 'vue-material-design-icons/BabyCarriage.vue'
+import HumanMaleBoardIcon from 'vue-material-design-icons/HumanMaleBoard.vue'
+import CurrencyUsdOffIcon from 'vue-material-design-icons/CurrencyUsdOff.vue'
+import HandHeartOutlineIcon from 'vue-material-design-icons/HandHeartOutline.vue'
+import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
+import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
+
+const types = [
+  {
+    text: 'Urlop wypoczynkowy',
+    value: 'vacation',
+    icon: WhiteBalanceSunnyIcon,
+    color: 'text-amber-500',
+  },
+  {
+    text: 'Urlop na żądanie',
+    value: 'vacation_on_request',
+    icon: CommentAlertIcon,
+    color: 'text-slate-500',
+  },
+  {
+    text: 'Urlop okolicznościowy',
+    value: 'special_vacation',
+    icon: StarShootingIcon,
+    color: 'text-orange-500',
+  },
+  {
+    text: 'Opieka nad dzieckiem art 188 kp',
+    value: 'childcare_vacation',
+    icon: BabyCarriageIcon,
+    color: 'text-purple-500',
+  },
+  {
+    text: 'Urlop szkoleniowy',
+    value: 'training_vacation',
+    icon: HumanMaleBoardIcon,
+    color: 'text-blumilk-500',
+  },
+  {
+    text: 'Urlop bezpłatny',
+    value: 'unpaid_vacation',
+    icon: CurrencyUsdOffIcon,
+    color: 'text-emerald-500',
+  },
+  {
+    text: 'Wolontariat',
+    value: 'volunteering_vacation',
+    icon: HandHeartOutlineIcon,
+    color: 'text-pink-500',
+  },
+  {
+    text: 'Odbiór za święto',
+    value: 'time_in_lieu',
+    icon: CalendarCheckIcon,
+    color: 'text-stone-500',
+  },
+  {
+    text: 'Zwolnienie lekarskie',
+    value: 'sick_vacation',
+    icon: MedicalBagIcon,
+    color: 'text-rose-500',
+  },
+]
+
+export function useVacationTypeInfo() {
+  const getTypes = () => types
+  const findType = value => types.find(type => type.value === value)
+
+  return {
+    getTypes,
+    findType,
+  }
+}
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@ -2,10 +2,47 @@
  <InertiaHead title="Kalendarz urlopów" />
  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
+      <div class="flex items-center">
        <h2 class="text-lg leading-6 font-medium text-gray-900">
          Kalendarz urlopów
        </h2>
+        <div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
+          <InertiaLink
+            v-if="previousMonth"
+            as="button"
+            :href="`/vacation-calendar/${previousMonth.value}`"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+          >
+            <ChevronLeftIcon class="h-5 w-5" />
+          </InertiaLink>
+          <span
+            v-else
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+          >
+            <ChevronLeftIcon class="h-5 w-5" />
+          </span>
+          <InertiaLink
+            as="button"
+            :href="`/vacation-calendar/${currentMonth.value}`"
+            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+          >
+            Dzisiaj
+          </InertiaLink>
+          <InertiaLink
+            v-if="nextMonth"
+            as="button"
+            :href="`/vacation-calendar/${nextMonth.value}`"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+          >
+            <ChevronRightIcon class="h-5 w-5" />
+          </InertiaLink>
+          <span
+            v-else
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+          >
+            <ChevronRightIcon class="h-5 w-5" />
+          </span>
+        </div>
      </div>
      <div v-if="can.generateTimesheet">
        <a
@ -17,61 +54,20 @@
      </div>
    </div>
    <div class="overflow-x-auto">
-      <table class="w-full text-center table-fixed text-sm border border-gray-300">
+      <table class="w-full text-center 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 }} {{ years.current }}
-                    <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/${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 class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
+              <div class="flex justify-center items-center">
+                {{ selectedMonth.name }} {{ years.current }}
+              </div>
            </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 }"
+              style="min-width: 46px;"
+              :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
            >
              <div>
                {{ day.dayOfMonth }}
@ -87,7 +83,9 @@
            v-for="user in users.data"
            :key="user.id"
          >
-            <th class="border border-gray-300 py-2 px-4">
+            <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
@ -96,7 +94,9 @@
                  >
                </span>
                <div class="ml-3">
-                  <div class="text-sm font-medium text-gray-900">
+                  <div
+                    class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  >
                    {{ user.name }}
                  </div>
                </div>
@ -106,22 +106,13 @@
              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) }"
+              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday}"
            >
              <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>
+                <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
              </div>
            </td>
          </tr>
@ -132,31 +123,36 @@
 </template>

 <script>
-import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
-import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
+import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {useMonthInfo} from '@/Composables/monthInfo'
+import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'

 export default {
  name: 'VacationCalendar',
  components: {
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    CheckIcon,
-    ChevronDownIcon,
+    VacationTypeCalendarIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
  },
  props: {
    users: {
      type: Object,
      default: () => null,
    },
+    auth: {
+      type: Object,
+      default: () => null,
+    },
    calendar: {
      type: Object,
      default: () => null,
    },
-    currentMonth: {
+    current: {
+      type: String,
+      default: () => 'january',
+    },
+    selected: {
      type: String,
      default: () => 'january',
    },
@ -173,11 +169,18 @@ export default {
    const {getMonths, findMonth} = useMonthInfo()
    const months = getMonths()

-    const selectedMonth = computed(() => findMonth(props.currentMonth))
+    const currentMonth = computed(() => findMonth(props.current))
+    const selectedMonth = computed(() => findMonth(props.selected))
+    const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
+    const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
+

    return {
      months,
+      currentMonth,
      selectedMonth,
+      previousMonth,
+      nextMonth,
    }
  },
 }
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@ -119,7 +119,7 @@
                        class="hover:underline focus:outline-none"
                      >
                        <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                        [{{ request.name }}]
                      </InertiaLink>
                    </h3>
@ -185,7 +185,7 @@
                        class="hover:underline focus:outline-none"
                      >
                        <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                        [{{ request.name }}]
                      </InertiaLink>
                    </h3>
@ -302,6 +302,7 @@ import {computed} from 'vue'
 import {usePage} from '@inertiajs/inertia-vue3'
 import Status from '@/Shared/Status'
 import VacationChart from '@/Shared/VacationChart'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'

 export default {
  name: 'DashboardPage',
@ -335,8 +336,11 @@ export default {
  setup() {
    const user = computed(() => usePage().props.value.auth.user)

+    const { findType } = useVacationTypeInfo()
+
    return {
      user,
+      findType,
    }
  },
 }
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@ -91,7 +91,7 @@
              </InertiaLink>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :type="request.type" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.from }}
@ -195,6 +195,7 @@ import {
  DocumentTextIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'

 export default {
  name: 'VacationRequestIndex',
@ -210,6 +211,7 @@ export default {
    DocumentTextIcon,
    ThumbDownIcon,
    Status,
+    VacationType,
  },
  props: {
    requests: {
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@ -247,7 +247,7 @@
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :type="request.type" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.from }}
@ -353,6 +353,7 @@ import {
  XIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 import {watch, reactive} from 'vue'
 import {debounce} from 'lodash'
 import {Inertia} from '@inertiajs/inertia'
@ -377,6 +378,7 @@ export default {
    DocumentTextIcon,
    ThumbDownIcon,
    Status,
+    VacationType,
    SelectorIcon,
    XCircleIcon,
  },
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@ -44,7 +44,7 @@
                Rodzaj urlopu
              </dt>
              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.type }}
+                <VacationType :type="request.type" />
              </dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@ -65,7 +65,7 @@
                    {{ request.from }} - {{ request.to }} [Liczba dni: {{ request.days.length }}]
                  </template>
                  <template v-else>
-                    {{ request.from }}
+                    {{ request.from }} [Liczba dni: {{ request.days.length }}]
                  </template>
                </span>
              </dd>
@ -249,10 +249,12 @@
 import {PaperClipIcon} from '@heroicons/vue/outline'
 import Activity from '@/Shared/Activity'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'

 export default {
  name: 'VacationRequestShow',
  components: {
+    VacationType,
    Activity,
    PaperClipIcon,
    Status,
--- a/resources/js/Shared/VacationType.vue
+++ b/resources/js/Shared/VacationType.vue
@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center">
+    <component
+      :is="vacationTypeInfo.icon"
+      :class="[vacationTypeInfo.color ,'w-5 h-5 mr-1.5']"
+      :size="20"
+    />
+    <span>{{ vacationTypeInfo.text }}</span>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+
+export default {
+  name: 'VacationType',
+  props: {
+    type: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findType } = useVacationTypeInfo()
+
+    const vacationTypeInfo = computed(() => findType(props.type))
+
+    return {
+      vacationTypeInfo,
+    }
+  },
+}
+</script>
--- a/resources/js/Shared/VacationTypeCalendarIcon.vue
+++ b/resources/js/Shared/VacationTypeCalendarIcon.vue
@ -0,0 +1,48 @@
+<template>
+  <Popper hover>
+    <div class="flex items-center">
+      <div>
+        <span :class="[typeInfo.color, 'flex items-center justify-center']">
+          <component :is="typeInfo.icon" />
+        </span>
+      </div>
+    </div>
+    <template #content>
+      <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
+        {{ typeInfo.text }}
+      </div>
+    </template>
+  </Popper>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+import Popper from 'vue3-popper'
+
+export default {
+  name: 'VacationTypeCalendarIcon',
+  components: {
+    Popper,
+  },
+  props: {
+    type: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findType } = useVacationTypeInfo()
+
+    const typeInfo = computed(() => findType(props.type))
+
+    return {
+      typeInfo,
+    }
+  },
+}
+</script>