From 951ed81e4790ff374f4e43d78a236f117e1d7102 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 12:03:27 +0100
Subject: [PATCH] fix(services): correct archived toggle button highlighting

---
 resources/js/Pages/Services/Index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Pages/Services/Index.vue b/resources/js/Pages/Services/Index.vue
index 1d77494..57949c4 100644
--- a/resources/js/Pages/Services/Index.vue
+++ b/resources/js/Pages/Services/Index.vue
@@ -1,7 +1,7 @@
 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
 import { Head, router } from '@inertiajs/vue3'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps({
     services: {
@@ -20,7 +20,7 @@ const confirmDialog = ref(false)
 const confirmWarnings = ref([])
 const confirmServiceId = ref(null)
 const finalizing = ref(false)
-const showArchived = ref(props.archived)
+const showArchived = computed(() => props.archived)
 
 function formatDate(dateStr) {
     if (!dateStr) return '—'
@@ -254,7 +254,7 @@ function stateIconClass(isDone) {
                             <tbody class="divide-y divide-gray-100 bg-white">
                                 <tr v-for="service in services" :key="service.id" :data-testid="`service-list-row-${service.id}`" class="align-top hover:bg-gray-50/60">
                                     <td class="px-4 py-4">
-                                        <div class="font-medium text-gray-900">{{ service.title }}</div>
+                                        <div class="font-medium text-gray-900" :title="'CTS Event #' + service.cts_event_id">{{ service.title }}</div>
                                         <div class="mt-1 text-xs text-gray-500">{{ formatDate(service.date) }}</div>
                                     </td>