From dcda8c62551055752a3d6ba69178235d6ec7109f Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Tue, 22 Mar 2022 15:03:42 +0100
Subject: [PATCH] - vue composition api (#91)

* wip

* fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
---
 .eslintrc.js                                  |   2 +
 resources/js/Composables/vacationTypeInfo.js  |   2 +-
 resources/js/Composables/yearPeriodInfo.js    |   4 +-
 resources/js/Pages/Calendar.vue               |  84 +---
 resources/js/Pages/Dashboard.vue              | 362 ++----------------
 resources/js/Pages/Holidays/Create.vue        |  33 +-
 resources/js/Pages/Holidays/Edit.vue          |  36 +-
 resources/js/Pages/Holidays/Index.vue         |  45 +--
 resources/js/Pages/Login.vue                  |  31 +-
 resources/js/Pages/Users/Create.vue           |  69 ++--
 resources/js/Pages/Users/Edit.vue             |  96 ++---
 resources/js/Pages/Users/Index.vue            | 123 +-----
 resources/js/Pages/VacationLimits.vue         |  75 ++--
 resources/js/Pages/VacationRequest/Create.vue | 184 ++++-----
 resources/js/Pages/VacationRequest/Index.vue  | 148 ++-----
 .../VacationRequest/IndexForApprovers.vue     | 196 +++-------
 resources/js/Pages/VacationRequest/Show.vue   |  32 +-
 resources/js/Shared/Activity.vue              |  32 +-
 resources/js/Shared/Layout/AppLayout.vue      |  51 +--
 resources/js/Shared/Layout/GuestLayout.vue    |   6 -
 resources/js/Shared/MainMenu.vue              | 166 ++++----
 resources/js/Shared/Pagination.vue            |  61 +++
 resources/js/Shared/Status.vue                |  33 +-
 resources/js/Shared/VacationChart.vue         | 123 +++---
 resources/js/Shared/VacationType.vue          |  31 +-
 .../js/Shared/VacationTypeCalendarIcon.vue    |  34 +-
 resources/js/Shared/Widgets/AbsenceList.vue   |  42 ++
 .../Widgets/PendingVacationRequests.vue       |  76 ++++
 .../js/Shared/Widgets/UpcomingHolidays.vue    |  46 +++
 .../Shared/Widgets/UserVacationRequests.vue   |  62 +++
 resources/js/Shared/Widgets/VacationStats.vue |  74 ++++
 resources/js/Shared/Widgets/Welcome.vue       |  35 ++
 resources/js/app.js                           |  10 +-
 33 files changed, 938 insertions(+), 1466 deletions(-)
 create mode 100644 resources/js/Shared/Pagination.vue
 create mode 100644 resources/js/Shared/Widgets/AbsenceList.vue
 create mode 100644 resources/js/Shared/Widgets/PendingVacationRequests.vue
 create mode 100644 resources/js/Shared/Widgets/UpcomingHolidays.vue
 create mode 100644 resources/js/Shared/Widgets/UserVacationRequests.vue
 create mode 100644 resources/js/Shared/Widgets/VacationStats.vue
 create mode 100644 resources/js/Shared/Widgets/Welcome.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index d4ea4bf..e8d2e95 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,5 +13,7 @@ module.exports = {
     indent: ['error', 2],
     'vue/html-indent': ['error', 2],
     'comma-dangle': ['error', 'always-multiline'],
+    'object-curly-spacing': ['error', 'always'],
+    'vue/require-default-prop': 0,
   },
 }
diff --git a/resources/js/Composables/vacationTypeInfo.js b/resources/js/Composables/vacationTypeInfo.js
index f2cdc6e..6594ab7 100644
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@@ -65,7 +65,7 @@ const types = [
   },
 ]
 
-export function useVacationTypeInfo() {
+export default function useVacationTypeInfo() {
   const getTypes = () => types
   const findType = value => types.find(type => type.value === value)
 
diff --git a/resources/js/Composables/yearPeriodInfo.js b/resources/js/Composables/yearPeriodInfo.js
index 8425e0a..ec799da 100644
--- a/resources/js/Composables/yearPeriodInfo.js
+++ b/resources/js/Composables/yearPeriodInfo.js
@@ -1,5 +1,5 @@
-import {computed} from 'vue'
-import {usePage} from '@inertiajs/inertia-vue3'
+import { computed } from 'vue'
+import { usePage } from '@inertiajs/inertia-vue3'
 
 export default function useCurrentYearPeriodInfo() {
   const minDate = computed(() => new Date(usePage().props.value.years.current, 0, 1))
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 7e70980..812055f 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -83,9 +83,7 @@
             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
@@ -94,9 +92,7 @@
                   >
                 </span>
                 <div class="ml-3">
-                  <div
-                    class="text-sm font-medium text-gray-900 whitespace-nowrap"
-                  >
+                  <div class="text-sm font-medium text-gray-900 whitespace-nowrap">
                     {{ user.name }}
                   </div>
                 </div>
@@ -122,66 +118,28 @@
   </div>
 </template>
 
-<script>
-import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid'
-import {computed} from 'vue'
-import {useMonthInfo} from '@/Composables/monthInfo'
+<script setup>
+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: {
-    VacationTypeCalendarIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-  },
-  props: {
-    users: {
-      type: Object,
-      default: () => null,
-    },
-    auth: {
-      type: Object,
-      default: () => null,
-    },
-    calendar: {
-      type: Object,
-      default: () => null,
-    },
-    current: {
-      type: String,
-      default: () => 'january',
-    },
-    selected: {
-      type: String,
-      default: () => 'january',
-    },
-    years: {
-      type: Object,
-      default: () => null,
-    },
-    can: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const {getMonths, findMonth} = useMonthInfo()
-    const months = getMonths()
+const props = defineProps({
+  users: Object,
+  auth: Object,
+  calendar: Object,
+  current: String,
+  selected: String,
+  years: Object,
+  can: Object,
+})
 
-    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])
+const { getMonths, findMonth } = useMonthInfo()
 
+const months = getMonths()
 
-    return {
-      months,
-      currentMonth,
-      selectedMonth,
-      previousMonth,
-      nextMonth,
-    }
-  },
-}
+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])
 </script>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 2f2793f..ba6e5d1 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -2,346 +2,38 @@
   <InertiaHead title="Strona główna" />
   <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
     <div class="grid grid-cols-1 gap-4 lg:col-span-2">
