Merge branch '#152-dashboard-calendar-widget' into #152-dashboard

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -12,8 +12,11 @@ use Toby\Domain\UserVacationStatsRetriever;
 use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\Holiday;
+use Toby\Eloquent\Models\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;
 
@@ -54,6 +57,22 @@ class DashboardController extends Controller
             ->limit(3)
             ->get();
 
+        $allHolidays = $yearPeriod->holidays;
+
+        $approvedVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->approved()
+            ->get();
+
+        $pendingVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->pending()
+            ->get();
+
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
@@ -66,6 +85,19 @@ class DashboardController extends Controller
             "remoteDays" => VacationResource::collection($remoteDays),
             "vacationRequests" => VacationRequestResource::collection($vacationRequests),
             "holidays" => HolidayResource::collection($holidays),
+            "allHolidays" => $allHolidays->mapWithKeys(
+                fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
+            ),
+            "approvedVacations" => $approvedVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
+            "pendingVacations" => $pendingVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
             "stats" => [
                 "limit" => $limit,
                 "remaining" => $remaining,

package-lock.json

@@ -23,7 +23,7 @@
                 "luxon": "^2.3.2",
                 "postcss": "^8.4.14",
                 "tailwindcss": "^3.0.24",
-                "vue": "3.2.37",
+                "vue": "3.2.21",
                 "vue-echarts": "^6.0.2",
                 "vue-flatpickr-component": "^9.0.6",
                 "vue-loader": "^17.0.0",
@@ -2139,36 +2139,36 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
-            "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz",
+            "integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==",
             "dependencies": {
                 "@babel/parser": "^7.16.4",
-                "@vue/shared": "3.2.37",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "source-map": "^0.6.1"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
-            "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz",
+            "integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==",
             "dependencies": {
-                "@vue/compiler-core": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-core": "3.2.36",
+                "@vue/shared": "3.2.36"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
-            "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
+            "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
             "dependencies": {
                 "@babel/parser": "^7.16.4",
-                "@vue/compiler-core": "3.2.37",
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/compiler-ssr": "3.2.37",
-                "@vue/reactivity-transform": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@vue/compiler-core": "3.2.36",
+                "@vue/compiler-dom": "3.2.36",
+                "@vue/compiler-ssr": "3.2.36",
+                "@vue/reactivity-transform": "3.2.36",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.25.7",
                 "postcss": "^8.1.10",
@@ -2176,69 +2176,146 @@
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
-            "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz",
+            "integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==",
             "dependencies": {
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-dom": "3.2.36",
+                "@vue/shared": "3.2.36"
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
-            "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.21.tgz",
+            "integrity": "sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw==",
             "dependencies": {
-                "@vue/shared": "3.2.37"
+                "@vue/shared": "3.2.21"
             }
         },
         "node_modules/@vue/reactivity-transform": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
-            "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz",
+            "integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==",
             "dependencies": {
                 "@babel/parser": "^7.16.4",
-                "@vue/compiler-core": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@vue/compiler-core": "3.2.36",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.25.7"
             }
         },
-        "node_modules/@vue/runtime-core": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
-            "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+        "node_modules/@vue/reactivity/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
+        "node_modules/@vue/ref-transform": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.21.tgz",
+            "integrity": "sha512-uiEWWBsrGeun9O7dQExYWzXO3rHm/YdtFNXDVqCSoPypzOVxWxdiL+8hHeWzxMB58fVuV2sT80aUtIVyaBVZgQ==",
             "dependencies": {
-                "@vue/reactivity": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@babel/parser": "^7.15.0",
+                "@vue/compiler-core": "3.2.21",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7"
             }
         },
-        "node_modules/@vue/runtime-dom": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
-            "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+        "node_modules/@vue/ref-transform/node_modules/@vue/compiler-core": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+            "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
             "dependencies": {
-                "@vue/runtime-core": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@babel/parser": "^7.15.0",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/@vue/ref-transform/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
+        "node_modules/@vue/runtime-core": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.21.tgz",
+            "integrity": "sha512-7oOxKaU0D2IunOAMOOHZgJVrHg63xwng8BZx3fbgmakqEIMwHhQcp+5GV1sOg/sWW7R4UhaRDIUCukO2GRVK2Q==",
+            "dependencies": {
+                "@vue/reactivity": "3.2.21",
+                "@vue/shared": "3.2.21"
+            }
+        },
+        "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
+        "node_modules/@vue/runtime-dom": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.21.tgz",
+            "integrity": "sha512-apBdriD6QsI4ywbllY8kjr9/0scGuStDuvLbJULPQkFPtHzntd51bP5PQTQVAEIc9kwnTozmj6x6ZdX/cwo7xA==",
+            "dependencies": {
+                "@vue/runtime-core": "3.2.21",
+                "@vue/shared": "3.2.21",
                 "csstype": "^2.6.8"
             }
         },
+        "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
         "node_modules/@vue/server-renderer": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
-            "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.21.tgz",
+            "integrity": "sha512-QBgYqVgI7XCSBCqGa4LduV9vpfQFdZBOodFmq5Txk5W/v1KrJ1LoOh2Q0RHiRgtoK/UR9uyvRVcYqOmwHkZNEg==",
             "dependencies": {
-                "@vue/compiler-ssr": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-ssr": "3.2.21",
+                "@vue/shared": "3.2.21"
             },
             "peerDependencies": {
-                "vue": "3.2.37"
+                "vue": "3.2.21"
             }
         },
