From 21366bd288327b36292d45fe6b1af5afd6e55b10 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Thu, 4 Jun 2026 23:12:46 +0200
Subject: [PATCH] fix(06): WR-09 show error message when audit log fetch fails

Add fetchError ref initialized to null. Clear it at the start of
fetchLog() and set it on catch. Add <p v-else-if="fetchError"> block
in template between loading and empty states so admin users see
"Failed to load audit log. Please try again." instead of the
empty-state message when an API error occurs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/admin/AuditLogTab.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/admin/AuditLogTab.vue b/frontend/src/components/admin/AuditLogTab.vue
index feb5035..6e110c8 100644
--- a/frontend/src/components/admin/AuditLogTab.vue
+++ b/frontend/src/components/admin/AuditLogTab.vue
@@ -84,6 +84,9 @@
       </div>
     </div>
 
+    <!-- Fetch error state -->
+    <p v-else-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
+
     <!-- Empty state -->
     <div v-else-if="entries.length === 0" class="text-center py-12 text-gray-400 text-sm">
       No audit log entries match the selected filters.
@@ -196,6 +199,7 @@ const total = ref(0)
 const page = ref(1)
 const perPage = 50
 const loading = ref(false)
+const fetchError = ref(null)
 const exportingCsv = ref(false)
 const exportError = ref(null)
 
@@ -220,6 +224,7 @@ onMounted(() => {
 
 async function fetchLog() {
   loading.value = true
+  fetchError.value = null
   try {
     const data = await api.adminListAuditLog({
       start: filters.start || undefined,
@@ -233,6 +238,7 @@ async function fetchLog() {
     total.value = data.total ?? entries.value.length
   } catch (e) {
     entries.value = []
+    fetchError.value = 'Failed to load audit log. Please try again.'
   } finally {
     loading.value = false
   }