change layout

app/Infrastructure/Http/Controllers/HolidayController.php

@@ -7,9 +7,11 @@ namespace Toby\Infrastructure\Http\Controllers;
 use Illuminate\Http\RedirectResponse;
 use Inertia\Response;
 use Toby\Eloquent\Models\Holiday;
+use Toby\Eloquent\Models\User;
 use Toby\Infrastructure\Http\Requests\HolidayRequest;
 use Toby\Infrastructure\Http\Resources\HolidayFormDataResource;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\UserResource;
 
 class HolidayController extends Controller
 {
@@ -62,4 +64,19 @@ class HolidayController extends Controller
             ->route("holidays.index")
             ->with("success", __("Holiday has been deleted"));
     }
+
+    public function showCalendar(): Response
+    {
+            $users = User::query()
+                ->withTrashed()
+                ->orderBy("last_name")
+                ->orderBy("first_name")
+                ->paginate()
+                ->withQueryString();
+
+            return inertia("Holidays/Calendar", [
+                "users" => UserResource::collection($users),
+            ]);
+    }
+
 }

resources/js/Pages/Holidays/Calendar.vue

@@ -0,0 +1,97 @@
+<template>
+    <InertiaHead title="Kalendarz" />
+    <div class="bg-white sm:rounded-lg shadow-md">
+        <div class="p-4 sm:px-6">
+            <h2 class="text-lg leading-6 font-medium text-gray-900">
+                Kalendarz
+            </h2>
+        </div>
+        <div class="grid grid-cols-38 justify-items-center divide-x divide-gray-300">
+            <div class="w-full text-center col-span-7">
+                <Menu as="div" class="relative inline-block text-left">
+                    <div>
+                        <MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
+                            Styczeń
+                            <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+                        </MenuButton>
+                    </div>
+
+                    <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+                        <MenuItems class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            <div class="py-1">
+                                <MenuItem>
+                                    <a href="#" class="text-gray-900 block px-4 py-2 text-sm">Styczeń</a>
+                                </MenuItem>
+                                <MenuItem>
+                                    <a href="#" class="text-gray-900 block px-4 py-2 text-sm">Luty</a>
+                                </MenuItem>
+                                <MenuItem>
+                                    <a href="#" class="text-gray-900 block px-4 py-2 text-sm">Marzec</a>
+                                </MenuItem>
+                            </div>
+                        </MenuItems>
+                    </transition>
+                </Menu>
+            </div>
+            <div class="w-full text-center font-semibold text-gray-900 py-4 bg-gray-50" v-for="n in 31">{{ n }}
+                <p class="text-gray-800 font-normal mt-1">Pt</p>
+            </div>
+        </div>
+        <div class="grid grid-cols-38 justify-items-start divide-x divide-gray-300 border-t border-gray-300" v-for="user in users.data"
+             :key="user.id">
+            <div class="col-span-7 px-4 py-2 whitespace-nowrap">
+                <div class="flex justify-start items-center">
+                      <span
+                          class="inline-flex items-center justify-center h-10 w-10 rounded-full"
+                      >
+                                        <img
+                                            class="h-10 w-10 rounded-full"
+                                            :src="user.avatar"
+                                            alt=""
+                                        >
+                                    </span>
+                    <div class="ml-3">
+                        <div class="text-sm font-medium break-all text-gray-900">
+                            {{ user.name }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="w-full bg-blumilk-25 divide-x divide-gray-300 flex justify-center" v-for="n in 31">
+<!--                <div class="bg-blumilk-500 items-center w-96 m-1 rounded-lg"></div>-->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import FlatPickr from 'vue-flatpickr-component';
+import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid';
+import { ChevronDownIcon } from '@heroicons/vue/solid'
+
+export default {
+    components: {
+        FlatPickr,
+        Listbox,
+        ListboxButton,
+        ListboxLabel,
+        ListboxOption,
+        ListboxOptions,
+        Menu,
+        MenuButton,
+        MenuItem,
+        MenuItems,
+        CheckIcon,
+        SelectorIcon,
+        ChevronDownIcon,
+    },
+    props: {
+        users: {
+            type: Object,
+            default: () => null,
+        },
+    },
+};
+</script>

resources/js/Shared/Layout/AppLayout.vue

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

resources/js/Shared/MainMenu.vue

@@ -311,6 +311,7 @@ import {
     UserGroupIcon,
     XIcon,
     SunIcon,
+    StarIcon,
     CalendarIcon,
 } from '@heroicons/vue/outline';
 import {
@@ -349,6 +350,7 @@ export default {
         OfficeBuildingIcon,
         SearchIcon,
         XIcon,
+        StarIcon,
         HomeIcon,
         UserGroupIcon,
         SunIcon,
@@ -362,7 +364,8 @@ export default {
             {name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
             {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
             {name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
-            {name: 'Dni wolne', href: '/holidays', icon: CalendarIcon, current: false},
+            {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+            {name: 'Kalendarz', href: '/calendar', icon: CalendarIcon, current: false},
         ];
         const userNavigation = [
             {name: 'Your Profile', href: '#'},

routes/web.php

@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\View;
 use Toby\Infrastructure\Http\Controllers\GoogleController;
 use Toby\Infrastructure\Http\Controllers\HolidayController;
 use Toby\Infrastructure\Http\Controllers\LogoutController;
@@ -19,6 +20,8 @@ Route::middleware("auth")->group(function (): void {
 
     Route::resource("holidays", HolidayController::class);
 
+    Route::get("/calendar", [HolidayController::class,"showCalendar"]);
+
     Route::get("/vacation-limits", [VacationLimitController::class, "edit"])->name("vacation.limits");
     Route::put("/vacation-limits", [VacationLimitController::class, "update"]);
 

tailwind.config.js

@@ -23,6 +23,9 @@ module.exports = {
                     '800': '#1C2D47',
                     '900': '#0C141F'
                 },
+            },
+            gridTemplateColumns: {
+                '38': 'repeat(38, minmax(0, 1fr))',
             }
         },
     },