#152 - holidays are set to on by default

* #5 - (js) Bump vue from 3.2.21 to 3.2.37

Bumps [vue](https://github.com/vuejs/core) from 3.2.21 to 3.2.37.
- [Release notes](https://github.com/vuejs/core/releases)
- [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vuejs/core/compare/v3.2.21...v3.2.37)

---
updated-dependencies:
- dependency-name: vue
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* - npm dependencies update July 2022

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

app/Domain/UserVacationStatsRetriever.php

@@ -103,6 +103,15 @@ class UserVacationStatsRetriever
         return $limit ?? 0;
     }
 
+    public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
+    {
+        $limit = $user->vacationLimits()
+            ->whereBelongsTo($yearPeriod)
+            ->first()?->days;
+
+        return $limit !== null;
+    }
+
     protected function getLimitableVacationTypes(): Collection
     {
         $types = VacationType::all();

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,7 +57,24 @@ 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);
+        $hasLimit = $vacationStatsRetriever->hasVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
         $homeOffice = $vacationStatsRetriever->getHomeOfficeDays($user, $yearPeriod);
@@ -66,7 +86,21 @@ 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" => [
+                "hasLimit" => $hasLimit,
                 "limit" => $limit,
                 "remaining" => $remaining,
                 "used" => $used,

composer.json

@@ -9,7 +9,7 @@
         "ext-pdo": "*",
         "ext-redis": "*",
         "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^1.0",
+        "barryvdh/laravel-dompdf": "^2.0",
         "fruitcake/laravel-cors": "^3.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "inertiajs/inertia-laravel": "^0.6.2",

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    image: nginx:1.21-alpine
+    image: nginx:1.23-alpine
     container_name: toby-web
     working_dir: /application
     volumes:
@@ -76,7 +76,7 @@ services:
     restart: unless-stopped
 
   node:
-    image: node:18.1.0-alpine3.14
+    image: node:18.4.0-alpine3.16
     container_name: toby-node
     working_dir: /application
     volumes:

package-lock.json

@@ -5,7 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
-                "@headlessui/vue": "^1.6.4",
+                "@headlessui/vue": "^1.6.5",
                 "@heroicons/vue": "^1.0.6",
                 "@inertiajs/inertia": "^0.11.0",
                 "@inertiajs/inertia-vue3": "^0.6.0",
@@ -13,28 +13,28 @@
                 "@tailwindcss/forms": "^0.5.2",
                 "@tailwindcss/line-clamp": "^0.4.0",
                 "@tailwindcss/typography": "^0.5.2",
-                "@vue/compiler-sfc": "^3.2.31",
+                "@vue/compiler-sfc": "^3.2.37",
                 "autoprefixer": "^10.4.7",
                 "axios": "^0.27.2",
-                "echarts": "^5.3.2",
+                "echarts": "^5.3.3",
                 "flatpickr": "^4.6.13",
-                "laravel-mix": "^6.0.44",
+                "laravel-mix": "^6.0.49",
                 "lodash": "^4.17.21",
-                "luxon": "^2.3.2",
+                "luxon": "^2.4.0",
                 "postcss": "^8.4.14",
-                "tailwindcss": "^3.0.24",
+                "tailwindcss": "^3.1.4",
                 "vue": "3.2.37",
-                "vue-echarts": "^6.0.2",
+                "vue-echarts": "^6.1.0",
                 "vue-flatpickr-component": "^9.0.6",
                 "vue-loader": "^17.0.0",
-                "vue-material-design-icons": "^5.0.0",
+                "vue-material-design-icons": "^5.1.1",
                 "vue-toastification": "^2.0.0-rc.5",
                 "vue3-popper": "^1.5.0",
                 "vuedraggable": "^4.1.0"
             },
             "devDependencies": {
-                "eslint": "^8.16.0",
+                "eslint": "^8.19.0",
-                "eslint-plugin-vue": "^9.1.0"
+                "eslint-plugin-vue": "^9.1.1"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -1670,9 +1670,9 @@
             }
         },
         "node_modules/@headlessui/vue": {
-            "version": "1.6.4",
+            "version": "1.6.5",
-            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.4.tgz",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.5.tgz",
-            "integrity": "sha512-axZMcfRLNuwHESPMgDb0Vj7xxlNPmsPl77pvoRZGzJh7lRdRic9kC/qbVM8G36OpIJRZzqrlADLQ2JIObhQjBg==",
+            "integrity": "sha512-C/BeTVuowTDLkGgUd6UfiPZVDLdR7OTnd8o4wF37Ub9Js1uhQ3XSTfitdZvlJALUqeQ30j+5Hk3KyjVDLQ3GYQ==",
             "engines": {
                 "node": ">=10"
             },
@@ -2588,9 +2588,9 @@
             }
         },
         "node_modules/arg": {
-            "version": "5.0.1",
+            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-            "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA=="
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
         "node_modules/argparse": {
             "version": "2.0.1",
@@ -3851,7 +3851,7 @@
         "node_modules/defined": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-            "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+            "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
         },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
@@ -3893,13 +3893,13 @@
             "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
         },
         "node_modules/detective": {
-            "version": "5.2.0",
+            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+            "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-            "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+            "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
             "dependencies": {
-                "acorn-node": "^1.6.1",
+                "acorn-node": "^1.8.2",
                 "defined": "^1.0.0",
-                "minimist": "^1.1.1"
+                "minimist": "^1.2.6"
             },
             "bin": {
                 "detective": "bin/detective.js"
@@ -4083,12 +4083,12 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
         },
         "node_modules/echarts": {
-            "version": "5.3.2",
+            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
+            "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
-            "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+            "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
             "dependencies": {
                 "tslib": "2.3.0",
-                "zrender": "5.3.1"
+                "zrender": "5.3.2"
             }
         },
         "node_modules/ee-first": {
@@ -4211,9 +4211,9 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.16.0",
+            "version": "8.19.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.19.0.tgz",
-            "integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==",
+            "integrity": "sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==",
             "dev": true,
             "dependencies": {
                 "@eslint/eslintrc": "^1.3.0",
@@ -4263,9 +4263,9 @@
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "9.1.0",
+            "version": "9.1.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
-            "integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==",
+            "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
             "dev": true,
             "dependencies": {
                 "eslint-utils": "^3.0.0",
@@ -5719,9 +5719,9 @@
             }
         },
         "node_modules/laravel-mix": {
-            "version": "6.0.44",
+            "version": "6.0.49",
-            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-6.0.44.tgz",
+            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-6.0.49.tgz",
-            "integrity": "sha512-yoszJ2cbISW21ljIkWnx/NIUaBZuKjhk9j9SbSbJi4uB6V8sHv/5SF3fQV50jlKfMOSdXdvdYxYzT9CM5ZBxAw==",
+            "integrity": "sha512-bBMFpFjp26XfijPvY5y9zGKud7VqlyOE0OWUcPo3vTBY5asw8LTjafAbee1dhfLz6PWNqDziz69CP78ELSpfKw==",
             "dependencies": {
                 "@babel/core": "^7.15.8",
                 "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
@@ -6669,6 +6669,14 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pify": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -6790,6 +6798,22 @@
                 "postcss": "^8.2.15"
             }
         },
+        "node_modules/postcss-import": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+            "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+            "dependencies": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
         "node_modules/postcss-js": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -7418,6 +7442,14 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "dependencies": {
+                "pify": "^2.3.0"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "2.3.7",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -8258,14 +8290,14 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.0.24",
+            "version": "3.1.4",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
-            "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+            "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
             "dependencies": {
-                "arg": "^5.0.1",
+                "arg": "^5.0.2",
                 "chokidar": "^3.5.3",
                 "color-name": "^1.1.4",
-                "detective": "^5.2.0",
+                "detective": "^5.2.1",
                 "didyoumean": "^1.2.2",
                 "dlv": "^1.1.3",
                 "fast-glob": "^3.2.11",
@@ -8275,7 +8307,8 @@
                 "normalize-path": "^3.0.0",
                 "object-hash": "^3.0.0",
                 "picocolors": "^1.0.0",
-                "postcss": "^8.4.12",
+                "postcss": "^8.4.14",
+                "postcss-import": "^14.1.0",
                 "postcss-js": "^4.0.0",
                 "postcss-load-config": "^3.1.4",
                 "postcss-nested": "5.0.6",
@@ -8650,13 +8683,13 @@
             }
         },
         "node_modules/vue-echarts": {
-            "version": "6.0.3",
+            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.3.tgz",
+            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.1.0.tgz",
-            "integrity": "sha512-Nu+qb+szmBFCiVmNSZclquRx2lONGxfJXeppXODBYCl+KAdsP2TIaDwO2wfEFqU5jyxaL4b/qV7IYxswESTSFw==",
+            "integrity": "sha512-UkIUX/QNRVgRJ/zPMmYxIT8TRcgo8LIsropb+bQhfJ4uUpHgpwjLy5B/9NVOeFniIrAT8/3SV3JthVbmF4wUqw==",
             "hasInstallScript": true,
             "dependencies": {
                 "resize-detector": "^0.3.0",
-                "vue-demi": "^0.12.1"
+                "vue-demi": "^0.12.5"
             },
             "peerDependencies": {
                 "@vue/composition-api": "^1.0.5",
@@ -8746,9 +8779,9 @@
             }
         },
         "node_modules/vue-material-design-icons": {
-            "version": "5.0.0",
+            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
-            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
+            "integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
         },
         "node_modules/vue-style-loader": {
             "version": "4.1.3",
@@ -9368,9 +9401,9 @@
             }
         },
         "node_modules/zrender": {
-            "version": "5.3.1",
+            "version": "5.3.2",
-            "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
+            "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
-            "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+            "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
             "dependencies": {
                 "tslib": "2.3.0"
             }
@@ -10500,9 +10533,9 @@
             }
         },
         "@headlessui/vue": {
-            "version": "1.6.4",
+            "version": "1.6.5",
-            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.4.tgz",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.5.tgz",
-            "integrity": "sha512-axZMcfRLNuwHESPMgDb0Vj7xxlNPmsPl77pvoRZGzJh7lRdRic9kC/qbVM8G36OpIJRZzqrlADLQ2JIObhQjBg==",
+            "integrity": "sha512-C/BeTVuowTDLkGgUd6UfiPZVDLdR7OTnd8o4wF37Ub9Js1uhQ3XSTfitdZvlJALUqeQ30j+5Hk3KyjVDLQ3GYQ==",
             "requires": {}
         },
         "@heroicons/vue": {
@@ -11300,9 +11333,9 @@
             }
         },
         "arg": {
-            "version": "5.0.1",
+            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-            "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA=="
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
         "argparse": {
             "version": "2.0.1",
@@ -12267,7 +12300,7 @@
         "defined": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-            "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+            "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
         },
         "delayed-stream": {
             "version": "1.0.0",
@@ -12299,13 +12332,13 @@
             "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
         },
         "detective": {
-            "version": "5.2.0",
+            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+            "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-            "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+            "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
             "requires": {
-                "acorn-node": "^1.6.1",
+                "acorn-node": "^1.8.2",
                 "defined": "^1.0.0",
-                "minimist": "^1.1.1"
+                "minimist": "^1.2.6"
             }
         },
         "didyoumean": {
@@ -12443,12 +12476,12 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
         },
         "echarts": {
-            "version": "5.3.2",
+            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
+            "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
-            "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+            "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
             "requires": {
                 "tslib": "2.3.0",
-                "zrender": "5.3.1"
+                "zrender": "5.3.2"
             }
         },
         "ee-first": {
@@ -12546,9 +12579,9 @@
             "dev": true
         },
         "eslint": {
-            "version": "8.16.0",
+            "version": "8.19.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.19.0.tgz",
-            "integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==",
+            "integrity": "sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==",
             "dev": true,
             "requires": {
                 "@eslint/eslintrc": "^1.3.0",
@@ -12589,9 +12622,9 @@
             }
         },
         "eslint-plugin-vue": {
-            "version": "9.1.0",
+            "version": "9.1.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
-            "integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==",
+            "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
             "dev": true,
             "requires": {
                 "eslint-utils": "^3.0.0",
@@ -13636,9 +13669,9 @@
             "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
         },
         "laravel-mix": {
-            "version": "6.0.44",
+            "version": "6.0.49",
-            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-6.0.44.tgz",
+            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-6.0.49.tgz",
-            "integrity": "sha512-yoszJ2cbISW21ljIkWnx/NIUaBZuKjhk9j9SbSbJi4uB6V8sHv/5SF3fQV50jlKfMOSdXdvdYxYzT9CM5ZBxAw==",
+            "integrity": "sha512-bBMFpFjp26XfijPvY5y9zGKud7VqlyOE0OWUcPo3vTBY5asw8LTjafAbee1dhfLz6PWNqDziz69CP78ELSpfKw==",
             "requires": {
                 "@babel/core": "^7.15.8",
                 "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
@@ -14363,6 +14396,11 @@
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
             "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
         },
+        "pify": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+        },
         "pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -14433,6 +14471,16 @@
             "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
             "requires": {}
         },
+        "postcss-import": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+            "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+            "requires": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            }
+        },
         "postcss-js": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -14815,6 +14863,14 @@
                 }
             }
         },