-      <section>
-        <div class=" bg-white overflow-hidden shadow">
-          <div class="bg-white p-6">
-            <div class="sm:flex sm:items-center sm:justify-between">
-              <div class="sm:flex sm:space-x-5">
-                <div class="flex-shrink-0">
-                  <img
-                    class="mx-auto h-20 w-20 rounded-full"
-                    :src="user.avatar"
-                  >
-                </div>
-                <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
-                  <p class="text-sm font-medium text-gray-600">
-                    Cześć,
-                  </p>
-                  <p class="text-xl font-bold text-gray-900 sm:text-2xl">
-                    {{ user.name }}
-                  </p>
-                  <p class="text-sm font-medium text-gray-600">
-                    {{ user.role }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section>
-        <div class="grid grid-cols-2 gap-4">
-          <div class="bg-white shadow-md p-4">
-            <VacationChart :stats="stats" />
-          </div>
-          <div class="h-full">
-            <div class="grid grid-cols-2 gap-4 h-full">
-              <div class="px-4 py-5 bg-white shadow-md sm:p-6">
-                <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
-                  {{ stats.remaining }}
-                </dd>
-                <dt class="text-md font-medium text-gray-700 truncate">
-                  Pozostało
-                </dt>
-                <dt class="text-sm font-medium text-gray-500 mt-2">
-                  Dni do wykorzystania teraz.
-                </dt>
-              </div>
-              <div class="px-4 py-5 bg-white shadow-md sm:p-6">
-                <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
-                  {{ stats.used }}
-                </dd>
-                <dt class="text-md font-medium text-gray-700 truncate">
-                  Dni wykorzystane
-                </dt>
-                <dt class="text-sm font-medium text-gray-500 mt-2">
-                  Dni, które zostały już wykorzystane na urlop wypoczynkowy.
-                </dt>
-              </div>
-              <div class="px-4 py-5 bg-white shadow-md sm:p-6">
-                <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
-                  {{ stats.pending }}
-                </dt>
-                <dd class="text-md font-medium text-gray-500 truncate">
-                  Rozpatrywane
-                </dd>
-                <dt class="text-sm font-medium text-gray-500 mt-2">
-                  Dni czekające na akceptację przełożonych.
-                </dt>
-              </div>
-              <div class="px-4 py-5 bg-white shadow-md sm:p-6">
-                <dt class="mt-1 text-4xl font-semibold text-gray-900">
-                  {{ stats.limit }}
-                </dt>
-                <dd class="text-md font-medium text-gray-500 truncate">
-                  Limit urlopu
-                </dd>
-                <dt class="text-sm font-medium text-gray-500 mt-2">
-                  Twój roczny limit urlopu wypoczynkowego.
-                </dt>
-              </div>
-              <div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
-                <dt class="mt-1 text-4xl font-semibold text-gray-900">
-                  {{ stats.other }}
-                </dt>
-                <dd class="text-md font-medium text-gray-500 truncate">
-                  Inne urlopy
-                </dd>
-                <dt class="text-sm font-medium text-gray-500 mt-2">
-                  Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-                </dt>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <Welcome :user="auth.user" />
+      <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
-      <section v-if="can.listAllVacationRequests">
-        <div class="bg-white shadow-md">
-          <div class="p-4 sm:px-6">
-            <h2 class="text-lg leading-6 font-medium text-gray-900">
-              Wnioski oczekujące na akcje
-            </h2>
-          </div>
-          <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
-            <div class="flow-root mt-6">
-              <ul class="-my-5 divide-y divide-gray-200">
-                <li
-                  v-for="request in vacationRequests.data"
-                  :key="request.id"
-                  class="py-5"
-                >
-                  <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
-                    <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
-                      <InertiaLink
-                        :href="`/vacation-requests/${request.id}`"
-                        class="hover:underline focus:outline-none"
-                      >
-                        <span class="absolute inset-0" />
-                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
-                        [{{ request.name }}]
-                      </InertiaLink>
-                    </h3>
-                    <p class="mt-1 text-sm text-gray-600">
-                      {{ request.from }} - {{ request.to }}
-                    </p>
-                    <div class="mt-3 text-sm text-gray-600">
-                      <div class="flex">
-                        <img
-                          class="h-10 w-10 rounded-full"
-                          :src="request.user.avatar"
-                        >
-                        <div class="ml-3">
-                          <p class="text-sm font-medium text-gray-900">
-                            {{ request.user.name }}
-                          </p>
-                          <p class="text-sm text-gray-500">
-                            {{ request.user.email }}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-                <li v-if="! vacationRequests.data.length">
-                  <p class="py-2">
-                    Brak danych
-                  </p>
-                </li>
-              </ul>
-            </div>
-            <div class="mt-6">
-              <InertiaLink
-                href="/vacation-requests"
-                :data="{status: 'waiting_for_action'}"
-                class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
-              >
-                Zobacz wszystkie
-              </InertiaLink>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section v-else>
-        <div class="bg-white shadow-md">
-          <div class="p-4 sm:px-6">
-            <h2 class="text-lg leading-6 font-medium text-gray-900">
-              Twoje wnioski
-            </h2>
-          </div>
-          <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
-            <div class="flow-root mt-6">
-              <ul class="-my-5 divide-y divide-gray-200">
-                <li
-                  v-for="request in vacationRequests.data"
-                  :key="request.id"
-                  class="py-5"
-                >
-                  <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
-                    <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
-                      <InertiaLink
-                        :href="`/vacation-requests/${request.id}`"
-                        class="hover:underline focus:outline-none"
-                      >
-                        <span class="absolute inset-0" />
-                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
-                        [{{ request.name }}]
-                      </InertiaLink>
-                    </h3>
-                    <p class="mt-1 text-sm text-gray-600">
-                      {{ request.from }} - {{ request.to }}
-                    </p>
-                    <p class="mt-2 text-sm text-gray-600">
-                      <Status :status="request.state" />
-                    </p>
-                  </div>
-                </li>
-                <li v-if="! vacationRequests.data.length">
-                  <p class="py-2">
-                    Brak danych
-                  </p>
-                </li>
-              </ul>
-            </div>
-            <div class="mt-6">
-              <InertiaLink
-                href="/vacation-requests/me"
-                class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
-              >
-                Zobacz wszystkie
-              </InertiaLink>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section>
-        <div class="bg-white shadow-md">
-          <div class="p-4 sm:px-6">
-            <h2 class="text-lg leading-6 font-medium text-gray-900">
-              Dzisiejsze nieobecności
-            </h2>
-          </div>
-          <div class="border-t border-gray-200 px-4 sm:px-6">
-            <ul class="divide-y divide-gray-200">
-              <li
-                v-for="absence in absences.data"
-                :key="absence.user.id"
-                class="py-4 flex"
-              >
-                <img
-                  class="h-10 w-10 rounded-full"
-                  :src="absence.user.avatar"
-                >
-                <div class="ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    {{ absence.user.name }}
-                  </p>
-                  <p class="text-sm text-gray-500">
-                    {{ absence.user.email }}
-                  </p>
-                </div>
-              </li>
-              <li v-if="! absences.data.length">
-                <p class="py-2">
-                  Brak danych
-                </p>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </section>
-      <section>
-        <div class="bg-white shadow-md">
-          <div>
-            <div class="p-4 sm:px-6">
-              <h2 class="text-lg leading-6 font-medium text-gray-900">
-                Najbliższe dni wolne
-              </h2>
-            </div>
-            <div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
-              <ul class="divide-y divide-gray-200">
-                <li
-                  v-for="holiday in holidays.data"
-                  :key="holiday.id.id"
-                  class="py-4 flex"
-                >
-                  <div>
-                    <p class="text-sm font-medium text-gray-900">
-                      {{ holiday.name }}
-                    </p>
-                    <p class="text-sm text-gray-500">
-                      {{ holiday.displayDate }}
-                    </p>
-                  </div>
-                </li>
-                <li v-if="! holidays.data.length">
-                  <p class="py-2">
-                    Brak danych
-                  </p>
-                </li>
-              </ul>
-              <div>
-                <InertiaLink
-                  href="/holidays"
-                  class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
-                >
-                  Zobacz wszystkie
-                </InertiaLink>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <PendingVacationRequests
+        v-if="can.listAllVacationRequests"
+        :requests="vacationRequests.data"
+      />
+      <UserVacationRequests
+        v-else
+        :requests="vacationRequests.data"
+      />
+      <AbsenceList :absences="absences.data" />
+      <UpcomingHolidays :holidays="holidays.data" />
     </div>
   </div>
 </template>
 
-<script>
-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'
+<script setup>
+import Welcome from '@/Shared/Widgets/Welcome'
+import VacationStats from '@/Shared/Widgets/VacationStats'
+import AbsenceList from '@/Shared/Widgets/AbsenceList'
+import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
+import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
+import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
 
-export default {
-  name: 'DashboardPage',
-  components: {Status, VacationChart},
-  props: {
-    absences: {
-      type: Object,
-      default: null,
-    },
-    vacationRequests: {
-      type: Object,
-      default: null,
-    },
-    holidays: {
-      type: Object,
-      default: null,
-    },
-    can: {
-      type: Object,
-      default: null,
-    },
-    stats: {
-      type: Object,
-      default: () => ({
-        used: 0,
-        pending: 0,
-        remaining: 0,
-      }),
-    },
-  },
-  setup() {
-    const user = computed(() => usePage().props.value.auth.user)
-
-    const { findType } = useVacationTypeInfo()
-
-    return {
-      user,
-      findType,
-    }
-  },
-}
+defineProps({
+  auth: Object,
+  absences: Object,
+  vacationRequests: Object,
+  holidays: Object,
+  can: Object,
+  stats: Object,
+})
 </script>
diff --git a/resources/js/Pages/Holidays/Create.vue b/resources/js/Pages/Holidays/Create.vue
index 48a7850..0705e9a 100644
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -81,34 +81,19 @@
   </div>
 </template>
 
-<script>
-import {useForm} from '@inertiajs/inertia-vue3'
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 
-export default {
-  name: 'HolidayCreate',
-  components: {
-    FlatPickr,
-  },
-  setup() {
-    const form = useForm({
-      name: null,
-      date: null,
-    })
+const form = useForm({
+  name: null,
+  date: null,
+})
 
-    const {minDate, maxDate} = useCurrentYearPeriodInfo()
+const { minDate, maxDate } = useCurrentYearPeriodInfo()
 
-    return {
-      form,
-      minDate,
-      maxDate,
-    }
-  },
-  methods: {
-    createHoliday() {
-      this.form.post('/holidays')
-    },
-  },
+function createHoliday() {
+  form.post('/holidays')
 }
 </script>
diff --git a/resources/js/Pages/Holidays/Edit.vue b/resources/js/Pages/Holidays/Edit.vue
index ac6a590..77d2940 100644
--- a/resources/js/Pages/Holidays/Edit.vue
+++ b/resources/js/Pages/Holidays/Edit.vue
@@ -80,34 +80,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 
-export default {
-  name: 'HolidayEdit',
-  components: {
-    FlatPickr,
-  },
-  props: {
-    holiday: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      name: props.holiday.name,
-      date: props.holiday.date,
-    })
+const props = defineProps({
+  holiday: Object,
+})
 
-    return { form }
-  },
-  methods: {
-    editHoliday() {
-      this.form
-        .put(`/holidays/${this.holiday.id}`)
-    },
-  },
+const form = useForm({
+  name: props.holiday.name,
+  date: props.holiday.date,
+})
+
+function editHoliday() {
+  form.put(`/holidays/${props.holiday.id}`)
 }
 </script>
diff --git a/resources/js/Pages/Holidays/Index.vue b/resources/js/Pages/Holidays/Index.vue
index be5d0bb..f41a416 100644
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -94,10 +94,7 @@
                             :href="`/holidays/${holiday.id}/edit`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                           >
-                            <PencilIcon
-                              class="mr-2 h-5 w-5 text-blue-500"
-                              aria-hidden="true"
-                            /> Edytuj
+                            <PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
                           </InertiaLink>
                         </MenuItem>
                         <MenuItem
@@ -111,10 +108,7 @@
                             :href="`/holidays/${holiday.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 h-5 w-5 text-red-500"
-                              aria-hidden="true"
-                            /> Usuń
+                            <TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -123,9 +117,7 @@
                 </Menu>
               </td>
             </tr>
-            <tr
-              v-if="!holidays.data.length"
-            >
+            <tr v-if="!holidays.data.length">
               <td
                 colspan="100%"
                 class="text-center py-4 text-xl leading-5 text-gray-700"
@@ -140,33 +132,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 
-export default {
-  name: 'HolidayIndex',
-  components: {
-    DotsVerticalIcon,
-    PencilIcon,
-    TrashIcon,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-  },
-  props: {
-    holidays: {
-      type: Object,
-      default: () => null,
-    },
-    can: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup() {
-    return {}
-  },
-}
+defineProps({
+  holidays: Object,
+  can: Object,
+})
 </script>
diff --git a/resources/js/Pages/Login.vue b/resources/js/Pages/Login.vue
index 073a587..f209e9d 100644
--- a/resources/js/Pages/Login.vue
+++ b/resources/js/Pages/Login.vue
@@ -26,10 +26,7 @@
               @click="delete errors.oauth"
             >
               <span class="sr-only">Close</span>
-              <XIcon
-                class="h-5 w-5"
-                aria-hidden="true"
-              />
+              <XIcon class="h-5 w-5" />
             </button>
           </div>
         </div>
@@ -43,7 +40,6 @@
     <img
       class="mx-auto h-50 w-auto"
       src="img/logo.png"
-      alt="Blumilk"
     >
     <a
       href="/login/google/start"
@@ -64,23 +60,16 @@
   </div>
 </template>
 
+<script setup>
+import { XIcon, ExclamationIcon } from '@heroicons/vue/solid'
+
+defineProps({
+  errors: Object,
+})
+</script>
+
 <script>
 import GuestLayout from '@/Shared/Layout/GuestLayout'
-import {XIcon} from '@heroicons/vue/solid'
-import {ExclamationIcon} from '@heroicons/vue/solid'
 
-export default {
-  name: 'LoginPage',
-  components: {
-    XIcon,
-    ExclamationIcon,
-  },
-  layout: GuestLayout,
-  props: {
-    errors: {
-      type: Object,
-      default: () => ({oauth: null}),
-    },
-  },
-}
+export default { name: 'LoginPage', layout: GuestLayout }
 </script>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 805784d..524a341 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -258,57 +258,34 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
 
-export default {
-  name: 'UserCreate',
-  components: {
-    FlatPickr,
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    CheckIcon,
-    SelectorIcon,
-  },
-  props: {
-    employmentForms: {
-      type: Object,
-      default: () => null,
-    },
-    roles: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      firstName: null,
-      lastName: null,
-      email: null,
-      employmentForm: props.employmentForms[0],
-      role: props.roles[0],
-      position: null,
-      employmentDate: null,
-    })
+const props = defineProps({
+  employmentForms: Object,
+  roles: Object,
+})
 
-    return { form }
-  },
-  methods: {
-    createUser() {
-      this.form
-        .transform(data => ({
-          ...data,
-          employmentForm: data.employmentForm.value,
-          role: data.role.value,
-        }))
-        .post('/users')
-    },
-  },
+const form = useForm({
+  firstName: null,
+  lastName: null,
+  email: null,
+  employmentForm: props.employmentForms[0],
+  role: props.roles[0],
+  position: null,
+  employmentDate: null,
+})
+
+function createUser() {
+  form
+    .transform(data => ({
+      ...data,
+      employmentForm: data.employmentForm.value,
+      role: data.role.value,
+    }))
+    .post('/users')
 }
 </script>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index d11c07a..4aca6ac 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -128,7 +128,9 @@
             leave-from-class="opacity-100"
             leave-to-class="opacity-0"
           >
-            <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            <ListboxOptions
+              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+            >
               <ListboxOption
                 v-for="role in roles"
                 :key="role.value"
@@ -136,7 +138,9 @@
                 as="template"
                 :value="role"
               >
-                <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                <li
+                  :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                >
                   <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
                     {{ role.label }}
                   </span>
@@ -182,7 +186,9 @@
             leave-from-class="opacity-100"
             leave-to-class="opacity-0"
           >
-            <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            <ListboxOptions
+              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+            >
               <ListboxOption
                 v-for="employmentForm in employmentForms"
                 :key="employmentForm.value"
@@ -190,7 +196,9 @@
                 as="template"
                 :value="employmentForm"
               >
-                <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                <li
+                  :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                >
                   <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
                     {{ employmentForm.label }}
                   </span>
@@ -257,61 +265,35 @@
   </div>
 </template>
 
-<script>
-import {useForm} from '@inertiajs/inertia-vue3'
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
-import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
-import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
 
-export default {
-  name: 'UserEdit',
-  components: {
-    FlatPickr,
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    CheckIcon,
-    SelectorIcon,
-  },
-  props: {
-    employmentForms: {
-      type: Object,
-      default: () => null,
-    },
-    roles: {
-      type: Object,
-      default: () => null,
-    },
-    user: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      firstName: props.user.firstName,
-      lastName: props.user.lastName,
-      email: props.user.email,
-      role: props.roles.find(role => role.value === props.user.role),
-      position: props.user.position,
-      employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
-      employmentDate: props.user.employmentDate,
-    })
+const props = defineProps({
+  employmentForms: Object,
+  roles: Object,
+  user: Object,
+})
 
-    return { form }
-  },
-  methods: {
-    editUser() {
-      this.form
-        .transform(data => ({
-          ...data,
-          employmentForm: data.employmentForm.value,
-          role: data.role.value,
-        }))
-        .put(`/users/${this.user.id}`)
-    },
-  },
+const form = useForm({
+  firstName: props.user.firstName,
+  lastName: props.user.lastName,
+  email: props.user.email,
+  role: props.roles.find(role => role.value === props.user.role),
+  position: props.user.position,
+  employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
+  employmentDate: props.user.employmentDate,
+})
+
+function editUser() {
+  form
+    .transform(data => ({
+      ...data,
+      employmentForm: data.employmentForm.value,
+      role: data.role.value,
+    }))
+    .put(`/users/${props.user.id}`)
 }
 </script>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index 7bb4bce..0ad84af 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -81,13 +81,10 @@
             >
               <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                 <div class="flex">
