Merge branch 'dashboard-calendar-widget' into #152-dashboard

app/Domain/UserVacationStatsRetriever.php

@@ -103,14 +103,6 @@ class UserVacationStatsRetriever
         return $limit ?? 0;
     }
 
-    public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
-    {
-        return $user->vacationLimits()
-            ->whereBelongsTo($yearPeriod)
-            ->first()
-            ?->hasVacation() ?? false;
-    }
-
     protected function getLimitableVacationTypes(): Collection
     {
         $types = VacationType::all();

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -12,11 +12,8 @@ use Toby\Domain\UserVacationStatsRetriever;
 use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
-use Toby\Eloquent\Models\Holiday;
-use Toby\Eloquent\Models\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
-use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;
 
@@ -57,24 +54,7 @@ class DashboardController extends Controller
             ->limit(3)
             ->get();
 
-        $allHolidays = $yearPeriod->holidays;
-
-        $approvedVacations = $request->user()
-            ->vacations()
-            ->with("vacationRequest.vacations")
-            ->whereBelongsTo($yearPeriod)
-            ->approved()
-            ->get();
-
-        $pendingVacations = $request->user()
-            ->vacations()
-            ->with("vacationRequest.vacations")
-            ->whereBelongsTo($yearPeriod)
-            ->pending()
-            ->get();
-
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
-        $hasLimit = $vacationStatsRetriever->hasVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
         $homeOffice = $vacationStatsRetriever->getHomeOfficeDays($user, $yearPeriod);
@@ -86,21 +66,7 @@ class DashboardController extends Controller
             "remoteDays" => VacationResource::collection($remoteDays),
             "vacationRequests" => VacationRequestResource::collection($vacationRequests),
             "holidays" => HolidayResource::collection($holidays),
-            "allHolidays" => $allHolidays->mapWithKeys(
-                fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
-            ),
-            "approvedVacations" => $approvedVacations->mapWithKeys(
-                fn(Vacation $vacation): array => [
-                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
-                ],
-            ),
-            "pendingVacations" => $pendingVacations->mapWithKeys(
-                fn(Vacation $vacation): array => [
-                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
-                ],
-            ),
             "stats" => [
-                "hasLimit" => $hasLimit,
                 "limit" => $limit,
                 "remaining" => $remaining,
                 "used" => $used,

composer.json

@@ -9,7 +9,7 @@
         "ext-pdo": "*",
         "ext-redis": "*",
         "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^2.0",
+        "barryvdh/laravel-dompdf": "^1.0",
         "fruitcake/laravel-cors": "^3.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "inertiajs/inertia-laravel": "^0.6.2",

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    image: nginx:1.23-alpine
+    image: nginx:1.21-alpine
     container_name: toby-web
     working_dir: /application
     volumes:
@@ -76,7 +76,7 @@ services:
     restart: unless-stopped
 
   node:
-    image: node:18.4.0-alpine3.16
+    image: node:18.1.0-alpine3.14
     container_name: toby-node
     working_dir: /application
     volumes:

package.json

@@ -13,7 +13,7 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.6.5",
+        "@headlessui/vue": "^1.6.4",
         "@heroicons/vue": "^1.0.6",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.37",
+        "@vue/compiler-sfc": "^3.2.31",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27.2",
-        "echarts": "^5.3.3",
+        "echarts": "^5.3.2",
         "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.49",
+        "laravel-mix": "^6.0.44",
         "lodash": "^4.17.21",
-        "luxon": "^2.4.0",
+        "luxon": "^2.3.2",
         "postcss": "^8.4.14",
-        "tailwindcss": "^3.1.4",
+        "tailwindcss": "^3.0.24",
-        "vue": "3.2.37",
+        "vue": "3.2.21",
-        "vue-echarts": "^6.1.0",
+        "vue-echarts": "^6.0.2",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.1.1",
+        "vue-material-design-icons": "^5.0.0",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.19.0",
+        "eslint": "^8.16.0",
-        "eslint-plugin-vue": "^9.1.1"
+        "eslint-plugin-vue": "^9.1.0"
     }
 }

resources/js/Pages/Dashboard.vue

@@ -3,11 +3,10 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
-      <VacationCalendar
+      <VacationCalendar />
-        :holidays="allHolidays"
+      <VacationStats :stats="stats" />
-        :approved-vacations="approvedVacations"
+    </div>
-        :pending-vacations="pendingVacations"
+    <div class="grid grid-cols-1 gap-4">
-      />
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -16,13 +15,12 @@
         v-else
         :requests="vacationRequests.data"
       />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
-      <VacationStats :stats="stats" />
       <AbsenceList
+        v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"
       />
       <HomeOfficeList
+        v-if="years.current.year === years.selected.year && remoteDays.data.length"
         :remote-days="remoteDays.data"
       />
       <UpcomingHolidays
@@ -52,8 +50,5 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
-  allHolidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
 })
 </script>

resources/js/Shared/Feedbacks/EmptyState.vue