+        "read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "requires": {
+                "pify": "^2.3.0"
+            }
+        },
         "readable-stream": {
             "version": "2.3.7",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -15461,14 +15517,14 @@
             }
         },
         "tailwindcss": {
-            "version": "3.0.24",
+            "version": "3.1.4",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
-            "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+            "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
             "requires": {
-                "arg": "^5.0.1",
+                "arg": "^5.0.2",
                 "chokidar": "^3.5.3",
                 "color-name": "^1.1.4",
-                "detective": "^5.2.0",
+                "detective": "^5.2.1",
                 "didyoumean": "^1.2.2",
                 "dlv": "^1.1.3",
                 "fast-glob": "^3.2.11",
@@ -15478,7 +15534,8 @@
                 "normalize-path": "^3.0.0",
                 "object-hash": "^3.0.0",
                 "picocolors": "^1.0.0",
-                "postcss": "^8.4.12",
+                "postcss": "^8.4.14",
+                "postcss-import": "^14.1.0",
                 "postcss-js": "^4.0.0",
                 "postcss-load-config": "^3.1.4",
                 "postcss-nested": "5.0.6",
@@ -15758,12 +15815,12 @@
             }
         },
         "vue-echarts": {
-            "version": "6.0.3",
+            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.3.tgz",
+            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.1.0.tgz",
-            "integrity": "sha512-Nu+qb+szmBFCiVmNSZclquRx2lONGxfJXeppXODBYCl+KAdsP2TIaDwO2wfEFqU5jyxaL4b/qV7IYxswESTSFw==",
+            "integrity": "sha512-UkIUX/QNRVgRJ/zPMmYxIT8TRcgo8LIsropb+bQhfJ4uUpHgpwjLy5B/9NVOeFniIrAT8/3SV3JthVbmF4wUqw==",
             "requires": {
                 "resize-detector": "^0.3.0",
-                "vue-demi": "^0.12.1"
+                "vue-demi": "^0.12.5"
             },
             "dependencies": {
                 "vue-demi": {
@@ -15808,9 +15865,9 @@
             }
         },
         "vue-material-design-icons": {
-            "version": "5.0.0",
+            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
-            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
+            "integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
         },
         "vue-style-loader": {
             "version": "4.1.3",
@@ -16242,9 +16299,9 @@
             "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg=="
         },
         "zrender": {
-            "version": "5.3.1",
+            "version": "5.3.2",
-            "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
+            "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
-            "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+            "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
             "requires": {
                 "tslib": "2.3.0"
             }

package.json

@@ -13,7 +13,7 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.6.4",
+        "@headlessui/vue": "^1.6.5",
         "@heroicons/vue": "^1.0.6",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.31",
+        "@vue/compiler-sfc": "^3.2.37",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27.2",
-        "echarts": "^5.3.2",
+        "echarts": "^5.3.3",
         "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.44",
+        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.21",
-        "luxon": "^2.3.2",
+        "luxon": "^2.4.0",
         "postcss": "^8.4.14",
-        "tailwindcss": "^3.0.24",
+        "tailwindcss": "^3.1.4",
         "vue": "3.2.37",
-        "vue-echarts": "^6.0.2",
+        "vue-echarts": "^6.1.0",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.0.0",
+        "vue-material-design-icons": "^5.1.1",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.16.0",
+        "eslint": "^8.19.0",
-        "eslint-plugin-vue": "^9.1.0"
+        "eslint-plugin-vue": "^9.1.1"
     }
 }

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" />
+      <VacationCalendar
-    </div>
+        :holidays="allHolidays"
-    <div class="grid grid-cols-1 gap-4">
+        :approved-vacations="approvedVacations"
+        :pending-vacations="pendingVacations"
+      />
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -14,12 +16,13 @@
         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"
       />
       <HomeOfficeList