+        "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+            "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
+            "dependencies": {
+                "@babel/parser": "^7.15.0",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz",
+            "integrity": "sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==",
+            "dependencies": {
+                "@vue/compiler-core": "3.2.21",
+                "@vue/shared": "3.2.21"
+            }
+        },
+        "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz",
+            "integrity": "sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==",
+            "dependencies": {
+                "@vue/compiler-dom": "3.2.21",
+                "@vue/shared": "3.2.21"
+            }
+        },
+        "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
         "node_modules/@vue/shared": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-            "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz",
+            "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
         },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.1",
@@ -8638,15 +8715,15 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
         },
         "node_modules/vue": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
-            "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.21.tgz",
+            "integrity": "sha512-jpy7ckXdyclfRzqLjL4mtq81AkzQleE54KjZsJg/9OorNVurAxdlU5XpD49GpjKdnftuffKUvx2C5jDOrgc/zg==",
             "dependencies": {
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/compiler-sfc": "3.2.37",
-                "@vue/runtime-dom": "3.2.37",
-                "@vue/server-renderer": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-dom": "3.2.21",
+                "@vue/compiler-sfc": "3.2.21",
+                "@vue/runtime-dom": "3.2.21",
+                "@vue/server-renderer": "3.2.21",
+                "@vue/shared": "3.2.21"
             }
         },
         "node_modules/vue-echarts": {
@@ -8796,6 +8873,57 @@
                 "vue": "^3.0.2"
             }
         },
+        "node_modules/vue/node_modules/@vue/compiler-core": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+            "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
+            "dependencies": {
+                "@babel/parser": "^7.15.0",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/vue/node_modules/@vue/compiler-dom": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz",
+            "integrity": "sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==",
+            "dependencies": {
+                "@vue/compiler-core": "3.2.21",
+                "@vue/shared": "3.2.21"
+            }
+        },
+        "node_modules/vue/node_modules/@vue/compiler-sfc": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz",
+            "integrity": "sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==",
+            "dependencies": {
+                "@babel/parser": "^7.15.0",
+                "@vue/compiler-core": "3.2.21",
+                "@vue/compiler-dom": "3.2.21",
+                "@vue/compiler-ssr": "3.2.21",
+                "@vue/ref-transform": "3.2.21",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7",
+                "postcss": "^8.1.10",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/vue/node_modules/@vue/compiler-ssr": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz",
+            "integrity": "sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==",
+            "dependencies": {
+                "@vue/compiler-dom": "3.2.21",
+                "@vue/shared": "3.2.21"
+            }
+        },
+        "node_modules/vue/node_modules/@vue/shared": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+            "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+        },
         "node_modules/vue3-popper": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