@@ -8,10 +8,7 @@
         No search result
       </slot>
     </h3>
-    <p
+    <p class="text-sm">
-      v-if="showDescription"
-      class="text-sm"
-    >
       <slot name="text">
         Try a different search query
       </slot>
@@ -21,11 +18,4 @@
 
 <script setup>
 import { SearchIcon } from '@heroicons/vue/solid'
-
-defineProps({
-  showDescription: {
-    type: Boolean,
-    default: true,
-  },
-})
 </script>

resources/js/Shared/Widgets/AbsenceList.vue

@@ -6,10 +6,7 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
+      <ul class="divide-y divide-gray-200">
-        v-if="absences.length"
-        class="divide-y divide-gray-200"
-      >
         <li
           v-for="absence in absences"
           :key="absence.user.id"
@@ -29,25 +26,11 @@
           </div>
         </li>
       </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <SunIcon class="mx-auto w-12 h-12" />
-        </template>
-        <template #title>
-          Brak nieobecności
-        </template>
-      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import { SunIcon } from '@heroicons/vue/solid'
-
 defineProps({
   absences: Object,
 })

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -1,120 +0,0 @@
-<template>
-  <div
-    class="box-border"
-    :class="[
-      day.isCurrentMonth ? {
-        'bg-red-100': day.isWeekend,
-        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
-        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
-      } : [
-        'bg-gray-50 text-gray-500',
-        {
-          'bg-red-50': day.isWeekend
-        }
-      ],
-      day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
-    ]"
-  >
-    <Popper
-      v-if="day.isHoliday"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <time
-        :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-      >
-        {{ day.dayNumber }}
-      </time>
-      <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ day.getHolidayInfo }}
-        </div>
-      </template>
-    </Popper>
-    <Popper
-      v-else-if="day.isVacation || day.isPendingVacation"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <div class="flex justify-between">
-        <time
-          :datetime="day.date"
-          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-        >
-          {{ day.dayNumber }}
-        </time>
-        <div class="hidden md:inline-block">
-          <VacationIcon
-            :type="day.getVacationType.value"
-          />
-        </div>
-      </div>
-      <template #content>
-        <VacationPopup :vacation="day.getVacationInfo" />
-      </template>
-    </Popper>
-    <div
-      v-else-if="day.isWeekend"
-      class="text-red-800"
-    >
-      <time
-        :datetime="day.date"
-        class="cursor-default"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
-      >
-        {{ day.dayNumber }}
-      </time>
-    </div>
-    <InertiaLink
-      v-else
-      href="/vacation/requests/create"
-      :data="{ 'from_date': day.date }"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <time
-        :datetime="day.date"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
-      >
-        {{ day.dayNumber }}
-      </time>
-    </InertiaLink>
-  </div>
-</template>
-
-<script setup>
-import Popper from 'vue3-popper'
-import { defineProps, ref } from 'vue'
-import VacationPopup from '@/Shared/VacationPopup'
-import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
-
-defineProps({
-  day: {
-    type: Object,
-    required: true,
-  },
-})
-
-const isActive = ref(false)
-
-function onMouseover() {
-  if (!isActive.value)
-    isActive.value = true
-}
-
-function onMouseleave() {
-  if (isActive.value)
-    isActive.value = false
-}
-</script>

resources/js/Shared/Widgets/HomeOfficeList.vue

@@ -6,10 +6,7 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
+      <ul class="divide-y divide-gray-200">
-        v-if="remoteDays.length"
-        class="divide-y divide-gray-200"
-      >
         <li
           v-for="day in remoteDays"
           :key="day.user.id"
@@ -29,28 +26,11 @@
           </div>
         </li>
       </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <HomeCityIcon
-            class="flex justify-center"
-            size="48"
-          />
-        </template>
-        <template #title>
-          Nikt nie pracuje z domu
-        </template>
-      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import HomeCityIcon from 'vue-material-design-icons/HomeCity'
-
 defineProps({
   remoteDays: Object,
 })

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -7,10 +7,10 @@
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
           <button
+            v-if="calendarState.isPrevious"
             type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            @click="toLast"
-            @click="toPrevious"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -21,18 +21,16 @@
           <button
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
-            Dzisiaj
+            Dziś
           </button>
-          <span
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
-            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-          />
           <button
+            v-if="calendarState.isNext"
             type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            :disabled="!calendarState.isNext"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -51,8 +49,7 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          {{ calendarState.viewMode.details.name }}
-          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -91,45 +88,51 @@
         </transition>
       </Menu>
     </div>
-    <div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
+    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
       <div
         v-if="calendarState.viewMode.isMonth"
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
-          Pon
+          Pn
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Wt
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Śr
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
-          Czw
+          Cz
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Pt
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
-          Sob
+          Sb
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
-          Ndz
+          Nd
         </div>
       </div>
-      <div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
         <div
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <DayComponent
+          <div
             v-for="(day, index) in days"
             :key="index"