-                  <span
-                    class="inline-flex items-center justify-center h-10 w-10 rounded-full"
-                  >
+                  <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"
-                      alt=""
                     >
                   </span>
                   <div class="ml-3">
@@ -118,10 +115,7 @@
                   class="relative inline-block text-left"
                 >
                   <MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
-                    <DotsVerticalIcon
-                      class="h-5 w-5"
-                      aria-hidden="true"
-                    />
+                    <DotsVerticalIcon class="h-5 w-5" />
                   </MenuButton>
 
                   <transition
@@ -145,10 +139,7 @@
                             :href="`/users/${user.id}/edit`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                           >
-                            <PencilIcon
-                              class="mr-2 h-5 w-5 text-blue-500"
-                              aria-hidden="true"
-                            /> Edytuj
+                            <PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
                           </InertiaLink>
                         </MenuItem>
                         <MenuItem
@@ -162,10 +153,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 h-5 w-5 text-red-500"
-                              aria-hidden="true"
-                            /> Usuń
+                            <TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -184,10 +172,7 @@
                             :href="`/users/${user.id}/restore`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                           >
-                            <RefreshIcon
-                              class="mr-2 h-5 w-5 text-green-500"
-                              aria-hidden="true"
-                            /> Przywróć
+                            <RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -208,102 +193,32 @@
             </tr>
           </tbody>
         </table>