-        v-if="years.current.year === years.selected.year && remoteDays.data.length"
         :remote-days="remoteDays.data"
       />
       <UpcomingHolidays
@@ -38,6 +41,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 +52,8 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
+  allHolidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 </script>

resources/js/Shared/Feedbacks/EmptyState.vue

@@ -8,7 +8,10 @@
         No search result
       </slot>
     </h3>
-    <p class="text-sm">
+    <p
+      v-if="showDescription"
+      class="text-sm"
+    >
       <slot name="text">
         Try a different search query
       </slot>
@@ -18,4 +21,11 @@
 
 <script setup>
 import { SearchIcon } from '@heroicons/vue/solid'
+
+defineProps({
+  showDescription: {
+    type: Boolean,
+    default: true,
+  },
+})
 </script>

resources/js/Shared/Widgets/AbsenceList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="absences.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="absence in absences"
           :key="absence.user.id"
@@ -26,11 +29,25 @@
           </div>
         </li>
       </ul>
+      <EmptyState
+        v-else
+        :show-description="false"
+      >
+        <template #head>
+          <SunIcon class="mx-auto w-12 h-12" />
+        </template>
+        <template #title>
+          Brak nieobecności
+        </template>
+      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { SunIcon } from '@heroicons/vue/solid'
+
 defineProps({
   absences: Object,
 })

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

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="box-border"
+    :class="[
+      day.isCurrentMonth ? {
+        'bg-red-100': day.isWeekend,
+        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
+        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
+      } : [
+        'bg-gray-50 text-gray-500',
+        {
+          'bg-red-50': day.isWeekend
+        }
+      ],
+      day.isHoliday && 'font-bold cursor-default',
+      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
+      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
+    ]"
+  >
+    <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' ]"
+      >
+        {{ 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">
+          {{ day.getHolidayInfo }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isVacation || day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <div class="flex justify-between">
+        <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>
+        <div class="hidden md:inline-block">
+          <VacationIcon
+            :type="day.getVacationType.value"
+          />
+        </div>
+      </div>
+      <template #content>
+        <VacationPopup :vacation="day.getVacationInfo" />
+      </template>
+    </Popper>
+    <div
+      v-else-if="day.isWeekend"
+      class="text-red-800"
+    >
+      <time
+        :datetime="day.date"
+        class="cursor-default"
+        :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'
+import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
+
+defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+})
+
+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/HomeOfficeList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="remoteDays.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="day in remoteDays"
           :key="day.user.id"
@@ -26,11 +29,28 @@
           </div>
         </li>
       </ul>
+      <EmptyState
+        v-else
+        :show-description="false"
+      >
+        <template #head>
+          <HomeCityIcon
+            class="flex justify-center"
+            size="48"
+          />
+        </template>
+        <template #title>
+          Nikt nie pracuje z domu
+        </template>
+      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import HomeCityIcon from 'vue-material-design-icons/HomeCity'
+
 defineProps({
   remoteDays: Object,
 })

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -0,0 +1,407 @@
+<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
+            type="button"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            @click="toPrevious"
+          >
+            <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"
+            @click="goToToday"
+          >
+            Dzisiaj
+          </button>
+          <span
+            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
+          />
+          <button
+            type="button"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            :disabled="!calendarState.isNext"
+            @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="border border-gray-300 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-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+      >
+        <div class="py-2 bg-white">
+          Pon
+        </div>
+        <div class="py-2 bg-white">
+          Wt
+        </div>
+        <div class="py-2 bg-white">
+          Śr
+        </div>
+        <div class="py-2 bg-white">
+          Czw
+        </div>
+        <div class="py-2 bg-white">
+          Pt
+        </div>
+        <div class="py-2 bg-red-100 text-red-800">
+          Sob
+        </div>
+        <div class="py-2 bg-red-100 text-red-800">
+          Ndz
+        </div>
+      </div>
+      <div class="flex bg-gray-300 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-3 px-3"
+            :class="{ 'day': calendarState.viewMode.isWeek }"
+          />
+        </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(localStorage.getItem('calendarViewMode') ?? '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)
+    const startDay = {
+      date: day.toISODate(),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      isHoliday: isHoliday(day),
+    }
+
+    return {
+      ...startDay,
+      dayNumber: day.day,
+      isCurrentMonth,
+      isToday: isToday(day),
+      isWeekend: isWeekend(day),
+      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
+      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
+    }
+  },
+}
+
+watch([calendar.viewMode, calendar.currents], () => {
+  customCalendar.loadCalendar()
+})
+
+customCalendar.loadCalendar()
+
+function toPrevious() {
+  if (calendarState.isPrevious) {
+    if (calendar.viewMode.value === 'week')
+      minusWeek()
+    else
+      minusMonth()
+  }
+}
+
+function toNext() {
+  if (calendarState.isNext) {
+    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
+  localStorage.setItem('calendarViewMode', 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 getHolidayInfo(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 getVacationType(day) {
+  return findType(getVacationInfo(day).type)
+}
+
+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: "Pon";
+}
+
+.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: "Czw";
+}
+
+.day:nth-of-type(7n - 2):before {
+  content: "Pt";
+}
+
+.day:nth-of-type(7n - 1):before {
+  content: "Sob";
+}
+
+.day:nth-of-type(7n):before {
+  content: "Ndz";
+}
+</style>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,84 +1,85 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section>
-    <div class="hidden p-4 bg-white shadow-md md:block">
+    <div
-      <VacationChart :stats="stats" />
+      v-if="stats.hasLimit"
+      class="grid grid-cols-2 gap-2 h-full"
+    >
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+          {{ stats.remaining }}
+        </dd>
+        <dt class="font-medium text-gray-700 truncate text-md">
+          Pozostało
+        </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni do wykorzystania teraz.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+          {{ stats.used }}
+        </dd>
+        <dt class="font-medium text-gray-700 truncate text-md">
+          Wykorzystane
+        </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
+          {{ stats.pending }}
+        </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
+          Rozpatrywane
+        </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni czekające na akceptację przełożonych.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
+          {{ stats.limit }}
+        </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
+          Limit urlopu
+        </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Twój roczny limit urlopu wypoczynkowego.
+        </dt>
+      </div>
     </div>
-    <div class="h-full">
+    <div
-      <div class="grid grid-cols-2 gap-4 h-full">
+      v-else
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+      class="h-full grid grid-cols-2 gap-2 h-full"
-          <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+    >
-            {{ stats.remaining }}
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          </dd>
+        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          <dt class="font-medium text-gray-700 truncate text-md">
+          {{ stats.other }}
-            Pozostało
+        </dt>
-          </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
-          <dt class="mt-2 text-sm font-medium text-gray-500">
+          Inne urlopy
-            Dni do wykorzystania teraz.
+        </dd>
-          </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
-        </div>
+          Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        </dt>
-          <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+      </div>
-            {{ stats.used }}
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          </dd>
+        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          <dt class="font-medium text-gray-700 truncate text-md">
+          {{ stats.homeOffice }}
-            Wykorzystane
+        </dt>
-          </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
-          <dt class="mt-2 text-sm font-medium text-gray-500">
+          Praca zdalna
-            Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+        </dd>
-          </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
-        </div>
+          Dni przepracowane poza biurem.
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        </dt>
-          <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
-            {{ stats.pending }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Rozpatrywane
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Dni czekające na akceptację przełożonych.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
-            {{ stats.limit }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Limit urlopu
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Twój roczny limit urlopu wypoczynkowego.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-gray-500">
-            {{ stats.other }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Inne urlopy
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-lime-500">
-            {{ stats.homeOffice }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Praca zdalna
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Dni przepracowane poza biurem.
-          </dt>
-        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import VacationChart from '@/Shared/VacationChart'
-
 defineProps({
   stats: Object,
 })