@@ -10921,36 +11049,36 @@
             }
         },
         "@vue/compiler-core": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
-            "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz",
+            "integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==",
             "requires": {
                 "@babel/parser": "^7.16.4",
-                "@vue/shared": "3.2.37",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "source-map": "^0.6.1"
             }
         },
         "@vue/compiler-dom": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
-            "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz",
+            "integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==",
             "requires": {
-                "@vue/compiler-core": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-core": "3.2.36",
+                "@vue/shared": "3.2.36"
             }
         },
         "@vue/compiler-sfc": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
-            "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
+            "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
             "requires": {
                 "@babel/parser": "^7.16.4",
-                "@vue/compiler-core": "3.2.37",
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/compiler-ssr": "3.2.37",
-                "@vue/reactivity-transform": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@vue/compiler-core": "3.2.36",
+                "@vue/compiler-dom": "3.2.36",
+                "@vue/compiler-ssr": "3.2.36",
+                "@vue/reactivity-transform": "3.2.36",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.25.7",
                 "postcss": "^8.1.10",
@@ -10958,66 +11086,153 @@
             }
         },
         "@vue/compiler-ssr": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
-            "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz",
+            "integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==",
             "requires": {
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-dom": "3.2.36",
+                "@vue/shared": "3.2.36"
             }
         },
         "@vue/reactivity": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
-            "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.21.tgz",
+            "integrity": "sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw==",
             "requires": {
-                "@vue/shared": "3.2.37"
+                "@vue/shared": "3.2.21"
+            },
+            "dependencies": {
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
             }
         },
         "@vue/reactivity-transform": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
-            "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz",
+            "integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==",
             "requires": {
                 "@babel/parser": "^7.16.4",
-                "@vue/compiler-core": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@vue/compiler-core": "3.2.36",
+                "@vue/shared": "3.2.36",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.25.7"
             }
         },
-        "@vue/runtime-core": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
-            "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+        "@vue/ref-transform": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.21.tgz",
+            "integrity": "sha512-uiEWWBsrGeun9O7dQExYWzXO3rHm/YdtFNXDVqCSoPypzOVxWxdiL+8hHeWzxMB58fVuV2sT80aUtIVyaBVZgQ==",
             "requires": {
-                "@vue/reactivity": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@babel/parser": "^7.15.0",
+                "@vue/compiler-core": "3.2.21",
+                "@vue/shared": "3.2.21",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7"
+            },
+            "dependencies": {
+                "@vue/compiler-core": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+                    "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
+                    "requires": {
+                        "@babel/parser": "^7.15.0",
+                        "@vue/shared": "3.2.21",
+                        "estree-walker": "^2.0.2",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
+            }
+        },
+        "@vue/runtime-core": {
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.21.tgz",
+            "integrity": "sha512-7oOxKaU0D2IunOAMOOHZgJVrHg63xwng8BZx3fbgmakqEIMwHhQcp+5GV1sOg/sWW7R4UhaRDIUCukO2GRVK2Q==",
+            "requires": {
+                "@vue/reactivity": "3.2.21",
+                "@vue/shared": "3.2.21"
+            },
+            "dependencies": {
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
             }
         },
         "@vue/runtime-dom": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
-            "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.21.tgz",
+            "integrity": "sha512-apBdriD6QsI4ywbllY8kjr9/0scGuStDuvLbJULPQkFPtHzntd51bP5PQTQVAEIc9kwnTozmj6x6ZdX/cwo7xA==",
             "requires": {
-                "@vue/runtime-core": "3.2.37",
-                "@vue/shared": "3.2.37",
+                "@vue/runtime-core": "3.2.21",
+                "@vue/shared": "3.2.21",
                 "csstype": "^2.6.8"
+            },
+            "dependencies": {
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
             }
         },
         "@vue/server-renderer": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
