kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#152 - updated vacation stats

Browse Source
This commit is contained in:
Kamil Niemczycki
2022-07-07 11:49:18 +02:00
parent 62c3c11ebf
commit cbe70315eb
3 changed files with 84 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
resources/js/Shared/Widgets/VacationStats.vue
View File

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