From 405a81569636d1d66c37934952e0bc1fbbc7306f Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 18:32:12 +0000
Subject: [PATCH 1/6] feat: add loading spinner to refresh buttons

- Add spinner animation to refresh buttons in BaseCard and all admin views
- Swap button order in BaseCard footer (Details left, Refresh right)
- Use isFetching in AutomaticGroupsAdmin for better loading state detection
- Consistent spinner styling across all components

Co-authored-by: Ona <no-reply@ona.com>
---
 .../automatic-groups/AutomaticGroupsAdmin.vue | 28 +++++++++++++++++--
 src/components/common/BaseCard.vue            | 28 +++++++++++++------
 .../ExpiringAppointmentsAdmin.vue             | 21 ++++++++++++++
 src/components/tags/TagsAdmin.vue             | 21 ++++++++++++++
 4 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/src/components/automatic-groups/AutomaticGroupsAdmin.vue b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
index 43a384e..5c7dc1a 100644
--- a/src/components/automatic-groups/AutomaticGroupsAdmin.vue
+++ b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
@@ -23,6 +23,7 @@
         Suche zurücksetzen
       </button>
       <button @click="refreshGroups" class="ct-btn ct-btn-primary refresh-btn" :disabled="loading">
+        <span v-if="loading" class="btn-spinner"></span>
         {{ loading ? 'Lädt...' : 'Aktualisieren' }}
       </button>
     </template>
@@ -75,7 +76,8 @@ defineProps<{
 }>()
 
 // Use TanStack Query composable for data management
-const { data: groups, isLoading: loading, error, refetch } = useAutomaticGroups()
+const { data: groups, isLoading, isFetching, error, refetch } = useAutomaticGroups()
+const loading = computed(() => isLoading.value || isFetching.value)
 
 // AdminTable reference
 const adminTableRef = ref()