-        <div
-          v-if="users.data.length && users.meta.last_page !== 1"
-          class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
-        >
-          <div class="flex-1 flex justify-between sm:hidden">
-            <InertiaLink
-              :is="users.links.prev ? 'InertiaLink': 'span'"
-              :href="users.links.prev"
-              class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-            >
-              Poprzednia
-            </InertiaLink>
-            <Component
-              :is="users.links.next ? 'InertiaLink': 'span'"
-              :href="users.links.next"
-              class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-            >
-              Następna
-            </Component>
-          </div>
-          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-            <div class="text-sm text-gray-700">
-              Wyświetlanie
-              <span class="font-medium">{{ users.meta.from }}</span>
-              od
-              <span class="font-medium">{{ users.meta.to }}</span>
-              do
-              <span class="font-medium">{{ users.meta.total }}</span>
-              wyników
-            </div>
-            <nav class="relative z-0 inline-flex space-x-1">
-              <template
-                v-for="(link, index) in users.meta.links"
-                :key="index"
-              >
-                <Component
-                  :is="link.url ? 'InertiaLink' : 'span'"
-                  :href="link.url"
-                  :preserve-scroll="true"
-                  class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
-                  :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
-                  v-text="link.label"
-                />
-              </template>
-            </nav>
-          </div>
-        </div>
+        <Pagination :pagination="users.meta" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 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 { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import Pagination from '@/Shared/Pagination'
 
-export default {
-  name: 'UserIndex',
-  components: {
-    SearchIcon,
-    DotsVerticalIcon,
-    PencilIcon,
-    TrashIcon,
-    RefreshIcon,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-  },
-  props: {
-    users: {
-      type: Object,
-      default: () => null,
-    },
-    filters: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    let search = ref(props.filters.search)
+const props = defineProps({
+  users: Object,
+  filters: Object,
+})
 
-    watch(search, debounce(value => {
-      Inertia.get('/users', value ? { search: value} : {}, {
-        preserveState: true,
-        replace: true,
-      })
-    }, 300))
+const search = ref(props.filters.search)
 
-    return {
-      search,
-    }
-  },
-}
+watch(search, debounce(value => {
+  Inertia.get('/users', value ? { search: value } : {}, {
+    preserveState: true,
+    replace: true,
+  })
+}, 300))
 </script>
diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index f71d327..507c306 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -7,7 +7,7 @@
           Dostępne dni urlopu dla użytkowników
         </h2>
         <p class="mt-1 text-sm text-gray-500">
-          Zarządzaj dostepnymi dniami urlopów dla użytkowników.
+          Zarządzaj dostępnymi dniami urlopów dla użytkowników.
         </p>
       </div>
     </div>
@@ -56,13 +56,10 @@
             >
               <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                 <div class="flex">
-                  <span
-                    class="inline-flex items-center justify-center h-10 w-10 rounded-full"
-                  >
+                  <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
                     <img
                       class="h-10 w-10 rounded-full"
                       :src="item.user.avatar"
-                      alt=""
                     >
                   </span>
                   <div class="ml-3">
@@ -112,9 +109,7 @@
                 </div>
               </td>
             </tr>
-            <tr
-              v-if="!form.items.length"
-            >
+            <tr v-if="!form.items.length">
               <td
                 colspan="100%"
                 class="text-center py-4 text-xl leading-5 text-gray-700"
@@ -137,48 +132,30 @@
   </div>
 </template>
 
-<script>
-import {Switch} from '@headlessui/vue'
-import {useForm} from '@inertiajs/inertia-vue3'
+<script setup>
+import { Switch } from '@headlessui/vue'
+import { useForm } from '@inertiajs/inertia-vue3'
 
-export default {
-  name: 'VacationLimits',
-  components: {
-    Switch,
-  },
-  props: {
-    limits: {
-      type: Object,
-      default: () => null,
-    },
-    years: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      items: props.limits,
+const props = defineProps({
+  limits: Object,
+  years: Object,
+})
+
+const form = useForm({
+  items: props.limits,
+})
+
+function submitVacationDays() {
+  form
+    .transform(data => ({
+      items: data.items.map(item => ({
+        id: item.id,
+        days: item.hasVacation ? item.days : null,
+      })),
+    }))
+    .put('/vacation-limits', {
+      preserveState: (page) => Object.keys(page.props.errors).length,
+      preserveScroll: true,
     })
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    submitVacationDays() {
-      this.form
-        .transform(data => ({
-          items: data.items.map(item => ({
-            id: item.id,
-            days: item.hasVacation ? item.days : null,
-          })),
-        }))
-        .put('/vacation-limits', {
-          preserveState: (page) => Object.keys(page.props.errors).length,
-          preserveScroll: true,
-        })
-    },
-  },
 }
 </script>
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index 2678078..374cf47 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -322,128 +322,94 @@
   </div>
 </template>
 
-<script>
-import {useForm} from '@inertiajs/inertia-vue3'
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
-import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch} from '@headlessui/vue'
-import {CheckIcon, SelectorIcon, XCircleIcon} from '@heroicons/vue/solid'
-import {reactive, ref, watch} from 'vue'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
+import { CheckIcon, SelectorIcon, XCircleIcon } from '@heroicons/vue/solid'
+import { reactive, ref, watch } from 'vue'
 import axios from 'axios'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import VacationChart from '@/Shared/VacationChart'
 
-export default {
-  name: 'VacationRequestCreate',
-  components: {
-    VacationChart,
-    Switch,
-    FlatPickr,
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    CheckIcon,
-    SelectorIcon,
-    XCircleIcon,
-  },
-  props: {
-    auth: {
-      type: Object,
-      default: () => null,
-    },
-    users: {
-      type: Object,
-      default: () => null,
-    },
-    vacationTypes: {
-      type: Object,
-      default: () => null,
-    },
-    holidays: {
-      type: Object,
-      default: () => null,
-    },
-    can: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      user: props.can.createOnBehalfOfEmployee
-        ? props.users.data.find(user => user.id === props.auth.user.id) ?? props.users.data[0]
-        : props.auth.user,
-      from: null,
-      to: null,
-      type: props.vacationTypes[0],
-      comment: null,
-      flowSkipped: false,
-    })
 
-    const estimatedDays = ref([])
+const props = defineProps({
+  auth: Object,
+  users: Object,
+  vacationTypes: Object,
+  holidays: Object,
+  can: Object,
+})
 
-    const stats = ref({
-      used: 0,
-      pending: 0,
-      remaining: 0,
-    })
+const form = useForm({
+  user: props.can.createOnBehalfOfEmployee
+    ? props.users.data.find(user => user.id === props.auth.user.id) ?? props.users.data[0]
+    : props.auth.user,
+  from: null,
+  to: null,
+  type: props.vacationTypes[0],
+  comment: null,
+  flowSkipped: false,
+})
 
-    const {minDate, maxDate} = useCurrentYearPeriodInfo()
+const estimatedDays = ref([])
 
-    const disableDates = [
-      date => (date.getDay() === 0 || date.getDay() === 6),
-    ]
+const stats = ref({
+  used: 0,
+  pending: 0,
+  remaining: 0,
+})
 
-    const fromInputConfig = reactive({
-      minDate: minDate,
-      maxDate: maxDate,
-      disable: disableDates,
-    })
+const { minDate, maxDate } = useCurrentYearPeriodInfo()
 
-    const toInputConfig = reactive({
-      minDate: minDate,
-      maxDate: maxDate,
-      disable: disableDates,
-    })
+const disableDates = [
+  date => (date.getDay() === 0 || date.getDay() === 6),
+]
 
-    watch(() => form.user, user => {
-      axios.post('/api/calculate-vacations-stats', {user: user.id})
-        .then(res => stats.value = res.data)
-    }, {immediate: true})
+const fromInputConfig = reactive({
+  minDate,
+  maxDate,
+  disable: disableDates,
+})
 
-    return {
-      form,
-      estimatedDays,
-      stats,
-      fromInputConfig,
-      toInputConfig,
-    }
-  },
-  methods: {
-    createForm() {
-      this.form
-        .transform(data => ({
-          ...data,
-          type: data.type.value,
-          user: data.user.id,
-        }))
-        .post('/vacation-requests')
-    },
-    onFromChange(selectedDates, dateStr) {
-      this.form.to = dateStr
+const toInputConfig = reactive({
+  minDate,
+  maxDate,
+  disable: disableDates,
+})
 
-      this.refreshEstimatedDays(this.form.from, this.form.to)
-    },
-    onToChange() {
-      this.refreshEstimatedDays(this.form.from, this.form.to)
-    },
-    refreshEstimatedDays(from, to) {
-      if (from && to) {
-        axios.post('/api/calculate-vacation-days', {from, to})
-          .then(res => this.estimatedDays = res.data)
-      }
-    },
-  },
+watch(() => form.user, async user => {
+  const res = await axios.post('/api/calculate-vacations-stats', { user: user.id })
+
+  stats.value = res.data
+}, { immediate: true })
+
+function createForm() {
+  form
+    .transform(data => ({
+      ...data,
+      type: data.type.value,
+      user: data.user.id,
+    }))
+    .post('/vacation-requests')
 }
