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

#99 - ui changes (#100)

Browse Source 
* #99 - ui changes

* #99 - logo fix

* #99 - tailwind plugin for eslint

* #99 - fix

* #99 - fix

* #99 - fix pagination

* #99 - fix logo

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
2022-03-31 10:12:33 +02:00
committed by GitHub
parent 08421b8a69
commit b49fcadbba
38 changed files with 758 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/Shared/Activity.vue
View File

@@ -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
resources/js/Shared/Layout/AppLayout.vue
View File

@@ -4,8 +4,8 @@
:auth="auth"
:years="years"
/>
<main class="lg:ml-64 flex flex-col flex-1 py-8">
<div class="px-4">
<main class="flex flex-col flex-1 py-8 lg:ml-64">
<div class="lg:px-4">
<slot />
</div>
</main>

2
resources/js/Shared/Layout/GuestLayout.vue
View File

@@ -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>

91
resources/js/Shared/MainMenu.vue
View File

@@ -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,46 +38,50 @@
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">
<InertiaLink href="/">
<div class="flex shrink-0 items-center px-4">
<InertiaLink
href="/"
@click="sidebarOpen = false;"
>
<img
class="h-8 w-auto"
src="/img/logo-white.png"
alt="Workflow"
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-sm leading-6 font-medium rounded-md']"
: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"
:key="item.name"
:href="item.href"
:class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
@click="sidebarOpen = false;"
>
<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>
@@ -86,30 +90,29 @@
</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
class="h-8 w-auto"
src="/img/logo-white.png"
alt="Workflow"
src="/img/logo-white.svg"
class="w-auto h-8"
>
</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"
@@ -118,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>
@@ -127,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">
@@ -149,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>
@@ -166,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
@@ -184,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>
@@ -195,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"
@@ -208,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"
@@ -234,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

14
resources/js/Shared/Pagination.vue
View File

@@ -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"
/>

24
resources/js/Shared/VacationBar.vue
View File

@@ -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>

2
resources/js/Shared/VacationTypeCalendarIcon.vue
View File

@@ -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>

8
resources/js/Shared/Widgets/AbsenceList.vue
View File

@@ -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">

8
resources/js/Shared/Widgets/PendingVacationRequests.vue
View File

@@ -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>

8
resources/js/Shared/Widgets/UpcomingHolidays.vue
View File

@@ -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>

6
resources/js/Shared/Widgets/UserVacationRequests.vue
View File

@@ -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>

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

@@ -1,62 +1,62 @@
<template>
<section class="grid grid-cols-2 gap-4">
<div class="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">
Dni wykorzystane
<dt class="font-medium text-gray-700 truncate text-md">
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-700 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-700 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-700 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>

12
resources/js/Shared/Widgets/Welcome.vue
View File

@@ -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>