@@ -193,8 +195,8 @@ const formatDate = (dateString: string | null) => {
 // URL generation is now handled by the churchtools service
 
 // Data loading
-const refreshGroups = () => {
-  refetch()
+const refreshGroups = async () => {
+  await refetch()
 }
 
 const clearSearch = () => {
@@ -304,4 +306,24 @@ const clearSearch = () => {
   padding: 0.5rem 1rem;
   font-size: 0.85rem;
 }
+
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/src/components/common/BaseCard.vue b/src/components/common/BaseCard.vue
index 0d2158f..d4a0528 100644
--- a/src/components/common/BaseCard.vue
+++ b/src/components/common/BaseCard.vue
@@ -81,14 +81,6 @@
           <template v-else>&nbsp;</template>
         </span>
         <div class="footer-actions">
-          <button
-            type="button"
-            @click="$emit('refresh')"
-            class="ct-btn ct-btn-primary ct-btn-sm"
-            :disabled="isLoading"
-          >
-            {{ isLoading ? refreshingText : refreshText }}
-          </button>
           <slot name="actions">
             <button
               type="button"
@@ -98,6 +90,15 @@
               {{ detailsText }}
             </button>
           </slot>
+          <button
+            type="button"
+            @click="$emit('refresh')"
+            class="ct-btn ct-btn-primary ct-btn-sm"
+            :disabled="isLoading"
+          >
+            <span v-if="isLoading" class="btn-spinner"></span>
+            {{ isLoading ? refreshingText : refreshText }}
+          </button>
         </div>
       </div>
     </div>
@@ -415,6 +416,17 @@ const getStatusClass = (type?: string) => {
   cursor: not-allowed;
 }
 
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
 .ct-btn-icon {
   background: none;
   border: none;
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 360321d..ef2702c 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -70,6 +70,7 @@
         Filter löschen
       </button>
       <button @click="refreshData" class="ct-btn ct-btn-primary refresh-btn" :disabled="isLoading">
+        <span v-if="isLoading" class="btn-spinner"></span>
         {{ isLoading ? 'Lädt...' : 'Aktualisieren' }}
       </button>
     </template>
@@ -548,4 +549,24 @@ onMounted(() => {
   border-color: var(--ct-primary, #3498db);
   box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
 }
+
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/src/components/tags/TagsAdmin.vue b/src/components/tags/TagsAdmin.vue
index 4a9435c..8ab8323 100644
--- a/src/components/tags/TagsAdmin.vue
+++ b/src/components/tags/TagsAdmin.vue
@@ -124,6 +124,7 @@
           class="ct-btn ct-btn-primary"
           :disabled="isLoading"
         >
+          <span v-if="isLoading" class="btn-spinner"></span>
           {{ isLoading ? 'Laden...' : 'Aktualisieren' }}
         </button>
         <button type="button" @click="showCreateModal" class="ct-btn ct-btn-success">
@@ -1149,4 +1150,24 @@ onMounted(() => {
     flex-direction: column;
   }
 }
+
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>

From 3d172079b1e6542c07624550da4fca0959ecb141 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 18:45:46 +0000
Subject: [PATCH 2/6] feat: add refresh button with spinner to logger admin
 panels

- Add refresh button with loading spinner to LoggerSummaryAdminBulk
- Add spinner to LoggerSummaryAdmin for consistency
- Fix button styling to match other admin panels
- Use isFetching for better loading state detection in bulk cache
- Change default days filter from 3 to 1 in bulk view

Co-authored-by: Ona <no-reply@ona.com>
---
 .../loggerSummary/LoggerSummaryAdmin.vue      | 21 ++++++
 .../loggerSummary/LoggerSummaryAdminBulk.vue  | 75 ++++++++++++++++---
 2 files changed, 87 insertions(+), 9 deletions(-)

diff --git a/src/components/loggerSummary/LoggerSummaryAdmin.vue b/src/components/loggerSummary/LoggerSummaryAdmin.vue
index 519c2b6..ce24d71 100644
--- a/src/components/loggerSummary/LoggerSummaryAdmin.vue
+++ b/src/components/loggerSummary/LoggerSummaryAdmin.vue
@@ -38,6 +38,7 @@
           Filter zurücksetzen
         </button>
         <button @click="refreshLogs" class="ct-btn ct-btn-primary refresh-btn" :disabled="loading">
+          <span v-if="loading" class="btn-spinner"></span>
           {{ loading ? 'Lädt...' : 'Aktualisieren' }}
         </button>
       </div>
@@ -781,4 +782,24 @@ onMounted(() => {
   border-color: #3498db !important;
   color: white !important;
 }
+
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/src/components/loggerSummary/LoggerSummaryAdminBulk.vue b/src/components/loggerSummary/LoggerSummaryAdminBulk.vue
index 36a6874..3653bc7 100644
--- a/src/components/loggerSummary/LoggerSummaryAdminBulk.vue
+++ b/src/components/loggerSummary/LoggerSummaryAdminBulk.vue
@@ -44,6 +44,11 @@
             </span>
           </span>
         </div>
+
+        <button @click="refetch" class="ct-btn ct-btn-primary refresh-btn" :disabled="isLoading">
+          <span v-if="isLoading" class="btn-spinner"></span>
+          {{ isLoading ? 'Lädt...' : 'Aktualisieren' }}
+        </button>
       </div>
     </template>
 
@@ -192,7 +197,7 @@ defineProps<{
 const { showInfo, showWarning } = useToast()
 
 // State
-const selectedDays = ref(3)
+const selectedDays = ref(1)
 const selectedCategory = ref('')
 const searchTerm = ref('')
 
@@ -200,7 +205,7 @@ const searchTerm = ref('')
 const {
   processedLogs: allProcessedLogs,
   statistics,
-  isLoading,
+  isLoading: isInitialLoading,
   isFetching,
   error,
   refetch,
@@ -209,6 +214,9 @@ const {
   limitReason,
 } = useLoggerBulkCache(selectedDays)
 
+// Combine loading states for better UX
+const isLoading = computed(() => isInitialLoading.value || isFetching.value)
+
 // Watch for limitation and show toast
 watch(
   [wasLimited, limitReason],
@@ -586,18 +594,47 @@ watch(
   color: var(--color-text-secondary);
 }
 
+/* Button styles */
+.ct-btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  text-decoration: none;
+}
+
+.ct-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .ct-btn-primary {
-  background: transparent;
-  border: 1px solid #3498db;
-  color: #3498db;
+  background-color: var(--ct-primary, #3498db);
+  color: white;
 }
 
-.ct-btn-primary:hover {
-  background: #3498db;
-  border-color: #3498db;
+.ct-btn-primary:hover:not(:disabled) {
+  background-color: var(--ct-primary-dark, #2980b9);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.ct-btn-secondary {
+  background-color: var(--ct-secondary, #6c757d);
   color: white;
+}
+
+.ct-btn-secondary:hover:not(:disabled) {
+  background-color: var(--ct-secondary-dark, #5a6268);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .ct-btn-primary-outline {
@@ -622,4 +659,24 @@ watch(
     margin-top: 8px;
   }
 }
+
+.btn-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>

From ec9c33a93dce06c46207e3385eb894b7748784cc Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 18:56:27 +0000
Subject: [PATCH 3/6] refactor: remove unused LoggerSummaryAdmin component

- Remove LoggerSummaryAdmin.vue (legacy version, not used in production)
- Remove unused import from App.vue
- LoggerSummaryAdminBulk is the active version with better caching
- Keep useLoggerSummary.ts as it exports types used by useLoggerBulkCache

Co-authored-by: Ona <no-reply@ona.com>
---
 src/App.vue                                   |   1 -
 .../loggerSummary/LoggerSummaryAdmin.vue      | 805 ------------------
 2 files changed, 806 deletions(-)
 delete mode 100644 src/components/loggerSummary/LoggerSummaryAdmin.vue

diff --git a/src/App.vue b/src/App.vue
index e796336..be92c3c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,6 @@ import TagsAdmin from './components/tags/TagsAdmin.vue'
 import BeispielCard from './components/beispiel/BeispielCard.vue'
 import ColorPickerExample from './components/common/ColorPickerExample.vue'
 import LoggerSummaryCard from './components/loggerSummary/LoggerSummaryCard.vue'
-import LoggerSummaryAdmin from './components/loggerSummary/LoggerSummaryAdmin.vue'
 import LoggerSummaryAdminBulk from './components/loggerSummary/LoggerSummaryAdminBulk.vue'
 import Toast from './components/common/Toast.vue'
 
diff --git a/src/components/loggerSummary/LoggerSummaryAdmin.vue b/src/components/loggerSummary/LoggerSummaryAdmin.vue
deleted file mode 100644
index ce24d71..0000000
--- a/src/components/loggerSummary/LoggerSummaryAdmin.vue
+++ /dev/null
@@ -1,805 +0,0 @@
-<template>
-  <AdminTable
-    ref="adminTableRef"
-    :data="filteredLogs"
-    :loading="loading"
-    :error="error"
-    :columns="tableColumns"
-    row-key="id"
-    title="Logger System - Admin Panel"
-    description="Überwachung und Verwaltung aller Log-Einträge"
-    searchable
-    search-placeholder="Log-Einträge durchsuchen..."
-    :search-fields="['message', 'source', 'userId', 'details']"
-    default-sort-field="timestamp"
-    default-sort-order="desc"
-    loading-text="Lade Log-Einträge..."
-    empty-text="Keine Log-Einträge gefunden."
-    @retry="refreshLogs"
-    @reload="refreshLogs"
-  >
-    <!-- Custom Actions -->
-    <template #actions>
-      <div class="admin-actions">
-        <select v-model="selectedDays" @change="changeDaysFilter" class="ct-select">
-          <option value="1">Letzter Tag</option>
-          <option value="3">Letzte 3 Tage</option>
-          <option value="7">Letzte 7 Tage</option>
-          <option value="14">Letzte 14 Tage</option>
-          <option value="30">Letzter Monat</option>
-        </select>
-        <select v-model="selectedCategory" @change="filterByCategory" class="ct-select">
-          <option value="">Alle Kategorien</option>
-          <option v-for="category in availableCategories" :key="category" :value="category">
-            {{ getCategoryDisplayName(category) }}
-          </option>
-        </select>
-        <button @click="resetFilters" class="ct-btn ct-btn-secondary" :disabled="loading">
-          Filter zurücksetzen
-        </button>
-        <button @click="refreshLogs" class="ct-btn ct-btn-primary refresh-btn" :disabled="loading">
-          <span v-if="loading" class="btn-spinner"></span>
-          {{ loading ? 'Lädt...' : 'Aktualisieren' }}
-        </button>
-      </div>
-    </template>
-
-    <!-- Custom Cell Rendering -->
-    <template #cell-level="{ item }">
-      <span class="log-level-badge" :class="getCategoryCssClass(item.category)">
-        <span class="icon">{{ getCategoryIcon(item.category) }}</span>
-      </span>
-    </template>
-
-    <template #cell-category="{ item }">
-      <span class="category-label">{{ getCategoryDisplayName(item.category) }}</span>
-    </template>
-
-    <template #cell-message="{ item }">
-      <div class="log-message">
-        <div class="message-text">{{ item.message }}</div>
-        <div v-if="item.userId || item.details" class="message-details">
-          <small v-if="item.userId">Benutzer-ID: {{ item.userId }}</small>
-          <small v-if="item.details">{{ item.details }}</small>
-        </div>
-      </div>
-    </template>
-
-    <template #cell-timestamp="{ item }">
-      {{ formatTimestamp(item.timestamp) }}
-    </template>
-
-    <template #cell-source="{ item }">
-      <code class="source-code">{{ item.source }}</code>
-    </template>
-
-    <template #cell-actions="{ item }">
-      <div class="row-actions">
-        <button
-          @click="viewDetails(item)"
-          class="ct-btn ct-btn-sm ct-btn-outline ct-btn-primary-outline"
-          title="Details"
-        >
-          Details
-        </button>
-      </div>
-    </template>
-  </AdminTable>
-
-  <!-- Log Details Modal -->
-  <div v-if="selectedLog" class="modal-overlay" @click="closeDetails">
-    <div class="modal-content" @click.stop>
-      <div class="modal-header">
-        <h3>Log Details</h3>
-        <button @click="closeDetails" class="modal-close">×</button>
-      </div>
-      <div class="modal-body">
-        <div class="log-detail-item">
-          <strong>Kategorie:</strong>
-          <span class="category-detail">
-            <span class="log-level-badge" :class="getCategoryCssClass(selectedLog.category)">
-              <span class="icon">{{ getCategoryIcon(selectedLog.category) }}</span>
-            </span>
-            <span class="category-text">{{ getCategoryDisplayName(selectedLog.category) }}</span>
-          </span>
-        </div>
-        <div class="log-detail-item">
-          <strong>Zeitstempel:</strong>
-          <span>{{ formatTimestamp(selectedLog.timestamp) }}</span>
-        </div>
-        <div class="log-detail-item">
-          <strong>Quelle:</strong>
-          <code>{{ selectedLog.source }}</code>
-        </div>
-        <div class="log-detail-item">
-          <strong>Nachricht:</strong>
-          <p>{{ selectedLog.message }}</p>
-        </div>
-        <div class="log-detail-item">
-          <strong>Akteur:</strong>
-          <span>{{ getActorDisplay(selectedLog) }}</span>
-        </div>
-        <div v-if="selectedLog.simulatePersonId" class="log-detail-item">
-          <strong>Simuliert von:</strong>
-          <span>Person ID: {{ selectedLog.simulatePersonId }}</span>
-        </div>
-        <div v-if="selectedLog.domainType" class="log-detail-item">
-          <strong>Domain-Typ:</strong>
-          <span>{{ selectedLog.domainType }}</span>
-        </div>
-        <div v-if="selectedLog.domainId" class="log-detail-item">
-          <strong>Domain-ID:</strong>
-          <span>{{ selectedLog.domainId }}</span>
-        </div>
-        <div class="log-detail-item">
-          <strong>Original-Level:</strong>
-          <span>{{ selectedLog.originalLevel }}</span>
-        </div>
-        <div v-if="selectedLog.details" class="log-detail-item">
-          <strong>Details:</strong>
-          <pre>{{ selectedLog.details }}</pre>
-        </div>
-        <div v-if="selectedLog.stackTrace" class="log-detail-item">
-          <strong>Stack Trace:</strong>
-          <pre class="stack-trace">{{ selectedLog.stackTrace }}</pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import AdminTable from '../common/AdminTable.vue'
-import {
-  useLoggerSummary,
-  type ProcessedLogEntry,
-  LogCategory,
-  getCategoryDisplayName,
-  getCategoryIcon,
-  getCategoryCssClass,
-  getAllCategories,
-} from './useLoggerSummary'
-import { useLoggerSummary as useLoggerSummaryQuery } from '@/composables/useLoggerSummaryQuery'
-
-// Use the ProcessedLogEntry type from the composable
-type LogEntry = ProcessedLogEntry
-
-// Props
-defineProps<{
-  module: {
-    id: string
-    title: string
-    icon: string
-    description: string
-  }
-}>()
-
-// Use composable
-const {
-  loading,
-  error,
-  logs: logEntries,
-  loadDetailedLogs,
-  filterLogsByCategory,
-  filterLogsBySearch,
-} = useLoggerSummary()
-
-// AdminTable reference
-const adminTableRef = ref()
-
-// Local state
-const selectedCategory = ref('')
-const selectedDays = ref(3)
-const selectedLog = ref<LogEntry | null>(null)
-
-// Available categories for filter dropdown
-const availableCategories = getAllCategories()
-
-// Table configuration
-const tableColumns = [
-  {
-    key: 'level',
-    label: 'Typ',
-    sortable: true,
-    width: 35,
-    resizable: false,
-    cellSlot: 'cell-level',
-  },
-  {
-    key: 'category',
-    label: 'Kategorie',
-    sortable: true,
-    width: 140,
-    resizable: true,
-    cellSlot: 'cell-category',
-  },
-  {
-    key: 'timestamp',
-    label: 'Zeitstempel',
-    sortable: true,
-    width: 160,
-    resizable: true,
-    cellSlot: 'cell-timestamp',
-  },
-  {
-    key: 'source',
-    label: 'Quelle',
-    sortable: true,
-    width: 120,
-    resizable: true,
-    cellSlot: 'cell-source',
-  },
-  {
-    key: 'message',
-    label: 'Nachricht',
-    sortable: true,
-    width: 400,
-    resizable: true,
-    cellSlot: 'cell-message',
-  },
-  {
-    key: 'actions',
-    label: 'Aktionen',
-    sortable: false,
-    width: 120,
-    resizable: false,
-    cellSlot: 'cell-actions',
-  },
-]
-
-// Computed
-const filteredLogs = computed(() => {
-  let filtered = logEntries.value
-
-  // Apply category filter first
-  if (selectedCategory.value) {
-    filtered = filterLogsByCategory(filtered, selectedCategory.value)
-  }
-
-  return filtered
-})
-
-// Methods - now using centralized functions from useLoggerSummary
-// getCategoryDisplayName, getCategoryIcon, getCategoryCssClass are imported
-
-const getActorDisplay = (log: LogEntry) => {
-  if (log.personId === -1) {
-    return 'System'
-  } else if (log.personId) {
-    return `Person ID: ${log.personId}`
-  } else {
-    return 'Unbekannt'
-  }
-}
-
-const formatTimestamp = (timestamp: string) => {
-  return new Date(timestamp).toLocaleString('de-DE', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-}
-
-// generateMockLogs function removed - using composable instead
-
-const refreshLogs = async () => {
-  await loadDetailedLogs(selectedDays.value, {
-    category: selectedCategory.value,
-  })
-}
-
-const filterByCategory = async () => {
-  // Reload logs with new category filter
-  await refreshLogs()
-}
-
-const changeDaysFilter = async () => {
-  // Reload logs with new time range
-  await refreshLogs()
-}
-
-const resetFilters = async () => {
-  // Reset all filters to default values
-  selectedCategory.value = ''
-  selectedDays.value = 3
-
-  // Reset AdminTable search
-  if (adminTableRef.value?.clearSearch) {
-    adminTableRef.value.clearSearch()
-  }
-
-  // Reload logs with default settings
-  await refreshLogs()
-}
-
-const viewDetails = (log: LogEntry) => {
-  selectedLog.value = log
-}
-
-const closeDetails = () => {
-  selectedLog.value = null
-}
-
-// Initialize
-onMounted(() => {
-  refreshLogs()
-})
-</script>
-
-<style scoped>
-.admin-actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.ct-select {
-  padding: 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  background: var(--color-background);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-}
-
-.log-level-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-weight: 600;
-  width: 32px;
-  height: 32px;
-  text-align: center;
-}
-
-.log-level-badge .icon {
-  font-size: 1.2em;
-}
-
-.category-success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-  border: 1px solid rgba(40, 167, 69, 0.2);
-}
-
-.category-info {
-  background-color: rgba(52, 152, 219, 0.1);
-  color: #3498db;
-  border: 1px solid rgba(52, 152, 219, 0.2);
-}
-
-.category-warning {
-  background-color: rgba(243, 156, 18, 0.1);
-  color: #f39c12;
-  border: 1px solid rgba(243, 156, 18, 0.2);
-}
-
-.category-error {
-  background-color: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
-  border: 1px solid rgba(220, 53, 69, 0.2);
-}
-
-.category-neutral {
-  background-color: rgba(108, 117, 125, 0.1);
-  color: #6c757d;
-  border: 1px solid rgba(108, 117, 125, 0.2);
-}
-
-.category-label {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.log-message {
-  max-width: calc(var(--spacing-xxl) * 13);
-}
-
-.message-text {
-  font-weight: var(--font-weight-medium);
-  margin-bottom: var(--spacing-xs);
-}
-
-.message-details {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-xs);
-}
-
-.source-code {
-  background-color: var(--color-background);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border-radius: var(--border-radius-sm);
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: var(--font-size-xs);
-}
-
-.row-actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  justify-content: center;
-}
-
-/* ChurchTools Button Styles */
-.ct-btn {
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  text-decoration: none;
-}
-
-.ct-btn-sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.8rem;
-}
-
-.ct-btn-outline {
-  background: transparent;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-primary);
-}
-
-.ct-btn-outline:hover {
-  background: var(--color-background);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Action Button Styles */
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--spacing-xl) + var(--spacing-sm));
-  height: calc(var(--spacing-xl) + var(--spacing-sm));
-  border: var(--spacing-xs) solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  background: var(--color-background-card);
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: var(--transition-base);
-  padding: 0;
-  text-decoration: none;
-}
-
-.action-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-background);
-  color: var(--color-primary);
-  transform: translateY(calc(-1 * var(--spacing-xs)));
-  box-shadow: var(--shadow-sm);
-}
-
-.action-btn:active {
-  transform: translateY(0);
-  box-shadow: none;
-}
-
-.action-btn-view {
-  border-color: var(--color-info);
-  color: var(--color-info);
-}
-
-.action-btn-view:hover {
-  background: var(--color-info);
-  color: white;
-  border-color: var(--color-info);
-}
-
-.action-btn:disabled {
-  opacity: calc(var(--spacing-sm) / var(--spacing-md));
-  cursor: not-allowed;
-  transform: none;
-}
-
-.action-btn:disabled:hover {
-  background: var(--color-background-card);
-  color: var(--color-text-secondary);
-  border-color: var(--color-border);
-  transform: none;
-  box-shadow: none;
-}
-
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.modal-content {
-  background: var(--color-background-card, #ffffff);
-  border-radius: var(--border-radius-lg, 12px);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  max-width: 800px;
-  max-height: 80vh;
-  width: 90%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 10000;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spacing-lg);
-  border-bottom: var(--spacing-xs) solid var(--color-border);
-}
-
-.modal-header h3 {
-  margin: 0;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: var(--font-size-xl);
-  cursor: pointer;
-  color: var(--color-text-secondary);
-  padding: 0;
-  width: var(--spacing-xxl);
-  height: var(--spacing-xxl);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-close:hover {
-  color: var(--color-text-primary);
-}
-
-.modal-body {
-  padding: var(--spacing-lg);
-  overflow-y: auto;
-}
-
-.log-detail-item {
-  margin-bottom: var(--spacing-md);
-  padding: var(--spacing-sm);
-  background-color: var(--color-background-muted, #f8f9fa);
-  border-radius: var(--border-radius-sm);
-  border-left: 3px solid var(--color-primary, #3498db);
-}
-
-.category-detail {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.category-text {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.log-detail-item strong {
-  display: inline-block;
-  min-width: 140px;
-  margin-bottom: 0.25rem;
-  margin-right: 0.5rem;
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.log-detail-item p {
-  margin: 0;
-  color: var(--color-text-secondary);
-  display: inline;
-}
-
-.log-detail-item span {
-  color: var(--color-text-secondary);
-}
-
-.log-detail-item pre {
-  background-color: var(--color-background-muted);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius-sm);
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  overflow-x: auto;
-  margin: 0;
-}
-
-.stack-trace {
-  color: var(--color-error);
-  white-space: pre-wrap;
-}
-
-/* Ensure ct-btn styles are available */
-.ct-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-sm, 4px);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-}
-
-.ct-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ct-btn-primary {
-  background: transparent;
-  border-color: #3498db;
-  color: #3498db;
-}
-
-.ct-btn-primary:hover:not(:disabled) {
-  background: #3498db;
-  border-color: #3498db;
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
-}
-
-.ct-btn-danger {
-  background: var(--ct-danger, #dc3545);
-  border-color: var(--ct-danger, #dc3545);
-  color: white;
-}
-
-.ct-btn-danger:hover:not(:disabled) {
-  background: #c82333;
-  border-color: #bd2130;
-}
-
-.ct-btn-secondary {
-  background: var(--ct-secondary, #6c757d);
-  border-color: var(--ct-secondary, #6c757d);
-  color: white;
-}
-
-.ct-btn-secondary:hover:not(:disabled) {
-  background: var(--ct-secondary-dark, #5a6268);
-  border-color: var(--ct-secondary-dark, #5a6268);
-}
-
-.ct-btn-outline {
-  background: transparent;
-  border-color: var(--ct-border-color, #e0e0e0);
-  color: var(--ct-text-primary, #2c3e50);
-}
-
-.ct-btn-outline:hover:not(:disabled) {
-  background: var(--ct-bg-hover, #f8f9fa);
-  border-color: var(--ct-primary, #3498db);
-  color: var(--ct-primary, #3498db);
-}
-
-.ct-btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-.ct-select {
-  padding: 0.5rem;
-  border: 1px solid var(--ct-border-color, #e0e0e0);
-  border-radius: var(--border-radius-sm, 4px);
-  background: var(--ct-bg-primary, #ffffff);
-  color: var(--ct-text-primary, #2c3e50);
-  font-size: 0.875rem;
-  min-width: 150px;
-}
-
-.ct-select:focus {
-  outline: none;
-  border-color: var(--ct-primary, #3498db);
-  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .admin-actions {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-sm);
-  }
-
-  .ct-select {
-    width: 100%;
-  }
-
-  .modal-content {
-    width: 95%;
-    max-height: 90vh;
-    margin: var(--spacing-sm);
-  }
-
-  .modal-header {
-    padding: var(--spacing-md);
-  }
-
-  .modal-body {
-    padding: var(--spacing-md);
-  }
-
-  .log-message {
-    max-width: none;
-  }
-
-  .log-detail-item strong {
-    display: block;
-    min-width: auto;
-    margin-bottom: var(--spacing-xs);
-  }
-
-  .log-detail-item {
-    padding: var(--spacing-sm);
-  }
-}
-
-.ct-btn-primary-outline {
-  border-color: #3498db !important;
-  color: #3498db !important;
-}
-
-.ct-btn-primary-outline:hover {
-  background: #3498db !important;
-  border-color: #3498db !important;
-  color: white !important;
-}
-
-.btn-spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  margin-right: 0.5rem;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>

From f1055a5b434be390adb466864ad6e806df9f3eaf Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 18:58:56 +0000
Subject: [PATCH 4/6] refactor: rename LoggerSummaryAdminBulk to
 LoggerSummaryAdmin

- Rename LoggerSummaryAdminBulk.vue to LoggerSummaryAdmin.vue
- Update imports in App.vue
- Remove '(Bulk Cache)' from component title
- Now that legacy version is removed, bulk version becomes the standard

Co-authored-by: Ona <no-reply@ona.com>
---
 src/App.vue                                                   | 4 ++--
 .../{LoggerSummaryAdminBulk.vue => LoggerSummaryAdmin.vue}    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/loggerSummary/{LoggerSummaryAdminBulk.vue => LoggerSummaryAdmin.vue} (99%)

diff --git a/src/App.vue b/src/App.vue
index be92c3c..039c15e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@ import TagsAdmin from './components/tags/TagsAdmin.vue'
 import BeispielCard from './components/beispiel/BeispielCard.vue'
 import ColorPickerExample from './components/common/ColorPickerExample.vue'
 import LoggerSummaryCard from './components/loggerSummary/LoggerSummaryCard.vue'
-import LoggerSummaryAdminBulk from './components/loggerSummary/LoggerSummaryAdminBulk.vue'
+import LoggerSummaryAdmin from './components/loggerSummary/LoggerSummaryAdmin.vue'
 import Toast from './components/common/Toast.vue'
 
 import { useToast } from './composables/useToast'
@@ -92,7 +92,7 @@ const modules: DashboardModule[] = [
     icon: '📋',
     description: 'Überwachung und Verwaltung von Log-Einträgen',
     cardComponent: LoggerSummaryCard,
-    adminComponent: LoggerSummaryAdminBulk,
+    adminComponent: LoggerSummaryAdmin,
   },
 ]
 
diff --git a/src/components/loggerSummary/LoggerSummaryAdminBulk.vue b/src/components/loggerSummary/LoggerSummaryAdmin.vue
similarity index 99%
rename from src/components/loggerSummary/LoggerSummaryAdminBulk.vue
rename to src/components/loggerSummary/LoggerSummaryAdmin.vue
index 3653bc7..ff2dddb 100644
--- a/src/components/loggerSummary/LoggerSummaryAdminBulk.vue
+++ b/src/components/loggerSummary/LoggerSummaryAdmin.vue
@@ -6,7 +6,7 @@
     :error="error?.message || null"
     :columns="tableColumns"
     row-key="id"
-    title="Logger System - Admin Panel (Bulk Cache)"
+    title="Logger System - Admin Panel"
     description="Überwachung und Verwaltung aller Log-Einträge"
     searchable
     search-placeholder="Log-Einträge durchsuchen..."

From 5c2f3999ba30fb63744a52f85dd8554518fa6188 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 19:42:48 +0000
Subject: [PATCH 5/6] feat: improve logger admin panel UX and fix table display

- Fix table title to show correct filtered count instead of paginated count
- Add dynamic title showing active filters (days, category)
- Remove custom pagination in favor of AdminTable's built-in features
- Enable AdminTable search to work across all filtered logs
- Change both Card and Admin to use 1 day as default
- Increase Card log limit from 1000 to 1500 entries
- Show '1500+' in Card when log limit is reached
- Remove duplicate search field issue
- Fix goToPage undefined error

Co-authored-by: Ona <no-reply@ona.com>
---
 .../loggerSummary/LoggerSummaryAdmin.vue      | 89 ++++++++-----------
 .../loggerSummary/LoggerSummaryCard.vue       | 14 +--
 src/composables/useLoggerSummaryQuery.ts      | 12 ++-
 3 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/src/components/loggerSummary/LoggerSummaryAdmin.vue b/src/components/loggerSummary/LoggerSummaryAdmin.vue
index ff2dddb..d0e9e88 100644
--- a/src/components/loggerSummary/LoggerSummaryAdmin.vue
+++ b/src/components/loggerSummary/LoggerSummaryAdmin.vue
@@ -1,12 +1,12 @@
 <template>
   <AdminTable
     ref="adminTableRef"
-    :data="paginatedLogs"
+    :data="filteredLogs"
     :loading="isLoading"
     :error="error?.message || null"
     :columns="tableColumns"
     row-key="id"
-    title="Logger System - Admin Panel"
+    :title="tableTitle"
     description="Überwachung und Verwaltung aller Log-Einträge"
     searchable
     search-placeholder="Log-Einträge durchsuchen..."
@@ -94,26 +94,6 @@
     </template>
   </AdminTable>
 
-  <!-- Custom Pagination Controls -->
-  <div class="ct-card" v-if="totalPages > 1">
-    <div class="ct-card-body">
-      <div class="custom-pagination">
-        <button @click="prevPage" :disabled="!hasPrevPage" class="ct-btn ct-btn-outline ct-btn-sm">
-          ← Zurück
-        </button>
-
-        <span class="page-info">
-          Seite {{ currentPage }} von {{ totalPages }} ({{ paginatedLogs.length }} von
-          {{ allProcessedLogs.length }} Einträgen)
-        </span>
-
-        <button @click="nextPage" :disabled="!hasNextPage" class="ct-btn ct-btn-outline ct-btn-sm">
-          Weiter →
-        </button>
-      </div>
-    </div>
-  </div>
-
   <!-- Log Details Modal - EXACT copy from working LoggerSummaryAdmin.vue -->
   <div v-if="selectedLog" class="modal-overlay" @click="closeDetails">
     <div class="modal-content" @click.stop>
@@ -173,7 +153,6 @@ import { ref, computed, watch, onMounted } from 'vue'
 import AdminTable from '../common/AdminTable.vue'
 import {
   useLoggerBulkCache,
-  usePaginatedLogs,
   getCategoryDisplayName,
   getCategoryIcon,
   getCategoryCssClass,
@@ -197,9 +176,8 @@ defineProps<{
 const { showInfo, showWarning } = useToast()
 
 // State
-const selectedDays = ref(1)
+const selectedDays = ref(1) // Start with 1 day to match Card
 const selectedCategory = ref('')
-const searchTerm = ref('')
 
 // Use bulk cache with reactive days
 const {
@@ -228,7 +206,23 @@ watch(
   { immediate: true }
 )
 
-// Filter logs by category and search
+// Dynamic table title based on filters
+const tableTitle = computed(() => {
+  const parts = ['Logger System']
+
+  // Add days filter
+  const daysText = selectedDays.value === 1 ? 'Letzter Tag' : `Letzte ${selectedDays.value} Tage`
+  parts.push(daysText)
+
+  // Add category filter if active
+  if (selectedCategory.value) {
+    parts.push(getCategoryDisplayName(selectedCategory.value))
+  }
+
+  return parts.join(' - ')
+})
+
+// Filter logs by category
 const filteredLogs = computed(() => {
   let logs = allProcessedLogs.value
 
@@ -237,32 +231,9 @@ const filteredLogs = computed(() => {
     logs = logs.filter((log) => log.category === selectedCategory.value)
   }
 
-  // Filter by search term
-  if (searchTerm.value) {
-    const term = searchTerm.value.toLowerCase()
-    logs = logs.filter(
-      (log) =>
-        log.message.toLowerCase().includes(term) ||
-        log.source.toLowerCase().includes(term) ||
-        log.details?.toLowerCase().includes(term)
-    )
-  }
-
   return logs
 })
 
-// Client-side pagination
-const {
-  paginatedLogs,
-  currentPage,
-  totalPages,
-  hasNextPage,
-  hasPrevPage,
-  nextPage,
-  prevPage,
-  goToPage,
-} = usePaginatedLogs(filteredLogs, 50)
-
 // Categories for filter dropdown
 const categories = getAllCategories()
 
@@ -325,8 +296,7 @@ const changeDaysFilter = () => {
 }
 
 const applyFilters = () => {
-  // Reset to first page when filters change
-  goToPage(1)
+  // Filters are reactive, no action needed
 }
 
 // Modal state
@@ -383,6 +353,23 @@ watch(
   flex-wrap: wrap;
 }
 
+.search-input {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-background);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--ct-primary, #3498db);
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
+
 .ct-select {
   padding: 0.5rem;
   border: 1px solid var(--color-border);
diff --git a/src/components/loggerSummary/LoggerSummaryCard.vue b/src/components/loggerSummary/LoggerSummaryCard.vue
index c1f4291..ada2e67 100644
--- a/src/components/loggerSummary/LoggerSummaryCard.vue
+++ b/src/components/loggerSummary/LoggerSummaryCard.vue
@@ -51,13 +51,17 @@ const {
   refetch,
   isFetching,
   dataUpdatedAt,
-} = useLoggerSummary(3) // Load last 3 days
+} = useLoggerSummary(1) // Load last 1 day
 
 // Computed properties
-const mainStat = computed(() => ({
-  value: statistics.value?.total || 0,
-  label: 'Einträge',
-}))
+const mainStat = computed(() => {
+  const total = statistics.value?.total || 0
+  const wasLimited = statistics.value?.wasLimited || false
+  return {
+    value: wasLimited ? `${total}+` : total,
+    label: 'Einträge',
+  }
+})
 
 const statusStats = computed(() => {
   if (!statistics.value) {
diff --git a/src/composables/useLoggerSummaryQuery.ts b/src/composables/useLoggerSummaryQuery.ts
index f9794aa..1c7995c 100644
--- a/src/composables/useLoggerSummaryQuery.ts
+++ b/src/composables/useLoggerSummaryQuery.ts
@@ -208,7 +208,9 @@ function calculateStatistics(logs: ChurchToolsLogEntry[]): LogStatistics {
 /**
  * Fetch logs from ChurchTools API for the last N days
  */
-async function fetchLogStatistics(days: number = 3): Promise<LogStatistics> {
+async function fetchLogStatistics(
+  days: number = 3
+): Promise<LogStatistics & { wasLimited: boolean }> {
   const after = new Date()
   after.setDate(after.getDate() - days)
 
@@ -216,7 +218,7 @@ async function fetchLogStatistics(days: number = 3): Promise<LogStatistics> {
   let currentPage = 1
   let hasMorePages = true
   const maxLogsPerRequest = 100
-  const maxTotalLogs = 1000 // Safety limit
+  const maxTotalLogs = 1500 // Safety limit increased to 1500
 
   while (hasMorePages && allLogs.length < maxTotalLogs) {
     const params = new URLSearchParams()
@@ -242,7 +244,11 @@ async function fetchLogStatistics(days: number = 3): Promise<LogStatistics> {
     }
   }
 
-  return calculateStatistics(allLogs)
+  const stats = calculateStatistics(allLogs)
+  return {
+    ...stats,
+    wasLimited: allLogs.length >= maxTotalLogs && hasMorePages,
+  }
 }
 
 export function useLoggerSummary(days: number = 3) {

From 4ddb9bb4645ab5c1059d24a63cba165687303a5f Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Wed, 19 Nov 2025 19:44:42 +0000
Subject: [PATCH 6/6] docs: add session documentation for refresh button
 spinner feature

- Document all phases of implementation
- Record technical decisions and rationale
- Capture lessons learned for future reference
- Include package.json version bump

Co-authored-by: Ona <no-reply@ona.com>
---
 ...SSION_2025-11-19_Refresh_Button_Spinner.md | 153 ++++++++++++++++++
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 3 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 docs/DEVELOPMENT_SESSION_2025-11-19_Refresh_Button_Spinner.md

diff --git a/docs/DEVELOPMENT_SESSION_2025-11-19_Refresh_Button_Spinner.md b/docs/DEVELOPMENT_SESSION_2025-11-19_Refresh_Button_Spinner.md
new file mode 100644
index 0000000..0009b8e
--- /dev/null
+++ b/docs/DEVELOPMENT_SESSION_2025-11-19_Refresh_Button_Spinner.md
@@ -0,0 +1,153 @@
+# Development Session - 2025-11-19
+
+## Session Overview
+
+**Started**: 18:05  
+**Branch**: `feature/refresh-button-spinner`  
+**Focus**: Add loading spinners to refresh buttons and improve Logger admin panel UX
+
+## Major Accomplishments
+
+### Phase 1: Button Order and Spinner Implementation (18:05-18:30)
+
+- **Goal**: Swap button order on cards and add loading spinners to refresh buttons
+- **Result**: Successfully implemented across all components
+- **Code Changes**:
+  - `BaseCard.vue`: Swapped button order (Details left, Refresh right), added spinner
+  - `AutomaticGroupsAdmin.vue`: Added spinner, fixed loading state with `isFetching`
+  - `TagsAdmin.vue`: Added spinner to refresh button
+  - `ExpiringAppointmentsAdmin.vue`: Added spinner to refresh button
+  - `LoggerSummaryAdmin.vue`: Added spinner to refresh button
+  - `LoggerSummaryAdminBulk.vue`: Added spinner and fixed button styling
+
+### Phase 2: Logger Component Cleanup (18:55-19:00)
+
+- **Goal**: Remove unused legacy LoggerSummaryAdmin component
+- **Result**: Cleaned up codebase, renamed Bulk version to standard name
+- **Code Changes**:
+  - Removed `LoggerSummaryAdmin.vue` (legacy, 806 lines)
+  - Renamed `LoggerSummaryAdminBulk.vue` to `LoggerSummaryAdmin.vue`
+  - Updated imports in `App.vue`
+  - Removed "(Bulk Cache)" from component title
+
+### Phase 3: Logger Admin Panel UX Improvements (19:14-19:42)
+
+- **Goal**: Fix table display issues and improve user experience
+- **Result**: Comprehensive UX overhaul with better filtering and display
+- **Code Changes**:
+  - Fixed table title to show correct filtered count (not just paginated 50)
+  - Added dynamic title showing active filters: "Logger System - Letzter Tag - Fehler"
+  - Removed custom pagination in favor of AdminTable's built-in features
+  - Fixed search functionality (removed duplicate search fields)
+  - Changed default from 3 days to 1 day for both Card and Admin
+  - Increased Card log limit from 1000 to 1500 entries
+  - Added "1500+" display when Card hits log limit
+
+## Technical Decisions
+
+### Decision: Use isFetching for Loading State (18:15)
+
+**Context**: `isLoading` only true on initial load, not on refetch  
+**Decision**: Use `computed(() => isLoading.value || isFetching.value)` for better UX  
+**Impact**: Spinner now shows during manual refresh operations
+
+### Decision: Remove Custom Pagination (19:30)
+
+**Context**: Custom pagination conflicted with AdminTable's search functionality  
+**Decision**: Remove custom pagination, use AdminTable's built-in features  
+**Impact**: Simpler code, better search experience, all filtered logs searchable
+
+### Decision: Increase Card Limit to 1500 (19:39)
+
+**Context**: Card showed "1000 Einträge" but Admin showed more  
+**Decision**: Increase limit to 1500, show "1500+" when limited  
+**Impact**: Better consistency between Card and Admin, clearer when data is truncated
+
+### Decision: Remove Legacy LoggerSummaryAdmin (18:55)
+
+**Context**: Two versions existed (legacy and bulk), only bulk was used  
+**Decision**: Remove legacy version, rename bulk to standard name  
+**Impact**: Cleaner codebase, less confusion, 806 lines removed
+
+## Challenges and Solutions
+
+### Challenge: Duplicate Search Fields (19:25)
+
+**Problem**: AdminTable had its own search field, plus custom search field in actions  
+**Solution**: Removed custom search, disabled AdminTable search initially, then re-enabled AdminTable search and removed custom implementation  
+**Lesson**: Use framework features instead of duplicating functionality
+
+### Challenge: goToPage Undefined Error (19:31)
+
+**Problem**: `applyFilters()` called `goToPage(1)` after removing pagination  
+**Solution**: Made `applyFilters()` empty since filters are reactive  
+**Lesson**: Clean up all references when removing features
+
+### Challenge: Table Showing Wrong Count (19:14)
+
+**Problem**: Table title showed "50 Einträge" (paginated count) instead of total filtered  
+**Solution**: Pass `filteredLogs` to AdminTable instead of `paginatedLogs`, remove custom pagination  
+**Lesson**: Let table components handle their own pagination
+
+## Code Quality
+
+- All changes passed `npm run lint` (type-check + format-check)
+- Consistent spinner styling across all components
+- Proper use of TanStack Query's `isFetching` for loading states
+- Clean separation of concerns (filtering vs pagination)
+
+## Commits
+
+1. `feat: add loading spinner to refresh buttons` - Initial spinner implementation
+2. `feat: add refresh button with spinner to logger admin panels` - Logger components
+3. `refactor: remove unused LoggerSummaryAdmin component` - Cleanup legacy code
+4. `refactor: rename LoggerSummaryAdminBulk to LoggerSummaryAdmin` - Simplify naming
+5. `feat: improve logger admin panel UX and fix table display` - UX improvements
+
+## Next Steps
+
+- [ ] Monitor user feedback on new button order
+- [ ] Consider adding spinner to other loading operations
+- [ ] Evaluate if 1500 log limit is sufficient for Card
+- [ ] Consider adding pagination info to AdminTable footer
+
+## Lessons Learned
+
+### 1. Loading State Management with TanStack Query
+
+**Problem**: `isLoading` only true on initial load, not on refetch  
+**Solution**: Combine `isLoading` and `isFetching` in computed property  
+**Application**: Use for any manual refresh operations with TanStack Query
+
+### 2. Avoid Duplicating Framework Features
+
+**Problem**: Created custom search field when AdminTable already had one  
+**Solution**: Use AdminTable's built-in search functionality  
+**Application**: Always check if framework/component already provides needed feature
+
+### 3. Clean Up All References When Removing Features
+
+**Problem**: Removed pagination but left `goToPage()` call  
+**Solution**: Search for all references before removing features  
+**Application**: Use grep/search to find all usages before deletion
+
+### 4. Consistent Spinner Styling
+
+**Problem**: Different components might have different spinner implementations  
+**Solution**: Use consistent CSS classes and animations across all components  
+**Application**: Define common UI patterns in shared styles or components
+
+## Files Modified
+
+- `src/components/common/BaseCard.vue`
+- `src/components/automatic-groups/AutomaticGroupsAdmin.vue`
+- `src/components/tags/TagsAdmin.vue`
+- `src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue`
+- `src/components/loggerSummary/LoggerSummaryAdmin.vue` (renamed from Bulk)
+- `src/components/loggerSummary/LoggerSummaryCard.vue`
+- `src/composables/useLoggerSummaryQuery.ts`
+- `src/App.vue`
+
+## Files Deleted
+
+- `src/components/loggerSummary/LoggerSummaryAdmin.vue` (legacy version)
diff --git a/package-lock.json b/package-lock.json
index fd32534..7ee71db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "churchtools-dashboard",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "churchtools-dashboard",
-      "version": "1.0.4",
+      "version": "1.0.7",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.0.1",
         "@fortawesome/free-solid-svg-icons": "^7.0.1",
diff --git a/package.json b/package.json
index 3fc5e79..3b4bc78 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "churchtools-dashboard",
   "private": true,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",