+
+function onFromChange(selectedDates, dateStr) {
+  form.to = dateStr
+
+  refreshEstimatedDays(form.from, form.to)
+}
+
+function onToChange() {
+  refreshEstimatedDays(form.from, form.to)
+}
+
+async function refreshEstimatedDays(from, to) {
+  if (from && to) {
+    const res = await axios.post('/api/calculate-vacation-days', { from, to })
+
+    estimatedDays.value = res.data
+  }
+}
+
 </script>
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index cd489c6..d34955b 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -118,9 +118,7 @@
               />
             </td>
           </tr>
-          <tr
-            v-if="! requests.data.length"
-          >
+          <tr v-if="! requests.data.length">
             <td
               colspan="100%"
               class="text-center py-4 text-xl leading-5 text-gray-700"
@@ -130,131 +128,39 @@
           </tr>
         </tbody>
       </table>
-      <div
-        v-if="requests.data.length && requests.meta.last_page !== 1"
-        class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
-      >
-        <div class="flex-1 flex justify-between sm:hidden">
-          <InertiaLink
-            :is="requests.links.prev ? 'InertiaLink': 'span'"
-            :href="requests.links.prev"
-            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-          >
-            Poprzednia
-          </InertiaLink>
-          <Component
-            :is="requests.links.next ? 'InertiaLink': 'span'"
-            :href="requests.links.next"
-            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-          >
-            Następna
-          </Component>
-        </div>
-        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-          <div class="text-sm text-gray-700">
-            Wyświetlanie
-            <span class="font-medium">{{ requests.meta.from }}</span>
-            od
-            <span class="font-medium">{{ requests.meta.to }}</span>
-            do
-            <span class="font-medium">{{ requests.meta.total }}</span>
-            wyników
-          </div>
-          <nav class="relative z-0 inline-flex space-x-1">
-            <template
-              v-for="(link, index) in requests.meta.links"
-              :key="index"
-            >
-              <Component
-                :is="link.url ? 'InertiaLink' : 'span'"
-                :href="link.url"
-                :preserve-scroll="true"
-                class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
-                :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
-                v-text="link.label"
-              />
-            </template>
-          </nav>
-        </div>
-      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
   </div>
 </template>
 
-<script>
-import {
-  ChevronRightIcon,
-  ClockIcon,
-  DotsVerticalIcon,
-  PencilIcon,
-  ThumbDownIcon,
-  ThumbUpIcon,
-  TrashIcon,
-  XIcon,
-  CheckIcon,
-  DocumentTextIcon,
-} from '@heroicons/vue/solid'
+<script setup>
+import { ChevronRightIcon } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
 import VacationType from '@/Shared/VacationType'
+import Pagination from '@/Shared/Pagination'
 
-export default {
-  name: 'VacationRequestIndex',
-  components: {
-    DotsVerticalIcon,
-    PencilIcon,
-    TrashIcon,
-    ChevronRightIcon,
-    ThumbUpIcon,
-    ClockIcon,
-    XIcon,
-    CheckIcon,
-    DocumentTextIcon,
-    ThumbDownIcon,
-    Status,
-    VacationType,
-  },
-  props: {
-    requests: {
-      type: Object,
-      default: () => null,
-    },
-    stats: {
-      type: Object,
-      default: () => ({
-        all: 0,
-        pending: 0,
-        success: 0,
-        failed: 0,
-      }),
-    },
-    filters: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup() {
-    const statuses = [
-      {
-        name: 'Wszystkie',
-        value: 'all',
-      },
-      {
-        name: 'W trakcie',
-        value: 'pending',
-      },
-      {
-        name: 'Zatwierdzone',
-        value: 'success',
-      },
-      {
-        name: 'Odrzucone/anulowane',
-        value: 'failed',
-      },
-    ]
+defineProps({
+  requests: Object,
+  stats: Object,
+  filters: Object,
+})
 
-    return {
-      statuses,
-    }
+const statuses = [
+  {
+    name: 'Wszystkie',
+    value: 'all',
   },
-}
+  {
+    name: 'W trakcie',
+    value: 'pending',
+  },
+  {
+    name: 'Zatwierdzone',
+    value: 'success',
+  },
+  {
+    name: 'Odrzucone/anulowane',
+    value: 'failed',
+  },
+]
 </script>
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 69adae8..84ad725 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -93,7 +93,9 @@
                             :src="user.avatar"
                             class="flex-shrink-0 h-6 w-6 rounded-full"
                           >
-                          <span :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                          <span
+                            :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                          >
                             {{ user.name }}
                           </span>
                         </div>
@@ -123,9 +125,7 @@
                 <ListboxButton
                   class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
                 >
-                  <span
-                    class="flex items-center"
-                  >
+                  <span class="flex items-center">
                     {{ form.status.name }}
                   </span>
                   <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -274,9 +274,7 @@
               />
             </td>
           </tr>
-          <tr
-            v-if="! requests.data.length"
-          >
+          <tr v-if="! requests.data.length">
             <td
               colspan="100%"
               class="text-center py-4 text-xl leading-5 text-gray-700"
@@ -286,153 +284,59 @@
           </tr>
         </tbody>
       </table>
-      <div
-        v-if="requests.data.length && requests.meta.last_page !== 1"
-        class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
-      >
-        <div class="flex-1 flex justify-between sm:hidden">
-          <InertiaLink
-            :is="requests.links.prev ? 'InertiaLink': 'span'"
-            :href="requests.links.prev"
-            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-          >
-            Poprzednia
-          </InertiaLink>
-          <Component
-            :is="requests.links.next ? 'InertiaLink': 'span'"
-            :href="requests.links.next"
-            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-          >
-            Następna
-          </Component>
-        </div>
-        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-          <div class="text-sm text-gray-700">
-            Wyświetlanie
-            <span class="font-medium">{{ requests.meta.from }}</span>
-            od
-            <span class="font-medium">{{ requests.meta.to }}</span>
-            do
-            <span class="font-medium">{{ requests.meta.total }}</span>
-            wyników
-          </div>
-          <nav class="relative z-0 inline-flex space-x-1">
-            <template
-              v-for="(link, index) in requests.meta.links"
-              :key="index"
-            >
-              <Component
-                :is="link.url ? 'InertiaLink' : 'span'"
-                :href="link.url"
-                :preserve-scroll="true"
-                class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
-                :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
-                v-text="link.label"
-              />
-            </template>
-          </nav>
-        </div>
-      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
   </div>
 </template>
 
-<script>
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  ClockIcon,
-  DocumentTextIcon,
-  DotsVerticalIcon,
-  PencilIcon,
-  SelectorIcon,
-  ThumbDownIcon,
-  ThumbUpIcon,
-  TrashIcon,
-  XCircleIcon,
-  XIcon,
-} from '@heroicons/vue/solid'
+<script setup>
+import { CheckIcon, ChevronRightIcon, SelectorIcon } 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'
-import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
+import { watch, reactive } from 'vue'
+import { debounce } from 'lodash'
+import { Inertia } from '@inertiajs/inertia'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import Pagination from '@/Shared/Pagination'
 
-export default {
-  name: 'VacationRequestIndex',
-  components: {
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    DotsVerticalIcon,
-    PencilIcon,
-    TrashIcon,
-    ChevronRightIcon,
-    ThumbUpIcon,
-    ClockIcon,
-    XIcon,
-    CheckIcon,
-    DocumentTextIcon,
-    ThumbDownIcon,
-    Status,
-    VacationType,
-    SelectorIcon,
-    XCircleIcon,
+const props = defineProps({
+  requests: Object,
+  users: Object,
+  filters: Object,
+})
+
+const statuses = [
+  {
+    name: 'Wszystkie',
+    value: 'all',
   },
-  props: {
-    requests: {
-      type: Object,
-      default: () => null,
-    },
-    users: {
-      type: Object,
-      default: () => null,
-    },
-    filters: {
-      type: Object,
-      default: () => null,
-    },
+  {
+    name: 'Oczekujące na akcje',
+    value: 'waiting_for_action',
   },
-  setup(props) {
-    const statuses = [
-      {
-        name: 'Wszystkie',
-        value: 'all',
-      },
-      {
-        name: 'Oczekujące na akcje',
-        value: 'waiting_for_action',
-      },
-      {
-        name: 'W trakcie',
-        value: 'pending',
-      },
-      {
-        name: 'Zatwierdzone',
-        value: 'success',
-      },
-      {
-        name: 'Odrzucone/anulowane',
-        value: 'failed',
-      },
-    ]
-
-    const form = reactive({
-      user: props.users.data.find(user => user.id === props.filters.user) ?? null,
-      status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
-    })
-
-    watch(form, debounce(() => {
-      Inertia.get('/vacation-requests', {user: form.user?.id, status: form.status.value}, {
-        preserveState: true,
-        replace: true,
-      })
-    }, 300))
-
-    return {form, statuses}
+  {
+    name: 'W trakcie',
+    value: 'pending',
   },
-}
+  {
+    name: 'Zatwierdzone',
+    value: 'success',
+  },
+  {
+    name: 'Odrzucone/anulowane',
+    value: 'failed',
+  },
+]
+
+const form = reactive({
+  user: props.users.data.find(user => user.id === props.filters.user) ?? null,
+  status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
+})
+
+watch(form, debounce(() => {
+  Inertia.get('/vacation-requests', { user: form.user?.id, status: form.status.value }, {
+    preserveState: true,
+    replace: true,
+  })
+}, 300))
 </script>
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index 7c9dccb..3f285b8 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -245,33 +245,15 @@
   </div>
 </template>
 
-<script>
-import {PaperClipIcon} from '@heroicons/vue/outline'
+<script setup>
+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,
-  },
-  props: {
-    request: {
-      type: Object,
-      default: () => null,
-    },
-    can: {
-      type: Object,
-      default: () => null,
-    },
-    activities: {
-      type: Object,
-      default: () => null,
-    },
-  },
-}
+defineProps({
+  request: Object,
+  can: Object,
+  activities: Object,
+})
 </script>
diff --git a/resources/js/Shared/Activity.vue b/resources/js/Shared/Activity.vue
index d183714..dfd18ee 100644
--- a/resources/js/Shared/Activity.vue
+++ b/resources/js/Shared/Activity.vue
@@ -31,30 +31,16 @@
   </div>
 </template>
 
-<script>
-import {computed} from 'vue'
-import {useStatusInfo} from '@/Composables/statusInfo'
+<script setup>
+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 { findStatus } = useStatusInfo()
+const props = defineProps({
+  activity: Object,
+  last: Boolean,
+})
 
-    const statusInfo = computed(() => findStatus(props.activity.state))
+const { findStatus } = useStatusInfo()
 
-    return {
-      statusInfo,
-    }
-  },
-}
+const statusInfo = computed(() => findStatus(props.activity.state))
 </script>
