#99 - tailwind plugin for eslint
This commit is contained in:
Adrian Hopek
parent
fe1d86789d
commit
de4236f3d1
@ -1,4 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: ['tailwindcss'],
|
||||
env: {
|
||||
node: true,
|
||||
'vue/setup-compiler-macros': true,
|
||||
@ -15,5 +16,10 @@ module.exports = {
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
'vue/require-default-prop': 0,
|
||||
'tailwindcss/classnames-order': 'error',
|
||||
'tailwindcss/enforces-negative-arbitrary-values': 'error',
|
||||
'tailwindcss/enforces-shorthand': 'error',
|
||||
'tailwindcss/no-arbitrary-value': 'error',
|
||||
'tailwindcss/no-contradicting-classname': 'error',
|
||||
},
|
||||
}
|
||||
|
||||
26
package-lock.json
generated
26
package-lock.json
generated
@ -34,6 +34,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.11.0",
|
||||
"eslint-plugin-tailwindcss": "^3.5.0",
|
||||
"eslint-plugin-vue": "^8.5.0"
|
||||
}
|
||||
},
|
||||
@ -4344,6 +4345,20 @@
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-tailwindcss": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
|
||||
"integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-glob": "^3.2.5",
|
||||
"postcss": "^8.4.4",
|
||||
"tailwindcss": "^3.0.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-vue": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",
|
||||
@ -12883,6 +12898,17 @@
|
||||
"v8-compile-cache": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-tailwindcss": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
|
||||
"integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-glob": "^3.2.5",
|
||||
"postcss": "^8.4.4",
|
||||
"tailwindcss": "^3.0.7"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-vue": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.11.0",
|
||||
"eslint-plugin-tailwindcss": "^3.5.0",
|
||||
"eslint-plugin-vue": "^8.5.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,28 +3,28 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg leading-6 text-center font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-center text-gray-900">
|
||||
Kalendarz urlopów
|
||||
</h2>
|
||||
<div class="ml-3 flex items-center rounded-md shadow-sm md:items-stretch">
|
||||
<div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
|
||||
<InertiaLink
|
||||
v-if="previousMonth"
|
||||
as="button"
|
||||
:href="`/vacation/calendar/${previousMonth.value}`"
|
||||
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronLeftIcon class="h-5 w-5" />
|
||||
<ChevronLeftIcon class="w-5 h-5" />
|
||||
</InertiaLink>
|
||||
<span
|
||||
v-else
|
||||
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronLeftIcon class="h-5 w-5" />
|
||||
<ChevronLeftIcon class="w-5 h-5" />
|
||||
</span>
|
||||
<InertiaLink
|
||||
as="button"
|
||||
:href="`/vacation/calendar/${currentMonth.value}`"
|
||||
class="hidden border-t border-b border-gray-300 bg-white px-2 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
|
||||
class="flex focus:relative items-center px-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:block"
|
||||
>
|
||||
Dzisiaj
|
||||
</InertiaLink>
|
||||
@ -32,32 +32,32 @@
|
||||
v-if="nextMonth"
|
||||
as="button"
|
||||
:href="`/vacation/calendar/${nextMonth.value}`"
|
||||
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronRightIcon class="h-5 w-5" />
|
||||
<ChevronRightIcon class="w-5 h-5" />
|
||||
</InertiaLink>
|
||||
<span
|
||||
v-else
|
||||
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronRightIcon class="h-5 w-5" />
|
||||
<ChevronRightIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="can.generateTimesheet">
|
||||
<a
|
||||
:href="`/vacation/timesheet/${selectedMonth.value}`"
|
||||
class="block text-center ml-3 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"
|
||||
class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Pobierz plik Excel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-center text-sm border border-gray-300">
|
||||
<table class="w-full text-sm text-center border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
|
||||
<th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
|
||||
<div class="flex justify-center items-center">
|
||||
{{ selectedMonth.name }} {{ years.selected.year }}
|
||||
</div>
|
||||
@ -65,13 +65,13 @@
|
||||
<th
|
||||
v-for="day in calendar"
|
||||
:key="day.dayOfMonth"
|
||||
class="border border-gray-300 text-lg font-semibold text-gray-900 py-2 px-2"
|
||||
class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
|
||||
style="min-width: 46px;"
|
||||
:class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
|
||||
>
|
||||
<div>
|
||||
{{ day.dayOfMonth }}
|
||||
<p class="font-normal mt-1 text-sm capitalize">
|
||||
<p class="mt-1 text-sm font-normal capitalize">
|
||||
{{ day.dayOfWeek }}
|
||||
</p>
|
||||
</div>
|
||||
@ -83,9 +83,9 @@
|
||||
v-for="user in users.data"
|
||||
:key="user.id"
|
||||
>
|
||||
<th class="border border-gray-300 py-2 px-2">
|
||||
<th class="p-2 border border-gray-300">
|
||||
<div class="flex justify-start items-center">
|
||||
<span class="inline-flex items-center justify-center h-8 w-8 rounded-full">
|
||||
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
|
||||
<img :src="user.avatar">
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<InertiaHead :title="error.title" />
|
||||
<div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
|
||||
<div class="max-w-max mx-auto">
|
||||
<div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
|
||||
<div class="mx-auto max-w-max">
|
||||
<main class="sm:flex">
|
||||
<p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
|
||||
{{ error.code }}
|
||||
</p>
|
||||
<div class="sm:ml-6">
|
||||
<div class="sm:border-l sm:border-gray-200 sm:pl-6">
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
|
||||
<div class="sm:pl-6 sm:border-l sm:border-gray-200">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
|
||||
{{ error.title }}
|
||||
</h1>
|
||||
<p class="mt-1 text-base text-gray-500">
|
||||
{{ error.message }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
|
||||
<div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
|
||||
<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"
|
||||
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Wróć do strony głównej
|
||||
</InertiaLink>
|
||||
|
||||
@ -2,27 +2,27 @@
|
||||
<InertiaHead title="Dodaj dzień wolny" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Dodaj dzień wolny
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 px-6"
|
||||
class="px-6 border-t border-gray-200"
|
||||
@submit.prevent="createHoliday"
|
||||
>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Nazwa
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
|
||||
>
|
||||
<p
|
||||
@ -33,20 +33,20 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="date"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Data
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
placeholder="Wybierz datę"
|
||||
:config="{minDate, maxDate}"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
|
||||
/>
|
||||
<p
|
||||
@ -61,14 +61,14 @@
|
||||
<div class="space-x-3">
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm 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"
|
||||
class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Anuluj
|
||||
</InertiaLink>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
|
||||
@ -2,27 +2,27 @@
|
||||
<InertiaHead title="Edytuj dzień wolny" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Edytuj dzień wolny
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 px-6"
|
||||
class="px-6 border-t border-gray-200"
|
||||
@submit.prevent="editHoliday"
|
||||
>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Nazwa
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
|
||||
>
|
||||
<p
|
||||
@ -33,19 +33,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="date"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Data
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
placeholder="Wybierz datę"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
|
||||
/>
|
||||
<p
|
||||
@ -60,14 +60,14 @@
|
||||
<div class="space-x-3">
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm 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"
|
||||
class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Anuluj
|
||||
</InertiaLink>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
|
||||
@ -3,45 +3,45 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Dni wolne od pracy
|
||||
</h2>
|
||||
</div>
|
||||
<div v-if="can.manageHolidays">
|
||||
<InertiaLink
|
||||
href="holidays/create"
|
||||
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"
|
||||
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Dodaj dzień
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<div class="overflow-auto xl:overflow-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Nazwa
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Data
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Dzień tygodnia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -51,24 +51,24 @@
|
||||
:key="holiday.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
<td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
|
||||
{{ holiday.name }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ holiday.displayDate }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ holiday.dayOfWeek }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
|
||||
<td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
|
||||
<Menu
|
||||
v-if="can.manageHolidays"
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
class="inline-block relative text-left"
|
||||
>
|
||||
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
|
||||
<MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
|
||||
<DotsVerticalIcon
|
||||
class="h-5 w-5"
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
@ -81,7 +81,7 @@
|
||||
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 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-slot="{ active }"
|
||||
@ -91,7 +91,7 @@
|
||||
:href="`/holidays/${holiday.id}/edit`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
|
||||
>
|
||||
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
|
||||
<PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
@ -105,7 +105,7 @@
|
||||
:href="`/holidays/${holiday.id}`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
|
||||
>
|
||||
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
|
||||
<TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -117,7 +117,7 @@
|
||||
<tr v-if="!holidays.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
class="py-4 text-xl leading-5 text-center text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
|
||||
@ -10,23 +10,23 @@
|
||||
>
|
||||
<div
|
||||
v-if="errors.oauth"
|
||||
class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
|
||||
class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-0 flex-1 flex justify-between">
|
||||
<ExclamationIcon class="h-5 w-5 mr-1 text-white" />
|
||||
<p class="w-0 flex-1 text-sm font-medium text-white">
|
||||
<div class="flex flex-1 justify-between w-0">
|
||||
<ExclamationIcon class="mr-1 w-5 h-5 text-white" />
|
||||
<p class="flex-1 w-0 text-sm font-medium text-white">
|
||||
{{ errors.oauth }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0 flex">
|
||||
<div class="flex shrink-0 ml-4">
|
||||
<button
|
||||
class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
|
||||
class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
|
||||
@click="delete errors.oauth"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<XIcon class="h-5 w-5" />
|
||||
<XIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,20 +34,20 @@
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
|
||||
class="flex flex-col items-center py-8 px-4 space-y-4 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
|
||||
dusk="login-link"
|
||||
>
|
||||
<img
|
||||
class="mx-auto h-50 w-auto"
|
||||
class="mx-auto w-auto h-50"
|
||||
src="img/logo.png"
|
||||
>
|
||||
<a
|
||||
href="/login/google/start"
|
||||
class="inline-flex justify-center items-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700"
|
||||
class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
|
||||
>
|
||||
Zaloguj się za pomocą Google
|
||||
<svg
|
||||
class="w-5 h-5 ml-2"
|
||||
class="ml-2 w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Wykorzystanie miesięczne urlopu wypoczynkowego
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden">
|
||||
<div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left">
|
||||
<th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
|
||||
Pracownik
|
||||
</th>
|
||||
<th
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"
|
||||
class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
|
||||
:class="{'bg-blumilk-50': isCurrentMonth(month)}"
|
||||
style="min-width: 46px;"
|
||||
>
|
||||
@ -27,7 +27,7 @@
|
||||
{{ month.shortcut }}
|
||||
</span>
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center">
|
||||
<th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
|
||||
Wykorzystanie urlopu
|
||||
</th>
|
||||
</tr>
|
||||
@ -38,11 +38,11 @@
|
||||
:key="item.user.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
<th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
|
||||
<div class="flex justify-start items-center">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="item.user.avatar"
|
||||
>
|
||||
</span>
|
||||
@ -58,12 +58,12 @@
|
||||
<td
|
||||
v-for="month in months"
|
||||
:key="month.value"
|
||||
class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"
|
||||
class="p-4 text-sm font-semibold text-center text-gray-500"
|
||||
:class="{'bg-blumilk-25': isCurrentMonth(month)}"
|
||||
>
|
||||
{{ item.months[month.value] ?? '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center">
|
||||
<td class="p-4 text-sm font-semibold text-center text-gray-500">
|
||||
<div style="min-width: 300px;">
|
||||
<VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
|
||||
</div>
|
||||
|
||||
@ -2,27 +2,27 @@
|
||||
<InertiaHead title="Dodawanie użytkownika" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Dodaj użytkownika
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 px-6"
|
||||
class="px-6 border-t border-gray-200"
|
||||
@submit.prevent="createUser"
|
||||
>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="firstName"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Imię
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="firstName"
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
|
||||
>
|
||||
<p
|
||||
@ -33,19 +33,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="lastName"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Nazwisko
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="lastName"
|
||||
v-model="form.lastName"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
|
||||
>
|
||||
<p
|
||||
@ -56,19 +56,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Adres e-mail
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
|
||||
>
|
||||
<p
|
||||
@ -79,19 +79,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="position"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Stanowisko
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="position"
|
||||
v-model="form.position"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
|
||||
>
|
||||
<p
|
||||
@ -105,19 +105,19 @@
|
||||
<Listbox
|
||||
v-model="form.role"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Rola
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
|
||||
>
|
||||
<span class="block truncate">{{ form.role.label }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<transition
|
||||
@ -125,7 +125,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
|
||||
<ListboxOption
|
||||
v-for="role in roles"
|
||||
:key="role.value"
|
||||
@ -142,7 +142,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -159,19 +159,19 @@
|
||||
<Listbox
|
||||
v-model="form.employmentForm"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Forma zatrudnienia
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
|
||||
>
|
||||
<span class="block truncate">{{ form.employmentForm.label }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
@ -180,7 +180,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
|
||||
<ListboxOption
|
||||
v-for="employmentForm in employmentForms"
|
||||
:key="employmentForm.value"
|
||||
@ -197,7 +197,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -211,19 +211,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="employment_date"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Data zatrudnienia
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="employment_date"
|
||||
v-model="form.employmentDate"
|
||||
placeholder="Wybierz datę"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
|
||||
/>
|
||||
<p
|
||||
@ -238,14 +238,14 @@
|
||||
<div class="space-x-3">
|
||||
<InertiaLink
|
||||
href="/users"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm 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"
|
||||
class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Anuluj
|
||||
</InertiaLink>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
|
||||
@ -2,27 +2,27 @@
|
||||
<InertiaHead title="Edycja użytkownika" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Edytuj użytkownika
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 px-6"
|
||||
class="px-6 border-t border-gray-200"
|
||||
@submit.prevent="editUser"
|
||||
>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="firstName"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Imię
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="firstName"
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
|
||||
>
|
||||
<p
|
||||
@ -33,19 +33,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="lastName"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Nazwisko
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="lastName"
|
||||
v-model="form.lastName"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
|
||||
>
|
||||
<p
|
||||
@ -56,19 +56,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Adres e-mail
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
|
||||
>
|
||||
<p
|
||||
@ -79,19 +79,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="position"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Stanowisko
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
id="position"
|
||||
v-model="form.position"
|
||||
type="text"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
|
||||
>
|
||||
<p
|
||||
@ -105,19 +105,19 @@
|
||||
<Listbox
|
||||
v-model="form.role"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Rola
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
|
||||
>
|
||||
<span class="block truncate">{{ form.role.label }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<transition
|
||||
@ -126,7 +126,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="role in roles"
|
||||
@ -146,7 +146,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -163,19 +163,19 @@
|
||||
<Listbox
|
||||
v-model="form.employmentForm"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Forma zatrudnienia
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
|
||||
>
|
||||
<span class="block truncate">{{ form.employmentForm.label }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<transition
|
||||
@ -184,7 +184,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="employmentForm in employmentForms"
|
||||
@ -204,7 +204,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -218,19 +218,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="employment_date"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Data zatrudnienia
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="employment_date"
|
||||
v-model="form.employmentDate"
|
||||
placeholder="Wybierz datę"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
|
||||
/>
|
||||
<p
|
||||
@ -245,14 +245,14 @@
|
||||
<div class="space-x-3">
|
||||
<InertiaLink
|
||||
href="/users"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm 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"
|
||||
class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Anuluj
|
||||
</InertiaLink>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
|
||||
@ -3,70 +3,70 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Użytkownicy
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="users/create"
|
||||
class="inline-flex items-center text-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"
|
||||
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Dodaj użytkownika
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-3">
|
||||
<div class="py-3 px-4">
|
||||
<div class="relative max-w-md">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon class="h-5 w-5 text-gray-400" />
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<SearchIcon class="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
v-model.trim="search"
|
||||
type="search"
|
||||
class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm mt-1"
|
||||
class="block py-2 pr-3 pl-10 mt-1 w-full text-sm placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
|
||||
placeholder="Szukaj"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<div class="overflow-auto xl:overflow-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Imię i nazwisko
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Rola
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Stanowisko
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Forma zatrudnienia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Data rozpoczęcia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -76,43 +76,43 @@
|
||||
:key="user.id"
|
||||
:class="{ 'bg-red-50': user.deleted, 'hover:bg-blumilk-25': !user.deleted }"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="user.avatar"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium break-all text-gray-900">
|
||||
<p class="text-sm font-medium text-gray-900 break-all">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm break-all text-gray-500">
|
||||
<p class="text-sm text-gray-500 break-all">
|
||||
{{ user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ user.role }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ user.position }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ user.employmentForm }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ user.employmentDate }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
|
||||
<td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
|
||||
<Menu
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
class="inline-block relative text-left"
|
||||
>
|
||||
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
|
||||
<DotsVerticalIcon class="h-5 w-5" />
|
||||
<MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
|
||||
<DotsVerticalIcon class="w-5 h-5" />
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
@ -123,7 +123,7 @@
|
||||
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 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
|
||||
<div
|
||||
v-if="!user.deleted"
|
||||
class="py-1"
|
||||
@ -136,7 +136,7 @@
|
||||
:href="`/users/${user.id}/edit`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
|
||||
>
|
||||
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
|
||||
<PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
@ -150,7 +150,7 @@
|
||||
:href="`/users/${user.id}`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
|
||||
>
|
||||
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
|
||||
<TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -169,7 +169,7 @@
|
||||
:href="`/users/${user.id}/restore`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
|
||||
>
|
||||
<RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć
|
||||
<RefreshIcon class="mr-2 w-5 h-5 text-green-500" /> Przywróć
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -183,7 +183,7 @@
|
||||
>
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
class="py-4 text-xl leading-5 text-center text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
|
||||
@ -3,44 +3,44 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Dostępne dni urlopu dla użytkowników
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<form @submit.prevent="submitVacationDays">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200 border-b">
|
||||
<div class="overflow-auto xl:overflow-visible">
|
||||
<table class="min-w-full border-b divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Imię i nazwisko
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Forma zatrudnienia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Posiada urlop?
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Pozostałe dni z poprzedniego roku
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Dostępne dni w roku
|
||||
</th>
|
||||
@ -52,28 +52,28 @@
|
||||
:key="item.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="item.user.avatar"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium break-all text-gray-900">
|
||||
<p class="text-sm font-medium text-gray-900 break-all">
|
||||
{{ item.user.name }}
|
||||
</p>
|
||||
<p class="text-sm break-all text-gray-500">
|
||||
<p class="text-sm text-gray-500 break-all">
|
||||
{{ item.user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ item.user.employmentForm }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<Switch
|
||||
v-model="item.hasVacation"
|
||||
:class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
|
||||
@ -83,18 +83,18 @@
|
||||
/>
|
||||
</Switch>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<div class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm">
|
||||
{{ item.remainingLastYear }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<input
|
||||
v-model="item.days"
|
||||
type="number"
|
||||
min="0"
|
||||
class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
|
||||
class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
|
||||
:disabled="!item.hasVacation"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
|
||||
>
|
||||
@ -110,7 +110,7 @@
|
||||
<tr v-if="!form.items.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
class="py-4 text-xl leading-5 text-center text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
@ -121,7 +121,7 @@
|
||||
<div class="flex justify-end py-3 px-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<InertiaHead title="Złóż wniosek urlopowy" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
|
||||
<div class="xl:col-span-2 h-full bg-white shadow-md flex flex-col">
|
||||
<div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Złóż wniosek urlopowy
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 h-full px-6"
|
||||
class="px-6 h-full border-t border-gray-200"
|
||||
@submit.prevent="createForm"
|
||||
>
|
||||
<div class="h-full flex flex-col justify-around">
|
||||
<div class="flex flex-col justify-around h-full">
|
||||
<div>
|
||||
<div
|
||||
v-if="form.errors.vacationRequest"
|
||||
class="rounded-md bg-red-50 p-4 mt-2"
|
||||
class="p-4 mt-2 bg-red-50 rounded-md"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-400" />
|
||||
<div class="shrink-0">
|
||||
<XCircleIcon class="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
@ -35,25 +35,25 @@
|
||||
v-if="can.createOnBehalfOfEmployee"
|
||||
v-model="form.user"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Osoba składająca wniosek
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<img
|
||||
:src="form.user.avatar"
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
class="shrink-0 w-6 h-6 rounded-full"
|
||||
>
|
||||
<span class="ml-3 block truncate">{{ form.user.name }}</span>
|
||||
<span class="block ml-3 truncate">{{ form.user.name }}</span>
|
||||
</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="user in users.data"
|
||||
@ -77,7 +77,7 @@
|
||||
<img
|
||||
:src="user.avatar"
|
||||
alt=""
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
class="shrink-0 w-6 h-6 rounded-full"
|
||||
>
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
|
||||
{{ user.name }}
|
||||
@ -88,7 +88,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -104,7 +104,7 @@
|
||||
</Listbox>
|
||||
<div
|
||||
v-else
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<label
|
||||
for="date_from"
|
||||
@ -112,11 +112,11 @@
|
||||
>
|
||||
Osoba składająca wniosek
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex justify-start items-center">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="auth.user.avatar"
|
||||
>
|
||||
</span>
|
||||
@ -131,19 +131,19 @@
|
||||
<Listbox
|
||||
v-model="form.vacationType"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Rodzaj urlopu
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
|
||||
>
|
||||
<span class="block truncate">{{ form.vacationType.label }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<transition
|
||||
@ -151,7 +151,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
|
||||
<ListboxOption
|
||||
v-for="vacationType in vacationTypes"
|
||||
:key="vacationType.value"
|
||||
@ -168,7 +168,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -182,20 +182,20 @@
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="date_from"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Planowany urlop od
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="date_from"
|
||||
v-model="form.from"
|
||||
:config="fromInputConfig"
|
||||
placeholder="Wybierz datę"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
|
||||
@on-change="onFromChange"
|
||||
/>
|
||||
@ -207,20 +207,20 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="date_from"
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
||||
>
|
||||
Planowany urlop do
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<FlatPickr
|
||||
id="date_to"
|
||||
v-model="form.to"
|
||||
:config="toInputConfig"
|
||||
placeholder="Wybierz datę"
|
||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
||||
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
|
||||
@on-change="onToChange"
|
||||
/>
|
||||
@ -232,33 +232,33 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
|
||||
<div
|
||||
class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm"
|
||||
class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
|
||||
>
|
||||
{{ estimatedDays.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<div class="items-center py-4 sm:grid sm:grid-cols-3">
|
||||
<label
|
||||
for="comment"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Komentarz
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<textarea
|
||||
id="comment"
|
||||
v-model="form.comment"
|
||||
rows="4"
|
||||
class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md"
|
||||
class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="can.skipFlow"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
class="items-center py-4 sm:grid sm:grid-cols-3"
|
||||
>
|
||||
<label
|
||||
for="flowSkipped"
|
||||
@ -266,7 +266,7 @@
|
||||
>
|
||||
Natychmiastowo zatwierdź wniosek
|
||||
</label>
|
||||
<div class="mt-2 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-2 sm:col-span-2 sm:mt-0">
|
||||
<Switch
|
||||
id="flowSkipped"
|
||||
v-model="form.flowSkipped"
|
||||
@ -283,14 +283,14 @@
|
||||
<div class="space-x-3">
|
||||
<InertiaLink
|
||||
href="/vacation/requests"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm 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"
|
||||
class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Anuluj
|
||||
</InertiaLink>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
@ -299,9 +299,9 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="bg-white shadow-md h-full">
|
||||
<div class="h-full bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
<span v-if="auth.user.id !== form.user.id">
|
||||
Urlop wypoczynkowy, dane dla: {{ form.user.name }}
|
||||
</span>
|
||||
@ -310,7 +310,7 @@
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-6 pt-8">
|
||||
<div class="px-6 pt-8 border-t border-gray-200">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,20 +2,20 @@
|
||||
<InertiaHead title="Moje wnioski urlopowe" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Moje wnioski urlopowe
|
||||
</h2>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/vacation/requests/create"
|
||||
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"
|
||||
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Dodaj wniosek
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="hidden md:flex relative shadow divide-x divide-gray-200">
|
||||
<div class="hidden relative divide-x divide-gray-200 shadow md:flex">
|
||||
<button
|
||||
v-for="(status, index) in statuses"
|
||||
:key="index"
|
||||
@ -34,23 +34,23 @@
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="md:hidden px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
|
||||
<div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
|
||||
<Listbox
|
||||
v-model="form.status"
|
||||
as="div"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
|
||||
Status
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0">
|
||||
<div class="relative mt-1 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
{{ form.status.name }}
|
||||
</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="status in statuses"
|
||||
@ -78,7 +78,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -88,43 +88,43 @@
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<div class="overflow-auto xl:overflow-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Numer
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Rodzaj urlopu
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Od
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Do
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Dni urlopu
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
@ -135,9 +135,9 @@
|
||||
<tr
|
||||
v-for="request in requests.data"
|
||||
:key="request.id"
|
||||
class="hover:bg-blumilk-25 relative"
|
||||
class="relative hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<InertiaLink
|
||||
:href="`/vacation/requests/${request.id}`"
|
||||
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
|
||||
@ -145,22 +145,22 @@
|
||||
{{ request.name }}
|
||||
</InertiaLink>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
|
||||
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
|
||||
<VacationType :type="request.type" />
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.from }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.to }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.days.length }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<Status :status="request.state" />
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<InertiaLink
|
||||
:href="`/vacation/requests/${request.id}`"
|
||||
class="flex justify-around"
|
||||
@ -176,7 +176,7 @@
|
||||
<tr v-if="! requests.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
class="py-4 text-xl leading-5 text-center text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
|
||||
@ -3,31 +3,31 @@
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Wnioski urlopowe
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/vacation/requests/create"
|
||||
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"
|
||||
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Dodaj wniosek
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
|
||||
<div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-2 md:gap-4">
|
||||
<Listbox
|
||||
v-model="form.user"
|
||||
as="div"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
|
||||
Pracownik
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0">
|
||||
<div class="relative mt-1 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
|
||||
>
|
||||
<span v-if="form.user === null">
|
||||
Wszyscy
|
||||
@ -38,12 +38,12 @@
|
||||
>
|
||||
<img
|
||||
:src="form.user.avatar"
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
class="shrink-0 w-6 h-6 rounded-full"
|
||||
>
|
||||
<span class="ml-3 block truncate">{{ form.user.name }}</span>
|
||||
<span class="block ml-3 truncate">{{ form.user.name }}</span>
|
||||
</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-slot="{ active }"
|
||||
@ -71,7 +71,7 @@
|
||||
v-if="form.user === null"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -88,7 +88,7 @@
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="user.avatar"
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
class="shrink-0 w-6 h-6 rounded-full"
|
||||
>
|
||||
<span
|
||||
:class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
|
||||
@ -100,7 +100,7 @@
|
||||
v-if="form.user?.id === user.id"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -112,18 +112,18 @@
|
||||
v-model="form.status"
|
||||
as="div"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
|
||||
Status
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0">
|
||||
<div class="relative mt-1 sm:mt-0">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
{{ form.status.name }}
|
||||
</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon class="w-5 h-5 text-gray-400" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="status in statuses"
|
||||
@ -151,7 +151,7 @@
|
||||
v-if="selected"
|
||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
@ -161,49 +161,49 @@
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<div class="overflow-auto xl:overflow-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Numer
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Pracownik
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Rodzaj urlopu
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Od
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Do
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Dni urlopu
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
@ -214,9 +214,9 @@
|
||||
<tr
|
||||
v-for="request in requests.data"
|
||||
:key="request.id"
|
||||
class="hover:bg-blumilk-25 relative"
|
||||
class="relative hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<InertiaLink
|
||||
:href="`/vacation/requests/${request.id}`"
|
||||
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
|
||||
@ -224,9 +224,9 @@
|
||||
{{ request.name }}
|
||||
</InertiaLink>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
|
||||
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
|
||||
<div class="flex">
|
||||
<div class="h-10 w-10 rounded-full">
|
||||
<div class="w-10 h-10 rounded-full">
|
||||
<img :src="request.user.avatar">
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
@ -239,22 +239,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
|
||||
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
|
||||
<VacationType :type="request.type" />
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.from }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.to }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ request.days.length }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<Status :status="request.state" />
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
<InertiaLink
|
||||
:href="`/vacation/requests/${request.id}`"
|
||||
class="flex justify-around"
|
||||
@ -270,7 +270,7 @@
|
||||
<tr v-if="! requests.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
class="py-4 text-xl leading-5 text-center text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<InertiaHead :title="`Wniosek ${request.name}`" />
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
|
||||
<div class="space-y-6 xl:col-start-1 xl:col-span-2">
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
|
||||
<div class="space-y-6 xl:col-span-2 xl:col-start-1">
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:px-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Informacje na temat wniosku
|
||||
</h3>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
|
||||
<div class="py-5 px-4 border-t border-gray-200 sm:p-0">
|
||||
<dl class="sm:divide-y sm:divide-gray-200">
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">
|
||||
Nr wniosku
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
{{ request.name }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500 flex items-center">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="flex items-center text-sm font-medium text-gray-500">
|
||||
Pracownik
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="request.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
@ -39,27 +39,27 @@
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">
|
||||
Rodzaj urlopu
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<VacationType :type="request.type" />
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">
|
||||
Obecny status
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<Status :status="request.state" />
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">
|
||||
Data
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<template v-if="request.days.length > 1">
|
||||
{{ request.from }} - {{ request.to }}
|
||||
</template>
|
||||
@ -71,35 +71,35 @@
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">
|
||||
Komentarz
|
||||
</dt>
|
||||
<dd
|
||||
v-if="request.comment != null"
|
||||
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
|
||||
>
|
||||
{{ request.comment }}
|
||||
</dd>
|
||||
<dd
|
||||
v-else
|
||||
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
|
||||
>
|
||||
-
|
||||
</dd>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500 flex items-center">
|
||||
<div class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="flex items-center text-sm font-medium text-gray-500">
|
||||
Załączniki
|
||||
</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
|
||||
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
|
||||
<div class="w-0 flex-1 flex items-center">
|
||||
<PaperClipIcon class="flex-shrink-0 h-5 w-5 text-gray-400" />
|
||||
<span class="ml-2 flex-1 w-0 truncate"> wniosek_urlopowy.pdf </span>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
|
||||
<li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
|
||||
<div class="flex flex-1 items-center w-0">
|
||||
<PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
|
||||
<span class="flex-1 ml-2 w-0 truncate"> wniosek_urlopowy.pdf </span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<div class="shrink-0 ml-4">
|
||||
<a
|
||||
:href="`/vacation/requests/${request.id}/download`"
|
||||
target="_blank"
|
||||
@ -119,8 +119,8 @@
|
||||
v-if="can.acceptAsTechnical"
|
||||
class="bg-white shadow"
|
||||
>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Zaakceptuj wniosek jako osoba techniczna
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
@ -135,7 +135,7 @@
|
||||
method="post"
|
||||
as="button"
|
||||
preserve-scroll
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zaakceptuj wniosek
|
||||
</InertiaLink>
|
||||
@ -146,8 +146,8 @@
|
||||
v-if="can.acceptAsAdministrative"
|
||||
class="bg-white shadow"
|
||||
>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Zaakceptuj wniosek jako osoba administracyjna
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
@ -161,7 +161,7 @@
|
||||
method="post"
|
||||
as="button"
|
||||
preserve-scroll
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
Zaakceptuj wniosek
|
||||
</InertiaLink>
|
||||
@ -172,8 +172,8 @@
|
||||
v-if="can.reject"
|
||||
class="bg-white shadow"
|
||||
>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Odrzuć wniosek
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
@ -187,7 +187,7 @@
|
||||
method="post"
|
||||
as="button"
|
||||
preserve-scroll
|
||||
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
|
||||
class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
|
||||
>
|
||||
Odrzuć wniosek
|
||||
</InertiaLink>
|
||||
@ -196,10 +196,10 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="can.cancel"
|
||||
class="bg-white shadow border border-red-500"
|
||||
class="bg-white border border-red-500 shadow"
|
||||
>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Anuluj wniosek
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
@ -213,7 +213,7 @@
|
||||
method="post"
|
||||
as="button"
|
||||
preserve-scroll
|
||||
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
|
||||
class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
|
||||
>
|
||||
Anuluj wniosek
|
||||
</InertiaLink>
|
||||
@ -221,14 +221,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:col-start-3 xl:col-span-1 space-y-6">
|
||||
<div class="space-y-6 xl:col-span-1 xl:col-start-3">
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<div class="py-5 px-4 sm:px-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Historia wniosku
|
||||
</h3>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 py-4">
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(activity, index) in activities.data"
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<div :class="{'relative pb-8': last}">
|
||||
<span
|
||||
v-if="last"
|
||||
class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
|
||||
class="absolute top-4 left-4 -ml-px w-0.5 h-full bg-gray-200"
|
||||
/>
|
||||
<div class="relative flex space-x-3">
|
||||
<div class="flex relative space-x-3">
|
||||
<div>
|
||||
<span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
|
||||
<component
|
||||
@ -13,16 +13,16 @@
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
|
||||
<div class="flex flex-1 justify-between pt-1.5 space-x-4 min-w-0">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="text-sm font-medium text-gray-700">
|
||||
{{ statusInfo.text }}
|
||||
</div>
|
||||
<div class="text-right text-sm whitespace-nowrap font-medium text-gray-400">
|
||||
<div class="text-sm font-medium text-right text-gray-400 whitespace-nowrap">
|
||||
{{ activity.user }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right text-sm whitespace-nowrap text-gray-500 flex flex-col">
|
||||
<div class="flex flex-col text-sm text-right text-gray-500 whitespace-nowrap">
|
||||
<time>{{ activity.date }}</time>
|
||||
<time>{{ activity.time }}</time>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:auth="auth"
|
||||
:years="years"
|
||||
/>
|
||||
<main class="lg:ml-64 flex flex-col flex-1 py-8">
|
||||
<main class="flex flex-col flex-1 py-8 lg:ml-64">
|
||||
<div class="lg:px-4">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
|
||||
<div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
class="fixed inset-0 flex z-40 lg:hidden"
|
||||
class="flex fixed inset-0 z-40 lg:hidden"
|
||||
@close="sidebarOpen = false"
|
||||
>
|
||||
<TransitionChild
|
||||
@ -28,7 +28,7 @@
|
||||
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">
|
||||
<div class="flex relative flex-col flex-1 pt-5 pb-4 w-full max-w-xs bg-blumilk-700">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
@ -38,39 +38,39 @@
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<div class="absolute top-0 right-0 pt-2 -mr-12">
|
||||
<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"
|
||||
class="flex justify-center items-center ml-1 w-10 h-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<XIcon class="h-6 w-6 text-white" />
|
||||
<XIcon class="w-6 h-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<div class="flex shrink-0 items-center px-4">
|
||||
<InertiaLink
|
||||
href="/"
|
||||
@click="sidebarOpen = false;"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
class="w-auto h-8"
|
||||
src="/img/logo-white.svg"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto">
|
||||
<nav class="overflow-y-auto shrink-0 mt-5 h-full divide-y divide-blumilk-800">
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
href="/"
|
||||
:class="[$page.component === 'Dashboard' ? '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 leading-6 font-medium rounded-md']"
|
||||
@click="sidebarOpen = false;"
|
||||
>
|
||||
<HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
|
||||
<HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
|
||||
Strona główna
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<div class="mt-3 pt-3">
|
||||
<div class="pt-3 mt-3">
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
@ -81,7 +81,7 @@
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
@ -90,13 +90,13 @@
|
||||
</nav>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 w-14" />
|
||||
<div class="shrink-0 w-14" />
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
|
||||
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<div class="hidden lg:flex lg:fixed lg:inset-y-0 lg:flex-col lg:w-64">
|
||||
<div class="flex overflow-y-auto flex-col grow pt-5 pb-4 bg-blumilk-700">
|
||||
<div class="flex shrink-0 items-center px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
src="/img/logo-white.svg"
|
||||
@ -104,15 +104,15 @@
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
<nav class="mt-5 px-2 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto">
|
||||
<nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800">
|
||||
<InertiaLink
|
||||
href="/"
|
||||
:class="[$page.component === 'Dashboard' ? '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']"
|
||||
>
|
||||
<HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
|
||||
<HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
|
||||
Strona główna
|
||||
</InertiaLink>
|
||||
<div class="mt-1 pt-1 space-y-1">
|
||||
<div class="pt-1 mt-1 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
@ -121,7 +121,7 @@
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
|
||||
class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
@ -130,21 +130,21 @@
|
||||
</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">
|
||||
<div class="flex flex-col flex-1 lg:pl-64">
|
||||
<div class="flex relative z-10 shrink-0 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"
|
||||
class="px-4 text-gray-400 border-r border-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<MenuAlt1Icon class="h-6 w-6" />
|
||||
<MenuAlt1Icon class="w-6 h-6" />
|
||||
</button>
|
||||
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
|
||||
<div class="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<Menu
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
class="inline-block relative text-left"
|
||||
>
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="mr-4 text-sm">
|
||||
@ -152,10 +152,10 @@
|
||||
</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"
|
||||
class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
|
||||
>
|
||||
{{ years.selected.year }}
|
||||
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
|
||||
<ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,7 +169,7 @@
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right absolute right-0 mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
class="absolute right-0 mt-2 w-24 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
|
||||
>
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
@ -187,7 +187,7 @@
|
||||
{{ item.year }}
|
||||
<CheckIcon
|
||||
v-if="item.year === years.selected.year"
|
||||
class="h-5 w-5 text-blumilk-500 ml-2"
|
||||
class="ml-2 w-5 h-5 text-blumilk-500"
|
||||
/>
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
@ -198,7 +198,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="years.current.year !== years.selected.year"
|
||||
class="ml-3 text-sm hidden sm:block"
|
||||
class="hidden ml-3 text-sm sm:block"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="years.current.link"
|
||||
@ -211,22 +211,22 @@
|
||||
</inertialink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<div class="flex items-center ml-4 md:ml-6">
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-3 relative"
|
||||
class="relative ml-3"
|
||||
>
|
||||
<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"
|
||||
class="flex items-center max-w-xs text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 lg:p-2 lg:hover:bg-gray-50 lg:rounded-md"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
class="w-8 h-8 rounded-full"
|
||||
:src="auth.user.avatar"
|
||||
>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
|
||||
<span class="hidden ml-3 text-sm font-medium text-gray-700 lg:block">
|
||||
{{ auth.user.name }}
|
||||
</span>
|
||||
<ChevronDownIcon class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block" />
|
||||
<ChevronDownIcon class="hidden shrink-0 ml-1 w-5 h-5 text-gray-400 lg:block" />
|
||||
</MenuButton>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
@ -237,7 +237,7 @@
|
||||
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"
|
||||
class="absolute right-0 py-1 mt-2 w-48 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
|
||||
>
|
||||
<MenuItem v-slot="{ active }">
|
||||
<InertiaLink
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="pagination.last_page !== 1"
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
||||
class="flex justify-between items-center py-3 px-4 bg-white rounded-b-lg border-t border-gray-200 sm:px-6"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<Component
|
||||
:is="prevLink ? 'InertiaLink': 'span'"
|
||||
:href="prevLink"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
class="inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
|
||||
>
|
||||
Poprzednia
|
||||
</Component>
|
||||
<Component
|
||||
:is="nextLink ? 'InertiaLink': 'span'"
|
||||
:href="nextLink"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
class="inline-flex relative items-center py-2 px-4 ml-3 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
|
||||
>
|
||||
Następna
|
||||
</Component>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="hidden sm:flex sm:flex-1 sm:justify-between sm:items-center">
|
||||
<div class="text-sm text-gray-700">
|
||||
Wyświetlanie od
|
||||
<span class="font-medium">{{ pagination.from }}</span>
|
||||
@ -29,7 +29,7 @@
|
||||
<span class="font-medium">{{ pagination.total }}</span>
|
||||
wyników
|
||||
</div>
|
||||
<nav class="relative z-0 inline-flex space-x-1">
|
||||
<nav class="inline-flex relative z-0 space-x-1">
|
||||
<template
|
||||
v-for="(link, index) in pagination.links"
|
||||
:key="index"
|
||||
@ -38,7 +38,7 @@
|
||||
:is="link.url ? 'InertiaLink' : 'span'"
|
||||
:href="link.url"
|
||||
:preserve-scroll="true"
|
||||
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
||||
class="inline-flex relative items-center py-2 px-4 text-sm font-medium rounded-md border"
|
||||
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
||||
v-text="link.label"
|
||||
/>
|
||||
|
||||
@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<Popper
|
||||
hover
|
||||
class="h-full w-full"
|
||||
class="w-full h-full"
|
||||
>
|
||||
<div class="flex bg-white text-white">
|
||||
<div class="flex text-white bg-white">
|
||||
<div
|
||||
v-show="stats.used > 0"
|
||||
:style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
class="flex justify-center items-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.used }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-show="stats.pending > 0"
|
||||
:style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
class="flex justify-center items-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.pending }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-show="stats.remaining > 0"
|
||||
:style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
class="flex justify-center items-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.remaining }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="px-4 py-2 bg-white text-md text-gray-900 rounded-md shadow-md flext">
|
||||
<div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md flext">
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
class="inline-block mr-3 w-5 h-3"
|
||||
:style="`background-color: ${colors.used}`"
|
||||
/>
|
||||
Wykorzystane:
|
||||
<span class="font-semibold ml-1">{{ stats.used }}</span>
|
||||
<span class="ml-1 font-semibold">{{ stats.used }}</span>
|
||||
</div>
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
class="inline-block mr-3 w-5 h-3"
|
||||
:style="`background-color: ${colors.pending}`"
|
||||
/>
|
||||
Rozpatrywane:
|
||||
<span class="font-semibold ml-1">{{ stats.pending }}</span>
|
||||
<span class="ml-1 font-semibold">{{ stats.pending }}</span>
|
||||
</div>
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
class="inline-block mr-3 w-5 h-3"
|
||||
:style="`background-color: ${colors.remaining}`"
|
||||
/>
|
||||
Pozostałe:
|
||||
<span class="font-semibold ml-1">{{ stats.remaining }}</span>
|
||||
<span class="ml-1 font-semibold">{{ stats.remaining }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
|
||||
<div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
|
||||
{{ typeInfo.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Dzisiejsze nieobecności
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 sm:px-6">
|
||||
<div class="px-4 border-t border-gray-200 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="absence in absences"
|
||||
:key="absence.user.id"
|
||||
class="py-4 flex"
|
||||
class="flex py-4"
|
||||
>
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="absence.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Wnioski oczekujące na akcje
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
|
||||
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
|
||||
<div class="flow-root mt-6">
|
||||
<ul class="-my-5 divide-y divide-gray-200">
|
||||
<li
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="mt-3 text-sm text-gray-600">
|
||||
<div class="flex">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
class="w-10 h-10 rounded-full"
|
||||
:src="request.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
@ -56,7 +56,7 @@
|
||||
<InertiaLink
|
||||
href="/vacation/requests"
|
||||
:data="{status: 'waiting_for_action'}"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Najbliższe dni wolne
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
|
||||
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="holiday in holidays"
|
||||
:key="holiday.id.id"
|
||||
class="py-4 flex"
|
||||
class="flex py-4"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
@ -30,7 +30,7 @@
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||
Twoje wnioski
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
|
||||
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
|
||||
<div class="flow-root mt-6">
|
||||
<ul class="-my-5 divide-y divide-gray-200">
|
||||
<li
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="/vacation/requests/me"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
|
||||
@ -1,62 +1,62 @@
|
||||
<template>
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="hidden md:block bg-white shadow-md p-4">
|
||||
<section class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="hidden p-4 bg-white shadow-md md:block">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="h-full">
|
||||
<div class="grid grid-cols-2 gap-4 h-full">
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<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="text-md font-medium text-gray-700 truncate">
|
||||
<dt class="font-medium text-gray-700 truncate text-md">
|
||||
Pozostało
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
<dt class="mt-2 text-sm font-medium text-gray-500">
|
||||
Dni do wykorzystania teraz.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<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="text-md font-medium text-gray-700 truncate">
|
||||
<dt class="font-medium text-gray-700 truncate text-md">
|
||||
Dni wykorzystane
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
<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="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<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="text-md font-medium text-gray-500 truncate">
|
||||
<dd class="font-medium text-gray-500 truncate text-md">
|
||||
Rozpatrywane
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
<dt class="mt-2 text-sm font-medium text-gray-500">
|
||||
Dni czekające na akceptację przełożonych.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<div class="py-5 px-4 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.limit }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
<dd class="font-medium text-gray-500 truncate text-md">
|
||||
Limit urlopu
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
<dt class="mt-2 text-sm font-medium text-gray-500">
|
||||
Twój roczny limit urlopu wypoczynkowego.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
|
||||
<div class="col-span-2 py-5 px-4 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.other }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
<dd class="font-medium text-gray-500 truncate text-md">
|
||||
Inne urlopy
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
<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>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class=" bg-white overflow-hidden shadow">
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class=" overflow-hidden bg-white shadow">
|
||||
<div class="p-6 bg-white">
|
||||
<div class="sm:flex sm:justify-between sm:items-center">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
class="mx-auto w-20 h-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Cześć,
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user