app/Infrastructure/Http/Controllers/AnnualSummaryController.php

@@ -5,7 +5,6 @@ declare(strict_types=1);
 namespace Toby\Infrastructure\Http\Controllers;
 
 use Illuminate\Http\Request;
-use Illuminate\Support\Carbon;
 use Inertia\Response;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
 use Toby\Eloquent\Models\Holiday;
@@ -18,24 +17,20 @@ class AnnualSummaryController extends Controller
     {
         $yearPeriod = $yearPeriodRetriever->selected();
 
-        $startDate = Carbon::createFromDate($yearPeriod->year)->startOfYear()->startOfWeek();
-        $endDate = Carbon::createFromDate($yearPeriod->year)->endOfYear()->endOfWeek();
-
         $holidays = $yearPeriod->holidays()
-            ->whereBetween("date", [$startDate, $endDate])
             ->get();
 
         $vacations = $request->user()
             ->vacations()
             ->with("vacationRequest.vacations")
-            ->whereBetween("date", [$startDate, $endDate])
+            ->whereBelongsTo($yearPeriod)
             ->approved()
             ->get();
 
         $pendingVacations = $request->user()
             ->vacations()
             ->with("vacationRequest.vacations")
-            ->whereBetween("date", [$startDate, $endDate])
+            ->whereBelongsTo($yearPeriod)
             ->pending()
             ->get();
 

resources/js/Pages/AnnualSummary.vue

@@ -35,7 +35,6 @@
               <Popper
                 v-if="day.isVacation || day.isPendingVacation"
                 open-delay="200"
-                arrow
                 hover
                 offset-distance="0"
               >
@@ -56,7 +55,6 @@
               <Popper
                 v-else-if="day.isHoliday"
                 open-delay="200"
-                arrow
                 hover
                 offset-distance="0"
               >
@@ -68,7 +66,7 @@
                     {{ day.date.day }}
                   </time>
                 </button>
-                <template #popper>
+                <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">
                     {{ holidays[day.date.toISODate()] }}
                   </div>