#72 - UX improvement (#81)

* #72 - UX improvement

* #72 - wip

* #72 - UX improvement fix

Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>

app/Infrastructure/Http/Controllers/VacationRequestController.php

@@ -43,8 +43,32 @@ class VacationRequestController extends Controller
             ->states(VacationRequestStatesRetriever::filterByStatusGroup($status, $request->user()))
             ->paginate();
 
+        $pending = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::pendingStates())
+            ->count();
+
+        $success = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::successStates())
+            ->count();
+
+        $failed = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::failedStates())
+            ->count();
+
         return inertia("VacationRequest/Index", [
             "requests" => VacationRequestResource::collection($vacationRequests),
+            "stats" => [
+                "all" => $pending + $success + $failed,
+                "pending" => $pending,
+                "success" => $success,
+                "failed" => $failed,
+            ],
             "filters" => [
                 "status" => $status,
             ],

resources/js/Pages/VacationRequest/Index.vue

@@ -22,9 +22,15 @@
           v-for="(status, index) in statuses"
           :key="index"
           :data="{ status: status.value }"
-          :class="[status.value === filters.status ? 'text-gray-900' : '', 'text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10']"
+          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
         >
           <span>{{ status.name }}</span>
+          <span
+            v-if="stats[status.value]"
+            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
+          >
+            {{ stats[status.value] }}
+          </span>
           <span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
         </InertiaLink>
       </nav>
@@ -210,6 +216,15 @@ export default {
       type: Object,
       default: () => null,
     },
+    stats: {
+      type: Object,
+      default: () => ({
+        all: 0,
+        pending: 0,
+        success: 0,
+        failed: 0,
+      }),
+    },
     filters: {
       type: Object,
       default: () => null,