diff --git a/resources/js/Shared/Layout/AppLayout.vue b/resources/js/Shared/Layout/AppLayout.vue
index df7ae29..4911e4e 100644
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/resources/js/Shared/Layout/AppLayout.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="min-h-full">
-    <MainMenu />
+    <MainMenu
+      :auth="auth"
+      :years="years"
+    />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
       <div class="px-4">
         <slot />
@@ -9,38 +12,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import MainMenu from '@/Shared/MainMenu'
-import {useToast} from 'vue-toastification'
-import {watch} from 'vue'
+import { useToast } from 'vue-toastification'
+import { defineProps, watch } from 'vue'
 
-export default {
-  name: 'AppLayout',
-  components: {
-    MainMenu,
-  },
-  props: {
-    flash: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const toast = useToast()
+const props = defineProps({
+  flash: Object,
+  auth: Object,
+  years: Object,
+})
 
-    watch(() => props.flash, flash => {
-      if (flash.success) {
-        toast.success(flash.success)
-      }
+const toast = useToast()
 
-      if (flash.error) {
-        toast.error(flash.error)
-      }
-    }, {immediate:true})
+watch(() => props.flash, flash => {
+  if (flash.success) {
+    toast.success(flash.success)
+  }
 
-    return {
-      toast,
-    }
-  },
-}
+  if (flash.error) {
+    toast.error(flash.error)
+  }
+}, { immediate:true })
 </script>
diff --git a/resources/js/Shared/Layout/GuestLayout.vue b/resources/js/Shared/Layout/GuestLayout.vue
index 50ad393..722ed6f 100644
--- a/resources/js/Shared/Layout/GuestLayout.vue
+++ b/resources/js/Shared/Layout/GuestLayout.vue
@@ -3,9 +3,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  name: 'GuestLayout',
-}
-</script>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 0320d31..aae1779 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -91,7 +91,6 @@
     </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">
@@ -202,30 +201,23 @@
           </div>
         </div>
         <div class="ml-4 flex items-center md:ml-6">
-          <!-- Profile dropdown -->
           <Menu
             as="div"
             class="ml-3 relative"
           >
-            <div>
-              <MenuButton
-                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"
+            <MenuButton
+              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"
+            >
+              <img
+                class="h-8 w-8 rounded-full"
+                :src="auth.user.avatar"
               >