-            "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.21.tgz",
+            "integrity": "sha512-QBgYqVgI7XCSBCqGa4LduV9vpfQFdZBOodFmq5Txk5W/v1KrJ1LoOh2Q0RHiRgtoK/UR9uyvRVcYqOmwHkZNEg==",
             "requires": {
-                "@vue/compiler-ssr": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-ssr": "3.2.21",
+                "@vue/shared": "3.2.21"
+            },
+            "dependencies": {
+                "@vue/compiler-core": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+                    "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
+                    "requires": {
+                        "@babel/parser": "^7.15.0",
+                        "@vue/shared": "3.2.21",
+                        "estree-walker": "^2.0.2",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "@vue/compiler-dom": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz",
+                    "integrity": "sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==",
+                    "requires": {
+                        "@vue/compiler-core": "3.2.21",
+                        "@vue/shared": "3.2.21"
+                    }
+                },
+                "@vue/compiler-ssr": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz",
+                    "integrity": "sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==",
+                    "requires": {
+                        "@vue/compiler-dom": "3.2.21",
+                        "@vue/shared": "3.2.21"
+                    }
+                },
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
             }
         },
         "@vue/shared": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-            "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+            "version": "3.2.36",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz",
+            "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
         },
         "@webassemblyjs/ast": {
             "version": "1.11.1",
@@ -15746,15 +15961,68 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
         },
         "vue": {
-            "version": "3.2.37",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
-            "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+            "version": "3.2.21",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.21.tgz",
+            "integrity": "sha512-jpy7ckXdyclfRzqLjL4mtq81AkzQleE54KjZsJg/9OorNVurAxdlU5XpD49GpjKdnftuffKUvx2C5jDOrgc/zg==",
             "requires": {
-                "@vue/compiler-dom": "3.2.37",
-                "@vue/compiler-sfc": "3.2.37",
-                "@vue/runtime-dom": "3.2.37",
-                "@vue/server-renderer": "3.2.37",
-                "@vue/shared": "3.2.37"
+                "@vue/compiler-dom": "3.2.21",
+                "@vue/compiler-sfc": "3.2.21",
+                "@vue/runtime-dom": "3.2.21",
+                "@vue/server-renderer": "3.2.21",
+                "@vue/shared": "3.2.21"
+            },
+            "dependencies": {
+                "@vue/compiler-core": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.21.tgz",
+                    "integrity": "sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==",
+                    "requires": {
+                        "@babel/parser": "^7.15.0",
+                        "@vue/shared": "3.2.21",
+                        "estree-walker": "^2.0.2",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "@vue/compiler-dom": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz",
+                    "integrity": "sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==",
+                    "requires": {
+                        "@vue/compiler-core": "3.2.21",
+                        "@vue/shared": "3.2.21"
+                    }
+                },
+                "@vue/compiler-sfc": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz",
+                    "integrity": "sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==",
+                    "requires": {
+                        "@babel/parser": "^7.15.0",
+                        "@vue/compiler-core": "3.2.21",
+                        "@vue/compiler-dom": "3.2.21",
+                        "@vue/compiler-ssr": "3.2.21",
+                        "@vue/ref-transform": "3.2.21",
+                        "@vue/shared": "3.2.21",
+                        "estree-walker": "^2.0.2",
+                        "magic-string": "^0.25.7",
+                        "postcss": "^8.1.10",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "@vue/compiler-ssr": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz",
+                    "integrity": "sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==",
+                    "requires": {
+                        "@vue/compiler-dom": "3.2.21",
+                        "@vue/shared": "3.2.21"
+                    }
+                },
+                "@vue/shared": {
+                    "version": "3.2.21",
+                    "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.21.tgz",
+                    "integrity": "sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA=="
+                }
             }
         },
         "vue-echarts": {

package.json

@@ -31,7 +31,7 @@
         "luxon": "^2.3.2",
         "postcss": "^8.4.14",
         "tailwindcss": "^3.0.24",
-        "vue": "3.2.37",
+        "vue": "3.2.21",
         "vue-echarts": "^6.0.2",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",

resources/js/Pages/Calendar.vue

@@ -55,18 +55,20 @@
       </div>
     </div>
     <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
+      <table class="w-full text-sm text-center border-y border-r border-gray-300">
         <thead>
           <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+            <th
+              class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-center items-center">
-                {{ selectedMonth.name }} {{ years.selected.year }}
+                {{ selectedMonth.name }}
               </div>
             </th>
             <th
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
               style="min-width: 46px;"
               :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
             >
@@ -84,22 +86,28 @@
             v-for="user in users.data"
             :key="user.id"
           >
-            <th class="p-2 border border-gray-300">
+            <th
+              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-start items-center">
                 <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                   <img :src="user.avatar">
                 </span>
-                <div class="ml-3">
-                  <div class="text-sm font-medium text-gray-900 truncate">
-                    {{ user.name }}
-                  </div>
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                  <span
+                    v-for="split in user.name.split(' ', 2)"
+                    :key="split"
+                    class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                  >
+                    {{ split }}
+                  </span>
                 </div>
               </div>
             </th>
             <td
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="border border-gray-300"
+              class="border second:border-l-0 border-gray-300"
               :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
               @mouseover="setActiveDay(user.id + '+' + day.date)"
               @mouseleave="unsetActiveDay"
@@ -176,3 +184,10 @@ function linkParameters(user, day) {
   return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 </script>
+
+<style lang="css">
+.sticky-border {
+  box-shadow: inset -1px 0 rgb(209 213 219 / 1),
+              inset 1px 0 rgb(209 213 219 / 1);
+}
+</style>

resources/js/Pages/Dashboard.vue

@@ -3,9 +3,11 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
-      <VacationStats :stats="stats" />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
+      <VacationCalendar
+        :holidays="allHolidays"
+        :approved-vacations="approvedVacations"
+        :pending-vacations="pendingVacations"
+      />
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -14,6 +16,9 @@
         v-else
         :requests="vacationRequests.data"
       />
+    </div>
+    <div class="grid grid-cols-1 gap-4">
+      <VacationStats :stats="stats" />
       <AbsenceList
         v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"
@@ -38,6 +43,7 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
 import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
 import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
+import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
 
 defineProps({
   auth: Object,
@@ -48,5 +54,8 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
+  allHolidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 </script>

resources/js/Pages/Holidays/Index.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Keys.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/MonthlyUsage.vue

@@ -9,11 +9,11 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
                 Pracownik
               </th>
               <th
@@ -38,7 +38,7 @@
               :key="item.user.id"
               class="hover:bg-blumilk-25"
             >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
                 <div class="flex justify-start items-center">
                   <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
@@ -46,12 +46,14 @@
                       :src="item.user.avatar"
                     >
                   </span>
-                  <div class="ml-3">
-                    <div
-                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                    <span
+                      v-for="split in item.user.name.split(' ', 2)"
+                      :key="split"
+                      class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
                     >
-                      {{ item.user.name }}
-                    </div>
+                      {{ split }}
+                    </span>
                   </div>
                 </div>
               </th>

resources/js/Pages/Resumes/Index.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Technologies.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Users/Index.vue

@@ -30,7 +30,7 @@
           >
         </div>
       </div>
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/VacationLimits.vue

@@ -10,13 +10,13 @@
     </div>
     <div class="border-t border-gray-200">
       <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
+        <div class="overflow-x-auto">
           <table class="min-w-full border-b divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
                 <th
                   scope="col"
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
                 >
                   Imię i nazwisko
                 </th>
@@ -52,8 +52,8 @@
                 :key="item.id"
                 class="hover:bg-blumilk-25"
               >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <div class="flex">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
+                  <div class="flex justify-start items-center">
                     <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                       <img
                         class="w-10 h-10 rounded-full"
@@ -61,10 +61,16 @@
                       >
                     </span>
                     <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ item.user.name }}
+                      <p class="flex items-start flex-col-reverse md:flex-row">
+                        <span
+                          v-for="split in item.user.name.split(' ', 2)"
+                          :key="split"
+                          class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                        >
+                          {{ split }}
+                        </span>
                       </p>
-                      <p class="text-sm text-gray-500 break-all">
+                      <p class="hidden md:block text-sm text-gray-500 break-all">
                         {{ item.user.email }}
                       </p>
                     </div>

resources/js/Pages/VacationRequest/Index.vue

@@ -88,7 +88,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -53,7 +53,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                class="overflow-x-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-slot="{ active }"
@@ -237,51 +237,17 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
+              v-for="head in headers"
+              :key="head"
               scope="col"
               class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
+              {{ head }}
             </th>
             <th scope="col" />
           </tr>
@@ -381,6 +347,8 @@ const props = defineProps({
   types: Object,
 })
 
+const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
+
 const statuses = [
   {
     name: 'Wszystkie',

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+  >
+    <Popper
+      v-if="day.isHoliday"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <VacationPopup :vacation="getVacationInfo(day)" />
+      </template>
+    </Popper>
+    <div
+      v-else-if="day.isWeekend"
+    >
+      <time
+        :datetime="day.date"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </div>
+    <InertiaLink
+      v-else
+      href="/vacation/requests/create"
+      :data="{ 'from_date': day.date }"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </InertiaLink>
+  </div>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
+
+defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
+    type: Function,
+  },
+})
+
+const isActive = ref(false)
+
+function onMouseover() {
+  if (!isActive.value)
+    isActive.value = true
+}
+
+function onMouseleave() {
+  if (isActive.value)
+    isActive.value = false
+}
+</script>

resources/js/Shared/Widgets/Calendar/ViewModeOptions.js

@@ -0,0 +1,12 @@
+function isViewModeKey(key) {
+  return this.key === key.value
+}
+
+export const viewModes = [
+  { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
+  { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
+]
+
+export function find(modeKey) {
+  return viewModes.find(mode => mode.key === modeKey)
+}

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -0,0 +1,401 @@
+<template>
+  <section class="bg-white shadow-md">
+    <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
+        {{ calendarState.monthName }} {{ !calendarState.isActualYear ? calendar.currents.year : undefined }}
+      </h2>
+      <div class="flex justify-center">
+        <div class="flex items-center rounded-md shadow-sm md:items-stretch">
+          <button
+            v-if="calendarState.isPrevious"
+            type="button"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
+            @click="toLast"
+          >
+            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronLeftIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+          <button
+            type="button"
+            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
+            @click="goToToday"
+          >
+            Dzisiaj
+          </button>
+          <span
+            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
+            :class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
+          />
+          <button
+            v-if="calendarState.isNext"
+            type="button"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
+            @click="toNext"
+          >
+            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronRightIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+      <Menu
+        as="div"
+        class="flex justify-end relative"
+      >
+        <MenuButton
+          type="button"
+          class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
+          <ChevronDownIcon
+            class="ml-2 h-5 w-5 text-gray-400"
+            aria-hidden="true"
+          />
+        </MenuButton>
+
+        <transition
+          class="z-10"
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95"
+        >
+          <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div class="py-1">
+              <MenuItem
+                v-for="option in viewModes"
+                :key="option.key"
+                v-slot="{ active }"
+              >
+                <button
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
+                  @click="updateViewMode(option.key)"
+                >
+                  {{ option.shortcut }}
+                  <CheckIcon
+                    v-if="option.is(calendar.viewMode)"
+                    class="ml-2 w-5 h-5 text-blumilk-500"
+                  />
+                </button>
+              </MenuItem>
+            </div>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div
+        v-if="calendarState.viewMode.isMonth"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+      >
+        <div class="bg-white py-2">
+          Pn
+        </div>
+        <div class="bg-white py-2">
+          Wt
+        </div>
+        <div class="bg-white py-2">
+          Śr
+        </div>
+        <div class="bg-white py-2">
+          Cz
+        </div>
+        <div class="bg-white py-2">
+          Pt
+        </div>
+        <div class="bg-red-100 py-2">
+          Sb
+        </div>
+        <div class="bg-red-100 py-2">
+          Nd
+        </div>
+      </div>
+      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+        <div
+          class="w-full grid grid-cols-7 gap-px"
+          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
+        >
+          <DayComponent
+            v-for="(day, index) in days"
+            :key="index"
+            :day="day"
+            class="flex flex-col relative py-2 px-3"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { ref, watch, computed, reactive } from 'vue'
+import { DateTime } from 'luxon'
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
+import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
+import { useMonthInfo } from '@/Composables/monthInfo'
+import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
+import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
+
+const props = defineProps({
+  holidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
+})
+
+let days = ref([])
+
+function getCurrentDate() {
+  const { year, month, weekNumber } = DateTime.now()
+  return { year, month, week: weekNumber }
+}
+const currentDate = getCurrentDate()
+
+const months = useMonthInfo().getMonths()
+const { findType } = useVacationTypeInfo()
+const selectedYear = useCurrentYearPeriodInfo().year.value
+const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
+
+const calendar = {
+  viewMode: ref('week'),
+  currents: reactive({
+    year: selectedYear,
+    month: selectedYear === currentDate.year ? currentDate.month : 1,
+    week: selectedYear === currentDate.year ? currentDate.week : 0,
+  }),
+}
+
+const calendarState = reactive({
+  viewMode: {
+    isWeek: computed(() => calendar.viewMode.value === 'week'),
+    isMonth: computed(() => calendar.viewMode.value === 'month'),
+    details: computed(() => findViewMode(calendar.viewMode.value)),
+  },
+  monthName: computed(() => months[calendar.currents.month - 1]?.name),
+  isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
+  isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
+})
+
+const customCalendar = {
+  loadCalendar() {
+    const date = DateTime.fromObject({
+      year: calendar.currents.year,
+      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
+      day: 1,
+    })
+    days.value = this.generateCalendarData(date)
+  },
+  generateCalendarData(date) {
+    const firstMonthDay = date.startOf('month')
+    const lastMonthDay = date.endOf('month')
+
+    if (calendarState.viewMode.isWeek) {
+      return this.generateWeekData(firstMonthDay.startOf('week'))
+    } else if (calendarState.viewMode.isMonth) {
+      return this.generateMonthData(firstMonthDay.startOf('week'), lastMonthDay.endOf('week'))
+    }
+    return []
+  },
+  generateWeekData(start) {
+    let days = [], startWeek
+    if (calendar.currents.month === 1 && calendar.currents.week === 0)
+      startWeek = DateTime.fromObject({ year: calendar.currents.year, month: 1, day: 1 }).startOf('week')
+    else if (calendarState.isActualYear)
+      startWeek = DateTime.fromObject({ weekNumber: calendar.currents.week })
+    else
+      startWeek = start.plus({ week: calendar.currents.week })
+    const endWeek = startWeek.endOf('week')
+    for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+    return days
+  },
+  generateMonthData(start, end) {
+    let days = []
+    for (let day = start; day < end; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+
+    return days
+  },
+  prepareDay(day) {
+    const isCurrentMonth = isInCurrentMonth(day)
+    return {
+      date: day.toISODate(),
+      dayNumber: day.day,
+      isCurrentMonth: isCurrentMonth,
+      isToday: isToday(day),
+      isWeekend: isWeekend(day),
+      isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+    }
+  },
+}
+
+watch([calendar.viewMode, calendar.currents], () => {
+  customCalendar.loadCalendar()
+})
+
+customCalendar.loadCalendar()
+
+function toLast() {
+  if (calendar.viewMode.value === 'week')
+    minusWeek()
+  else
+    minusMonth()
+}
+
+function toNext() {
+  if (calendar.viewMode.value === 'week')
+    addWeek()
+  else
+    addMonth()
+}
+
+function resetCalendar(config = {}) {
+  const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
+  const currentWeek = isUndefined(config.week) ? currentDate.week : config.week
+
+  calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
+  calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
+}
+
+function isUndefined(value) {
+  return value === undefined
+}
+
+function addWeek(minus = false) {
+  const howMany = minus ? -1: 1
+  let nextMonth, date = DateTime.fromObject({
+    year: calendar.currents.year,
+    month: 1,
+    day: 1,
+  })
+
+  date = date.plus({ week: calendar.currents.week + howMany })
+
+  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
+  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
+  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
+    calendar.currents.week--
+  else if (howMany > 0 && startWeekDay.day === 1)
+    calendar.currents.week++
+
+  if (nextMonth !== calendar.currents.month) {
+    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
+    if (calendar.currents.week === 1)
+      calendar.currents.week = 0
+    return
+  }
+  calendar.currents.week += howMany
+}
+
+function minusWeek() {
+  addWeek(true)
+}
+
+function addMonth(minus = false) {
+  calendar.currents.month += minus ? -1 : 1
+}
+
+function minusMonth() {
+  addMonth(true)
+}
+
+function goToToday() {
+  resetCalendar({ year: currentDate.year, months: currentDate.month, week: currentDate.week })
+}
+
+function updateViewMode(type) {
+  if (type === 'month')
+    resetCalendar({ week: 0 })
+  else
+    resetCalendar()
+  calendar.viewMode.value = type
+}
+
+function isInCurrentMonth(date) {
+  return calendar.currents.month === date.month
+}
+
+function isWeekend(date) {
+  return date.weekday === 6 || date.weekday === 7
+}
+
+function isToday(date) {
+  return date.toISODate() === DateTime.local().toISODate()
+}
+
+function isHoliday(date) {
+  return props.holidays[date.toISODate()] !== undefined
+}
+
+function getHolidayDescription(day) {
+  return props.holidays[day.date]
+}
+
+function isVacation(date) {
+  return props.approvedVacations[date.toISODate()] !== undefined
+}
+
+function isPendingVacation(date) {
+  return props.pendingVacations[date.toISODate()] !== undefined
+}
+
+function getVacationBorder(day) {
+  return findType(getVacationInfo(day).type)?.border
+}
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
+}
+</script>
+
+<style lang="css">
+.day:nth-of-type(7n - 6):before {
+  content: "Pn";
+}
+
+.day:nth-of-type(7n - 5):before {
+  content: "Wt";
+}
+
+.day:nth-of-type(7n - 4):before {
+  content: "Śr";
+}
+
+.day:nth-of-type(7n - 3):before {
+  content: "Cz";
+}
+
+.day:nth-of-type(7n - 2):before {
+  content: "Pt";
+}
+
+.day:nth-of-type(7n - 1):before {
+  content: "Sb";
+}
+
+.day:nth-of-type(7n):before {
+  content: "Nd";
+}
+</style>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,8 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
-    <div class="hidden p-4 bg-white shadow-md md:block">
-      <VacationChart :stats="stats" />
-    </div>
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-1">
     <div class="h-full">
       <div class="grid grid-cols-2 gap-4 h-full">
         <div class="py-5 px-4 bg-white shadow-md sm:p-6">
@@ -77,8 +74,6 @@
 </template>
 
 <script setup>
-import VacationChart from '@/Shared/VacationChart'
-
 defineProps({
   stats: Object,
 })

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
@@ -31,5 +32,12 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
+    plugin(function({ addVariant, e }) {
+      addVariant('second', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`second${separator}${className}`)}:nth-child(2)`
+        })
+      })
+    }),
   ],
 }