#22 - vacation calendar #51
@@ -64,19 +64,4 @@ 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),
|
||||
]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Toby\Infrastructure\Http\Controllers;
|
||||
|
||||
use Inertia\Response;
|
||||
use Toby\Eloquent\Models\User;
|
||||
use Toby\Infrastructure\Http\Resources\UserResource;
|
||||
|
||||
class VacationCalendarController extends Controller
|
||||
{
|
||||
public function index(): Response
|
||||
{
|
||||
$users = User::query()
|
||||
->orderBy("last_name")
|
||||
->orderBy("first_name")
|
||||
->paginate();
|
||||
|
||||
return inertia("Calendar", [
|
||||
"users" => UserResource::collection($users),
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -20,15 +20,19 @@ class VacationRequestController extends Controller
|
||||
{
|
||||
public function index(Request $request): Response
|
||||
{
|
||||
$status = $request->get("status", "all");
|
||||
|
||||
$vacationRequests = $request->user()
|
||||
->vacationRequests()
|
||||
->latest()
|
||||
->states(VacationRequestState::filterByStatus($request->query("status", "all")))
|
||||
->states(VacationRequestState::filterByStatus($status))
|
||||
->paginate();
|
||||
|
||||
return inertia("VacationRequest/Index", [
|
||||
"requests" => VacationRequestResource::collection($vacationRequests),
|
||||
"filters" => $request->only("status"),
|
||||
"filters" => [
|
||||
"status" => $status,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
130
resources/js/Pages/Calendar.vue
Normal file
130
resources/js/Pages/Calendar.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
|
|
||||
<template>
|
||||
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<InertiaHead title="Kalendarz urlopów" />
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="bg-white sm:rounded-lg shadow-md">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="p-4 sm:px-6">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
Kalendarz urlopów
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</h2>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="overflow-x-auto">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<table class="w-full text-center border border-gray-300">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<thead>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<tr>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<th class="w-64 py-2 border border-gray-300">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<Menu
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
as="div"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="relative inline-block text-left"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<MenuButton
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
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"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
Styczeń
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<ChevronDownIcon
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="-mr-1 ml-2 h-5 w-5"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
aria-hidden="true"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
/>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</MenuButton>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<transition
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<MenuItems
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
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"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="py-1">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<a
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
href="#"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>Styczeń</a>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<a
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
href="#"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>Luty</a>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<a
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
href="#"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>Marzec</a>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</MenuItem>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</MenuItems>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</transition>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</Menu>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</th>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<th
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
v-for="i in 31"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
:key="i"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="border border-gray-300 font-semibold text-gray-900 py-4 px-2 bg-gray-50"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
{{ i }}
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<p class="text-gray-800 font-normal mt-1">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
Pt
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</p>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</th>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</tr>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</thead>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<tbody>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<tr
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
v-for="user in users.data"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
:key="user.id"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<th class="border border-gray-300 py-2 px-4">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="flex justify-start items-center">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<img
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="h-10 w-10 rounded-full"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
:src="user.avatar"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
alt=""
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</span>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="ml-3">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
{{ user.name }}
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</th>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<td
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
v-for="i in 31"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
:key="i"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
class="border border-gray-300 bg-blumilk-25"
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
/>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</tr>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</tbody>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</table>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</div>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</template>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
<script>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
import {ChevronDownIcon} from '@heroicons/vue/solid'
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
export default {
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
name: 'VacationCalendar',
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
components: {
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
Menu,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
MenuButton,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
MenuItem,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
MenuItems,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
ChevronDownIcon,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
},
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
props: {
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
users: {
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
type: Object,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
default: () => null,
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
},
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
},
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
}
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
</script>
|
||||
|
Maybe you could move to another file? Maybe you could move to another file?
|
||||
@@ -1,467 +1,374 @@
|
||||
<template>
|
||||
<InertiaHead title="Strona główna" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<!-- Left column -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
<!-- Welcome panel -->
|
||||
<section aria-labelledby="profile-overview-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<h2
|
||||
id="profile-overview-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Profile Overview
|
||||
</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Welcome back,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
View profile
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
class="px-6 py-5 text-sm font-medium text-center"
|
||||
>
|
||||
<span class="text-gray-900">{{ stat.value }}</span>
|
||||
{{ ' ' }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<InertiaHead title="Strona główna" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<!-- Left column -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
<!-- Welcome panel -->
|
||||
<section aria-labelledby="profile-overview-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<h2
|
||||
id="profile-overview-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Profile Overview
|
||||
</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Actions panel -->
|
||||
<section aria-labelledby="quick-links-title">
|
||||
<div
|
||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Welcome back,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
<h2
|
||||
id="quick-links-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Quick links
|
||||
</h2>
|
||||
<div
|
||||
v-for="(action, actionIdx) in actions"
|
||||
:key="action.name"
|
||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium">
|
||||
<InertiaLink
|
||||
:href="action.href"
|
||||
class="focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ action.name }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
repellendus qui ut at blanditiis et quo et molestiae.
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
View profile
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
class="px-6 py-5 text-sm font-medium text-center"
|
||||
>
|
||||
<span class="text-gray-900">{{ stat.value }}</span>
|
||||
{{ ' ' }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right column -->
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Announcements -->
|
||||
<section aria-labelledby="announcements-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="announcements-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Announcements
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
class="py-5"
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
<InertiaLink
|
||||
:href="announcement.href"
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ announcement.title }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
{{ announcement.preview }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<section aria-labelledby="recent-hires-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="recent-hires-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Recent Hires
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="person in recentHires"
|
||||
:key="person.handle"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="person.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ person.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
{{ '@' + person.handle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<InertiaLink
|
||||
:href="person.href"
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Actions panel -->
|
||||
<section aria-labelledby="quick-links-title">
|
||||
<div
|
||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||
>
|
||||
<h2
|
||||
id="quick-links-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Quick links
|
||||
</h2>
|
||||
<div
|
||||
v-for="(action, actionIdx) in actions"
|
||||
:key="action.name"
|
||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium">
|
||||
<InertiaLink
|
||||
:href="action.href"
|
||||
class="focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ action.name }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
repellendus qui ut at blanditiis et quo et molestiae.
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right column -->
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Announcements -->
|
||||
<section aria-labelledby="announcements-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="announcements-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Announcements
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
class="py-5"
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
<InertiaLink
|
||||
:href="announcement.href"
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ announcement.title }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
{{ announcement.preview }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<section aria-labelledby="recent-hires-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="recent-hires-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Recent Hires
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="person in recentHires"
|
||||
:key="person.handle"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="person.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ person.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
{{ '@' + person.handle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<InertiaLink
|
||||
:href="person.href"
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
AcademicCapIcon,
|
||||
BadgeCheckIcon,
|
||||
CashIcon,
|
||||
ClockIcon,
|
||||
ReceiptRefundIcon,
|
||||
UsersIcon,
|
||||
} from '@heroicons/vue/outline';
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
AcademicCapIcon,
|
||||
BadgeCheckIcon,
|
||||
CashIcon,
|
||||
ClockIcon,
|
||||
ReceiptRefundIcon,
|
||||
UsersIcon,
|
||||
} from '@heroicons/vue/outline'
|
||||
import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const stats = [
|
||||
{label: 'Vacation days left', value: 12},
|
||||
{label: 'Sick days left', value: 4},
|
||||
{label: 'Personal days left', value: 2},
|
||||
];
|
||||
const actions = [
|
||||
{
|
||||
icon: ClockIcon,
|
||||
name: 'Request time off',
|
||||
href: '#',
|
||||
iconForeground: 'text-teal-700',
|
||||
iconBackground: 'bg-teal-50',
|
||||
},
|
||||
{
|
||||
icon: BadgeCheckIcon,
|
||||
name: 'Benefits',
|
||||
href: '#',
|
||||
iconForeground: 'text-purple-700',
|
||||
iconBackground: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
name: 'Schedule a one-on-one',
|
||||
href: '#',
|
||||
iconForeground: 'text-sky-700',
|
||||
iconBackground: 'bg-sky-50',
|
||||
},
|
||||
{
|
||||
icon: CashIcon,
|
||||
name: 'Payroll',
|
||||
href: '#',
|
||||
iconForeground: 'text-yellow-700',
|
||||
iconBackground: 'bg-yellow-50',
|
||||
},
|
||||
{
|
||||
icon: ReceiptRefundIcon,
|
||||
name: 'Submit an expense',
|
||||
href: '#',
|
||||
iconForeground: 'text-rose-700',
|
||||
iconBackground: 'bg-rose-50',
|
||||
},
|
||||
{
|
||||
icon: AcademicCapIcon,
|
||||
name: 'Training',
|
||||
href: '#',
|
||||
iconForeground: 'text-indigo-700',
|
||||
iconBackground: 'bg-indigo-50',
|
||||
},
|
||||
];
|
||||
const recentHires = [
|
||||
{
|
||||
name: 'Leonard Krasner',
|
||||
handle: 'leonardkrasner',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Floyd Miles',
|
||||
handle: 'floydmiles',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Emily Selman',
|
||||
handle: 'emilyselman',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Kristin Watson',
|
||||
handle: 'kristinwatson',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
];
|
||||
const announcements = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Cum qui rem deleniti. Suscipit in dolor veritatis sequi aut. Vero ut earum quis deleniti. Ut a sunt eum cum ut repudiandae possimus. Nihil ex tempora neque cum consectetur dolores.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'New password policy',
|
||||
href: '#',
|
||||
preview:
|
||||
'Alias inventore ut autem optio voluptas et repellendus. Facere totam quaerat quam quo laudantium cumque eaque excepturi vel. Accusamus maxime ipsam reprehenderit rerum id repellendus rerum. Culpa cum vel natus. Est sit autem mollitia.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
|
||||
},
|
||||
];
|
||||
return {
|
||||
user,
|
||||
stats,
|
||||
actions,
|
||||
recentHires,
|
||||
announcements,
|
||||
};
|
||||
},
|
||||
};
|
||||
name: 'Dashboard',
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user)
|
||||
const stats = [
|
||||
{label: 'Vacation days left', value: 12},
|
||||
{label: 'Sick days left', value: 4},
|
||||
{label: 'Personal days left', value: 2},
|
||||
]
|
||||
const actions = [
|
||||
{
|
||||
icon: ClockIcon,
|
||||
name: 'Request time off',
|
||||
href: '#',
|
||||
iconForeground: 'text-teal-700',
|
||||
iconBackground: 'bg-teal-50',
|
||||
},
|
||||
{
|
||||
icon: BadgeCheckIcon,
|
||||
name: 'Benefits',
|
||||
href: '#',
|
||||
iconForeground: 'text-purple-700',
|
||||
iconBackground: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
name: 'Schedule a one-on-one',
|
||||
href: '#',
|
||||
iconForeground: 'text-sky-700',
|
||||
iconBackground: 'bg-sky-50',
|
||||
},
|
||||
{
|
||||
icon: CashIcon,
|
||||
name: 'Payroll',
|
||||
href: '#',
|
||||
iconForeground: 'text-yellow-700',
|
||||
iconBackground: 'bg-yellow-50',
|
||||
},
|
||||
{
|
||||
icon: ReceiptRefundIcon,
|
||||
name: 'Submit an expense',
|
||||
href: '#',
|
||||
iconForeground: 'text-rose-700',
|
||||
iconBackground: 'bg-rose-50',
|
||||
},
|
||||
{
|
||||
icon: AcademicCapIcon,
|
||||
name: 'Training',
|
||||
href: '#',
|
||||
iconForeground: 'text-indigo-700',
|
||||
iconBackground: 'bg-indigo-50',
|
||||
},
|
||||
]
|
||||
const recentHires = [
|
||||
{
|
||||
name: 'Leonard Krasner',
|
||||
handle: 'leonardkrasner',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Floyd Miles',
|
||||
handle: 'floydmiles',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Emily Selman',
|
||||
handle: 'emilyselman',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Kristin Watson',
|
||||
handle: 'kristinwatson',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
]
|
||||
const announcements = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Cum qui rem deleniti. Suscipit in dolor veritatis sequi aut. Vero ut earum quis deleniti. Ut a sunt eum cum ut repudiandae possimus. Nihil ex tempora neque cum consectetur dolores.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'New password policy',
|
||||
href: '#',
|
||||
preview:
|
||||
'Alias inventore ut autem optio voluptas et repellendus. Facere totam quaerat quam quo laudantium cumque eaque excepturi vel. Accusamus maxime ipsam reprehenderit rerum id repellendus rerum. Culpa cum vel natus. Est sit autem mollitia.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
|
||||
},
|
||||
]
|
||||
return {
|
||||
user,
|
||||
stats,
|
||||
actions,
|
||||
recentHires,
|
||||
announcements,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!--<script>-->
|
||||
<!--import { ref } from 'vue';-->
|
||||
<!--import {-->
|
||||
<!-- Dialog,-->
|
||||
<!-- DialogOverlay,-->
|
||||
<!-- Menu,-->
|
||||
<!-- MenuButton,-->
|
||||
<!-- MenuItem,-->
|
||||
<!-- MenuItems,-->
|
||||
<!-- TransitionChild,-->
|
||||
<!-- TransitionRoot,-->
|
||||
<!--} from '@headlessui/vue';-->
|
||||
<!--import {-->
|
||||
<!-- BellIcon,-->
|
||||
<!-- ClockIcon,-->
|
||||
<!-- CogIcon,-->
|
||||
<!-- CreditCardIcon,-->
|
||||
<!-- DocumentReportIcon,-->
|
||||
<!-- HomeIcon,-->
|
||||
<!-- MenuAlt1Icon,-->
|
||||
<!-- QuestionMarkCircleIcon,-->
|
||||
<!-- ScaleIcon,-->
|
||||
<!-- ShieldCheckIcon,-->
|
||||
<!-- UserGroupIcon,-->
|
||||
<!-- XIcon,-->
|
||||
<!--} from '@heroicons/vue/outline';-->
|
||||
<!--import {-->
|
||||
<!-- CalendarIcon,-->
|
||||
<!-- CashIcon,-->
|
||||
<!-- CheckCircleIcon,-->
|
||||
<!-- ChevronDownIcon,-->
|
||||
<!-- ChevronRightIcon,-->
|
||||
<!-- OfficeBuildingIcon,-->
|
||||
<!-- SearchIcon, SunIcon,-->
|
||||
<!--} from '@heroicons/vue/solid';-->
|
||||
|
||||
<!--const cards = [-->
|
||||
<!-- { name: 'Account balance', href: '#', icon: ScaleIcon, amount: '$30,659.45' },-->
|
||||
<!--];-->
|
||||
<!--const transactions = [-->
|
||||
<!-- {-->
|
||||
<!-- id: 1,-->
|
||||
<!-- name: 'Payment to Molly Sanders',-->
|
||||
<!-- href: '#',-->
|
||||
<!-- amount: '$20,000',-->
|
||||
<!-- currency: 'USD',-->
|
||||
<!-- status: 'success',-->
|
||||
<!-- date: 'July 11, 2020',-->
|
||||
<!-- datetime: '2020-07-11',-->
|
||||
<!-- },-->
|
||||
<!--];-->
|
||||
<!--const statusStyles = {-->
|
||||
<!-- success: 'bg-green-100 text-green-800',-->
|
||||
<!-- processing: 'bg-yellow-100 text-yellow-800',-->
|
||||
<!-- failed: 'bg-gray-100 text-gray-800',-->
|
||||
<!--};-->
|
||||
|
||||
<!--export default {-->
|
||||
<!-- components: {-->
|
||||
<!-- Dialog,-->
|
||||
<!-- DialogOverlay,-->
|
||||
<!-- Menu,-->
|
||||
<!-- MenuButton,-->
|
||||
<!-- MenuItem,-->
|
||||
<!-- MenuItems,-->
|
||||
<!-- TransitionChild,-->
|
||||
<!-- TransitionRoot,-->
|
||||
<!-- BellIcon,-->
|
||||
<!-- CashIcon,-->
|
||||
<!-- CheckCircleIcon,-->
|
||||
<!-- ChevronDownIcon,-->
|
||||
<!-- ChevronRightIcon,-->
|
||||
<!-- MenuAlt1Icon,-->
|
||||
<!-- OfficeBuildingIcon,-->
|
||||
<!-- SearchIcon,-->
|
||||
<!-- XIcon,-->
|
||||
<!-- HomeIcon,-->
|
||||
<!-- UserGroupIcon,-->
|
||||
<!-- SunIcon,-->
|
||||
<!-- CalendarIcon,-->
|
||||
<!-- },-->
|
||||
<!-- setup() {-->
|
||||
<!-- const sidebarOpen = ref(false);-->
|
||||
<!-- return {-->
|
||||
<!-- cards,-->
|
||||
<!-- transactions,-->
|
||||
<!-- statusStyles,-->
|
||||
<!-- sidebarOpen,-->
|
||||
<!-- };-->
|
||||
<!-- },-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
@@ -1,97 +0,0 @@
|
||||
<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>
|
||||
@@ -1,297 +1,336 @@
|
||||
<template>
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="sidebarOpen"
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="sidebarOpen"
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
class="fixed inset-0 flex z-40 lg:hidden"
|
||||
@close="sidebarOpen = false"
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
class="fixed inset-0 flex z-40 lg:hidden"
|
||||
@close="sidebarOpen = false"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</TransitionChild>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XIcon
|
||||
class="h-6 w-6 text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav
|
||||
class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in secondaryNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div
|
||||
class="flex-shrink-0 w-14"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav
|
||||
class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in secondaryNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:pl-64 flex flex-col flex-1">
|
||||
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200">
|
||||
<button
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</TransitionChild>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<MenuAlt1Icon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XIcon
|
||||
class="h-6 w-6 text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:max-w-7xl lg:mx-auto lg:px-8">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<Menu
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
>
|
||||
<div>
|
||||
<MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500">
|
||||
{{ years.current }}
|
||||
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-for="(item, index) in years.navigation"
|
||||
:key="index"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.link"
|
||||
as="button"
|
||||
method="post"
|
||||
:preserve-state="false"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full px-4 py-2 text-sm']"
|
||||
>
|
||||
{{ item.year }}
|
||||
<CheckIcon
|
||||
v-if="item.year === years.current"
|
||||
class="h-5 w-5 text-blumilk-500 ml-2"
|
||||
/>
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<button
|
||||
type="button"
|
||||
class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-3 relative"
|
||||
>
|
||||
<div>
|
||||
<MenuButton class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.avatar"
|
||||
alt="Avatar"
|
||||
>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"><span class="sr-only">Open user menu for </span>{{ user.name }}</span>
|
||||
<ChevronDownIcon
|
||||
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<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-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.href"
|
||||
:method="item.method"
|
||||
:as="item.as"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block w-full text-left px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav
|
||||
class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in secondaryNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div
|
||||
class="flex-shrink-0 w-14"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav
|
||||
class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in secondaryNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 h-6 w-6 text-blumilk-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:pl-64 flex flex-col flex-1">
|
||||
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<MenuAlt1Icon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<Menu
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
>
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="mr-4">
|
||||
Wybrany rok:
|
||||
</div>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
{{ years.current }}
|
||||
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-for="(item, index) in years.navigation"
|
||||
:key="index"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.link"
|
||||
as="button"
|
||||
method="post"
|
||||
:preserve-state="false"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full px-4 py-2 text-sm']"
|
||||
>
|
||||
{{ item.year }}
|
||||
<CheckIcon
|
||||
v-if="item.year === years.current"
|
||||
class="h-5 w-5 text-blumilk-500 ml-2"
|
||||
/>
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-3 relative"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.avatar"
|
||||
alt="Avatar"
|
||||
>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"><span class="sr-only">Open user menu for </span>{{
|
||||
user.name
|
||||
}}</span>
|
||||
<ChevronDownIcon
|
||||
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<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-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.href"
|
||||
:method="item.method"
|
||||
:as="item.as"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block w-full text-left px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import {ref} from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
import {
|
||||
BellIcon,
|
||||
CogIcon,
|
||||
HomeIcon,
|
||||
CollectionIcon,
|
||||
MenuAlt1Icon,
|
||||
QuestionMarkCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
UserGroupIcon,
|
||||
XIcon,
|
||||
SunIcon,
|
||||
StarIcon,
|
||||
CalendarIcon,
|
||||
} from '@heroicons/vue/outline'
|
||||
import {
|
||||
CashIcon,
|
||||
CheckCircleIcon,
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
OfficeBuildingIcon,
|
||||
SearchIcon,
|
||||
} from '@heroicons/vue/solid'
|
||||
import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
Menu,
|
||||
@@ -300,86 +339,55 @@ import {
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue';
|
||||
import {
|
||||
BellIcon,
|
||||
CogIcon,
|
||||
HomeIcon,
|
||||
MenuAlt1Icon,
|
||||
QuestionMarkCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
UserGroupIcon,
|
||||
XIcon,
|
||||
SunIcon,
|
||||
StarIcon,
|
||||
CalendarIcon,
|
||||
} from '@heroicons/vue/outline';
|
||||
import {
|
||||
CashIcon,
|
||||
CheckCircleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
MenuAlt1Icon,
|
||||
OfficeBuildingIcon,
|
||||
SearchIcon,
|
||||
} from '@heroicons/vue/solid';
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
XIcon,
|
||||
StarIcon,
|
||||
HomeIcon,
|
||||
CheckIcon,
|
||||
UserGroupIcon,
|
||||
SunIcon,
|
||||
CalendarIcon,
|
||||
},
|
||||
setup() {
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const secondaryNavigation = [
|
||||
{ name: 'Settings', href: '#', icon: CogIcon },
|
||||
{ name: 'Help', href: '#', icon: QuestionMarkCircleIcon },
|
||||
{ name: 'Privacy', href: '#', icon: ShieldCheckIcon },
|
||||
];
|
||||
const user = computed(() => usePage().props.value.auth.user)
|
||||
const years = computed(() => usePage().props.value.years)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
CashIcon,
|
||||
CheckCircleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
MenuAlt1Icon,
|
||||
OfficeBuildingIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
StarIcon,
|
||||
HomeIcon,
|
||||
UserGroupIcon,
|
||||
SunIcon,
|
||||
CalendarIcon,
|
||||
},
|
||||
setup() {
|
||||
const sidebarOpen = ref(false);
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const years = computed(() => usePage().props.value.years);
|
||||
const navigation = [
|
||||
{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: StarIcon, current: false},
|
||||
{name: 'Kalendarz', href: '/calendar', icon: CalendarIcon, current: false},
|
||||
];
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
|
||||
];
|
||||
return {
|
||||
user,
|
||||
years,
|
||||
navigation,
|
||||
secondaryNavigation,
|
||||
userNavigation,
|
||||
sidebarOpen,
|
||||
};
|
||||
},
|
||||
};
|
||||
const navigation = [
|
||||
{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: 'Twoje wnioski', href: '/vacation-requests', icon: CollectionIcon, current: false},
|
||||
{name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
|
||||
{name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false},
|
||||
]
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
|
||||
]
|
||||
|
||||
const secondaryNavigation = [
|
||||
{name: 'Settings', href: '#', icon: CogIcon},
|
||||
{name: 'Help', href: '#', icon: QuestionMarkCircleIcon},
|
||||
{name: 'Privacy', href: '#', icon: ShieldCheckIcon},
|
||||
]
|
||||
return {
|
||||
user,
|
||||
years,
|
||||
navigation,
|
||||
secondaryNavigation,
|
||||
userNavigation,
|
||||
sidebarOpen,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -8,6 +8,7 @@ use Toby\Infrastructure\Http\Controllers\HolidayController;
|
||||
use Toby\Infrastructure\Http\Controllers\LogoutController;
|
||||
use Toby\Infrastructure\Http\Controllers\SelectYearPeriodController;
|
||||
use Toby\Infrastructure\Http\Controllers\UserController;
|
||||
use Toby\Infrastructure\Http\Controllers\VacationCalendarController;
|
||||
use Toby\Infrastructure\Http\Controllers\VacationLimitController;
|
||||
use Toby\Infrastructure\Http\Controllers\VacationRequestController;
|
||||
|
||||
@@ -23,7 +24,8 @@ Route::middleware("auth")->group(function (): void {
|
||||
|
||||
Route::get("/vacation-limits", [VacationLimitController::class, "edit"])
|
||||
->name("vacation.limits");
|
||||
Route::get("/calendar", [HolidayController::class,"showCalendar"]);
|
||||
Route::get("/vacation-calendar", [VacationCalendarController::class, "index"])
|
||||
->name("vacation.calendar");
|
||||
|
||||
Route::get("/vacation-limits", [VacationLimitController::class, "edit"])->name("vacation.limits");
|
||||
Route::put("/vacation-limits", [VacationLimitController::class, "update"]);
|
||||
|
||||
@@ -1,37 +1,34 @@
|
||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./resources/**/*.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
'blumilk': {
|
||||
'25': '#F4F8FD',
|
||||
'50': '#D5DFEE',
|
||||
'100': '#C7D4E9',
|
||||
'200': '#AABDDD',
|
||||
'300': '#8CA7D1',
|
||||
'400': '#6F90C6',
|
||||
'500': '#527ABA',
|
||||
'600': '#3C5F97',
|
||||
'700': '#2C466F',
|
||||
'800': '#1C2D47',
|
||||
'900': '#0C141F'
|
||||
},
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
'38': 'repeat(38, minmax(0, 1fr))',
|
||||
}
|
||||
content: [
|
||||
'./resources/**/*.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
'blumilk': {
|
||||
'25': '#F4F8FD',
|
||||
'50': '#D5DFEE',
|
||||
'100': '#C7D4E9',
|
||||
'200': '#AABDDD',
|
||||
'300': '#8CA7D1',
|
||||
'400': '#6F90C6',
|
||||
'500': '#527ABA',
|
||||
'600': '#3C5F97',
|
||||
'700': '#2C466F',
|
||||
'800': '#1C2D47',
|
||||
'900': '#0C141F',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/line-clamp')
|
||||
],
|
||||
};
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/line-clamp'),
|
||||
],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user
Maybe you could move to another file?
Maybe you could move to another file?