-                <img
-                  class="h-8 w-8 rounded-full"
-                  :src="auth.user.avatar"
-                  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>
-                  {{ auth.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>
+              <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
+                <span class="sr-only">Open user menu for </span>
+                {{ auth.user.name }}
+              </span>
+              <ChevronDownIcon class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block" />
+            </MenuButton>
             <transition
               enter-active-class="transition ease-out duration-100"
               enter-from-class="transform opacity-0 scale-95"
@@ -237,18 +229,14 @@
               <MenuItems
                 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"
-                  :key="item.name"
-                  v-slot="{ active }"
-                >
+                <MenuItem v-slot="{ active }">
                   <InertiaLink
-                    :href="item.href"
-                    :method="item.method"
-                    :as="item.as"
+                    href="/logout"
+                    method="POST"
+                    as="button"
                     :class="[active ? 'bg-gray-100' : '', 'block w-full text-left px-4 py-2 text-sm text-gray-700']"
                   >
-                    {{ item.name }}
+                    Wyloguj się
                   </InertiaLink>
                 </MenuItem>
               </MenuItems>
@@ -260,8 +248,8 @@
   </div>
 </template>
 
-<script>
-import {ref} from 'vue'
+<script setup>
+import { computed, ref } from 'vue'
 import {
   Dialog,
   DialogOverlay,
@@ -273,7 +261,6 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import {
-  BellIcon,
   HomeIcon,
   CollectionIcon,
   MenuAlt1Icon,
@@ -283,71 +270,58 @@ import {
   StarIcon,
   CalendarIcon, DocumentTextIcon,
 } 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 { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
 
-export default {
-  components: {
-    Dialog,
-    DialogOverlay,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    TransitionChild,
-    TransitionRoot,
-    BellIcon,
-    CashIcon,
-    CheckCircleIcon,
-    ChevronDownIcon,
-    ChevronRightIcon,
-    MenuAlt1Icon,
-    OfficeBuildingIcon,
-    SearchIcon,
-    XIcon,
-    StarIcon,
-    HomeIcon,
-    CheckIcon,
-    UserGroupIcon,
-    SunIcon,
-    CalendarIcon,
-  },
-  setup() {
-    const sidebarOpen = ref(false)
+const props = defineProps({
+  auth: Object,
+  years: Object,
+})
 
-    const auth = computed(() => usePage().props.value.auth)
-    const years = computed(() => usePage().props.value.years)
+const sidebarOpen = ref(false)
 
-    const navigation = computed(() =>
-      [
-        {name: 'Moje wnioski', href: '/vacation-requests/me', component: 'VacationRequest/Index' , icon: DocumentTextIcon, can: true},
-        {name: 'Wnioski urlopowe', href: '/vacation-requests', component: 'VacationRequest/IndexForApprovers', icon: CollectionIcon, can: auth.value.can.listAllVacationRequests},
-        {name: 'Kalendarz urlopów', href: '/vacation-calendar', component: 'Calendar', icon: CalendarIcon, can: true},
-        {name: 'Dni wolne', href: '/holidays', component: 'Holidays/Index', icon: StarIcon, can: true},
-        {name: 'Limity urlopów', href: '/vacation-limits', component: 'VacationLimits', icon: SunIcon, can: auth.value.can.manageVacationLimits},
-        {name: 'Użytkownicy', href: '/users', component: 'Users/Index', icon: UserGroupIcon, can: auth.value.can.manageUsers},
-      ].filter(item => item.can))
-
-    const userNavigation = [
-      {name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
-    ]
-
-    return {
-      auth,
-      years,
-      navigation,
-      userNavigation,
-      sidebarOpen,
-    }
-  },
-}
+const navigation = computed(() =>
+  [
+    {
+      name: 'Moje wnioski',
+      href: '/vacation-requests/me',
+      component: 'VacationRequest/Index',
+      icon: DocumentTextIcon,
+      can: true,
+    },
+    {
+      name: 'Wnioski urlopowe',
+      href: '/vacation-requests',
+      component: 'VacationRequest/IndexForApprovers',
+      icon: CollectionIcon,
+      can: props.auth.can.listAllVacationRequests,
+    },
+    {
+      name: 'Kalendarz urlopów',
+      href: '/vacation-calendar',
+      component: 'Calendar',
+      icon: CalendarIcon,
+      can: true,
+    },
+    {
+      name: 'Dni wolne',
+      href: '/holidays',
+      component: 'Holidays/Index',
+      icon: StarIcon,
+      can: true,
+    },
+    {
+      name: 'Limity urlopów',
+      href: '/vacation-limits',
+      component: 'VacationLimits',
+      icon: SunIcon,
+      can: props.auth.can.manageVacationLimits,
+    },
+    {
+      name: 'Użytkownicy',
+      href: '/users',
+      component: 'Users/Index',
+      icon: UserGroupIcon,
+      can: props.auth.can.manageUsers,
+    },
+  ].filter(item => item.can))
 </script>
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
new file mode 100644
index 0000000..3cd59e6
--- /dev/null
+++ b/resources/js/Shared/Pagination.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="pagination.last_page !== 1"
+    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
+  >
+    <div class="flex-1 flex justify-between sm:hidden">
+      <Component
+        :is="prevLink ? 'InertiaLink': 'span'"
+        :href="prevLink"
+        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+      >
+        Poprzednia
+      </Component>
+      <Component
+        :is="nextLink ? 'InertiaLink': 'span'"
+        :href="nextLink"
+        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+      >
+        Następna
+      </Component>
+    </div>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div class="text-sm text-gray-700">
+        Wyświetlanie
+        <span class="font-medium">{{ pagination.from }}</span>
+        od
+        <span class="font-medium">{{ pagination.to }}</span>
+        do
+        <span class="font-medium">{{ pagination.total }}</span>
+        wyników
+      </div>
+      <nav class="relative z-0 inline-flex space-x-1">
+        <template
+          v-for="(link, index) in pagination.links"
+          :key="index"
+        >
+          <Component
+            :is="link.url ? 'InertiaLink' : 'span'"
+            :href="link.url"
+            :preserve-scroll="true"
+            class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
+            :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
+            v-text="link.label"
+          />
+        </template>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  pagination: Object,
+})
+
+const prevLink = computed(() => props.pagination.links.at(0)?.url)
+const nextLink = computed(() => props.pagination.links.at(-1)?.url)
+
+</script>
diff --git a/resources/js/Shared/Status.vue b/resources/js/Shared/Status.vue
index 0b8ed58..acaa89b 100644
--- a/resources/js/Shared/Status.vue
+++ b/resources/js/Shared/Status.vue
@@ -2,36 +2,21 @@
   <div class="flex items-center">
     <component
       :is="statusInfo.solid.icon"
-      :class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
+      :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'
+<script setup>
+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 { findStatus } = useStatusInfo()
+const props = defineProps({
+  status: String,
+})
 
-    const statusInfo = computed(() => findStatus(props.status))
+const { findStatus } = useStatusInfo()
 
-    return {
-      statusInfo,
-    }
-  },
-}
+const statusInfo = computed(() => findStatus(props.status))
 </script>
diff --git a/resources/js/Shared/VacationChart.vue b/resources/js/Shared/VacationChart.vue
index 2a38062..9c5a6d4 100644
--- a/resources/js/Shared/VacationChart.vue
+++ b/resources/js/Shared/VacationChart.vue
@@ -6,17 +6,13 @@
   />
 </template>
 
-<script>
+<script setup>
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
-import {computed} from 'vue'
+import { computed } from 'vue'
 
 use([
   CanvasRenderer,
@@ -26,68 +22,59 @@ use([
   LegendComponent,
 ])
 
-export default {
-  name: 'VacationChart',
-  components: {
-    VChart,
+const props = defineProps({
+  stats: {
+    type: Object,
+    default: () => ({
+      used: 0,
+      pending: 0,
+      remaining: 0,
+    }),
   },
-  props: {
-    stats: {
-      type: Object,
-      default: () => ({
-        used: 0,
-        pending: 0,
-        remaining: 0,
-      }),
-    },
-  },
-  setup(props) {
-    const option = computed(() => ({
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)',
-      },
-      color: [
-        '#2C466F',
-        '#AABDDD',
-        '#527ABA',
-      ],
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
-      },
-      series: [
-        {
-          name: 'Urlop wypoczynkowy',
-          type: 'pie',
-          itemStyle: {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2,
-          },
-          label: {
-            show: true,
-            position: 'inner',
-            formatter: param => param.value !== 0 ? param.value : '' ,
-            fontWeight: 'bold',
-            fontSize: 16,
-            color: '#FFFFFF',
-            labelLine: {
-              show: false,
-            },
-          },
-          data: [
-            { value: props.stats.used, name: 'Wykorzystane' },
-            { value: props.stats.pending, name: 'Rozpatrywane' },
-            { value: props.stats.remaining, name: 'Pozostałe' },
-          ],
-          radius: ['30%', '70%'],
-        },
-      ],
-    }))
+})
 
-    return { option }
+const option = computed(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
   },
-}
+  color: [
+    '#2C466F',
+    '#AABDDD',
+    '#527ABA',
+  ],
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
+  },
+  series: [
+    {
+      name: 'Urlop wypoczynkowy',
+      type: 'pie',
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2,
+      },
+      label: {
+        show: true,
+        position: 'inner',
+        formatter: param => param.value !== 0 ? param.value : '' ,
+        fontWeight: 'bold',
+        fontSize: 16,
+        color: '#FFFFFF',
+        labelLine: {
+          show: false,
+        },
+      },
+      data: [
+        { value: props.stats.used, name: 'Wykorzystane' },
+        { value: props.stats.pending, name: 'Rozpatrywane' },
+        { value: props.stats.remaining, name: 'Pozostałe' },
+      ],
+      radius: ['30%', '70%'],
+    },
+  ],
+}))
 </script>
diff --git a/resources/js/Shared/VacationType.vue b/resources/js/Shared/VacationType.vue
index e6c3b2c..43199a9 100644
--- a/resources/js/Shared/VacationType.vue
+++ b/resources/js/Shared/VacationType.vue
@@ -9,30 +9,15 @@
   </div>
 </template>
 
-<script>
-import {computed} from 'vue'
-import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+<script setup>
+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 props = defineProps({
+  type: String,
+})
 
-    const vacationTypeInfo = computed(() => findType(props.type))
+const { findType } = useVacationTypeInfo()
 
-    return {
-      vacationTypeInfo,
-    }
-  },
-}
+const vacationTypeInfo = computed(() => findType(props.type))
 </script>
diff --git a/resources/js/Shared/VacationTypeCalendarIcon.vue b/resources/js/Shared/VacationTypeCalendarIcon.vue
index 06f5d26..22d49df 100644
--- a/resources/js/Shared/VacationTypeCalendarIcon.vue
+++ b/resources/js/Shared/VacationTypeCalendarIcon.vue
@@ -15,34 +15,16 @@
   </Popper>
 </template>
 
-<script>
-import {computed} from 'vue'
-import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+<script setup>
+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 props = defineProps({
+  type: String,
+})
 
-    const typeInfo = computed(() => findType(props.type))
+const { findType } = useVacationTypeInfo()
 
-    return {
-      typeInfo,
-    }
-  },
-}
+const typeInfo = computed(() => findType(props.type))
 </script>