-            :day="day"
+            class="flex flex-col"
-            class="flex flex-col relative py-3 px-3"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
-            :class="{ 'day': calendarState.viewMode.isWeek }"
+          >
-          />
+            <time
+              :datetime="day.date"
+              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+            >
+              {{ day.date.split('-').pop().replace(/^0/, '') }}
+            </time>
+          </div>
         </div>
       </div>
     </div>
@@ -141,33 +144,21 @@ import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
-import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
-import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
-
-const props = defineProps({
-  holidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
-})
 
 let days = ref([])
-
+const months = useMonthInfo().getMonths()
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, week: weekNumber }
 }
+const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
 
-const months = useMonthInfo().getMonths()
-const { findType } = useVacationTypeInfo()
-const selectedYear = useCurrentYearPeriodInfo().year.value
-const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
-
 const calendar = {
-  viewMode: ref(localStorage.getItem('calendarViewMode') ?? 'week'),
+  viewMode: ref('week'),
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
@@ -184,7 +175,7 @@ const calendarState = reactive({
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
   isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })
 
 const customCalendar = {
@@ -230,23 +221,11 @@ const customCalendar = {
     return days
   },
   prepareDay(day) {
-    const isCurrentMonth = isInCurrentMonth(day)
-    const startDay = {
-      date: day.toISODate(),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
-      isHoliday: isHoliday(day),
-    }
-
     return {
-      ...startDay,
+      date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth,
+      isCurrentMonth: isInCurrentMonth(day),
       isToday: isToday(day),
-      isWeekend: isWeekend(day),
-      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
-      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
-      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
   },
 }
@@ -257,23 +236,19 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toPrevious() {
+function toLast() {
-  if (calendarState.isPrevious) {
   if (calendar.viewMode.value === 'week')
     minusWeek()
   else
     minusMonth()
 }
-}
 
 function toNext() {
-  if (calendarState.isNext) {
   if (calendar.viewMode.value === 'week')
     addWeek()
   else
     addMonth()
 }
-}
 
 function resetCalendar(config = {}) {
   const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
@@ -281,7 +256,7 @@ function resetCalendar(config = {}) {
 
   calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
   calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
-  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1
 }
 
 function isUndefined(value) {
@@ -332,53 +307,24 @@ function goToToday() {
 
 function updateViewMode(type) {
   if (type === 'month')
-    resetCalendar({ week: 0 })
+    resetCalendar({ week: 1 })
   else
     resetCalendar()
   calendar.viewMode.value = type
-  localStorage.setItem('calendarViewMode', type)
 }
 
 function isInCurrentMonth(date) {
   return calendar.currents.month === date.month
 }
 
-function isWeekend(date) {
-  return date.weekday === 6 || date.weekday === 7
-}
-
 function isToday(date) {
   return date.toISODate() === DateTime.local().toISODate()
 }
-
-function isHoliday(date) {
-  return props.holidays[date.toISODate()] !== undefined
-}
-
-function getHolidayInfo(day) {
-  return props.holidays[day.date]
-}
-
-function isVacation(date) {
-  return props.approvedVacations[date.toISODate()] !== undefined
-}
-
-function isPendingVacation(date) {
-  return props.pendingVacations[date.toISODate()] !== undefined
-}
-
-function getVacationType(day) {
-  return findType(getVacationInfo(day).type)
-}
-
-function getVacationInfo(day) {
-  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
-}
 </script>
 
 <style lang="css">
 .day:nth-of-type(7n - 6):before {
-  content: "Pon";
+  content: "Pn";
 }
 
 .day:nth-of-type(7n - 5):before {
@@ -390,18 +336,27 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 3):before {
-  content: "Czw";
+  content: "Cz";
 }
 
 .day:nth-of-type(7n - 2):before {
   content: "Pt";
 }
 
+.day:nth-of-type(7n - 1):before,
+.day:nth-of-type(7n):before {
+  color: #991b1b;
+}
+
 .day:nth-of-type(7n - 1):before {
-  content: "Sob";
+  content: "Sb";
 }
 
 .day:nth-of-type(7n):before {
-  content: "Ndz";
+  content: "Nd";
+}
+
+.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
+  background-color: #fee2e2;
 }
 </style>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,9 +1,10 @@
 <template>
-  <section>
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
-    <div
+    <div class="hidden p-4 bg-white shadow-md md:block">
-      v-if="stats.hasLimit"
+      <VacationChart :stats="stats" />
-      class="grid grid-cols-2 gap-2 h-full"
+    </div>
-    >
+    <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 }}
@@ -48,11 +49,6 @@
             Twój roczny limit urlopu wypoczynkowego.
           </dt>
         </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 }}
@@ -76,10 +72,13 @@
           </dt>
         </div>
       </div>
+    </div>
   </section>
 </template>
 
 <script setup>
+import VacationChart from '@/Shared/VacationChart'
+
 defineProps({
   stats: Object,
 })