diff --git a/resources/js/Shared/Widgets/AbsenceList.vue b/resources/js/Shared/Widgets/AbsenceList.vue
new file mode 100644
index 0000000..9fc8c97
--- /dev/null
+++ b/resources/js/Shared/Widgets/AbsenceList.vue
@@ -0,0 +1,42 @@
+<template>
+  <section class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Dzisiejsze nieobecności
+      </h2>
+    </div>
+    <div class="border-t border-gray-200 px-4 sm:px-6">
+      <ul class="divide-y divide-gray-200">
+        <li
+          v-for="absence in absences"
+          :key="absence.user.id"
+          class="py-4 flex"
+        >
+          <img
+            class="h-10 w-10 rounded-full"
+            :src="absence.user.avatar"
+          >
+          <div class="ml-3">
+            <p class="text-sm font-medium text-gray-900">
+              {{ absence.user.name }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ absence.user.email }}
+            </p>
+          </div>
+        </li>
+        <li v-if="! absences.length">
+          <p class="py-2">
+            Brak danych
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  absences: Object,
+})
+</script>
diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
new file mode 100644
index 0000000..998e39c
--- /dev/null
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -0,0 +1,76 @@
+<template>
+  <section class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Wnioski oczekujące na akcje
+      </h2>
+    </div>
+    <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
+      <div class="flow-root mt-6">
+        <ul class="-my-5 divide-y divide-gray-200">
+          <li
+            v-for="request in requests"
+            :key="request.id"
+            class="py-5"
+          >
+            <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
+              <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
+                <InertiaLink
+                  :href="`/vacation-requests/${request.id}`"
+                  class="hover:underline focus:outline-none"
+                >
+                  <span class="absolute inset-0" />
+                  Wniosek o {{ findType(request.type).text.toLowerCase() }}
+                  [{{ request.name }}]
+                </InertiaLink>
+              </h3>
+              <p class="mt-1 text-sm text-gray-600">
+                {{ request.from }} - {{ request.to }}
+              </p>
+              <div class="mt-3 text-sm text-gray-600">
+                <div class="flex">
+                  <img
+                    class="h-10 w-10 rounded-full"
+                    :src="request.user.avatar"
+                  >
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900">
+                      {{ request.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500">
+                      {{ request.user.email }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li v-if="! requests.length">
+            <p class="py-2">
+              Brak danych
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div class="mt-6">
+        <InertiaLink
+          href="/vacation-requests"
+          :data="{status: 'waiting_for_action'}"
+          class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+        >
+          Zobacz wszystkie
+        </InertiaLink>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
+
+defineProps({
+  requests: Object,
+})
+
+const { findType } = useVacationTypeInfo()
+</script>
diff --git a/resources/js/Shared/Widgets/UpcomingHolidays.vue b/resources/js/Shared/Widgets/UpcomingHolidays.vue
new file mode 100644
index 0000000..b5f82a0
--- /dev/null
+++ b/resources/js/Shared/Widgets/UpcomingHolidays.vue
@@ -0,0 +1,46 @@
+<template>
+  <section class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Najbliższe dni wolne
+      </h2>
+    </div>
+    <div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
+      <ul class="divide-y divide-gray-200">
+        <li
+          v-for="holiday in holidays"
+          :key="holiday.id.id"
+          class="py-4 flex"
+        >
+          <div>
+            <p class="text-sm font-medium text-gray-900">
+              {{ holiday.name }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ holiday.displayDate }}
+            </p>
+          </div>
+        </li>
+        <li v-if="! holidays.length">
+          <p class="py-2">
+            Brak danych
+          </p>
+        </li>
+      </ul>
+      <div>
+        <InertiaLink
+          href="/holidays"
+          class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+        >
+          Zobacz wszystkie
+        </InertiaLink>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  holidays: Object,
+})
+</script>
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
new file mode 100644
index 0000000..cac0dfe
--- /dev/null
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -0,0 +1,62 @@
+<template>
+  <section class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Twoje wnioski
+      </h2>
+    </div>
+    <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
+      <div class="flow-root mt-6">
+        <ul class="-my-5 divide-y divide-gray-200">
+          <li
+            v-for="request in requests"
+            :key="request.id"
+            class="py-5"
+          >
+            <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
+              <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
+                <InertiaLink
+                  :href="`/vacation-requests/${request.id}`"
+                  class="hover:underline focus:outline-none"
+                >
+                  <span class="absolute inset-0" />
+                  Wniosek o {{ findType(request.type).text.toLowerCase() }}
+                  [{{ request.name }}]
+                </InertiaLink>
+              </h3>
+              <p class="mt-1 text-sm text-gray-600">
+                {{ request.from }} - {{ request.to }}
+              </p>
+              <p class="mt-2 text-sm text-gray-600">
+                <Status :status="request.state" />
+              </p>
+            </div>
+          </li>
+          <li v-if="! requests.length">
+            <p class="py-2">
+              Brak danych
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div class="mt-6">
+        <InertiaLink
+          href="/vacation-requests/me"
+          class="w-full 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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+        >
+          Zobacz wszystkie
+        </InertiaLink>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
+
+defineProps({
+  requests: Object,
+})
+
+const { findType } = useVacationTypeInfo()
+</script>
diff --git a/resources/js/Shared/Widgets/VacationStats.vue b/resources/js/Shared/Widgets/VacationStats.vue
new file mode 100644
index 0000000..8c380cf
--- /dev/null
+++ b/resources/js/Shared/Widgets/VacationStats.vue
@@ -0,0 +1,74 @@
+<template>
+  <section class="grid grid-cols-2 gap-4">
+    <div class="bg-white shadow-md p-4">
+      <VacationChart :stats="stats" />
+    </div>
+    <div class="h-full">
+      <div class="grid grid-cols-2 gap-4 h-full">
+        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+            {{ stats.remaining }}
+          </dd>
+          <dt class="text-md font-medium text-gray-700 truncate">
+            Pozostało
+          </dt>
+          <dt class="text-sm font-medium text-gray-500 mt-2">
+            Dni do wykorzystania teraz.
+          </dt>
+        </div>
+        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+            {{ stats.used }}
+          </dd>
+          <dt class="text-md font-medium text-gray-700 truncate">
+            Dni wykorzystane
+          </dt>
+          <dt class="text-sm font-medium text-gray-500 mt-2">
+            Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+          </dt>
+        </div>
+        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
+            {{ stats.pending }}
+          </dt>
+          <dd class="text-md font-medium text-gray-500 truncate">
+            Rozpatrywane
+          </dd>
+          <dt class="text-sm font-medium text-gray-500 mt-2">
+            Dni czekające na akceptację przełożonych.
+          </dt>
+        </div>
+        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-gray-900">
+            {{ stats.limit }}
+          </dt>
+          <dd class="text-md font-medium text-gray-500 truncate">
+            Limit urlopu
+          </dd>
+          <dt class="text-sm font-medium text-gray-500 mt-2">
+            Twój roczny limit urlopu wypoczynkowego.
+          </dt>
+        </div>
+        <div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
+          <dt class="mt-1 text-4xl font-semibold text-gray-900">
+            {{ stats.other }}
+          </dt>
+          <dd class="text-md font-medium text-gray-500 truncate">
+            Inne urlopy
+          </dd>
+          <dt class="text-sm font-medium text-gray-500 mt-2">
+            Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
+          </dt>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import VacationChart from '@/Shared/VacationChart'
+
+defineProps({
+  stats: Object,
+})
+</script>
diff --git a/resources/js/Shared/Widgets/Welcome.vue b/resources/js/Shared/Widgets/Welcome.vue
new file mode 100644
index 0000000..74f26d5
--- /dev/null
+++ b/resources/js/Shared/Widgets/Welcome.vue
@@ -0,0 +1,35 @@
+<template>
+  <section>
+    <div class=" bg-white overflow-hidden shadow">
+      <div class="bg-white p-6">
+        <div class="sm:flex sm:items-center sm:justify-between">
+          <div class="sm:flex sm:space-x-5">
+            <div class="flex-shrink-0">
+              <img
+                class="mx-auto h-20 w-20 rounded-full"
+                :src="user.avatar"
+              >
+            </div>
+            <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
+              <p class="text-sm font-medium text-gray-600">
+                Cześć,
+              </p>
+              <p class="text-xl font-bold text-gray-900 sm:text-2xl">
+                {{ user.name }}
+              </p>
+              <p class="text-sm font-medium text-gray-600">
+                {{ user.role }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  user: Object,
+})
+</script>
diff --git a/resources/js/app.js b/resources/js/app.js
index 14ebf63..4b411df 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,6 +1,6 @@
-import {createApp, h} from 'vue'
-import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3'
-import {InertiaProgress} from '@inertiajs/progress'
+import { createApp, h } from 'vue'
+import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
+import { InertiaProgress } from '@inertiajs/progress'
 import AppLayout from '@/Shared/Layout/AppLayout'
 import Flatpickr from 'flatpickr'
 import { Polish } from 'flatpickr/dist/l10n/pl.js'
@@ -14,8 +14,8 @@ createInertiaApp({
 
     return page
   },
-  setup({el, App, props, plugin}) {
-    createApp({render: () => h(App, props)})
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
       .use(plugin)
       .use(Toast, {
         position: 'bottom-right',