From 68f5ab1e54700445b19ca4b6fb08874be4616cb4 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Wed, 3 Dec 2025 20:17:07 +0100
Subject: [PATCH 01/14] feat(ui): improve description column layout in tags
 table

- Enable text wrapping for description cells
- Set max-width and word-break properties
- Add specific styling for description cells
- Update table container scrolling behavior
---
 src/components/common/AdminTable.vue | 18 ++++++++++++++----
 src/components/tags/TagsAdmin.vue    |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/common/AdminTable.vue b/src/components/common/AdminTable.vue
index 6d8e62b..08f2ae2 100644
--- a/src/components/common/AdminTable.vue
+++ b/src/components/common/AdminTable.vue
@@ -437,7 +437,8 @@ defineExpose({
 .table-container {
   width: 100%;
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   border-radius: 8px;
   background: var(--ct-bg-primary, #ffffff);
   margin-bottom: 0;
@@ -485,10 +486,19 @@ defineExpose({
 .admin-data-table td {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--ct-border-color, #f0f2f5);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  max-width: 300px; /* Default max-width for all cells */
+}
+
+/* Specific style for description cells */
+.admin-data-table td.description-cell {
+  white-space: normal;
+  min-width: 200px;
+  max-width: 400px;
+  word-break: break-word;
 }
 
 .admin-data-table th.sortable {
diff --git a/src/components/tags/TagsAdmin.vue b/src/components/tags/TagsAdmin.vue
index 8ab8323..01c91c4 100644
--- a/src/components/tags/TagsAdmin.vue
+++ b/src/components/tags/TagsAdmin.vue
@@ -365,7 +365,7 @@ const tableColumns: TableColumn[] = [
     width: 150,
     cellSlot: 'cell-color',
   },
-  { key: 'description', label: 'Beschreibung', sortable: true, resizable: true, width: 250 },
+  { key: 'description', label: 'Beschreibung', sortable: true, resizable: true, width: 250, cellClass: 'description-cell' },
   {
     key: 'actions',
     label: 'Aktionen',

From 969634359b55a81563e31c3d4f3dca8b3aae654b Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 11:54:21 +0100
Subject: [PATCH 02/14] feat(ui): enhance date range options in expiring
 appointments

- Add more intuitive date range options (e.g., '6 Monate', '12 Monate')
- Extend the maximum range to 18 months
- Bump version to 1.0.10
---
 package.json                                        |  2 +-
 .../ExpiringAppointmentsAdmin.vue                   | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 93d62bd..0d04cdc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "churchtools-dashboard",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index ef2702c..c785a9b 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -25,13 +25,12 @@
           <select v-model="daysInAdvance" @change="refreshData" class="ct-select">
             <option value="alle">alle</option>
             <option value="1">1</option>
-            <option value="7">7</option>
-            <option value="14">14</option>
-            <option value="30">30</option>
-            <option value="60">60</option>
-            <option value="90">90</option>
-            <option value="180">180</option>
-            <option value="365">365</option>
+            <option value="14">14 Tage</option>
+            <option value="60">60 Tage</option>
+            <option value="180">6 Monate</option>
+            <option value="365">12 Monate</option>
+            <option value="450">15 Monate</option>
+            <option value="550">18 Monate</option>
           </select>
           <span v-if="daysInAdvance !== 'alle'">Tagen enden</span>
           <span v-else>Termine anzeigen</span>

From 3c99fdb8f74425360244ecbb167940adc0705389 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 12:42:03 +0100
Subject: [PATCH 03/14] feat: enhance tag display in appointment table

- Display tags as styled badges with proper colors
- Add tooltips showing tag descriptions on hover
- Sort tags alphabetically within each cell
- Fix tag data processing in API response
- Improve tag styling to match design system
---
 .../ExpiringAppointmentsAdmin.vue             | 261 ++++++++++++++++--
 src/composables/useExpiringAppointments.ts    |   8 +-
 src/services/churchtools.ts                   |  44 ++-
 3 files changed, 280 insertions(+), 33 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index c785a9b..d2c5c7d 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -48,6 +48,26 @@
           </option>
         </select>
       </div>
+      
+      <div class="filter-container">
+        <select 
+          v-model="selectedTagIds" 
+          multiple 
+          class="ct-select filter-select"
+          style="min-height: 42px;"
+          @change="refreshData"
+        >
+          <option value="">Alle Tags</option>
+          <option 
+            v-for="tag in appointmentTags" 
+            :key="tag.id" 
+            :value="tag.id"
+            :style="{ backgroundColor: tag.color || 'transparent' }"
+          >
+            {{ tag.name }}
+          </option>
+        </select>
+      </div>
       <div class="filter-container">
         <select v-model="statusFilter" class="ct-select filter-select">
           <option value="">Alle Status</option>
@@ -105,16 +125,40 @@
       {{ getEffectiveEndDate(item) }}
     </template>
 
+    <template #cell-tags="{ item }">
+      <div class="appointment-tags">
+        <template v-if="item.tags && item.tags.length > 0">
+          <div class="tags-container">
+            <div 
+              v-for="tag in [...item.tags].sort((a, b) => a.name.localeCompare(b.name))" 
+              :key="tag.id"
+              class="tag-badge"
+              :style="{ 
+                '--tag-bg': getTagColor(tag.color),
+                '--tag-text': getContrastColor(getTagColor(tag.color))
+              }"
+              :title="tag.description"
+            >
+              {{ tag.name }}
+            </div>
+          </div>
+        </template>
+        <span v-else class="no-tags">-</span>
+      </div>
+    </template>
+
     <template #cell-actions="{ item }">
-      <a
-        :href="getAppointmentUrl(item)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="ct-btn ct-btn-sm ct-btn-outline"
-        title="Termin in ChurchTools öffnen"
-      >
-        Öffnen
-      </a>
+      <div class="action-buttons">
+        <a
+          :href="getAppointmentUrl(item)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ct-btn ct-btn-sm ct-btn-outline"
+          title="Termin in ChurchTools öffnen"
+        >
+          Öffnen
+        </a>
+      </div>
     </template>
   </AdminTable>
 </template>
@@ -125,7 +169,9 @@ import type { DashboardModule } from '@/types/modules'
 import type { TableColumn } from '@/types/table'
 import { findExpiringSeries, getAppointmentUrl, type Appointment } from '@/services/churchtools'
 import { useExpiringAppointments } from '@/composables/useExpiringAppointments'
+import { useTags } from '@/composables/useTags'
 import AdminTable from '@/components/common/AdminTable.vue'
+import { useToast } from '@/composables/useToast'
 
 defineProps<{
   module: DashboardModule
@@ -134,20 +180,32 @@ defineProps<{
 // Configuration
 const DAYS_TO_SHOW = 90
 
-// Use cached appointments data from TanStack Query
-const {
-  data: cachedAppointments,
-  isLoading: cacheLoading,
-  error: cacheError,
-  refetch,
-} = useExpiringAppointments()
-
 // Local state
 const localLoading = ref(false)
 const localError = ref<string | null>(null)
 const calendarFilter = ref('')
 const statusFilter = ref('')
 const daysInAdvance = ref('alle') // Default to "alle"
+const selectedTagIds = ref<number[]>([])
+
+// Fetch tags for filtering
+const { data: allTags } = useTags()
+
+// Filter tags to only show appointment tags
+const appointmentTags = computed(() => {
+  return allTags.value?.filter(tag => tag.domainType === 'appointment') || []
+})
+
+// Use cached appointments data from TanStack Query with tag filtering
+const {
+  data: cachedAppointments,
+  isLoading: cacheLoading,
+  error: cacheError,
+  refetch,
+} = useExpiringAppointments(
+  daysInAdvance.value === 'alle' ? 9999 : parseInt(daysInAdvance.value, 10),
+  selectedTagIds.value
+)
 
 // AdminTable reference
 const adminTableRef = ref()
@@ -203,6 +261,20 @@ const tableColumns: TableColumn[] = [
     width: 180,
     cellSlot: 'cell-endDate',
   },
+  {
+    key: 'base.tags',
+    label: 'Tags',
+    sortable: true,
+    resizable: true,
+    width: 200,
+    cellSlot: 'cell-tags',
+    // Custom sort function to sort by tag names
+    sortFn: (a: any, b: any) => {
+      const tagsA = (a.base.tags || []).map((t: any) => t.name).join(', ')
+      const tagsB = (b.base.tags || []).map((t: any) => t.name).join(', ')
+      return tagsA.localeCompare(tagsB)
+    },
+  },
   { key: 'actions', label: 'Aktionen', resizable: false, width: 120, cellSlot: 'cell-actions' },
 ]
 
@@ -258,6 +330,35 @@ const getAppointmentStatus = (appointment: Appointment): 'active' | 'expiring' |
   return 'active'
 }
 
+// Helper function to map color names to hex values
+const getTagColor = (colorName: string): string => {
+  const colorMap: Record<string, string> = {
+    'basic': '#e0e0e0',
+    'blue': '#2196F3',
+    'green': '#4CAF50',
+    'yellow': '#FFC107',
+    'red': '#F44336',
+    'purple': '#9C27B0',
+    'orange': '#FF9800',
+    'teal': '#009688',
+    'pink': '#E91E63',
+    'brown': '#795548',
+    'gray': '#9E9E9E',
+    'black': '#000000'
+  }
+  return colorMap[colorName] || '#e0e0e0'
+}
+
+// Helper function to get contrasting text color based on background color
+const getContrastColor = (hexColor: string) => {
+  // If the color is light, return dark text color, otherwise return light text
+  const r = parseInt(hexColor.slice(1, 3), 16)
+  const g = parseInt(hexColor.slice(3, 5), 16)
+  const b = parseInt(hexColor.slice(5, 7), 16)
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000000' : '#ffffff'
+}
+
 // Helper functions
 const formatDate = (dateString: string | null) => {
   if (!dateString) return 'Nie'
@@ -303,10 +404,10 @@ const getEffectiveEndDate = (appointment: Appointment) => {
 
 // Filter functions
 const clearFilters = () => {
-  // Reset own filters
   calendarFilter.value = ''
   statusFilter.value = ''
   daysInAdvance.value = 'alle'
+  selectedTagIds.value = []
 
   // Reset AdminTable search
   if (adminTableRef.value?.clearSearch) {
@@ -314,7 +415,7 @@ const clearFilters = () => {
   }
 }
 
-// Data loading
+// Filter functions
 const fetchData = async () => {
   localLoading.value = true
   localError.value = null
@@ -378,6 +479,16 @@ const fetchData = async () => {
       )
     }
 
+    // Filter by tags
+    if (selectedTagIds.value.length > 0) {
+      filtered = filtered.filter((appointment) => {
+        const appointmentTags = appointment.base.tags || []
+        return selectedTagIds.value.some((tagId) => 
+          appointmentTags.some((tag: any) => tag.id === tagId)
+        )
+      })
+    }
+
     appointments.value = filtered
   } catch (err) {
     console.error('Error fetching appointments:', err)
@@ -387,11 +498,16 @@ const fetchData = async () => {
   }
 }
 
+// Refresh data function
 const refreshData = () => {
-  refetch() // Refresh cached data
-  fetchData() // Also refresh local data if needed
+  refetch()
 }
 
+// Watch for changes to daysInAdvance and refetch data
+watch(daysInAdvance, () => {
+  refreshData()
+})
+
 // Initialize component
 onMounted(() => {
   // Only fetch if no cached data available
@@ -440,6 +556,19 @@ onMounted(() => {
 
 .filter-container {
   min-width: 180px;
+  margin-bottom: 0.5rem;
+}
+
+/* Style for multi-select dropdown */
+select[multiple] {
+  min-height: 38px;
+  padding: 0.25rem;
+}
+
+select[multiple] option {
+  padding: 0.25rem 0.5rem;
+  margin: 0.125rem 0;
+  border-radius: 3px;
 }
 
 .filter-select {
@@ -530,6 +659,96 @@ onMounted(() => {
   background-color: rgba(52, 152, 219, 0.1);
 }
 
+/* Tag styles */
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+}
+
+.tag-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  background-color: var(--tag-bg, #e0e0e0);
+  color: var(--tag-text, #333);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+  cursor: help;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.tag-badge:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.tag-badge[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  max-width: 300px;
+  width: max-content;
+  transform: translateX(-50%) translateY(-8px);
+  background-color: #2d3748;
+  color: #fff;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: normal;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease-out;
+  pointer-events: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  word-wrap: break-word;
+  font-weight: 400;
+  text-align: left;
+}
+
+.tag-badge[title]:hover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-3px);
+  border-width: 5px 5px 0 5px;
+  border-style: solid;
+  border-color: #2d3748 transparent transparent transparent;
+  z-index: 1001;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease-out;
+}
+
+.tag-badge[title]:hover::after,
+.tag-badge[title]:hover::before {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+.no-tags {
+  color: #9e9e9e;
+  font-style: italic;
+  font-size: 0.875rem;
+  padding: 0.5rem 0;
+  display: inline-block;
+}
+
 .ct-btn-sm {
   padding: 0.5rem 1rem;
   font-size: 0.85rem;
diff --git a/src/composables/useExpiringAppointments.ts b/src/composables/useExpiringAppointments.ts
index f694cb8..01564c1 100644
--- a/src/composables/useExpiringAppointments.ts
+++ b/src/composables/useExpiringAppointments.ts
@@ -1,14 +1,14 @@
 import { useQuery } from '@tanstack/vue-query'
 import { findExpiringSeries, type Appointment } from '@/services/churchtools'
 
-export function useExpiringAppointments(daysInAdvance: number = 300000) {
+export function useExpiringAppointments(daysInAdvance: number = 300000, tagIds: number[] = []) {
   // Only log once per unique query setup
   if (import.meta.env.DEV) {
-    console.log('📅 Setting up expiring appointments query for', daysInAdvance, 'days')
+    console.log('📅 Setting up expiring appointments query for', daysInAdvance, 'days with tags:', tagIds)
   }
   return useQuery({
-    queryKey: ['expiring-appointments', daysInAdvance],
-    queryFn: () => findExpiringSeries(daysInAdvance),
+    queryKey: ['expiring-appointments', daysInAdvance, ...tagIds],
+    queryFn: () => findExpiringSeries(daysInAdvance, tagIds),
     staleTime: 30 * 60 * 1000, // 30 minutes - appointments don't change often
     gcTime: 60 * 60 * 1000, // 1 hour cache time
     refetchInterval: 15 * 60 * 1000, // Background update every 15 minutes
diff --git a/src/services/churchtools.ts b/src/services/churchtools.ts
index c760df4..8a5a2b1 100644
--- a/src/services/churchtools.ts
+++ b/src/services/churchtools.ts
@@ -36,16 +36,25 @@ export async function fetchCalendars(): Promise<Calendar[]> {
 export async function fetchAppointments(
   calendarIds: number[],
   startDate: Date,
-  endDate: Date
+  endDate: Date,
+  tagIds: number[] = []
 ): Promise<Appointment[]> {
   const start = startDate.toISOString().split('T')[0]
   const end = endDate.toISOString().split('T')[0]
 
-  const response = await churchtoolsClient.get<Appointment[]>('/calendars/appointments', {
+  const params: Record<string, any> = {
     from: start,
     to: end,
     'calendar_ids[]': calendarIds,
-  })
+    include: ['tags']
+  }
+
+  // Add tag filter if tags are provided
+  if (tagIds.length > 0) {
+    params['tag_ids[]'] = tagIds
+  }
+
+  const response = await churchtoolsClient.get<Appointment[]>('/calendars/appointments', params)
 
   // Ensure we always return an array of Appointment objects
   return Array.isArray(response) ? response : []
@@ -69,7 +78,7 @@ export async function identifyCalendars(): Promise<{
 /**
  * Finds all recurring appointment series that are about to end
  */
-export async function findExpiringSeries(daysInAdvance: number = 60): Promise<Appointment[]> {
+export async function findExpiringSeries(daysInAdvance: number = 60, tagIds: number[] = []): Promise<Appointment[]> {
   const now = new Date()
   const endDate = new Date()
   endDate.setDate(now.getDate() + daysInAdvance)
@@ -88,12 +97,31 @@ export async function findExpiringSeries(daysInAdvance: number = 60): Promise<Ap
     (v, i, a) => a.indexOf(v) === i
   ) // Remove duplicates
 
-  // Fetching appointments for calendar IDs
-  // Fetch appointments
-  const appointments = await fetchAppointments(allCalendarIds, now, endDate)
+  // Fetching appointments for calendar IDs with optional tag filtering and include tags
+  const appointments = await fetchAppointments(allCalendarIds, now, endDate, tagIds)
+  
+  // Log the first appointment to debug tags
+  if (appointments.length > 0) {
+    console.log('First appointment with tags:', JSON.parse(JSON.stringify(appointments[0])))
+  }
+
+  // Process appointments to ensure consistent structure with tags
+  const processedAppointments = appointments.map(appointment => {
+    // Get tags from the root level if they exist
+    const tags = 'tags' in appointment ? appointment.tags : [];
+    
+    // Return the appointment with tags properly set in base.tags
+    return {
+      ...appointment,
+      base: {
+        ...appointment.base,
+        tags: Array.isArray(tags) ? tags : []
+      }
+    };
+  });
 
   // Find recurring appointments that are ending soon
-  const expiringSeries = appointments.filter((appointment) => {
+  const expiringSeries = processedAppointments.filter((appointment) => {
     // Handle both AppointmentBase and AppointmentCalculated types
     const base = 'base' in appointment ? appointment.base : appointment
 

From a06c3321628e29cf4aabef0205144e59e5d92dca Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 16:58:51 +0100
Subject: [PATCH 04/14] fix: restore time filter functionality and improve
 filtering

- Fix time filter by properly handling cached data
- Separate data fetching from filtering logic
- Improve tag filtering integration
- Ensure proper reactivity for all filters
---
 .../ExpiringAppointmentsAdmin.vue             | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index d2c5c7d..28e0c23 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -416,18 +416,15 @@ const clearFilters = () => {
 }
 
 // Filter functions
-const fetchData = async () => {
+const applyFilters = () => {
   localLoading.value = true
   localError.value = null
 
   try {
-    const expiringSeries = await findExpiringSeries(300000)
-    if (expiringSeries.length > 0) {
-      // First appointment structure available
-    }
+    if (!cachedAppointments.value) return
 
     // Apply filters
-    let filtered = expiringSeries
+    let filtered = [...cachedAppointments.value]
 
     // Filter by days in advance
     const now = new Date()
@@ -490,6 +487,20 @@ const fetchData = async () => {
     }
 
     appointments.value = filtered
+  } catch (err) {
+    console.error('Error filtering appointments:', err)
+    localError.value = 'Fehler beim Filtern der Termine.'
+  } finally {
+    localLoading.value = false
+  }
+}
+
+// Fetch data using the composable
+const fetchData = async () => {
+  localLoading.value = true
+  try {
+    await refetch()
+    applyFilters()
   } catch (err) {
     console.error('Error fetching appointments:', err)
     localError.value = 'Fehler beim Laden der Termine. Bitte versuchen Sie es erneut.'
@@ -503,16 +514,17 @@ const refreshData = () => {
   refetch()
 }
 
-// Watch for changes to daysInAdvance and refetch data
-watch(daysInAdvance, () => {
-  refreshData()
-})
+// Watch for changes to filters and apply them
+watch([daysInAdvance, calendarFilter, statusFilter, selectedTagIds], () => {
+  applyFilters()
+}, { immediate: true })
 
 // Initialize component
 onMounted(() => {
-  // Only fetch if no cached data available
   if (!cachedAppointments.value || cachedAppointments.value.length === 0) {
     fetchData()
+  } else {
+    applyFilters()
   }
 })
 </script>

From 76bfb2bbad669ced9bc7edc3382987f5230fc069 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 17:58:51 +0100
Subject: [PATCH 05/14] feat: Add TagMultiSelect component with chip-based UI

- Create reusable TagMultiSelect component with modern chip design
- Match tag colors with existing table implementation
- Add select all/none functionality
- Improve dropdown positioning and z-index handling
- Add responsive design for better mobile experience
- Include proper TypeScript types and documentation
---
 package-lock.json                             |  49 +-
 package.json                                  |   1 +
 src/components/common/TagMultiSelect.vue      | 551 ++++++++++++++++++
 .../ExpiringAppointmentsAdmin.vue             |  23 +-
 4 files changed, 605 insertions(+), 19 deletions(-)
 create mode 100644 src/components/common/TagMultiSelect.vue

diff --git a/package-lock.json b/package-lock.json
index 78291ef..178f8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "churchtools-dashboard",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "churchtools-dashboard",
-      "version": "1.0.9",
+      "version": "1.0.10",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.0.1",
         "@fortawesome/free-solid-svg-icons": "^7.0.1",
@@ -15,6 +15,7 @@
         "@tanstack/query-sync-storage-persister": "^5.90.2",
         "@tanstack/vue-query": "^5.90.2",
         "@vitejs/plugin-vue": "^6.0.1",
+        "@vueuse/core": "^14.1.0",
         "vue": "^3.5.21",
         "vue-i18n": "^9.14.5"
       },
@@ -1012,6 +1013,12 @@
         "undici-types": "~7.10.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1134,6 +1141,44 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
diff --git a/package.json b/package.json
index 0d04cdc..dca6faa 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@tanstack/query-sync-storage-persister": "^5.90.2",
     "@tanstack/vue-query": "^5.90.2",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vueuse/core": "^14.1.0",
     "vue": "^3.5.21",
     "vue-i18n": "^9.14.5"
   }
diff --git a/src/components/common/TagMultiSelect.vue b/src/components/common/TagMultiSelect.vue
new file mode 100644
index 0000000..0093ff9
--- /dev/null
+++ b/src/components/common/TagMultiSelect.vue
@@ -0,0 +1,551 @@
+<template>
+  <div class="tag-multiselect" ref="containerRef">
+    <div class="select-header" @click="toggleDropdown">
+      <div class="selected-tags">
+        <span v-if="selectedTags.length === 0" class="placeholder">Filter nach Tags</span>
+        <div v-else class="chips-container">
+          <span 
+            v-for="tag in selectedTags" 
+            :key="tag.id" 
+            class="chip" 
+            :style="{
+              '--tag-bg': getTagColor(tag.color),
+              '--tag-text': getContrastColor(getTagColor(tag.color))
+            }"
+          >
+            <span class="chip-text">{{ tag.name }}</span>
+            <button 
+              class="chip-remove"
+              @click.stop="removeTag(tag.id)"
+              :style="{ color: getContrastColor(getTagColor(tag.color)) }"
+              aria-label="Tag entfernen"
+            >
+              &times;
+            </button>
+          </span>
+        </div>
+      </div>
+      <span class="dropdown-icon" :class="{ 'open': isOpen }">▼</span>
+    </div>
+    
+    <Teleport to="body">
+      <div v-if="isOpen" class="dropdown-portal">
+        <div ref="dropdownRef" class="dropdown-content">
+          <div class="search-container">
+            <input
+              ref="searchInput"
+              v-model="searchQuery"
+              type="text"
+              placeholder="Tags durchsuchen..."
+              class="search-input"
+              @click.stop
+            />
+          </div>
+          
+          <div class="tags-list">
+            <div 
+              v-for="tag in filteredTags" 
+              :key="tag.id" 
+              class="tag-option" 
+              @click="toggleTag(tag)"
+            >
+              <div class="tag-color" :style="{ backgroundColor: tag.color }"></div>
+              <span class="tag-name">{{ tag.name }}</span>
+              <span v-if="isSelected(tag.id)" class="checkmark">✓</span>
+            </div>
+            
+            <div v-if="filteredTags.length === 0" class="no-results">
+              Keine passenden Tags gefunden
+            </div>
+          </div>
+          
+          <div v-if="selectedTags.length > 0" class="dropdown-actions">
+            <div class="action-buttons">
+              <button class="action-btn select-all" @click.stop="selectAll">
+                Alle auswählen
+              </button>
+              <button class="action-btn select-none" @click.stop="clearSelection">
+                Keine auswählen
+              </button>
+            </div>
+            <button class="clear-btn" @click.stop="clearSelection">
+              Auswahl zurücksetzen
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => number[], 
+    default: () => []
+  },
+  tags: {
+    type: Array as () => Array<{id: number, name: string, color: string}>,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+const searchQuery = ref('')
+const containerRef = ref<HTMLElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null)
+
+const filteredTags = computed(() => {
+  const query = searchQuery.value.toLowerCase()
+  return props.tags.filter(tag => 
+    tag.name.toLowerCase().includes(query)
+  )
+})
+
+const selectedTags = computed(() => {
+  return props.tags.filter(tag => props.modelValue.includes(tag.id))
+})
+
+const isSelected = (tagId: number) => {
+  return props.modelValue.includes(tagId)
+}
+
+const toggleTag = (tag: {id: number}) => {
+  const newValue = [...props.modelValue]
+  const index = newValue.indexOf(tag.id)
+  
+  if (index === -1) {
+    newValue.push(tag.id)
+  } else {
+    newValue.splice(index, 1)
+  }
+  
+  emit('update:modelValue', newValue)
+}
+
+const removeTag = (tagId: number) => {
+  const newValue = props.modelValue.filter(id => id !== tagId)
+  emit('update:modelValue', newValue)
+}
+
+const clearSelection = () => {
+  emit('update:modelValue', [])
+  searchQuery.value = ''
+}
+
+const selectAll = () => {
+  const allTagIds = props.tags.map(tag => tag.id)
+  emit('update:modelValue', [...allTagIds])
+}
+
+const toggleDropdown = (event: Event) => {
+  event.stopPropagation()
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    searchQuery.value = ''
+    nextTick(() => {
+      positionDropdown()
+      searchInput.value?.focus()
+    })
+  }
+}
+
+const positionDropdown = () => {
+  if (!dropdownRef.value || !containerRef.value) return
+  
+  const containerRect = containerRef.value.getBoundingClientRect()
+  const dropdown = dropdownRef.value
+  
+  // Set the width to match the container
+  dropdown.style.width = `${containerRect.width}px`
+  
+  // Position the dropdown directly below the container
+  dropdown.style.left = `${containerRect.left + window.scrollX}px`
+  dropdown.style.top = `${containerRect.bottom + window.scrollY + 4}px`
+  
+  // Check if there's enough space below, if not, position above
+  const spaceBelow = window.innerHeight - containerRect.bottom
+  const spaceAbove = containerRect.top
+  
+  if (spaceBelow < 300 && spaceAbove > spaceBelow) {
+    // Position above if there's more space above
+    dropdown.style.top = 'auto'
+    dropdown.style.bottom = `${window.innerHeight - containerRect.top + window.scrollY - 4}px`
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+    document.removeEventListener('click', handleClickOutside, { capture: true })
+  }
+}
+
+const getTagColor = (colorName: string): string => {
+  // Map of color names to hex values - matching the table's color scheme
+  const colorMap: Record<string, string> = {
+    'basic': '#e0e0e0',
+    'blue': '#2196F3',
+    'green': '#4CAF50',
+    'yellow': '#FFC107',
+    'red': '#F44336',
+    'purple': '#9C27B0',
+    'orange': '#FF9800',
+    'teal': '#009688',
+    'pink': '#E91E63',
+    'brown': '#795548',
+    'gray': '#9E9E9E',
+    'black': '#000000'
+  }
+  
+  // Return the hex color if it's already a hex value
+  if (colorName.startsWith('#')) {
+    return colorName
+  }
+  
+  // Return the mapped color or a default gray if not found
+  return colorMap[colorName.toLowerCase()] || '#e0e0e0'
+}
+
+// Helper function to get contrasting text color based on background color
+const getContrastColor = (hexColor: string) => {
+  // If the color is light, return dark text color, otherwise return light text
+  const r = parseInt(hexColor.slice(1, 3), 16)
+  const g = parseInt(hexColor.slice(3, 5), 16)
+  const b = parseInt(hexColor.slice(5, 7), 16)
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000000' : '#ffffff'
+}
+
+// Close dropdown when clicking outside
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+}, { ignore: [containerRef] })
+
+// Close dropdown when window is scrolled or resized
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleResize, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleResize)
+})
+
+const handleScroll = () => {
+  if (isOpen.value) {
+    isOpen.value = false
+  }
+}
+
+const handleResize = () => {
+  if (isOpen.value) {
+    positionDropdown()
+  }
+}
+</script>
+
+<style scoped>
+.tag-multiselect {
+  position: relative;
+  min-width: 250px;
+  max-width: 400px; /* Maximum width for the widget */
+  width: 100%;
+  z-index: 1;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.select-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: white;
+  cursor: pointer;
+  min-height: 42px;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
+}
+
+.select-header:focus-within {
+  border-color: #4d90fe;
+  box-shadow: 0 0 0 1px #4d90fe;
+  outline: none;
+}
+
+.select-header:hover {
+  border-color: #b3b3b3;
+}
+
+.selected-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  flex-grow: 1;
+  min-height: 1.5rem;
+  align-items: center;
+  min-width: 0; /* Prevents flex items from overflowing */
+  overflow: hidden;
+  max-height: 100px; /* Maximum height before scrolling */
+  overflow-y: auto; /* Add scrollbar if content is too tall */
+  padding: 0.1rem 0; /* Add some vertical padding */
+  align-content: flex-start; /* Align wrapped lines to the start */
+}
+
+.placeholder {
+  color: #9e9e9e;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  padding: 0.25rem 0;
+}
+
+.chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  width: 100%;
+  padding: 0.2rem 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  background-color: var(--tag-bg, #e0e0e0);
+  color: var(--tag-text, #333);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  cursor: default;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0.25rem;
+}
+
+.chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+  background: none;
+  border: none;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 0.9rem;
+  line-height: 1;
+  opacity: 0.7;
+  color: inherit;
+  transition: all 0.15s ease;
+}
+
+.chip-remove:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.chip-remove:active {
+  transform: scale(0.9);
+}
+
+.dropdown-icon {
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  color: #666;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-icon.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-portal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.dropdown-content {
+  position: absolute;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-height: min(400px, 70vh);
+  min-width: 250px;
+  width: auto;
+  overflow-y: auto;
+  z-index: 9999;
+  pointer-events: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  will-change: transform;
+}
+
+.search-container {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.tags-list {
+  padding: 0.5rem 0;
+}
+
+.tag-option {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.1s ease;
+}
+
+.tag-option:hover {
+  background-color: #f5f5f5;
+}
+
+.tag-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tag-name {
+  flex-grow: 1;
+  margin-right: 1.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkmark {
+  position: absolute;
+  right: 1rem;
+  color: #3498db;
+  font-weight: bold;
+}
+
+.no-results {
+  padding: 0.75rem 1rem;
+  color: #666;
+  text-align: center;
+  font-style: italic;
+}
+
+.dropdown-actions {
+  padding: 0.5rem;
+  border-top: 1px solid #e0e0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  background: #f8f9fa;
+  color: #2c3e50;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: #e9ecef;
+  border-color: #ced4da;
+}
+
+.action-btn.select-all {
+  background: #e8f4fd;
+  border-color: #b8d8f8;
+  color: #0d6efd;
+}
+
+.action-btn.select-none {
+  background: #f8e8e8;
+  border-color: #f8b8b8;
+  color: #dc3545;
+}
+
+.action-btn.select-all:hover {
+  background: #d0e7ff;
+}
+
+.action-btn.select-none:hover {
+  background: #ffd6d6;
+}
+
+.clear-btn {
+  background: none;
+  border: none;
+  color: #3498db;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+
+.clear-btn:hover {
+  background-color: #f5f5f5;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 28e0c23..2286f49 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -50,23 +50,11 @@
       </div>
       
       <div class="filter-container">
-        <select 
-          v-model="selectedTagIds" 
-          multiple 
-          class="ct-select filter-select"
-          style="min-height: 42px;"
-          @change="refreshData"
-        >
-          <option value="">Alle Tags</option>
-          <option 
-            v-for="tag in appointmentTags" 
-            :key="tag.id" 
-            :value="tag.id"
-            :style="{ backgroundColor: tag.color || 'transparent' }"
-          >
-            {{ tag.name }}
-          </option>
-        </select>
+        <TagMultiSelect 
+          v-model="selectedTagIds"
+          :tags="appointmentTags"
+          @update:modelValue="refreshData"
+        />
       </div>
       <div class="filter-container">
         <select v-model="statusFilter" class="ct-select filter-select">
@@ -166,6 +154,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import type { DashboardModule } from '@/types/modules'
+import TagMultiSelect from '@/components/common/TagMultiSelect.vue'
 import type { TableColumn } from '@/types/table'
 import { findExpiringSeries, getAppointmentUrl, type Appointment } from '@/services/churchtools'
 import { useExpiringAppointments } from '@/composables/useExpiringAppointments'

From 98b73ac9fe812ab32e4e6f455ec9af8dcc535b58 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 20:35:47 +0100
Subject: [PATCH 06/14] wip sele t boxes

---
 .../ExpiringAppointmentsAdmin.vue             | 234 +++++++++++++++++-
 1 file changed, 225 insertions(+), 9 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 2286f49..ad98195 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -48,9 +48,9 @@
           </option>
         </select>
       </div>
-      
+
       <div class="filter-container">
-        <TagMultiSelect 
+        <TagMultiSelect
           v-model="selectedTagIds"
           :tags="appointmentTags"
           @update:modelValue="refreshData"
@@ -117,11 +117,11 @@
       <div class="appointment-tags">
         <template v-if="item.tags && item.tags.length > 0">
           <div class="tags-container">
-            <div 
-              v-for="tag in [...item.tags].sort((a, b) => a.name.localeCompare(b.name))" 
+            <div
+              v-for="tag in [...item.tags].sort((a, b) => a.name.localeCompare(b.name))"
               :key="tag.id"
               class="tag-badge"
-              :style="{ 
+              :style="{
                 '--tag-bg': getTagColor(tag.color),
                 '--tag-text': getContrastColor(getTagColor(tag.color))
               }"
@@ -135,6 +135,17 @@
       </div>
     </template>
 
+    <template #cell-checkbox="{ item }">
+      <div @click.stop>
+        <input
+          type="checkbox"
+          :checked="isAppointmentSelected(item.id)"
+          @click="toggleAppointmentSelection(item.id)"
+          class="ct-checkbox"
+        />
+      </div>
+    </template>
+
     <template #cell-actions="{ item }">
       <div class="action-buttons">
         <a
@@ -177,6 +188,66 @@ const statusFilter = ref('')
 const daysInAdvance = ref('alle') // Default to "alle"
 const selectedTagIds = ref<number[]>([])
 
+// Selection state
+const selectedAppointments = ref<number[]>([])
+const adminTableRef = ref()
+
+// Selection methods
+const toggleAppointmentSelection = (appointmentId: number) => (e: Event) => {
+  // Prevent the default behavior and stop propagation
+  e.preventDefault()
+  e.stopPropagation()
+  
+  // Create a new array to ensure reactivity
+  const newSelection = [...selectedAppointments.value]
+  const index = newSelection.indexOf(appointmentId)
+  
+  if (index > -1) {
+    newSelection.splice(index, 1)
+  } else {
+    newSelection.push(appointmentId)
+  }
+  
+  // Update the selection
+  selectedAppointments.value = newSelection
+}
+
+const isAppointmentSelected = (appointmentId: number) => {
+  return selectedAppointments.value.includes(appointmentId)
+}
+
+const toggleSelectAll = () => {
+  const availableAppointments = filteredAppointments.value
+  const availableIds = availableAppointments.map(a => a.id)
+  const allSelected = availableIds.every(id => selectedAppointments.value.includes(id))
+
+  if (allSelected) {
+    selectedAppointments.value = selectedAppointments.value.filter(id => !availableIds.includes(id))
+  } else {
+    const newSelections = availableIds.filter(id => !selectedAppointments.value.includes(id))
+    selectedAppointments.value = [...selectedAppointments.value, ...newSelections]
+  }
+}
+
+const clearSelection = () => {
+  selectedAppointments.value = []
+}
+
+// Computed property for filtered appointments (for select all functionality)
+const filteredAppointments = computed(() => {
+  // This should match your existing filtering logic
+  return appointments.value.filter(appointment => {
+    const matchesCalendar = !calendarFilter.value || 
+      (appointment.base?.calendar?.id?.toString() === calendarFilter.value)
+    // Add other filters as needed
+    return matchesCalendar
+  })
+})
+
+const clearAppointmentSelections = () => {
+  selectedAppointments.value = []
+}
+
 // Fetch tags for filtering
 const { data: allTags } = useTags()
 
@@ -196,8 +267,7 @@ const {
   selectedTagIds.value
 )
 
-// AdminTable reference
-const adminTableRef = ref()
+// AdminTable reference is already declared in the selection state
 
 // Data - prefer cached data
 const appointments = ref<Appointment[]>([])
@@ -217,7 +287,24 @@ watch(
 
 // Table configuration
 const tableColumns: TableColumn[] = [
-  { key: 'id', label: 'ID', sortable: true, resizable: true, width: 55, cellSlot: 'cell-id' },
+  {
+    key: 'checkbox',
+    label: '',
+    sortable: false,
+    resizable: false,
+    width: 30,
+    cellSlot: 'cell-checkbox',
+    headerClass: 'select-column',
+    cellClass: 'select-cell'
+  },
+  { 
+    key: 'id', 
+    label: 'ID', 
+    sortable: true, 
+    resizable: true, 
+    width: 55, 
+    cellSlot: 'cell-id' 
+  },
   {
     key: 'base.title',
     label: 'Titel',
@@ -469,7 +556,7 @@ const applyFilters = () => {
     if (selectedTagIds.value.length > 0) {
       filtered = filtered.filter((appointment) => {
         const appointmentTags = appointment.base.tags || []
-        return selectedTagIds.value.some((tagId) => 
+        return selectedTagIds.value.some((tagId) =>
           appointmentTags.some((tag: any) => tag.id === tagId)
         )
       })
@@ -742,6 +829,135 @@ select[multiple] option {
   transform: translateX(-50%) translateY(0);
 }
 
+/* Selection styles */
+.select-column {
+  width: 40px;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0 !important;
+  position: relative;
+  background-color: var(--ct-bg-secondary, #f8f9fa);
+  border-bottom: 2px solid var(--ct-border-color, #e0e0e0);
+}
+
+.select-cell {
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.5rem 0.5rem !important;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  user-select: none;
+}
+
+.checkbox-wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: relative;
+  height: 16px;
+  width: 16px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+.checkbox-wrapper:hover input ~ .checkmark {
+  border-color: #999;
+}
+
+.checkbox-wrapper input:checked ~ .checkmark {
+  background-color: var(--ct-primary, #3498db);
+  border-color: var(--ct-primary, #3498db);
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox-wrapper input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.data-row {
+  transition: background-color 0.2s ease;
+}
+
+.data-row:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.data-row.row-selected {
+  background-color: rgba(52, 152, 219, 0.1);
+}
+
+.data-row.row-selected:hover {
+  background-color: rgba(52, 152, 219, 0.15);
+}
+
+/* Selection styles */
+.select-column {
+  width: 40px;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0 !important;
+  position: relative;
+  background-color: var(--ct-bg-secondary, #f8f9fa);
+  border-bottom: 2px solid var(--ct-border-color, #e0e0e0);
+}
+
+.select-cell {
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.5rem 0.5rem !important;
+}
+
+.row-checkbox {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  margin: 0;
+  vertical-align: middle;
+}
+
+.data-row {
+  transition: background-color 0.2s ease;
+}
+
+.data-row:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.data-row.row-selected {
+  background-color: rgba(52, 152, 219, 0.1);
+}
+
+.data-row.row-selected:hover {
+  background-color: rgba(52, 152, 219, 0.15);
+}
+
 .no-tags {
   color: #9e9e9e;
   font-style: italic;

From f63aef81ee54d1e71602b4b549170c503b024a5b Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 20:42:15 +0100
Subject: [PATCH 07/14] wip modal details

---
 src/components/common/AdminTable.vue          |  20 +-
 .../ExpiringAppointmentsAdmin.vue             | 393 ++++++++++++++++--
 2 files changed, 381 insertions(+), 32 deletions(-)

diff --git a/src/components/common/AdminTable.vue b/src/components/common/AdminTable.vue
index 08f2ae2..861840f 100644
--- a/src/components/common/AdminTable.vue
+++ b/src/components/common/AdminTable.vue
@@ -90,10 +90,22 @@
                   :style="{ width: columnWidths[index] + 'px' }"
                   @click="column.sortable && sortBy(column.key)"
                 >
-                  {{ column.label }}
-                  <span v-if="column.sortable && sortField === column.key" class="sort-indicator">
-                    {{ sortDirection === 'asc' ? '↑' : '↓' }}
-                  </span>
+                  <!-- Custom Header Slot -->
+                  <slot
+                    v-if="column.headerSlot"
+                    :name="column.headerSlot"
+                    :column="column"
+                  >
+                    {{ column.label }}
+                  </slot>
+                  <!-- Default Header Content -->
+                  <template v-else>
+                    {{ column.label }}
+                    <span v-if="column.sortable && sortField === column.key" class="sort-indicator">
+                      {{ sortDirection === 'asc' ? '↑' : '↓' }}
+                    </span>
+                  </template>
+                  
                   <div
                     v-if="column.resizable"
                     class="resize-handle"
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index ad98195..c36ab9b 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -1,4 +1,126 @@
 <template>
+  <!-- Appointment Details Modal -->
+  <div v-if="selectedAppointment" class="modal-overlay">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h3>{{ selectedAppointment.base.title }}</h3>
+        <button class="close-btn" @click="selectedAppointment = null">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="appointment-details">
+          <!-- Titel -->
+          <div class="detail-section">
+            <h4>Titel</h4>
+            <p>{{ selectedAppointment.base.title }}</p>
+          </div>
+
+          <!-- Startzeit und Endzeit -->
+          <div class="detail-section">
+            <h4>Zeitraum</h4>
+            <div class="detail-grid">
+              <div class="detail-row">
+                <span class="detail-label">Start:</span>
+                <span>{{ formatDateTime(selectedAppointment.base.startDate) }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Ende:</span>
+                <span>{{ formatDateTime(selectedAppointment.base.endDate) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Wiederholung -->
+          <div class="detail-section" v-if="selectedAppointment.base.repetition">
+            <h4>Wiederholung</h4>
+            <div class="detail-grid">
+              <div class="detail-row">
+                <span class="detail-label">Typ:</span>
+                <span>{{ formatRepetitionType(selectedAppointment.base.repetition.type) }}</span>
+              </div>
+              <div class="detail-row" v-if="selectedAppointment.base.repetition.interval">
+                <span class="detail-label">Intervall:</span>
+                <span>Alle {{ selectedAppointment.base.repetition.interval }} Tage/Wochen/Monate</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Serienbeginn:</span>
+                <span>{{ formatDate(selectedAppointment.base.startDate) }}</span>
+              </div>
+              <div class="detail-row" v-if="selectedAppointment.base.repeatUntil">
+                <span class="detail-label">Serienende:</span>
+                <span>{{ formatDate(selectedAppointment.base.repeatUntil) }}</span>
+              </div>
+              <div class="detail-row" v-else>
+                <span class="detail-label">Serienende:</span>
+                <span>Kein Enddatum</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ausnahmen -->
+          <div class="detail-section" v-if="selectedAppointment.base.exceptions?.length">
+            <h4>Ausnahmen</h4>
+            <ul class="exception-list">
+              <li v-for="(exception, index) in selectedAppointment.base.exceptions" :key="index">
+                {{ formatDate(exception.date) }}: {{ exception.type }}
+              </li>
+            </ul>
+          </div>
+
+          <!-- Extra Termine -->
+          <div class="detail-section" v-if="selectedAppointment.base.additionals?.length">
+            <h4>Zusätzliche Termine</h4>
+            <ul class="additional-dates">
+              <li v-for="(date, index) in selectedAppointment.base.additionals" :key="index">
+                {{ formatDateTime(date) }}
+              </li>
+            </ul>
+          </div>
+
+          <!-- Tags -->
+          <div class="detail-section" v-if="selectedAppointment.base.tags?.length">
+            <h4>Tags</h4>
+            <div class="appointment-tags">
+              <div class="tags-container">
+                <div
+                  v-for="tag in [...selectedAppointment.base.tags].sort((a, b) => a.name.localeCompare(b.name))"
+                  :key="tag.id"
+                  class="tag-badge"
+                  :style="{
+                    backgroundColor: tag.color,
+                    color: getContrastColor(tag.color)
+                  }"
+                >
+                  {{ tag.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="detail-section" v-else>
+            <h4>Tags</h4>
+            <span class="no-tags">-</span>
+          </div>
+
+          <!-- Notizen -->
+          <div class="detail-section" v-if="selectedAppointment.base.note">
+            <h4>Notizen</h4>
+            <p class="note">{{ selectedAppointment.base.note }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a
+          :href="getAppointmentUrl(selectedAppointment)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ct-btn ct-btn-primary"
+        >
+          In ChurchTools öffnen
+        </a>
+        <button class="ct-btn ct-btn-outline" @click="selectedAppointment = null">Schließen</button>
+      </div>
+    </div>
+  </div>
+
   <AdminTable
     ref="adminTableRef"
     :data="appointments"
@@ -135,6 +257,15 @@
       </div>
     </template>
 
+    <template #header-checkbox>
+      <input
+        type="checkbox"
+        :checked="areAllAppointmentsSelected"
+        @change="toggleSelectAll"
+        class="ct-checkbox"
+      />
+    </template>
+
     <template #cell-checkbox="{ item }">
       <div @click.stop>
         <input
@@ -148,15 +279,13 @@
 
     <template #cell-actions="{ item }">
       <div class="action-buttons">
-        <a
-          :href="getAppointmentUrl(item)"
-          target="_blank"
-          rel="noopener noreferrer"
+        <button
+          @click="showAppointmentDetails(item)"
           class="ct-btn ct-btn-sm ct-btn-outline"
-          title="Termin in ChurchTools öffnen"
+          title="Details anzeigen"
         >
-          Öffnen
-        </a>
+          Details
+        </button>
       </div>
     </template>
   </AdminTable>
@@ -192,6 +321,66 @@ const selectedTagIds = ref<number[]>([])
 const selectedAppointments = ref<number[]>([])
 const adminTableRef = ref()
 
+// Modal state
+const selectedAppointment = ref<any>(null)
+
+// Show appointment details in modal
+const showAppointmentDetails = (appointment: any) => {
+  selectedAppointment.value = appointment
+}
+
+// Format date for display (date only)
+const formatDate = (dateString: string | null | undefined) => {
+  if (!dateString) return 'Nicht angegeben'
+  
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('de-DE', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    })
+  } catch (e) {
+    console.error('Error formatting date:', e)
+    return 'Ungültiges Datum'
+  }
+}
+
+// Format date and time for display
+const formatDateTime = (dateString: string | null | undefined) => {
+  if (!dateString) return 'Nicht angegeben'
+  
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('de-DE', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch (e) {
+    console.error('Error formatting date:', e)
+    return 'Ungültiges Datum/Zeit'
+  }
+}
+
+// Format repetition type for display
+const formatRepetitionType = (type: string | undefined) => {
+  if (!type) return 'Keine'
+  
+  const types: Record<string, string> = {
+    'daily': 'Täglich',
+    'weekly': 'Wöchentlich',
+    'monthly': 'Monatlich',
+    'yearly': 'Jährlich',
+    'workday': 'Jeden Werktag',
+    'custom': 'Benutzerdefiniert'
+  }
+  
+  return types[type] || type
+}
+
 // Selection methods
 const toggleAppointmentSelection = (appointmentId: number) => (e: Event) => {
   // Prevent the default behavior and stop propagation
@@ -216,14 +405,26 @@ const isAppointmentSelected = (appointmentId: number) => {
   return selectedAppointments.value.includes(appointmentId)
 }
 
+// Computed property to check if all appointments are selected
+const areAllAppointmentsSelected = computed(() => {
+  const availableAppointments = filteredAppointments.value
+  if (availableAppointments.length === 0) return false
+  return availableAppointments.every(appointment => 
+    selectedAppointments.value.includes(appointment.id)
+  )
+})
+
 const toggleSelectAll = () => {
   const availableAppointments = filteredAppointments.value
   const availableIds = availableAppointments.map(a => a.id)
-  const allSelected = availableIds.every(id => selectedAppointments.value.includes(id))
-
-  if (allSelected) {
-    selectedAppointments.value = selectedAppointments.value.filter(id => !availableIds.includes(id))
+  
+  if (areAllAppointmentsSelected.value) {
+    // If all are selected, deselect all
+    selectedAppointments.value = selectedAppointments.value.filter(
+      id => !availableIds.includes(id)
+    )
   } else {
+    // If not all are selected, select all
     const newSelections = availableIds.filter(id => !selectedAppointments.value.includes(id))
     selectedAppointments.value = [...selectedAppointments.value, ...newSelections]
   }
@@ -294,6 +495,7 @@ const tableColumns: TableColumn[] = [
     resizable: false,
     width: 30,
     cellSlot: 'cell-checkbox',
+    headerSlot: 'header-checkbox',
     headerClass: 'select-column',
     cellClass: 'select-cell'
   },
@@ -435,23 +637,7 @@ const getContrastColor = (hexColor: string) => {
   return brightness > 128 ? '#000000' : '#ffffff'
 }
 
-// Helper functions
-const formatDate = (dateString: string | null) => {
-  if (!dateString) return 'Nie'
-
-  try {
-    const date = new Date(dateString)
-    return date.toLocaleString('de-DE', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-    })
-  } catch {
-    return 'Ungültiges Datum'
-  }
-}
+// Helper functions - formatDate is defined above
 
 const getEffectiveEndDate = (appointment: Appointment) => {
   if (appointment.base.repeatUntil) {
@@ -747,6 +933,157 @@ select[multiple] option {
   background-color: rgba(52, 152, 219, 0.1);
 }
 
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  color: #333; /* Set default text color */
+}
+
+.modal-header {
+  padding: 20px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f9fafb;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #1f2937;
+  font-size: 1.25rem;
+}
+
+.modal-body {
+  padding: 20px;
+  background: white;
+}
+
+.detail-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.detail-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+div.detail-section > h4 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: #1f2937;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 0.75rem;
+}
+
+.detail-row {
+  display: flex;
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+  font-size: 0.95rem;
+}
+
+.detail-label {
+  font-weight: 600;
+  color: #4b5563;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+
+/* Lists styling */
+.exception-list,
+.additional-dates {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0 0;
+}
+
+.exception-list li,
+.additional-dates li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.exception-list li:last-child,
+.additional-dates li:last-child {
+  border-bottom: none;
+}
+
+/* Tags styling */
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.tag-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+/* Notes styling */
+.note {
+  margin: 0.5rem 0 0 0;
+  padding: 0.75rem;
+  background-color: #f9fafb;
+  border-radius: 0.375rem;
+  white-space: pre-wrap;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: #4b5563;
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
 /* Tag styles */
 .tags-container {
   display: flex;

From ec685e71b4f41cc8a16966142f78e7826b2ee42b Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Thu, 4 Dec 2025 21:08:16 +0100
Subject: [PATCH 08/14] commit

---
 .../ExpiringAppointmentsAdmin.vue             | 216 ++++++++++--------
 1 file changed, 127 insertions(+), 89 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index c36ab9b..4063af3 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -3,108 +3,103 @@
   <div v-if="selectedAppointment" class="modal-overlay">
     <div class="modal-content" @click.stop>
       <div class="modal-header">
-        <h3>{{ selectedAppointment.base.title }}</h3>
+        <h3>{{ selectedAppointment.base?.title || 'Termin' }}</h3>
         <button class="close-btn" @click="selectedAppointment = null">&times;</button>
       </div>
       <div class="modal-body">
         <div class="appointment-details">
-          <!-- Titel -->
+          <!-- Basic Info Section -->
           <div class="detail-section">
-            <h4>Titel</h4>
-            <p>{{ selectedAppointment.base.title }}</p>
-          </div>
-
-          <!-- Startzeit und Endzeit -->
-          <div class="detail-section">
-            <h4>Zeitraum</h4>
+            <h4>Termindetails</h4>
             <div class="detail-grid">
               <div class="detail-row">
-                <span class="detail-label">Start:</span>
-                <span>{{ formatDateTime(selectedAppointment.base.startDate) }}</span>
+                <span class="detail-label">Titel:</span>
+                <span>{{ selectedAppointment.base?.title || '-' }}</span>
               </div>
               <div class="detail-row">
-                <span class="detail-label">Ende:</span>
-                <span>{{ formatDateTime(selectedAppointment.base.endDate) }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Wiederholung -->
-          <div class="detail-section" v-if="selectedAppointment.base.repetition">
-            <h4>Wiederholung</h4>
-            <div class="detail-grid">
-              <div class="detail-row">
-                <span class="detail-label">Typ:</span>
-                <span>{{ formatRepetitionType(selectedAppointment.base.repetition.type) }}</span>
-              </div>
-              <div class="detail-row" v-if="selectedAppointment.base.repetition.interval">
-                <span class="detail-label">Intervall:</span>
-                <span>Alle {{ selectedAppointment.base.repetition.interval }} Tage/Wochen/Monate</span>
+                <span class="detail-label">Beginn:</span>
+                <span>{{ formatDateTime(selectedAppointment.calculated?.startDate) }}</span>
               </div>
               <div class="detail-row">
-                <span class="detail-label">Serienbeginn:</span>
-                <span>{{ formatDate(selectedAppointment.base.startDate) }}</span>
+                <span class="detail-label">Ende:</span>
+                <span>{{ formatDateTime(selectedAppointment.calculated?.endDate) }}</span>
               </div>
-              <div class="detail-row" v-if="selectedAppointment.base.repeatUntil">
-                <span class="detail-label">Serienende:</span>
-                <span>{{ formatDate(selectedAppointment.base.repeatUntil) }}</span>
+              
+              <!-- Series Information -->
+              <template v-if="selectedAppointment.base?.repeatId">
+                <div class="detail-row">
+                  <span class="detail-label">Serie:</span>
+                  <span>
+                    <template v-if="selectedAppointment.base.repeatFrequency === 0 || selectedAppointment.base.repeatOption">
+                      Manuell
+                    </template>
+                    <template v-else>
+                      {{ getRepetitionType(selectedAppointment.base.repeatFrequency) }}
+                      <template v-if="selectedAppointment.base.repeatFrequency > 1">
+                        , alle {{ selectedAppointment.base.repeatFrequency }}
+                        {{ getIntervalUnit(selectedAppointment.base.repeatFrequency) }}
+                      </template>
+                    </template>
+                    <template v-if="selectedAppointment.base.repeatUntil">
+                      , bis {{ formatDate(selectedAppointment.base.repeatUntil) }}
+                    </template>
+                    <template v-else-if="!selectedAppointment.base.repeatOption">
+                      , ohne Enddatum
+                    </template>
+                  </span>
+                </div>
+                
+                <!-- Exceptions -->
+                <div class="detail-row" v-if="selectedAppointment.base.exceptions?.length">
+                  <span class="detail-label">Ausnahmen:</span>
+                  <span>
+                    <template v-for="(exception, index) in selectedAppointment.base.exceptions" :key="exception.id || index">
+                      {{ formatDate(exception.date) }}<template v-if="index < selectedAppointment.base.exceptions.length - 1">, </template>
+                    </template>
+                  </span>
+                </div>
+                
+                <!-- Additional Dates -->
+                <div class="detail-row" v-if="selectedAppointment.base.additionals?.length">
+                  <span class="detail-label">Zusätzliche Termine:</span>
+                  <span>
+                    <template v-for="(date, index) in selectedAppointment.base.additionals" :key="index">
+                      {{ formatDate(date) }}<template v-if="index < selectedAppointment.base.additionals.length - 1">, </template>
+                    </template>
+                  </span>
+                </div>
+              </template>
+              
+              <!-- Tags -->
+              <div class="detail-row" v-if="selectedAppointment.tags?.length">
+                <span class="detail-label">Tags:</span>
+                <span class="tags-container">
+                  <template v-for="(tag, index) in [...selectedAppointment.tags].sort((a, b) => a.name.localeCompare(b.name))" :key="tag.id">
+                    <span 
+                      class="tag-badge"
+                      :style="{
+                        backgroundColor: tag.color,
+                        color: getContrastColor(tag.color)
+                      }"
+                    >
+                      {{ tag.name }}
+                    </span>
+                    <template v-if="index < selectedAppointment.tags.length - 1">, </template>
+                  </template>
+                </span>
               </div>
               <div class="detail-row" v-else>
-                <span class="detail-label">Serienende:</span>
-                <span>Kein Enddatum</span>
+                <span class="detail-label">Tags:</span>
+                <span>-</span>
               </div>
-            </div>
-          </div>
-
-          <!-- Ausnahmen -->
-          <div class="detail-section" v-if="selectedAppointment.base.exceptions?.length">
-            <h4>Ausnahmen</h4>
-            <ul class="exception-list">
-              <li v-for="(exception, index) in selectedAppointment.base.exceptions" :key="index">
-                {{ formatDate(exception.date) }}: {{ exception.type }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Extra Termine -->
-          <div class="detail-section" v-if="selectedAppointment.base.additionals?.length">
-            <h4>Zusätzliche Termine</h4>
-            <ul class="additional-dates">
-              <li v-for="(date, index) in selectedAppointment.base.additionals" :key="index">
-                {{ formatDateTime(date) }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Tags -->
-          <div class="detail-section" v-if="selectedAppointment.base.tags?.length">
-            <h4>Tags</h4>
-            <div class="appointment-tags">
-              <div class="tags-container">
-                <div
-                  v-for="tag in [...selectedAppointment.base.tags].sort((a, b) => a.name.localeCompare(b.name))"
-                  :key="tag.id"
-                  class="tag-badge"
-                  :style="{
-                    backgroundColor: tag.color,
-                    color: getContrastColor(tag.color)
-                  }"
-                >
-                  {{ tag.name }}
-                </div>
+              
+              <!-- Notes -->
+              <div class="detail-row" v-if="selectedAppointment.base?.note">
+                <span class="detail-label">Notizen:</span>
+                <span class="note">{{ selectedAppointment.base.note }}</span>
               </div>
             </div>
           </div>
-          <div class="detail-section" v-else>
-            <h4>Tags</h4>
-            <span class="no-tags">-</span>
-          </div>
-
-          <!-- Notizen -->
-          <div class="detail-section" v-if="selectedAppointment.base.note">
-            <h4>Notizen</h4>
-            <p class="note">{{ selectedAppointment.base.note }}</p>
-          </div>
         </div>
       </div>
       <div class="modal-footer">
@@ -326,22 +321,47 @@ const selectedAppointment = ref<any>(null)
 
 // Show appointment details in modal
 const showAppointmentDetails = (appointment: any) => {
+  console.log('Selected appointment data:', JSON.parse(JSON.stringify(appointment)))
   selectedAppointment.value = appointment
 }
 
 // Format date for display (date only)
-const formatDate = (dateString: string | null | undefined) => {
-  if (!dateString) return 'Nicht angegeben'
+const formatDate = (dateInput: string | Date | null | undefined | { date: string }) => {
+  if (!dateInput) return 'Nicht angegeben'
   
   try {
-    const date = new Date(dateString)
+    let date: Date
+    let dateString: string | Date = dateInput
+    
+    // Handle Proxy objects by converting to plain object
+    if (dateInput && typeof dateInput === 'object' && 'date' in dateInput) {
+      dateString = (dateInput as { date: string }).date
+    }
+    
+    if (dateString instanceof Date) {
+      date = dateString
+    } else {
+      // Handle YYYY-MM-DD format (which is what we get from the API)
+      if (/^\d{4}-\d{2}-\d{2}$/.test(dateString as string)) {
+        date = new Date(dateString + 'T00:00:00')
+      } else {
+        date = new Date(dateString as string)
+      }
+    }
+    
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      console.error('Invalid date:', dateInput)
+      return 'Ungültiges Datum'
+    }
+    
     return date.toLocaleDateString('de-DE', {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
     })
   } catch (e) {
-    console.error('Error formatting date:', e)
+    console.error('Error formatting date:', e, 'Input was:', dateInput)
     return 'Ungültiges Datum'
   }
 }
@@ -365,7 +385,25 @@ const formatDateTime = (dateString: string | null | undefined) => {
   }
 }
 
-// Format repetition type for display
+// Get repetition type based on frequency
+const getRepetitionType = (frequency: number) => {
+  if (frequency === 1) return 'Täglich'
+  if (frequency % 7 === 0) return 'Wöchentlich'
+  if (frequency % 30 === 0) return 'Monatlich'
+  if (frequency % 365 === 0) return 'Jährlich'
+  return 'Benutzerdefiniert'
+}
+
+// Get interval unit based on frequency
+const getIntervalUnit = (frequency: number) => {
+  if (frequency === 1) return 'Tag'
+  if (frequency % 365 === 0) return ' Jahre'
+  if (frequency % 30 === 0) return ' Monate'
+  if (frequency % 7 === 0) return ' Wochen'
+  return ' Tage'
+}
+
+// Format repetition type for display (kept for backward compatibility)
 const formatRepetitionType = (type: string | undefined) => {
   if (!type) return 'Keine'
   

From 1169dd80deb28736b8b8655760d56baccaa5f565 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <bernhard.weichel@t-online.de>
Date: Fri, 5 Dec 2025 14:12:29 +0100
Subject: [PATCH 09/14] fix(ExpiringAppointments): align tag styling with table
 implementation

- Updated tag display in appointment details modal to match table styling
- Fixed background and text color application for tags
- Ensured consistent tag appearance across the application
- Resolved issue with color codes being displayed as text
---
 .../expiring-appointments/ExpiringAppointmentsAdmin.vue     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 4063af3..6ad7847 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -78,8 +78,8 @@
                     <span 
                       class="tag-badge"
                       :style="{
-                        backgroundColor: tag.color,
-                        color: getContrastColor(tag.color)
+                        '--tag-bg': getTagColor(tag.color),
+                        '--tag-text': getContrastColor(getTagColor(tag.color))
                       }"
                     >
                       {{ tag.name }}
@@ -1092,6 +1092,7 @@ div.detail-section > h4 {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
+  background-color: var(--tag-bg) !important;
   border-radius: 1rem;
   font-size: 0.85rem;
   font-weight: 500;
@@ -1134,6 +1135,7 @@ div.detail-section > h4 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--tag-bg) !important;
   height: 24px;
   padding: 0 10px;
   border-radius: 3px;

From c039afcfc14032d0470a9ec2384cc6db2db827c8 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Fri, 5 Dec 2025 17:28:04 +0000
Subject: [PATCH 10/14] feat: Add bulk operations widget with appointment
 extension

- Add BulkActionsWidget component for reusable bulk operations UI
- Add selection support to AdminTable with checkboxes
- Implement bulk appointment extension functionality
- Fix checkbox reactivity by creating new Set instances
- Normalize appointment data to use seriesId for proper selection
- Add useBulkAppointmentActions composable for bulk operations
- Update AutomaticGroupsAdmin with selection count display

Co-authored-by: Ona <no-reply@ona.com>
---
 .../automatic-groups/AutomaticGroupsAdmin.vue | 185 +++++---
 src/components/common/AdminTable.vue          |  77 +++-
 src/components/common/BulkActionsWidget.vue   | 210 +++++++++
 src/components/common/TagMultiSelect.vue      | 120 ++---
 .../ExpiringAppointmentsAdmin.vue             | 434 +++++++-----------
 src/components/tags/TagsAdmin.vue             |   9 +-
 src/composables/useBulkAppointmentActions.ts  |  96 ++++
 src/composables/useExpiringAppointments.ts    |   7 +-
 src/services/churchtools.ts                   |  23 +-
 9 files changed, 761 insertions(+), 400 deletions(-)
 create mode 100644 src/components/common/BulkActionsWidget.vue
 create mode 100644 src/composables/useBulkAppointmentActions.ts

diff --git a/src/components/automatic-groups/AutomaticGroupsAdmin.vue b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
index 5c7dc1a..9a34ec7 100644
--- a/src/components/automatic-groups/AutomaticGroupsAdmin.vue
+++ b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
@@ -1,66 +1,80 @@
 <template>
-  <AdminTable
-    ref="adminTableRef"
-    :data="groups"
-    :loading="loading"
-    :error="error"
-    :columns="tableColumns"
-    row-key="id"
-    title="Automatische Gruppen - Admin Panel"
-    description="Überwachung und Verwaltung aller automatischen Gruppen"
-    searchable
-    search-placeholder="Gruppen durchsuchen..."
-    :search-fields="['name', 'groupTypeName']"
-    default-sort-field="id"
-    loading-text="Lade automatische Gruppen..."
-    empty-text="Keine automatischen Gruppen gefunden."
-    @retry="refreshGroups"
-    @reload="refreshGroups"
-  >
-    <!-- Custom Actions -->
-    <template #actions>
-      <button @click="clearSearch" class="ct-btn ct-btn-secondary" title="Suchfeld zurücksetzen">
-        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>
-
-    <!-- Custom Cell Rendering -->
-    <template #cell-name="{ item }">
-      <strong>{{ item.name }}</strong>
-    </template>
-
-    <template #cell-config="{ item }">
-      <span class="status-badge" :class="getConfigStatusClass(item.dynamicGroupStatus)">
-        {{ getConfigStatusText(item.dynamicGroupStatus) }}
-      </span>
-    </template>
-
-    <template #cell-status="{ item }">
-      <span class="status-badge" :class="getExecutionStatusClass(item.executionStatus)">
-        {{ getExecutionStatusText(item.executionStatus) }}
-      </span>
-    </template>
-
-    <template #cell-lastExecution="{ item }">
-      {{ formatDate(item.lastExecution) }}
-    </template>
-
-    <template #cell-actions="{ item }">
-      <a
-        :href="getGroupUrl(item.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="ct-btn ct-btn-sm ct-btn-outline"
-        title="Gruppe in ChurchTools öffnen"
-      >
-        Öffnen
-      </a>
-    </template>
-  </AdminTable>
+  <div class="admin-container">
+    <!-- Selection Count Box - Always visible for testing -->
+    <div class="selection-count-box">
+      <strong>{{ selectedCount }}</strong>
+      {{ selectedCount === 1 ? 'Gruppe' : 'Gruppen' }} ausgewählt
+    </div>
+
+    <AdminTable
+      ref="adminTableRef"
+      :data="groups"
+      :loading="loading"
+      :error="error"
+      :columns="tableColumns"
+      row-key="id"
+      title="Automatische Gruppen - Admin Panel"
+      description="Überwachung und Verwaltung aller automatischen Gruppen"
+      searchable
+      search-placeholder="Gruppen durchsuchen..."
+      :search-fields="['name', 'groupTypeName']"
+      default-sort-field="id"
+      loading-text="Lade automatische Gruppen..."
+      empty-text="Keine automatischen Gruppen gefunden."
+      selectable
+      @retry="refreshGroups"
+      @reload="refreshGroups"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- Custom Actions -->
+      <template #actions>
+        <button @click="clearSearch" class="ct-btn ct-btn-secondary" title="Suchfeld zurücksetzen">
+          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>
+
+      <!-- Custom Cell Rendering -->
+      <template #cell-name="{ item }">
+        <strong>{{ item.name }}</strong>
+      </template>
+
+      <template #cell-config="{ item }">
+        <span class="status-badge" :class="getConfigStatusClass(item.dynamicGroupStatus)">
+          {{ getConfigStatusText(item.dynamicGroupStatus) }}
+        </span>
+      </template>
+
+      <template #cell-status="{ item }">
+        <span class="status-badge" :class="getExecutionStatusClass(item.executionStatus)">
+          {{ getExecutionStatusText(item.executionStatus) }}
+        </span>
+      </template>
+
+      <template #cell-lastExecution="{ item }">
+        {{ formatDate(item.lastExecution) }}
+      </template>
+
+      <template #cell-actions="{ item }">
+        <a
+          :href="getGroupUrl(item.id)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ct-btn ct-btn-sm ct-btn-outline"
+          title="Gruppe in ChurchTools öffnen"
+        >
+          Öffnen
+        </a>
+      </template>
+    </AdminTable>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -82,6 +96,13 @@ const loading = computed(() => isLoading.value || isFetching.value)
 // AdminTable reference
 const adminTableRef = ref()
 
+// Selection management
+const selectedCount = ref(0)
+
+const handleSelectionChange = (selectedIds: number[]) => {
+  selectedCount.value = selectedIds.length
+}
+
 // Table configuration
 const tableColumns: TableColumn[] = [
   { key: 'id', label: 'Gruppen-ID', sortable: true, resizable: true, width: 100 },
@@ -326,4 +347,44 @@ const clearSearch = () => {
     transform: rotate(360deg);
   }
 }
+
+/* Admin container */
+.admin-container {
+  position: relative;
+}
+
+/* Selection count box */
+.selection-count-box {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: white;
+  border: 2px solid var(--ct-primary, #3498db);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  font-size: 0.95rem;
+  color: var(--ct-text-primary, #2c3e50);
+  animation: slideIn 0.3s ease-out;
+  min-width: 200px;
+  text-align: center;
+}
+
+.selection-count-box strong {
+  color: var(--ct-primary, #3498db);
+  font-size: 1.2rem;
+  margin-right: 0.25rem;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>
diff --git a/src/components/common/AdminTable.vue b/src/components/common/AdminTable.vue
index 861840f..fe83bcc 100644
--- a/src/components/common/AdminTable.vue
+++ b/src/components/common/AdminTable.vue
@@ -79,6 +79,14 @@
           <table class="admin-data-table" ref="tableRef">
             <thead>
               <tr>
+                <th v-if="selectable" class="checkbox-column">
+                  <input
+                    type="checkbox"
+                    :checked="isAllSelected"
+                    @change="toggleSelectAll"
+                    class="ct-checkbox"
+                  />
+                </th>
                 <th
                   v-for="(column, index) in columns"
                   :key="column.key"
@@ -91,11 +99,7 @@
                   @click="column.sortable && sortBy(column.key)"
                 >
                   <!-- Custom Header Slot -->
-                  <slot
-                    v-if="column.headerSlot"
-                    :name="column.headerSlot"
-                    :column="column"
-                  >
+                  <slot v-if="column.headerSlot" :name="column.headerSlot" :column="column">
                     {{ column.label }}
                   </slot>
                   <!-- Default Header Content -->
@@ -105,7 +109,7 @@
                       {{ sortDirection === 'asc' ? '↑' : '↓' }}
                     </span>
                   </template>
-                  
+
                   <div
                     v-if="column.resizable"
                     class="resize-handle"
@@ -116,6 +120,14 @@
             </thead>
             <tbody>
               <tr v-for="item in filteredData" :key="item[rowKey]" class="data-row">
+                <td v-if="selectable" class="checkbox-column">
+                  <input
+                    type="checkbox"
+                    :checked="selectedItems.has(item[rowKey])"
+                    @change="toggleSelectItem(item[rowKey])"
+                    class="ct-checkbox"
+                  />
+                </td>
                 <td v-for="column in columns" :key="column.key">
                   <!-- Custom Cell Rendering via Slots -->
                   <slot
@@ -167,6 +179,9 @@ interface Props {
   defaultSortField?: string
   defaultSortDirection?: SortDirection
 
+  // Selection
+  selectable?: boolean
+
   // Text customization
   loadingText?: string
   retryText?: string
@@ -179,6 +194,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchPlaceholder: 'Suchen...',
   searchFields: () => [],
   defaultSortDirection: 'asc',
+  selectable: false,
   loadingText: 'Lädt...',
   retryText: 'Erneut versuchen',
   reloadText: 'Erneut laden',
@@ -188,6 +204,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   retry: []
   reload: []
+  'selection-change': [selectedIds: any[]]
 }>()
 
 // Development mode detection
@@ -223,6 +240,38 @@ const hasActiveFilters = computed(() => {
   return searchTerm.value !== ''
 })
 
+// Selection management
+const selectedItems = ref<Set<any>>(new Set())
+
+const isAllSelected = computed(() => {
+  return filteredData.value.length > 0 && selectedItems.value.size === filteredData.value.length
+})
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedItems.value = new Set()
+  } else {
+    selectedItems.value = new Set(filteredData.value.map((item) => item[props.rowKey]))
+  }
+  emit('selection-change', Array.from(selectedItems.value))
+}
+
+const toggleSelectItem = (itemId: any) => {
+  const newSet = new Set(selectedItems.value)
+  if (newSet.has(itemId)) {
+    newSet.delete(itemId)
+  } else {
+    newSet.add(itemId)
+  }
+  selectedItems.value = newSet
+  emit('selection-change', Array.from(selectedItems.value))
+}
+
+const clearSelection = () => {
+  selectedItems.value = new Set()
+  emit('selection-change', [])
+}
+
 // Clear search function for parent components
 const clearSearch = () => {
   searchTerm.value = ''
@@ -232,7 +281,9 @@ const clearSearch = () => {
 defineExpose({
   searchTerm: readonly(searchTerm),
   filteredData: readonly(filteredData),
+  selectedItems: readonly(selectedItems),
   clearSearch,
+  clearSelection,
 })
 </script>
 
@@ -558,6 +609,20 @@ defineExpose({
   background-color: var(--ct-bg-secondary, #f8f9fa);
 }
 
+/* Checkbox column */
+.checkbox-column {
+  width: 40px;
+  text-align: center;
+  padding: 0.75rem 0.5rem;
+}
+
+.ct-checkbox {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--ct-primary, #3498db);
+}
+
 /* Buttons */
 .ct-btn {
   padding: 0.75rem 1.5rem;
diff --git a/src/components/common/BulkActionsWidget.vue b/src/components/common/BulkActionsWidget.vue
new file mode 100644
index 0000000..1e27557
--- /dev/null
+++ b/src/components/common/BulkActionsWidget.vue
@@ -0,0 +1,210 @@
+<template>
+  <div v-if="selectedCount > 0" class="bulk-actions-widget">
+    <div class="widget-header">
+      <div class="selection-info">
+        <strong>{{ selectedCount }}</strong>
+        {{ itemLabel }}
+      </div>
+      <button @click="$emit('clear-selection')" class="clear-btn" title="Auswahl aufheben">
+        ✕
+      </button>
+    </div>
+
+    <div class="widget-actions">
+      <slot name="actions" :selectedCount="selectedCount" :selectedIds="selectedIds">
+        <!-- Default: No actions -->
+        <p class="no-actions">Keine Aktionen verfügbar</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  selectedIds: number[]
+  singularLabel: string
+  pluralLabel: string
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  'clear-selection': []
+}>()
+
+const selectedCount = computed(() => props.selectedIds.length)
+
+const itemLabel = computed(() => {
+  return selectedCount.value === 1
+    ? `${props.singularLabel} ausgewählt`
+    : `${props.pluralLabel} ausgewählt`
+})
+</script>
+
+<style scoped>
+.bulk-actions-widget {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: white;
+  border: 2px solid var(--ct-primary, #3498db);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  min-width: 280px;
+  max-width: 400px;
+  animation: slideIn 0.3s ease-out;
+}
+
+.widget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--ct-border-color, #e0e0e0);
+  background: var(--ct-bg-secondary, #f8f9fa);
+  border-radius: 6px 6px 0 0;
+}
+
+.selection-info {
+  font-size: 0.95rem;
+  color: var(--ct-text-primary, #2c3e50);
+}
+
+.selection-info strong {
+  color: var(--ct-primary, #3498db);
+  font-size: 1.2rem;
+  margin-right: 0.25rem;
+}
+
+.clear-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--ct-text-secondary, #6c757d);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.clear-btn:hover {
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
+}
+
+.widget-actions {
+  padding: 1rem 1.5rem;
+}
+
+.no-actions {
+  margin: 0;
+  color: var(--ct-text-secondary, #6c757d);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Action button styles for slotted content */
+:deep(.bulk-action-btn) {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+:deep(.bulk-action-btn:last-child) {
+  margin-bottom: 0;
+}
+
+:deep(.bulk-action-btn:disabled) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:deep(.bulk-action-btn.primary) {
+  background-color: var(--ct-primary, #3498db);
+  color: white;
+}
+
+:deep(.bulk-action-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);
+}
+
+:deep(.bulk-action-btn.success) {
+  background-color: var(--ct-success, #28a745);
+  color: white;
+}
+
+:deep(.bulk-action-btn.success:hover:not(:disabled)) {
+  background-color: #218838;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.bulk-action-btn.danger) {
+  background-color: var(--ct-danger, #dc3545);
+  color: white;
+}
+
+:deep(.bulk-action-btn.danger:hover:not(:disabled)) {
+  background-color: #c82333;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.bulk-action-btn.secondary) {
+  background-color: var(--ct-secondary, #6c757d);
+  color: white;
+}
+
+:deep(.bulk-action-btn.secondary:hover:not(:disabled)) {
+  background-color: var(--ct-secondary-dark, #5a6268);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.action-spinner) {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/common/TagMultiSelect.vue b/src/components/common/TagMultiSelect.vue
index 0093ff9..b061eb0 100644
--- a/src/components/common/TagMultiSelect.vue
+++ b/src/components/common/TagMultiSelect.vue
@@ -4,17 +4,17 @@
       <div class="selected-tags">
         <span v-if="selectedTags.length === 0" class="placeholder">Filter nach Tags</span>
         <div v-else class="chips-container">
-          <span 
-            v-for="tag in selectedTags" 
-            :key="tag.id" 
-            class="chip" 
+          <span
+            v-for="tag in selectedTags"
+            :key="tag.id"
+            class="chip"
             :style="{
               '--tag-bg': getTagColor(tag.color),
-              '--tag-text': getContrastColor(getTagColor(tag.color))
+              '--tag-text': getContrastColor(getTagColor(tag.color)),
             }"
           >
             <span class="chip-text">{{ tag.name }}</span>
-            <button 
+            <button
               class="chip-remove"
               @click.stop="removeTag(tag.id)"
               :style="{ color: getContrastColor(getTagColor(tag.color)) }"
@@ -25,9 +25,9 @@
           </span>
         </div>
       </div>
-      <span class="dropdown-icon" :class="{ 'open': isOpen }">▼</span>
+      <span class="dropdown-icon" :class="{ open: isOpen }">▼</span>
     </div>
-    
+
     <Teleport to="body">
       <div v-if="isOpen" class="dropdown-portal">
         <div ref="dropdownRef" class="dropdown-content">
@@ -41,36 +41,32 @@
               @click.stop
             />
           </div>
-          
+
           <div class="tags-list">
-            <div 
-              v-for="tag in filteredTags" 
-              :key="tag.id" 
-              class="tag-option" 
+            <div
+              v-for="tag in filteredTags"
+              :key="tag.id"
+              class="tag-option"
               @click="toggleTag(tag)"
             >
               <div class="tag-color" :style="{ backgroundColor: tag.color }"></div>
               <span class="tag-name">{{ tag.name }}</span>
               <span v-if="isSelected(tag.id)" class="checkmark">✓</span>
             </div>
-            
+
             <div v-if="filteredTags.length === 0" class="no-results">
               Keine passenden Tags gefunden
             </div>
           </div>
-          
+
           <div v-if="selectedTags.length > 0" class="dropdown-actions">
             <div class="action-buttons">
-              <button class="action-btn select-all" @click.stop="selectAll">
-                Alle auswählen
-              </button>
+              <button class="action-btn select-all" @click.stop="selectAll">Alle auswählen</button>
               <button class="action-btn select-none" @click.stop="clearSelection">
                 Keine auswählen
               </button>
             </div>
-            <button class="clear-btn" @click.stop="clearSelection">
-              Auswahl zurücksetzen
-            </button>
+            <button class="clear-btn" @click.stop="clearSelection">Auswahl zurücksetzen</button>
           </div>
         </div>
       </div>
@@ -84,13 +80,13 @@ import { onClickOutside } from '@vueuse/core'
 
 const props = defineProps({
   modelValue: {
-    type: Array as () => number[], 
-    default: () => []
+    type: Array as () => number[],
+    default: () => [],
   },
   tags: {
-    type: Array as () => Array<{id: number, name: string, color: string}>,
-    required: true
-  }
+    type: Array as () => Array<{ id: number; name: string; color: string }>,
+    required: true,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -103,34 +99,32 @@ const searchInput = ref<HTMLInputElement | null>(null)
 
 const filteredTags = computed(() => {
   const query = searchQuery.value.toLowerCase()
-  return props.tags.filter(tag => 
-    tag.name.toLowerCase().includes(query)
-  )
+  return props.tags.filter((tag) => tag.name.toLowerCase().includes(query))
 })
 
 const selectedTags = computed(() => {
-  return props.tags.filter(tag => props.modelValue.includes(tag.id))
+  return props.tags.filter((tag) => props.modelValue.includes(tag.id))
 })
 
 const isSelected = (tagId: number) => {
   return props.modelValue.includes(tagId)
 }
 
-const toggleTag = (tag: {id: number}) => {
+const toggleTag = (tag: { id: number }) => {
   const newValue = [...props.modelValue]
   const index = newValue.indexOf(tag.id)
-  
+
   if (index === -1) {
     newValue.push(tag.id)
   } else {
     newValue.splice(index, 1)
   }
-  
+
   emit('update:modelValue', newValue)
 }
 
 const removeTag = (tagId: number) => {
-  const newValue = props.modelValue.filter(id => id !== tagId)
+  const newValue = props.modelValue.filter((id) => id !== tagId)
   emit('update:modelValue', newValue)
 }
 
@@ -140,7 +134,7 @@ const clearSelection = () => {
 }
 
 const selectAll = () => {
-  const allTagIds = props.tags.map(tag => tag.id)
+  const allTagIds = props.tags.map((tag) => tag.id)
   emit('update:modelValue', [...allTagIds])
 }
 
@@ -158,21 +152,21 @@ const toggleDropdown = (event: Event) => {
 
 const positionDropdown = () => {
   if (!dropdownRef.value || !containerRef.value) return
-  
+
   const containerRect = containerRef.value.getBoundingClientRect()
   const dropdown = dropdownRef.value
-  
+
   // Set the width to match the container
   dropdown.style.width = `${containerRect.width}px`
-  
+
   // Position the dropdown directly below the container
   dropdown.style.left = `${containerRect.left + window.scrollX}px`
   dropdown.style.top = `${containerRect.bottom + window.scrollY + 4}px`
-  
+
   // Check if there's enough space below, if not, position above
   const spaceBelow = window.innerHeight - containerRect.bottom
   const spaceAbove = containerRect.top
-  
+
   if (spaceBelow < 300 && spaceAbove > spaceBelow) {
     // Position above if there's more space above
     dropdown.style.top = 'auto'
@@ -190,25 +184,25 @@ const handleClickOutside = (event: MouseEvent) => {
 const getTagColor = (colorName: string): string => {
   // Map of color names to hex values - matching the table's color scheme
   const colorMap: Record<string, string> = {
-    'basic': '#e0e0e0',
-    'blue': '#2196F3',
-    'green': '#4CAF50',
-    'yellow': '#FFC107',
-    'red': '#F44336',
-    'purple': '#9C27B0',
-    'orange': '#FF9800',
-    'teal': '#009688',
-    'pink': '#E91E63',
-    'brown': '#795548',
-    'gray': '#9E9E9E',
-    'black': '#000000'
+    basic: '#e0e0e0',
+    blue: '#2196F3',
+    green: '#4CAF50',
+    yellow: '#FFC107',
+    red: '#F44336',
+    purple: '#9C27B0',
+    orange: '#FF9800',
+    teal: '#009688',
+    pink: '#E91E63',
+    brown: '#795548',
+    gray: '#9E9E9E',
+    black: '#000000',
   }
-  
+
   // Return the hex color if it's already a hex value
   if (colorName.startsWith('#')) {
     return colorName
   }
-  
+
   // Return the mapped color or a default gray if not found
   return colorMap[colorName.toLowerCase()] || '#e0e0e0'
 }
@@ -224,9 +218,13 @@ const getContrastColor = (hexColor: string) => {
 }
 
 // Close dropdown when clicking outside
-onClickOutside(dropdownRef, () => {
-  isOpen.value = false
-}, { ignore: [containerRef] })
+onClickOutside(
+  dropdownRef,
+  () => {
+    isOpen.value = false
+  },
+  { ignore: [containerRef] }
+)
 
 // Close dropdown when window is scrolled or resized
 onMounted(() => {
@@ -276,7 +274,9 @@ const handleResize = () => {
   gap: 0.5rem;
   width: 100%;
   box-sizing: border-box;
-  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
   overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
 }
 
@@ -340,7 +340,9 @@ const handleResize = () => {
   text-overflow: ellipsis;
   max-width: 100%;
   cursor: default;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .chip:hover {
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 6ad7847..0835621 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -1,4 +1,33 @@
 <template>
+  <!-- Bulk Actions Widget -->
+  <BulkActionsWidget
+    :selected-ids="selectedAppointments"
+    singular-label="Termin"
+    plural-label="Termine"
+    @clear-selection="clearSelection"
+  >
+    <template #actions="{ selectedCount }">
+      <div class="extend-section">
+        <label for="extension-months">Verlängern um:</label>
+        <select id="extension-months" v-model="extensionMonths" class="ct-select">
+          <option value="3">3 Monate</option>
+          <option value="6">6 Monate</option>
+          <option value="12">12 Monate</option>
+          <option value="18">18 Monate</option>
+          <option value="24">24 Monate</option>
+        </select>
+      </div>
+      <button
+        @click="handleExtendAppointments"
+        :disabled="isProcessing"
+        class="bulk-action-btn success"
+      >
+        <span v-if="isProcessing" class="action-spinner"></span>
+        {{ isProcessing ? 'Verlängere...' : `${selectedCount} Termine verlängern` }}
+      </button>
+    </template>
+  </BulkActionsWidget>
+
   <!-- Appointment Details Modal -->
   <div v-if="selectedAppointment" class="modal-overlay">
     <div class="modal-content" @click.stop>
@@ -24,13 +53,18 @@
                 <span class="detail-label">Ende:</span>
                 <span>{{ formatDateTime(selectedAppointment.calculated?.endDate) }}</span>
               </div>
-              
+
               <!-- Series Information -->
               <template v-if="selectedAppointment.base?.repeatId">
                 <div class="detail-row">
                   <span class="detail-label">Serie:</span>
                   <span>
-                    <template v-if="selectedAppointment.base.repeatFrequency === 0 || selectedAppointment.base.repeatOption">
+                    <template
+                      v-if="
+                        selectedAppointment.base.repeatFrequency === 0 ||
+                        selectedAppointment.base.repeatOption
+                      "
+                    >
                       Manuell
                     </template>
                     <template v-else>
@@ -48,43 +82,60 @@
                     </template>
                   </span>
                 </div>
-                
+
                 <!-- Exceptions -->
                 <div class="detail-row" v-if="selectedAppointment.base.exceptions?.length">
                   <span class="detail-label">Ausnahmen:</span>
                   <span>
-                    <template v-for="(exception, index) in selectedAppointment.base.exceptions" :key="exception.id || index">
-                      {{ formatDate(exception.date) }}<template v-if="index < selectedAppointment.base.exceptions.length - 1">, </template>
+                    <template
+                      v-for="(exception, index) in selectedAppointment.base.exceptions"
+                      :key="exception.id || index"
+                    >
+                      {{ formatDate(exception.date) }}
+                      <template v-if="index < selectedAppointment.base.exceptions.length - 1">
+                        ,
+                      </template>
                     </template>
                   </span>
                 </div>
-                
+
                 <!-- Additional Dates -->
                 <div class="detail-row" v-if="selectedAppointment.base.additionals?.length">
                   <span class="detail-label">Zusätzliche Termine:</span>
                   <span>
-                    <template v-for="(date, index) in selectedAppointment.base.additionals" :key="index">
-                      {{ formatDate(date) }}<template v-if="index < selectedAppointment.base.additionals.length - 1">, </template>
+                    <template
+                      v-for="(date, index) in selectedAppointment.base.additionals"
+                      :key="index"
+                    >
+                      {{ formatDate(date) }}
+                      <template v-if="index < selectedAppointment.base.additionals.length - 1">
+                        ,
+                      </template>
                     </template>
                   </span>
                 </div>
               </template>
-              
+
               <!-- Tags -->
               <div class="detail-row" v-if="selectedAppointment.tags?.length">
                 <span class="detail-label">Tags:</span>
                 <span class="tags-container">
-                  <template v-for="(tag, index) in [...selectedAppointment.tags].sort((a, b) => a.name.localeCompare(b.name))" :key="tag.id">
-                    <span 
+                  <template
+                    v-for="(tag, index) in [...selectedAppointment.tags].sort((a, b) =>
+                      a.name.localeCompare(b.name)
+                    )"
+                    :key="tag.id"
+                  >
+                    <span
                       class="tag-badge"
                       :style="{
                         '--tag-bg': getTagColor(tag.color),
-                        '--tag-text': getContrastColor(getTagColor(tag.color))
+                        '--tag-text': getContrastColor(getTagColor(tag.color)),
                       }"
                     >
                       {{ tag.name }}
                     </span>
-                    <template v-if="index < selectedAppointment.tags.length - 1">, </template>
+                    <template v-if="index < selectedAppointment.tags.length - 1">,</template>
                   </template>
                 </span>
               </div>
@@ -92,7 +143,7 @@
                 <span class="detail-label">Tags:</span>
                 <span>-</span>
               </div>
-              
+
               <!-- Notes -->
               <div class="detail-row" v-if="selectedAppointment.base?.note">
                 <span class="detail-label">Notizen:</span>
@@ -122,17 +173,19 @@
     :loading="isLoading"
     :error="error"
     :columns="tableColumns"
-    row-key="id"
+    row-key="seriesId"
     title="auslaufende Terminserien - Admin Panel"
     description="Überwachung und Verwaltung aller auslaufenden Terminserien"
     searchable
     search-placeholder="Suche nach ID, Titel oder Kalender..."
-    :search-fields="['id', 'base.title', 'base.calendar.name']"
-    default-sort-field="id"
+    :search-fields="['seriesId', 'base.title', 'base.calendar.name']"
+    default-sort-field="seriesId"
     loading-text="Lade auslaufende Terminserien..."
     empty-text="Keine auslaufenden Termine gefunden."
+    selectable
     @retry="refreshData"
     @reload="refreshData"
+    @selection-change="handleSelectionChange"
   >
     <!-- Header Controls -->
     <template #header-controls>
@@ -201,7 +254,7 @@
 
     <!-- Custom Cell Rendering -->
     <template #cell-id="{ item }">
-      <span class="id-cell">{{ item.id || item.base?.id || 'NO_ID' }}</span>
+      <span class="id-cell">{{ item.seriesId || item.base?.id || 'NO_ID' }}</span>
     </template>
 
     <template #cell-title="{ item }">
@@ -240,7 +293,7 @@
               class="tag-badge"
               :style="{
                 '--tag-bg': getTagColor(tag.color),
-                '--tag-text': getContrastColor(getTagColor(tag.color))
+                '--tag-text': getContrastColor(getTagColor(tag.color)),
               }"
               :title="tag.description"
             >
@@ -252,26 +305,6 @@
       </div>
     </template>
 
-    <template #header-checkbox>
-      <input
-        type="checkbox"
-        :checked="areAllAppointmentsSelected"
-        @change="toggleSelectAll"
-        class="ct-checkbox"
-      />
-    </template>
-
-    <template #cell-checkbox="{ item }">
-      <div @click.stop>
-        <input
-          type="checkbox"
-          :checked="isAppointmentSelected(item.id)"
-          @click="toggleAppointmentSelection(item.id)"
-          class="ct-checkbox"
-        />
-      </div>
-    </template>
-
     <template #cell-actions="{ item }">
       <div class="action-buttons">
         <button
@@ -290,10 +323,12 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import type { DashboardModule } from '@/types/modules'
 import TagMultiSelect from '@/components/common/TagMultiSelect.vue'
+import BulkActionsWidget from '@/components/common/BulkActionsWidget.vue'
 import type { TableColumn } from '@/types/table'
 import { findExpiringSeries, getAppointmentUrl, type Appointment } from '@/services/churchtools'
 import { useExpiringAppointments } from '@/composables/useExpiringAppointments'
 import { useTags } from '@/composables/useTags'
+import { useBulkAppointmentActions } from '@/composables/useBulkAppointmentActions'
 import AdminTable from '@/components/common/AdminTable.vue'
 import { useToast } from '@/composables/useToast'
 
@@ -316,6 +351,15 @@ const selectedTagIds = ref<number[]>([])
 const selectedAppointments = ref<number[]>([])
 const adminTableRef = ref()
 
+// Bulk actions
+const { isProcessing, extendAppointments } = useBulkAppointmentActions()
+const extensionMonths = ref(12)
+
+// Handle selection changes from AdminTable
+const handleSelectionChange = (selectedIds: number[]) => {
+  selectedAppointments.value = selectedIds
+}
+
 // Modal state
 const selectedAppointment = ref<any>(null)
 
@@ -328,16 +372,16 @@ const showAppointmentDetails = (appointment: any) => {
 // Format date for display (date only)
 const formatDate = (dateInput: string | Date | null | undefined | { date: string }) => {
   if (!dateInput) return 'Nicht angegeben'
-  
+
   try {
     let date: Date
     let dateString: string | Date = dateInput
-    
+
     // Handle Proxy objects by converting to plain object
     if (dateInput && typeof dateInput === 'object' && 'date' in dateInput) {
       dateString = (dateInput as { date: string }).date
     }
-    
+
     if (dateString instanceof Date) {
       date = dateString
     } else {
@@ -348,13 +392,13 @@ const formatDate = (dateInput: string | Date | null | undefined | { date: string
         date = new Date(dateString as string)
       }
     }
-    
+
     // Check if date is valid
     if (isNaN(date.getTime())) {
       console.error('Invalid date:', dateInput)
       return 'Ungültiges Datum'
     }
-    
+
     return date.toLocaleDateString('de-DE', {
       year: 'numeric',
       month: '2-digit',
@@ -369,7 +413,7 @@ const formatDate = (dateInput: string | Date | null | undefined | { date: string
 // Format date and time for display
 const formatDateTime = (dateString: string | null | undefined) => {
   if (!dateString) return 'Nicht angegeben'
-  
+
   try {
     const date = new Date(dateString)
     return date.toLocaleString('de-DE', {
@@ -406,83 +450,38 @@ const getIntervalUnit = (frequency: number) => {
 // Format repetition type for display (kept for backward compatibility)
 const formatRepetitionType = (type: string | undefined) => {
   if (!type) return 'Keine'
-  
+
   const types: Record<string, string> = {
-    'daily': 'Täglich',
-    'weekly': 'Wöchentlich',
-    'monthly': 'Monatlich',
-    'yearly': 'Jährlich',
-    'workday': 'Jeden Werktag',
-    'custom': 'Benutzerdefiniert'
+    daily: 'Täglich',
+    weekly: 'Wöchentlich',
+    monthly: 'Monatlich',
+    yearly: 'Jährlich',
+    workday: 'Jeden Werktag',
+    custom: 'Benutzerdefiniert',
   }
-  
+
   return types[type] || type
 }
 
-// Selection methods
-const toggleAppointmentSelection = (appointmentId: number) => (e: Event) => {
-  // Prevent the default behavior and stop propagation
-  e.preventDefault()
-  e.stopPropagation()
-  
-  // Create a new array to ensure reactivity
-  const newSelection = [...selectedAppointments.value]
-  const index = newSelection.indexOf(appointmentId)
-  
-  if (index > -1) {
-    newSelection.splice(index, 1)
-  } else {
-    newSelection.push(appointmentId)
+const clearSelection = () => {
+  if (adminTableRef.value?.clearSelection) {
+    adminTableRef.value.clearSelection()
   }
-  
-  // Update the selection
-  selectedAppointments.value = newSelection
 }
 
-const isAppointmentSelected = (appointmentId: number) => {
-  return selectedAppointments.value.includes(appointmentId)
-}
+// Bulk action handlers
+const handleExtendAppointments = async () => {
+  if (selectedAppointments.value.length === 0) return
 
-// Computed property to check if all appointments are selected
-const areAllAppointmentsSelected = computed(() => {
-  const availableAppointments = filteredAppointments.value
-  if (availableAppointments.length === 0) return false
-  return availableAppointments.every(appointment => 
-    selectedAppointments.value.includes(appointment.id)
-  )
-})
+  const result = await extendAppointments(selectedAppointments.value, extensionMonths.value)
 
-const toggleSelectAll = () => {
-  const availableAppointments = filteredAppointments.value
-  const availableIds = availableAppointments.map(a => a.id)
-  
-  if (areAllAppointmentsSelected.value) {
-    // If all are selected, deselect all
-    selectedAppointments.value = selectedAppointments.value.filter(
-      id => !availableIds.includes(id)
-    )
-  } else {
-    // If not all are selected, select all
-    const newSelections = availableIds.filter(id => !selectedAppointments.value.includes(id))
-    selectedAppointments.value = [...selectedAppointments.value, ...newSelections]
+  if (result.success > 0) {
+    // Clear selection and refresh data
+    clearSelection()
+    await refreshData()
   }
 }
 
-const clearSelection = () => {
-  selectedAppointments.value = []
-}
-
-// Computed property for filtered appointments (for select all functionality)
-const filteredAppointments = computed(() => {
-  // This should match your existing filtering logic
-  return appointments.value.filter(appointment => {
-    const matchesCalendar = !calendarFilter.value || 
-      (appointment.base?.calendar?.id?.toString() === calendarFilter.value)
-    // Add other filters as needed
-    return matchesCalendar
-  })
-})
-
 const clearAppointmentSelections = () => {
   selectedAppointments.value = []
 }
@@ -492,7 +491,7 @@ const { data: allTags } = useTags()
 
 // Filter tags to only show appointment tags
 const appointmentTags = computed(() => {
-  return allTags.value?.filter(tag => tag.domainType === 'appointment') || []
+  return allTags.value?.filter((tag) => tag.domainType === 'appointment') || []
 })
 
 // Use cached appointments data from TanStack Query with tag filtering
@@ -518,7 +517,11 @@ watch(
   cachedAppointments,
   (newCachedAppointments) => {
     if (newCachedAppointments && newCachedAppointments.length > 0) {
-      appointments.value = newCachedAppointments
+      // Normalize appointments to ensure seriesId exists for row-key
+      appointments.value = newCachedAppointments.map((appointment) => ({
+        ...appointment,
+        seriesId: appointment.base?.id,
+      }))
     }
   },
   { immediate: true }
@@ -527,23 +530,12 @@ watch(
 // Table configuration
 const tableColumns: TableColumn[] = [
   {
-    key: 'checkbox',
-    label: '',
-    sortable: false,
-    resizable: false,
-    width: 30,
-    cellSlot: 'cell-checkbox',
-    headerSlot: 'header-checkbox',
-    headerClass: 'select-column',
-    cellClass: 'select-cell'
-  },
-  { 
-    key: 'id', 
-    label: 'ID', 
-    sortable: true, 
-    resizable: true, 
-    width: 55, 
-    cellSlot: 'cell-id' 
+    key: 'seriesId',
+    label: 'Serien-ID',
+    sortable: true,
+    resizable: true,
+    width: 80,
+    cellSlot: 'cell-id',
   },
   {
     key: 'base.title',
@@ -649,18 +641,18 @@ const getAppointmentStatus = (appointment: Appointment): 'active' | 'expiring' |
 // Helper function to map color names to hex values
 const getTagColor = (colorName: string): string => {
   const colorMap: Record<string, string> = {
-    'basic': '#e0e0e0',
-    'blue': '#2196F3',
-    'green': '#4CAF50',
-    'yellow': '#FFC107',
-    'red': '#F44336',
-    'purple': '#9C27B0',
-    'orange': '#FF9800',
-    'teal': '#009688',
-    'pink': '#E91E63',
-    'brown': '#795548',
-    'gray': '#9E9E9E',
-    'black': '#000000'
+    basic: '#e0e0e0',
+    blue: '#2196F3',
+    green: '#4CAF50',
+    yellow: '#FFC107',
+    red: '#F44336',
+    purple: '#9C27B0',
+    orange: '#FF9800',
+    teal: '#009688',
+    pink: '#E91E63',
+    brown: '#795548',
+    gray: '#9E9E9E',
+    black: '#000000',
   }
   return colorMap[colorName] || '#e0e0e0'
 }
@@ -786,7 +778,11 @@ const applyFilters = () => {
       })
     }
 
-    appointments.value = filtered
+    // Normalize appointments to ensure seriesId exists for row-key
+    appointments.value = filtered.map((appointment) => ({
+      ...appointment,
+      seriesId: appointment.base?.id,
+    }))
   } catch (err) {
     console.error('Error filtering appointments:', err)
     localError.value = 'Fehler beim Filtern der Termine.'
@@ -815,9 +811,13 @@ const refreshData = () => {
 }
 
 // Watch for changes to filters and apply them
-watch([daysInAdvance, calendarFilter, statusFilter, selectedTagIds], () => {
-  applyFilters()
-}, { immediate: true })
+watch(
+  [daysInAdvance, calendarFilter, statusFilter, selectedTagIds],
+  () => {
+    applyFilters()
+  },
+  { immediate: true }
+)
 
 // Initialize component
 onMounted(() => {
@@ -1206,123 +1206,6 @@ div.detail-section > h4 {
   transform: translateX(-50%) translateY(0);
 }
 
-/* Selection styles */
-.select-column {
-  width: 40px;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0 !important;
-  position: relative;
-  background-color: var(--ct-bg-secondary, #f8f9fa);
-  border-bottom: 2px solid var(--ct-border-color, #e0e0e0);
-}
-
-.select-cell {
-  text-align: center;
-  vertical-align: middle;
-  padding: 0.5rem 0.5rem !important;
-}
-
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  user-select: none;
-}
-
-.checkbox-wrapper input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-  position: relative;
-  height: 16px;
-  width: 16px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  transition: all 0.2s;
-}
-
-.checkbox-wrapper:hover input ~ .checkmark {
-  border-color: #999;
-}
-
-.checkbox-wrapper input:checked ~ .checkmark {
-  background-color: var(--ct-primary, #3498db);
-  border-color: var(--ct-primary, #3498db);
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-  left: 5px;
-  top: 2px;
-  width: 4px;
-  height: 8px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
-.checkbox-wrapper input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.data-row {
-  transition: background-color 0.2s ease;
-}
-
-.data-row:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.data-row.row-selected {
-  background-color: rgba(52, 152, 219, 0.1);
-}
-
-.data-row.row-selected:hover {
-  background-color: rgba(52, 152, 219, 0.15);
-}
-
-/* Selection styles */
-.select-column {
-  width: 40px;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0 !important;
-  position: relative;
-  background-color: var(--ct-bg-secondary, #f8f9fa);
-  border-bottom: 2px solid var(--ct-border-color, #e0e0e0);
-}
-
-.select-cell {
-  text-align: center;
-  vertical-align: middle;
-  padding: 0.5rem 0.5rem !important;
-}
-
-.row-checkbox {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  margin: 0;
-  vertical-align: middle;
-}
-
-.data-row {
-  transition: background-color 0.2s ease;
-}
-
 .data-row:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
@@ -1381,4 +1264,33 @@ div.detail-section > h4 {
     transform: rotate(360deg);
   }
 }
+
+/* Bulk actions widget customization */
+.extend-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.extend-section label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ct-text-primary, #2c3e50);
+}
+
+.ct-select {
+  padding: 0.5rem;
+  border: 1px solid var(--ct-border-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  background: white;
+  cursor: pointer;
+}
+
+.ct-select:focus {
+  outline: none;
+  border-color: var(--ct-primary, #3498db);
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
 </style>
diff --git a/src/components/tags/TagsAdmin.vue b/src/components/tags/TagsAdmin.vue
index 01c91c4..2ce5f17 100644
--- a/src/components/tags/TagsAdmin.vue
+++ b/src/components/tags/TagsAdmin.vue
@@ -365,7 +365,14 @@ const tableColumns: TableColumn[] = [
     width: 150,
     cellSlot: 'cell-color',
   },
-  { key: 'description', label: 'Beschreibung', sortable: true, resizable: true, width: 250, cellClass: 'description-cell' },
+  {
+    key: 'description',
+    label: 'Beschreibung',
+    sortable: true,
+    resizable: true,
+    width: 250,
+    cellClass: 'description-cell',
+  },
   {
     key: 'actions',
     label: 'Aktionen',
diff --git a/src/composables/useBulkAppointmentActions.ts b/src/composables/useBulkAppointmentActions.ts
new file mode 100644
index 0000000..73c3483
--- /dev/null
+++ b/src/composables/useBulkAppointmentActions.ts
@@ -0,0 +1,96 @@
+import { ref } from 'vue'
+import { churchtoolsClient } from '@churchtools/churchtools-client'
+import { useToast } from './useToast'
+
+export function useBulkAppointmentActions() {
+  const { showToast } = useToast()
+  const isProcessing = ref(false)
+  const processedCount = ref(0)
+  const errorCount = ref(0)
+
+  /**
+   * Extend the repeat-until date for multiple appointments
+   */
+  const extendAppointments = async (
+    appointmentIds: number[],
+    extensionMonths: number
+  ): Promise<{ success: number; failed: number }> => {
+    isProcessing.value = true
+    processedCount.value = 0
+    errorCount.value = 0
+
+    const results = {
+      success: 0,
+      failed: 0,
+    }
+
+    for (const appointmentId of appointmentIds) {
+      try {
+        // Fetch current appointment data
+        const appointment = await churchtoolsClient.get(`/appointments/${appointmentId}`)
+
+        if (!appointment || !appointment.base) {
+          console.error(`Appointment ${appointmentId} not found or has no base data`)
+          results.failed++
+          errorCount.value++
+          continue
+        }
+
+        const base = appointment.base
+
+        // Calculate new repeat-until date
+        let newRepeatUntil: string
+
+        if (base.repeatUntil) {
+          // Extend existing repeatUntil
+          const currentDate = new Date(base.repeatUntil)
+          currentDate.setMonth(currentDate.getMonth() + extensionMonths)
+          newRepeatUntil = currentDate.toISOString().split('T')[0]
+        } else {
+          // No repeatUntil set, extend from start date
+          const startDate = new Date(base.startDate)
+          startDate.setMonth(startDate.getMonth() + extensionMonths)
+          newRepeatUntil = startDate.toISOString().split('T')[0]
+        }
+
+        // Update appointment
+        await churchtoolsClient.patch(`/appointments/${appointmentId}`, {
+          repeatUntil: newRepeatUntil,
+        })
+
+        results.success++
+        processedCount.value++
+      } catch (error) {
+        console.error(`Failed to extend appointment ${appointmentId}:`, error)
+        results.failed++
+        errorCount.value++
+      }
+    }
+
+    isProcessing.value = false
+
+    // Show result toast
+    if (results.success > 0 && results.failed === 0) {
+      showToast(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} erfolgreich verlängert`,
+        'success'
+      )
+    } else if (results.success > 0 && results.failed > 0) {
+      showToast(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} verlängert, ${results.failed} fehlgeschlagen`,
+        'warning'
+      )
+    } else {
+      showToast(`Fehler beim Verlängern der Termine`, 'error')
+    }
+
+    return results
+  }
+
+  return {
+    isProcessing,
+    processedCount,
+    errorCount,
+    extendAppointments,
+  }
+}
diff --git a/src/composables/useExpiringAppointments.ts b/src/composables/useExpiringAppointments.ts
index 01564c1..540ec08 100644
--- a/src/composables/useExpiringAppointments.ts
+++ b/src/composables/useExpiringAppointments.ts
@@ -4,7 +4,12 @@ import { findExpiringSeries, type Appointment } from '@/services/churchtools'
 export function useExpiringAppointments(daysInAdvance: number = 300000, tagIds: number[] = []) {
   // Only log once per unique query setup
   if (import.meta.env.DEV) {
-    console.log('📅 Setting up expiring appointments query for', daysInAdvance, 'days with tags:', tagIds)
+    console.log(
+      '📅 Setting up expiring appointments query for',
+      daysInAdvance,
+      'days with tags:',
+      tagIds
+    )
   }
   return useQuery({
     queryKey: ['expiring-appointments', daysInAdvance, ...tagIds],
diff --git a/src/services/churchtools.ts b/src/services/churchtools.ts
index 8a5a2b1..b64e0b9 100644
--- a/src/services/churchtools.ts
+++ b/src/services/churchtools.ts
@@ -46,7 +46,7 @@ export async function fetchAppointments(
     from: start,
     to: end,
     'calendar_ids[]': calendarIds,
-    include: ['tags']
+    include: ['tags'],
   }
 
   // Add tag filter if tags are provided
@@ -78,7 +78,10 @@ export async function identifyCalendars(): Promise<{
 /**
  * Finds all recurring appointment series that are about to end
  */
-export async function findExpiringSeries(daysInAdvance: number = 60, tagIds: number[] = []): Promise<Appointment[]> {
+export async function findExpiringSeries(
+  daysInAdvance: number = 60,
+  tagIds: number[] = []
+): Promise<Appointment[]> {
   const now = new Date()
   const endDate = new Date()
   endDate.setDate(now.getDate() + daysInAdvance)
@@ -99,26 +102,26 @@ export async function findExpiringSeries(daysInAdvance: number = 60, tagIds: num
 
   // Fetching appointments for calendar IDs with optional tag filtering and include tags
   const appointments = await fetchAppointments(allCalendarIds, now, endDate, tagIds)
-  
+
   // Log the first appointment to debug tags
   if (appointments.length > 0) {
     console.log('First appointment with tags:', JSON.parse(JSON.stringify(appointments[0])))
   }
 
   // Process appointments to ensure consistent structure with tags
-  const processedAppointments = appointments.map(appointment => {
+  const processedAppointments = appointments.map((appointment) => {
     // Get tags from the root level if they exist
-    const tags = 'tags' in appointment ? appointment.tags : [];
-    
+    const tags = 'tags' in appointment ? appointment.tags : []
+
     // Return the appointment with tags properly set in base.tags
     return {
       ...appointment,
       base: {
         ...appointment.base,
-        tags: Array.isArray(tags) ? tags : []
-      }
-    };
-  });
+        tags: Array.isArray(tags) ? tags : [],
+      },
+    }
+  })
 
   // Find recurring appointments that are ending soon
   const expiringSeries = processedAppointments.filter((appointment) => {

From f3333f6b4339896b34cdc6354998aea8f71b27d9 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Fri, 12 Dec 2025 20:14:43 +0000
Subject: [PATCH 11/14] feat: Improve appointment details modal with full API
 integration

- Add fetchAppointmentSeries API function for complete series data
- Restructure modal with card-based layout for better organization
- Add all appointment fields: subtitle, address, link, calendar color
- Implement proper series repetition display using repeatId
- Add collapsible exceptions list for many items (show 10, expand all)
- Fix image display using imageUrl from Image object
- Fix description field (was using deprecated note field)
- Fix additionals structure (array of objects with date field)
- Add performance logging for API calls
- Improve date formatting and address display
- Add two-column responsive grid layout
- Separate cards for: details, series info, tags, description, image

Co-authored-by: Ona <no-reply@ona.com>
---
 .../ExpiringAppointmentsAdmin.vue             | 541 ++++++++++++------
 src/services/churchtools.ts                   |  13 +
 2 files changed, 389 insertions(+), 165 deletions(-)

diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index 0835621..d3adc24 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -37,120 +37,136 @@
       </div>
       <div class="modal-body">
         <div class="appointment-details">
-          <!-- Basic Info Section -->
-          <div class="detail-section">
+          <!-- Basic Info Card -->
+          <div class="detail-card">
             <h4>Termindetails</h4>
-            <div class="detail-grid">
-              <div class="detail-row">
+            <div class="detail-grid-two-col">
+              <div class="detail-item">
                 <span class="detail-label">Titel:</span>
                 <span>{{ selectedAppointment.base?.title || '-' }}</span>
               </div>
-              <div class="detail-row">
-                <span class="detail-label">Beginn:</span>
-                <span>{{ formatDateTime(selectedAppointment.calculated?.startDate) }}</span>
+              <div class="detail-item" v-if="selectedAppointment.base?.subtitle">
+                <span class="detail-label">Untertitel:</span>
+                <span>{{ selectedAppointment.base.subtitle }}</span>
               </div>
-              <div class="detail-row">
-                <span class="detail-label">Ende:</span>
-                <span>{{ formatDateTime(selectedAppointment.calculated?.endDate) }}</span>
-              </div>
-
-              <!-- Series Information -->
-              <template v-if="selectedAppointment.base?.repeatId">
-                <div class="detail-row">
-                  <span class="detail-label">Serie:</span>
-                  <span>
-                    <template
-                      v-if="
-                        selectedAppointment.base.repeatFrequency === 0 ||
-                        selectedAppointment.base.repeatOption
-                      "
-                    >
-                      Manuell
-                    </template>
-                    <template v-else>
-                      {{ getRepetitionType(selectedAppointment.base.repeatFrequency) }}
-                      <template v-if="selectedAppointment.base.repeatFrequency > 1">
-                        , alle {{ selectedAppointment.base.repeatFrequency }}
-                        {{ getIntervalUnit(selectedAppointment.base.repeatFrequency) }}
-                      </template>
-                    </template>
-                    <template v-if="selectedAppointment.base.repeatUntil">
-                      , bis {{ formatDate(selectedAppointment.base.repeatUntil) }}
-                    </template>
-                    <template v-else-if="!selectedAppointment.base.repeatOption">
-                      , ohne Enddatum
-                    </template>
-                  </span>
+              <div class="detail-item">
+                <span class="detail-label">Kalender:</span>
+                <div class="calendar-badge">
+                  <span
+                    class="calendar-color"
+                    :style="{ backgroundColor: selectedAppointment.base?.calendar?.color }"
+                  ></span>
+                  <span>{{ selectedAppointment.base?.calendar?.name || '-' }}</span>
                 </div>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Serienbeginn:</span>
+                <span>{{ formatDate(selectedAppointment.base?.startDate) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Serienende:</span>
+                <span>{{ getEffectiveEndDate(selectedAppointment) }}</span>
+              </div>
+              <div class="detail-item" v-if="selectedAppointment.base?.address">
+                <span class="detail-label">Adresse:</span>
+                <span>{{ formatAddress(selectedAppointment.base.address) }}</span>
+              </div>
+              <div class="detail-item" v-if="selectedAppointment.base?.link">
+                <span class="detail-label">Link:</span>
+                <a :href="selectedAppointment.base.link" target="_blank" class="appointment-link">
+                  {{ selectedAppointment.base.link }}
+                </a>
+              </div>
+            </div>
+          </div>
 
-                <!-- Exceptions -->
-                <div class="detail-row" v-if="selectedAppointment.base.exceptions?.length">
-                  <span class="detail-label">Ausnahmen:</span>
-                  <span>
-                    <template
-                      v-for="(exception, index) in selectedAppointment.base.exceptions"
-                      :key="exception.id || index"
-                    >
-                      {{ formatDate(exception.date) }}
-                      <template v-if="index < selectedAppointment.base.exceptions.length - 1">
-                        ,
-                      </template>
-                    </template>
-                  </span>
-                </div>
+          <!-- Series Information Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.repeatId">
+            <h4>Serientermin</h4>
+            <div class="detail-grid-two-col">
+              <div class="detail-item">
+                <span class="detail-label">Serie:</span>
+                <span>
+                  {{ getRepetitionText(selectedAppointment.base) }}
+                </span>
+              </div>
+            </div>
 
-                <!-- Additional Dates -->
-                <div class="detail-row" v-if="selectedAppointment.base.additionals?.length">
-                  <span class="detail-label">Zusätzliche Termine:</span>
-                  <span>
-                    <template
-                      v-for="(date, index) in selectedAppointment.base.additionals"
-                      :key="index"
-                    >
-                      {{ formatDate(date) }}
-                      <template v-if="index < selectedAppointment.base.additionals.length - 1">
-                        ,
-                      </template>
-                    </template>
-                  </span>
-                </div>
-              </template>
-
-              <!-- Tags -->
-              <div class="detail-row" v-if="selectedAppointment.tags?.length">
-                <span class="detail-label">Tags:</span>
-                <span class="tags-container">
-                  <template
-                    v-for="(tag, index) in [...selectedAppointment.tags].sort((a, b) =>
-                      a.name.localeCompare(b.name)
-                    )"
-                    :key="tag.id"
-                  >
-                    <span
-                      class="tag-badge"
-                      :style="{
-                        '--tag-bg': getTagColor(tag.color),
-                        '--tag-text': getContrastColor(getTagColor(tag.color)),
-                      }"
-                    >
-                      {{ tag.name }}
-                    </span>
-                    <template v-if="index < selectedAppointment.tags.length - 1">,</template>
-                  </template>
+            <!-- Exceptions -->
+            <div class="detail-list" v-if="selectedAppointment.base.exceptions?.length">
+              <div class="detail-list-header">
+                <span class="detail-label">
+                  Ausnahmen ({{ selectedAppointment.base.exceptions.length }}):
                 </span>
+                <button
+                  v-if="selectedAppointment.base.exceptions.length > 10"
+                  @click="showAllExceptions = !showAllExceptions"
+                  class="toggle-btn"
+                >
+                  {{ showAllExceptions ? 'Weniger anzeigen' : 'Alle anzeigen' }}
+                </button>
               </div>
-              <div class="detail-row" v-else>
-                <span class="detail-label">Tags:</span>
-                <span>-</span>
+              <div class="date-chips">
+                <span
+                  v-for="(exception, index) in displayedExceptions"
+                  :key="exception.id || index"
+                  class="date-chip"
+                >
+                  {{ formatDate(exception.date) }}
+                </span>
               </div>
+            </div>
 
-              <!-- Notes -->
-              <div class="detail-row" v-if="selectedAppointment.base?.note">
-                <span class="detail-label">Notizen:</span>
-                <span class="note">{{ selectedAppointment.base.note }}</span>
+            <!-- Additional Dates -->
+            <div class="detail-list" v-if="selectedAppointment.base.additionals?.length">
+              <span class="detail-label">Weitere Termine:</span>
+              <div class="date-chips">
+                <span
+                  v-for="additional in selectedAppointment.base.additionals"
+                  :key="additional.id"
+                  class="date-chip"
+                >
+                  {{ formatDate(additional.date) }}
+                </span>
               </div>
             </div>
           </div>
+
+          <!-- Tags Card -->
+          <div class="detail-card" v-if="selectedAppointment.tags?.length">
+            <h4>Tags</h4>
+            <div class="tags-container">
+              <span
+                v-for="tag in [...selectedAppointment.tags].sort((a, b) =>
+                  a.name.localeCompare(b.name)
+                )"
+                :key="tag.id"
+                class="tag-badge"
+                :style="{
+                  '--tag-bg': getTagColor(tag.color),
+                  '--tag-text': getContrastColor(getTagColor(tag.color)),
+                }"
+              >
+                {{ tag.name }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Description Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.description">
+            <h4>Beschreibung</h4>
+            <div class="description-content" v-html="selectedAppointment.base.description"></div>
+          </div>
+
+          <!-- Image Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.image?.imageUrl">
+            <h4>Bild</h4>
+            <img
+              :src="selectedAppointment.base.image.imageUrl"
+              :alt="selectedAppointment.base?.title"
+              class="appointment-image"
+            />
+          </div>
         </div>
       </div>
       <div class="modal-footer">
@@ -325,7 +341,12 @@ import type { DashboardModule } from '@/types/modules'
 import TagMultiSelect from '@/components/common/TagMultiSelect.vue'
 import BulkActionsWidget from '@/components/common/BulkActionsWidget.vue'
 import type { TableColumn } from '@/types/table'
-import { findExpiringSeries, getAppointmentUrl, type Appointment } from '@/services/churchtools'
+import {
+  findExpiringSeries,
+  getAppointmentUrl,
+  fetchAppointmentSeries,
+  type Appointment,
+} from '@/services/churchtools'
 import { useExpiringAppointments } from '@/composables/useExpiringAppointments'
 import { useTags } from '@/composables/useTags'
 import { useBulkAppointmentActions } from '@/composables/useBulkAppointmentActions'
@@ -362,11 +383,83 @@ const handleSelectionChange = (selectedIds: number[]) => {
 
 // Modal state
 const selectedAppointment = ref<any>(null)
+const showAllExceptions = ref(false)
 
 // Show appointment details in modal
-const showAppointmentDetails = (appointment: any) => {
-  console.log('Selected appointment data:', JSON.parse(JSON.stringify(appointment)))
+const showAppointmentDetails = async (appointment: any) => {
+  const startTime = performance.now()
+  console.log('🔍 Opening appointment details...')
+
+  // Show modal immediately with preview data
   selectedAppointment.value = appointment
+  showAllExceptions.value = false
+
+  try {
+    // Fetch full appointment series data
+    const appointmentId = appointment.base?.id || appointment.seriesId
+    const startDate = appointment.base?.startDate?.split('T')[0] || appointment.base?.startDate
+
+    console.log(`📡 Fetching series ${appointmentId} with startDate ${startDate}`)
+    const fetchStart = performance.now()
+
+    if (appointmentId && startDate) {
+      const fullData = await fetchAppointmentSeries(appointmentId, startDate)
+      const fetchEnd = performance.now()
+      console.log(`✅ API call took ${(fetchEnd - fetchStart).toFixed(0)}ms`)
+      console.log('📦 Full data structure:', fullData)
+      console.log('📦 Has base?', !!fullData.base)
+      console.log('📦 Has calculated?', !!fullData.calculated)
+      console.log('📦 Has tags?', !!fullData.tags)
+
+      // Update with full data
+      const updateStart = performance.now()
+
+      // The API returns { appointment: { base, calculated } }
+      const appointmentData = fullData.appointment || fullData
+      selectedAppointment.value = {
+        base: appointmentData.base,
+        calculated: appointmentData.calculated,
+        tags: appointmentData.base?.tags || appointment.tags,
+        seriesId: appointmentData.base?.id,
+      }
+
+      const updateEnd = performance.now()
+      console.log(`✅ Data update took ${(updateEnd - updateStart).toFixed(0)}ms`)
+      console.log('📦 Updated appointment:', selectedAppointment.value)
+    }
+
+    const totalTime = performance.now() - startTime
+    console.log(`✅ Total time: ${totalTime.toFixed(0)}ms`)
+  } catch (error) {
+    console.error('❌ Error loading appointment details:', error)
+    // Keep showing preview data if loading fails
+  }
+}
+
+// Computed property for displayed exceptions
+const displayedExceptions = computed(() => {
+  if (!selectedAppointment.value?.base?.exceptions) return []
+  const exceptions = selectedAppointment.value.base.exceptions
+  if (showAllExceptions.value || exceptions.length <= 10) {
+    return exceptions
+  }
+  return exceptions.slice(0, 10)
+})
+
+// Format address
+const formatAddress = (address: any) => {
+  if (!address) return '-'
+  if (typeof address === 'string') return address
+
+  const parts = []
+  if (address.street) parts.push(address.street)
+  if (address.addition) parts.push(address.addition)
+  if (address.zip || address.city) {
+    const cityPart = [address.zip, address.city].filter(Boolean).join(' ')
+    parts.push(cityPart)
+  }
+
+  return parts.join(', ') || '-'
 }
 
 // Format date for display (date only)
@@ -429,22 +522,53 @@ const formatDateTime = (dateString: string | null | undefined) => {
   }
 }
 
-// Get repetition type based on frequency
-const getRepetitionType = (frequency: number) => {
-  if (frequency === 1) return 'Täglich'
-  if (frequency % 7 === 0) return 'Wöchentlich'
-  if (frequency % 30 === 0) return 'Monatlich'
-  if (frequency % 365 === 0) return 'Jährlich'
-  return 'Benutzerdefiniert'
-}
+// Get full repetition text based on repeatId and repeatFrequency
+const getRepetitionText = (base: any) => {
+  if (!base.repeatId || base.repeatId === 0) {
+    return 'Keine Wiederholung'
+  }
+
+  if (base.repeatId === 999) {
+    return 'Manuell'
+  }
+
+  const frequency = base.repeatFrequency || 1
+  let typeText = ''
+  let intervalText = ''
+
+  // Determine type based on repeatId
+  switch (base.repeatId) {
+    case 1: // DAILY
+      typeText = frequency === 1 ? 'Täglich' : 'Alle ' + frequency + ' Tage'
+      break
+    case 7: // WEEKLY
+      typeText = frequency === 1 ? 'Wöchentlich' : 'Alle ' + frequency + ' Wochen'
+      break
+    case 31: // MONTHLY_BY_DATE
+      typeText =
+        frequency === 1
+          ? 'Monatlich (am gleichen Tag)'
+          : 'Alle ' + frequency + ' Monate (am gleichen Tag)'
+      break
+    case 32: // MONTHLY_BY_WEEKDAY
+      typeText =
+        frequency === 1
+          ? 'Monatlich (am gleichen Wochentag)'
+          : 'Alle ' + frequency + ' Monate (am gleichen Wochentag)'
+      break
+    case 365: // YEARLY
+      typeText = frequency === 1 ? 'Jährlich' : 'Alle ' + frequency + ' Jahre'
+      break
+    default:
+      typeText = 'Benutzerdefiniert'
+  }
 
-// Get interval unit based on frequency
-const getIntervalUnit = (frequency: number) => {
-  if (frequency === 1) return 'Tag'
-  if (frequency % 365 === 0) return ' Jahre'
-  if (frequency % 30 === 0) return ' Monate'
-  if (frequency % 7 === 0) return ' Wochen'
-  return ' Tage'
+  // Add end date info
+  if (base.repeatUntil) {
+    return typeText + ', bis ' + formatDate(base.repeatUntil)
+  } else {
+    return typeText + ', ohne Enddatum'
+  }
 }
 
 // Format repetition type for display (kept for backward compatibility)
@@ -1017,67 +1141,142 @@ select[multiple] option {
 }
 
 .modal-body {
-  padding: 20px;
-  background: white;
+  padding: 1.5rem;
+  background: #f9fafb;
+  max-height: 70vh;
+  overflow-y: auto;
 }
 
-.detail-section {
-  margin-bottom: 1.5rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+.appointment-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.detail-section:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
+/* Detail Cards */
+.detail-card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-div.detail-section > h4 {
-  margin-top: 0;
-  margin-bottom: 1rem;
+.detail-card h4 {
+  margin: 0 0 1rem 0;
   color: #1f2937;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 600;
+  border-bottom: 2px solid #e5e7eb;
+  padding-bottom: 0.5rem;
 }
 
-.detail-grid {
+/* Two-column grid for details */
+.detail-grid-two-col {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .detail-grid-two-col {
+    grid-template-columns: 1fr;
+  }
 }
 
-.detail-row {
+.detail-item {
   display: flex;
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
-  font-size: 0.95rem;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .detail-label {
   font-weight: 600;
-  color: #4b5563;
-  min-width: 120px;
-  flex-shrink: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
 }
 
-/* Lists styling */
-.exception-list,
-.additional-dates {
-  list-style: none;
-  padding: 0;
-  margin: 0.5rem 0 0 0;
+.detail-item > span:not(.detail-label) {
+  color: #1f2937;
+  font-size: 0.95rem;
 }
 
-.exception-list li,
-.additional-dates li {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #f3f4f6;
+/* List items */
+.detail-list {
+  margin-top: 1rem;
+}
+
+.detail-list .detail-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+/* Date chips */
+.date-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.exception-list li:last-child,
-.additional-dates li:last-child {
-  border-bottom: none;
+.date-chip {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  background: #f3f4f6;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: #374151;
+  border: 1px solid #e5e7eb;
+}
+
+/* Detail list header */
+.detail-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.toggle-btn {
+  padding: 0.25rem 0.75rem;
+  background: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-btn:hover {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+/* Calendar badge */
+.calendar-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.calendar-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+/* Appointment link */
+.appointment-link {
+  color: var(--ct-primary, #3498db);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.appointment-link:hover {
+  text-decoration: underline;
 }
 
 /* Tags styling */
@@ -1085,13 +1284,12 @@ div.detail-section > h4 {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin-top: 0.5rem;
 }
 
 .tag-badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.75rem;
+  padding: 0.375rem 0.875rem;
   background-color: var(--tag-bg) !important;
   border-radius: 1rem;
   font-size: 0.85rem;
@@ -1100,16 +1298,29 @@ div.detail-section > h4 {
   white-space: nowrap;
 }
 
-/* Notes styling */
-.note {
-  margin: 0.5rem 0 0 0;
-  padding: 0.75rem;
-  background-color: #f9fafb;
-  border-radius: 0.375rem;
-  white-space: pre-wrap;
+/* Description styling */
+.description-content {
+  color: #374151;
   font-size: 0.95rem;
-  line-height: 1.5;
-  color: #4b5563;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.description-content :deep(p) {
+  margin: 0 0 0.75rem 0;
+}
+
+.description-content :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+/* Image styling */
+.appointment-image {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .modal-footer {
diff --git a/src/services/churchtools.ts b/src/services/churchtools.ts
index b64e0b9..a86aca8 100644
--- a/src/services/churchtools.ts
+++ b/src/services/churchtools.ts
@@ -30,6 +30,19 @@ export async function fetchCalendars(): Promise<Calendar[]> {
   return response || []
 }
 
+/**
+ * Fetches a single appointment series with all details
+ */
+export async function fetchAppointmentSeries(
+  appointmentId: number,
+  startDate: string
+): Promise<any> {
+  const response = await churchtoolsClient.get(
+    `/calendars/appointments/${appointmentId}/${startDate}`
+  )
+  return response
+}
+
 /**
  * Fetches appointments for a specific calendar within a date range
  */

From b55cf03ad979600564a1c878b0f22f36a24026bb Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Fri, 12 Dec 2025 21:09:51 +0000
Subject: [PATCH 12/14] fix: Improve tag filtering and dropdown positioning

- Make tag filtering client-side only (no API reload on tag change)
- Load all appointments once, filter locally in applyFilters()
- Fix dropdown positioning with better scroll/resize handling
- Add debug logging for filter operations
- Fix watch initialization order to prevent 'before initialization' error
- Remove immediate: true from filter watch to avoid race condition

Co-authored-by: Ona <no-reply@ona.com>
---
 src/components/common/TagMultiSelect.vue      | 51 ++++++++++++++++---
 .../ExpiringAppointmentsAdmin.vue             | 48 +++++++++--------
 src/composables/useExpiringAppointments.ts    | 15 +++---
 3 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/components/common/TagMultiSelect.vue b/src/components/common/TagMultiSelect.vue
index b061eb0..0170a53 100644
--- a/src/components/common/TagMultiSelect.vue
+++ b/src/components/common/TagMultiSelect.vue
@@ -75,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
 const props = defineProps({
@@ -151,26 +151,56 @@ const toggleDropdown = (event: Event) => {
 }
 
 const positionDropdown = () => {
-  if (!dropdownRef.value || !containerRef.value) return
+  if (!dropdownRef.value || !containerRef.value) {
+    console.log('❌ positionDropdown: missing refs', {
+      dropdown: !!dropdownRef.value,
+      container: !!containerRef.value,
+    })
+    return
+  }
 
   const containerRect = containerRef.value.getBoundingClientRect()
   const dropdown = dropdownRef.value
 
+  console.log('📍 Positioning dropdown:', {
+    containerRect: {
+      left: containerRect.left,
+      top: containerRect.top,
+      bottom: containerRect.bottom,
+      width: containerRect.width,
+    },
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+  })
+
   // Set the width to match the container
   dropdown.style.width = `${containerRect.width}px`
 
   // Position the dropdown directly below the container
-  dropdown.style.left = `${containerRect.left + window.scrollX}px`
-  dropdown.style.top = `${containerRect.bottom + window.scrollY + 4}px`
+  const left = containerRect.left + window.scrollX
+  const top = containerRect.bottom + window.scrollY + 4
+
+  dropdown.style.left = `${left}px`
+  dropdown.style.top = `${top}px`
+  dropdown.style.bottom = 'auto'
+
+  console.log('📍 Applied styles:', {
+    left: dropdown.style.left,
+    top: dropdown.style.top,
+    width: dropdown.style.width,
+  })
 
   // Check if there's enough space below, if not, position above
   const spaceBelow = window.innerHeight - containerRect.bottom
   const spaceAbove = containerRect.top
 
-  if (spaceBelow < 300 && spaceAbove > spaceBelow) {
+  // Only position above if there's very little space below (less than 200px)
+  // AND significantly more space above
+  if (spaceBelow < 200 && spaceAbove > spaceBelow + 100) {
     // Position above if there's more space above
     dropdown.style.top = 'auto'
     dropdown.style.bottom = `${window.innerHeight - containerRect.top + window.scrollY - 4}px`
+    console.log('📍 Positioned above (not enough space below)')
   }
 }
 
@@ -226,6 +256,15 @@ onClickOutside(
   { ignore: [containerRef] }
 )
 
+// Watch for dropdown open state and reposition
+watch(isOpen, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      positionDropdown()
+    })
+  }
+})
+
 // Close dropdown when window is scrolled or resized
 onMounted(() => {
   window.addEventListener('scroll', handleScroll, { passive: true })
@@ -239,7 +278,7 @@ onBeforeUnmount(() => {
 
 const handleScroll = () => {
   if (isOpen.value) {
-    isOpen.value = false
+    positionDropdown()
   }
 }
 
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index d3adc24..c80c78a 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -618,16 +618,14 @@ const appointmentTags = computed(() => {
   return allTags.value?.filter((tag) => tag.domainType === 'appointment') || []
 })
 
-// Use cached appointments data from TanStack Query with tag filtering
+// Use cached appointments data from TanStack Query
+// Load all appointments - tag filtering happens client-side in applyFilters()
 const {
   data: cachedAppointments,
   isLoading: cacheLoading,
   error: cacheError,
   refetch,
-} = useExpiringAppointments(
-  daysInAdvance.value === 'alle' ? 9999 : parseInt(daysInAdvance.value, 10),
-  selectedTagIds.value
-)
+} = useExpiringAppointments(9999) // Load all appointments
 
 // AdminTable reference is already declared in the selection state
 
@@ -641,11 +639,8 @@ watch(
   cachedAppointments,
   (newCachedAppointments) => {
     if (newCachedAppointments && newCachedAppointments.length > 0) {
-      // Normalize appointments to ensure seriesId exists for row-key
-      appointments.value = newCachedAppointments.map((appointment) => ({
-        ...appointment,
-        seriesId: appointment.base?.id,
-      }))
+      // Apply filters when new data arrives
+      applyFilters()
     }
   },
   { immediate: true }
@@ -833,14 +828,26 @@ const clearFilters = () => {
 
 // Filter functions
 const applyFilters = () => {
+  console.log('🔍 applyFilters called with:', {
+    daysInAdvance: daysInAdvance.value,
+    calendarFilter: calendarFilter.value,
+    statusFilter: statusFilter.value,
+    selectedTagIds: selectedTagIds.value,
+    cachedAppointmentsCount: cachedAppointments.value?.length || 0,
+  })
+
   localLoading.value = true
   localError.value = null
 
   try {
-    if (!cachedAppointments.value) return
+    if (!cachedAppointments.value) {
+      console.log('⚠️ No cached appointments available')
+      return
+    }
 
     // Apply filters
     let filtered = [...cachedAppointments.value]
+    console.log('📊 Starting with', filtered.length, 'appointments')
 
     // Filter by days in advance
     const now = new Date()
@@ -894,12 +901,16 @@ const applyFilters = () => {
 
     // Filter by tags
     if (selectedTagIds.value.length > 0) {
+      console.log('🏷️ Filtering by tags:', selectedTagIds.value)
+      console.log('📊 Before tag filter:', filtered.length, 'appointments')
       filtered = filtered.filter((appointment) => {
         const appointmentTags = appointment.base.tags || []
-        return selectedTagIds.value.some((tagId) =>
+        const hasMatchingTag = selectedTagIds.value.some((tagId) =>
           appointmentTags.some((tag: any) => tag.id === tagId)
         )
+        return hasMatchingTag
       })
+      console.log('📊 After tag filter:', filtered.length, 'appointments')
     }
 
     // Normalize appointments to ensure seriesId exists for row-key
@@ -907,8 +918,9 @@ const applyFilters = () => {
       ...appointment,
       seriesId: appointment.base?.id,
     }))
+    console.log('✅ Applied filters, result:', appointments.value.length, 'appointments')
   } catch (err) {
-    console.error('Error filtering appointments:', err)
+    console.error('❌ Error filtering appointments:', err)
     localError.value = 'Fehler beim Filtern der Termine.'
   } finally {
     localLoading.value = false
@@ -935,13 +947,9 @@ const refreshData = () => {
 }
 
 // Watch for changes to filters and apply them
-watch(
-  [daysInAdvance, calendarFilter, statusFilter, selectedTagIds],
-  () => {
-    applyFilters()
-  },
-  { immediate: true }
-)
+watch([daysInAdvance, calendarFilter, statusFilter, selectedTagIds], () => {
+  applyFilters()
+})
 
 // Initialize component
 onMounted(() => {
diff --git a/src/composables/useExpiringAppointments.ts b/src/composables/useExpiringAppointments.ts
index 540ec08..201b34c 100644
--- a/src/composables/useExpiringAppointments.ts
+++ b/src/composables/useExpiringAppointments.ts
@@ -1,19 +1,16 @@
 import { useQuery } from '@tanstack/vue-query'
 import { findExpiringSeries, type Appointment } from '@/services/churchtools'
 
-export function useExpiringAppointments(daysInAdvance: number = 300000, tagIds: number[] = []) {
+export function useExpiringAppointments(daysInAdvance: number = 300000) {
   // Only log once per unique query setup
   if (import.meta.env.DEV) {
-    console.log(
-      '📅 Setting up expiring appointments query for',
-      daysInAdvance,
-      'days with tags:',
-      tagIds
-    )
+    console.log('📅 Setting up expiring appointments query for', daysInAdvance, 'days')
   }
+
+  // Load ALL appointments without tag filtering - filtering happens client-side
   return useQuery({
-    queryKey: ['expiring-appointments', daysInAdvance, ...tagIds],
-    queryFn: () => findExpiringSeries(daysInAdvance, tagIds),
+    queryKey: ['expiring-appointments', daysInAdvance],
+    queryFn: () => findExpiringSeries(daysInAdvance, []),
     staleTime: 30 * 60 * 1000, // 30 minutes - appointments don't change often
     gcTime: 60 * 60 * 1000, // 1 hour cache time
     refetchInterval: 15 * 60 * 1000, // Background update every 15 minutes

From 39f1f087051efa603b0f3858f516e23fba3b51bf Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Fri, 12 Dec 2025 21:15:20 +0000
Subject: [PATCH 13/14] docs: Add development session documentation for
 appointment modal improvements

Co-authored-by: Ona <no-reply@ona.com>
---
 ...ON_2025-12-12_Appointment_Details_Modal.md | 251 ++++++++++++++++++
 1 file changed, 251 insertions(+)
 create mode 100644 docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md

diff --git a/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
new file mode 100644
index 0000000..1102a8e
--- /dev/null
+++ b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
@@ -0,0 +1,251 @@
+# Development Session - 2025-12-12
+
+## Session Overview
+
+**Started**: 18:30  
+**Ended**: 22:10  
+**Branch**: `fix/automatic-groups-detection`  
+**Focus**: Appointment Details Modal Enhancement & Tag Filtering
+
+## Major Accomplishments
+
+### Phase 1: Bulk Operations Widget (18:30-19:00)
+
+- **Goal**: Add selection functionality to AdminTable and create reusable bulk operations widget
+- **Result**: Complete bulk operations system implemented
+- **Code Changes**:
+  - Created `BulkActionsWidget.vue` - Reusable component for bulk operations
+  - Added `useBulkAppointmentActions.ts` - Composable for appointment extension
+  - Enhanced `AdminTable.vue` with checkbox selection support
+  - Integrated bulk widget into `ExpiringAppointmentsAdmin.vue`
+
+**Key Features**:
+- Checkbox selection in AdminTable (selectable prop)
+- Selection count display in floating widget
+- Bulk appointment extension (3-24 months)
+- Toast notifications for operation results
+
+### Phase 2: Appointment Details Modal Overhaul (19:00-21:00)
+
+- **Goal**: Display all appointment information in structured, readable format
+- **Result**: Complete modal redesign with full API integration
+- **Code Changes**:
+  - Added `fetchAppointmentSeries()` API function
+  - Restructured modal with card-based layout
+  - Added all missing fields (subtitle, address, link, calendar color)
+  - Fixed data structure issues (image, description, additionals, exceptions)
+
+**Key Improvements**:
+- **Card-based Layout**: Separate cards for details, series info, tags, description, image
+- **Two-column Grid**: Responsive layout for appointment details
+- **Series Information**: Proper display using `repeatId` (DAILY=1, WEEKLY=7, etc.)
+- **Collapsible Exceptions**: Show 10, expand to show all (for appointments with many exceptions)
+- **Image Display**: Fixed using `imageUrl` from Image object
+- **Description**: Fixed using correct `description` field (not deprecated `note`)
+- **Additional Dates**: Fixed structure (array of objects with `date` field)
+- **Calendar Color**: Visual indicator with colored dot
+
+### Phase 3: Tag Filtering & Dropdown Issues (21:00-22:10)
+
+- **Goal**: Fix tag filtering to work client-side without API reloads
+- **Result**: Tag filtering works locally, dropdown positioning fixed
+- **Code Changes**:
+  - Modified `useExpiringAppointments` to load all appointments once
+  - Removed tag parameters from API query
+  - Fixed `applyFilters()` to work on cached data
+  - Improved dropdown positioning in `TagMultiSelect.vue`
+  - Fixed watch initialization order
+
+**Key Fixes**:
+- Tag filtering now client-side only (no API reload)
+- Dropdown appears directly under widget
+- Dropdown follows widget on scroll (instead of closing)
+- Fixed "Cannot access before initialization" error
+- Added debug logging for filter operations
+
+## Technical Decisions
+
+### Decision: Bulk Operations Widget Pattern (18:45)
+
+**Context**: Need reusable pattern for bulk operations across admin panels  
+**Decision**: Create generic `BulkActionsWidget` with slot-based actions  
+**Impact**: Can be reused in all admin panels with custom actions
+
+**Pattern**:
+```vue
+<BulkActionsWidget
+  :selected-ids="selectedIds"
+  singular-label="Item"
+  plural-label="Items"
+  @clear-selection="clearSelection"
+>
+  <template #actions="{ selectedCount }">
+    <!-- Custom actions here -->
+  </template>
+</BulkActionsWidget>
+```
+
+### Decision: API Integration for Modal (19:30)
+
+**Context**: Modal showed incomplete data from table preview  
+**Decision**: Use `GET /calendars/appointments/{id}/{startDate}` for full data  
+**Impact**: Modal shows complete appointment series with all details
+
+**Response Structure**:
+```json
+{
+  "data": {
+    "appointment": {
+      "base": { /* all series data */ },
+      "calculated": { /* computed data */ }
+    }
+  }
+}
+```
+
+### Decision: Client-Side Tag Filtering (21:30)
+
+**Context**: Tag changes triggered API reloads, causing flicker  
+**Decision**: Load all appointments once, filter locally  
+**Impact**: Instant filtering, no network requests, better UX
+
+**Implementation**:
+- Load 9999 days of appointments once
+- Apply tag filter in `applyFilters()` function
+- Watch for tag changes, re-filter locally
+
+### Decision: Dropdown Positioning Strategy (22:00)
+
+**Context**: Dropdown appeared above widget or disconnected  
+**Decision**: Update position on scroll instead of closing  
+**Impact**: Better UX, dropdown stays visible and follows widget
+
+## Challenges & Solutions
+
+### Challenge 1: Set Reactivity in AdminTable
+
+**Problem**: Checkbox state not updating when using `Set.add()` and `Set.delete()`  
+**Solution**: Create new Set instance on each change for Vue reactivity  
+**Code**:
+```javascript
+// Before (not reactive)
+selectedItems.value.add(itemId)
+
+// After (reactive)
+const newSet = new Set(selectedItems.value)
+newSet.add(itemId)
+selectedItems.value = newSet
+```
+
+### Challenge 2: Appointment Data Structure
+
+**Problem**: Multiple issues with nested data (image, description, additionals)  
+**Solution**: Understand API response structure and access correct fields  
+**Fixes**:
+- Image: `appointment.base.image.imageUrl` (not `image` directly)
+- Description: `appointment.base.description` (not deprecated `note`)
+- Additionals: Array of `{id, date}` objects (not date strings)
+- Series ID: `appointment.base.id` for row-key
+
+### Challenge 3: Watch Initialization Order
+
+**Problem**: "Cannot access 'applyFilters' before initialization" error  
+**Solution**: Remove `{ immediate: true }` from watch, call in `onMounted()` instead  
+**Reason**: Watch with immediate runs before function declaration
+
+### Challenge 4: Tag Filtering API Reloads
+
+**Problem**: Changing tags triggered API requests, causing data reload  
+**Solution**: Load all data once, filter client-side  
+**Implementation**:
+- Remove tag parameter from `useExpiringAppointments`
+- Filter in `applyFilters()` based on `selectedTagIds`
+- Watch only triggers local filtering
+
+## Performance Improvements
+
+1. **Reduced API Calls**: Tag filtering no longer triggers API requests
+2. **Cached Data**: TanStack Query caches appointments for 30 minutes
+3. **Local Filtering**: Instant response to filter changes
+4. **Optimized Rendering**: Card-based layout with conditional rendering
+
+## Code Quality
+
+- Added comprehensive debug logging for troubleshooting
+- Consistent error handling with try-catch blocks
+- TypeScript interfaces for type safety
+- Reusable components (BulkActionsWidget, TagMultiSelect)
+- Performance logging for API calls
+
+## Testing Notes
+
+- Tested with "Mädchenjungschar" (29 exceptions, proper display)
+- Tested with "Hauskreis Schaak" (21 additional dates, correct structure)
+- Tag filtering tested with multiple tags (187, 190)
+- Bulk extension tested with various month selections
+- Dropdown positioning tested with scroll and resize
+
+## Next Steps
+
+- [ ] Consider removing debug logs for production
+- [ ] Add bulk operations to other admin panels (Tags, Automatic Groups)
+- [ ] Add more bulk actions (delete, duplicate, etc.)
+- [ ] Improve exception display for very large lists (pagination?)
+- [ ] Add keyboard shortcuts for bulk operations
+
+## Lessons Learned
+
+### 1. Vue Reactivity with Collections
+
+**Problem**: Mutating Sets/Maps doesn't trigger Vue reactivity  
+**Solution**: Always create new instances when modifying collections  
+**Application**: Use this pattern for all Set/Map operations in Vue 3
+
+### 2. API Response Structure Understanding
+
+**Problem**: Assumed flat structure, but API returns nested objects  
+**Solution**: Log full response, understand actual structure before coding  
+**Application**: Always inspect API responses before implementing UI
+
+### 3. Watch Timing Issues
+
+**Problem**: Watches with `immediate: true` can run before dependencies are ready  
+**Solution**: Use `onMounted()` for initial setup, watches for changes only  
+**Application**: Separate initialization logic from reactive updates
+
+### 4. Client-Side vs Server-Side Filtering
+
+**Problem**: Server-side filtering causes unnecessary API calls  
+**Solution**: Load all data once, filter client-side for better UX  
+**Application**: Use client-side filtering for small-medium datasets (<1000 items)
+
+### 5. Dropdown Positioning in Portals
+
+**Problem**: Fixed positioning requires careful calculation with scroll offsets  
+**Solution**: Use `getBoundingClientRect()` + `window.scrollX/Y` for accurate positioning  
+**Application**: Always account for scroll position when using fixed positioning
+
+## Files Modified
+
+- `src/components/common/BulkActionsWidget.vue` (new)
+- `src/components/common/AdminTable.vue` (selection support)
+- `src/components/common/TagMultiSelect.vue` (positioning fixes)
+- `src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue` (major refactor)
+- `src/composables/useBulkAppointmentActions.ts` (new)
+- `src/composables/useExpiringAppointments.ts` (simplified)
+- `src/services/churchtools.ts` (added fetchAppointmentSeries)
+
+## Commits
+
+1. `c039afc` - feat: Add bulk operations widget with appointment extension
+2. `f3333f6` - feat: Improve appointment details modal with full API integration
+3. `b55cf03` - fix: Improve tag filtering and dropdown positioning
+
+## Session Statistics
+
+- **Duration**: ~3.5 hours
+- **Files Changed**: 7 files
+- **Lines Added**: ~850
+- **Lines Removed**: ~600
+- **Commits**: 3
+- **Issues Resolved**: 5 major issues

From e0913a01598ff649d48c46ca1ee6b59e0bdc6e49 Mon Sep 17 00:00:00 2001
From: Bernhard Weichel <github.com@nospam.weichel21.de>
Date: Sat, 13 Dec 2025 10:45:02 +0000
Subject: [PATCH 14/14] fix: Resolve TypeScript errors in bulk actions and
 churchtools service

- Fix useToast import (use showSuccess/showError/showWarning instead of showToast)
- Add type annotations for API responses in useBulkAppointmentActions
- Handle both AppointmentBase and AppointmentCalculated types in churchtools.ts
- Add proper type casting for additionals array mapping

Co-authored-by: Ona <no-reply@ona.com>
---
 ...ON_2025-12-12_Appointment_Details_Modal.md | 17 ++++++++++--
 src/composables/useBulkAppointmentActions.ts  | 17 ++++++------
 src/services/churchtools.ts                   | 27 ++++++++++++-------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
index 1102a8e..b0d15fd 100644
--- a/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
+++ b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
@@ -20,6 +20,7 @@
   - Integrated bulk widget into `ExpiringAppointmentsAdmin.vue`
 
 **Key Features**:
+
 - Checkbox selection in AdminTable (selectable prop)
 - Selection count display in floating widget
 - Bulk appointment extension (3-24 months)
@@ -36,6 +37,7 @@
   - Fixed data structure issues (image, description, additionals, exceptions)
 
 **Key Improvements**:
+
 - **Card-based Layout**: Separate cards for details, series info, tags, description, image
 - **Two-column Grid**: Responsive layout for appointment details
 - **Series Information**: Proper display using `repeatId` (DAILY=1, WEEKLY=7, etc.)
@@ -57,6 +59,7 @@
   - Fixed watch initialization order
 
 **Key Fixes**:
+
 - Tag filtering now client-side only (no API reload)
 - Dropdown appears directly under widget
 - Dropdown follows widget on scroll (instead of closing)
@@ -72,6 +75,7 @@
 **Impact**: Can be reused in all admin panels with custom actions
 
 **Pattern**:
+
 ```vue
 <BulkActionsWidget
   :selected-ids="selectedIds"
@@ -92,12 +96,17 @@
 **Impact**: Modal shows complete appointment series with all details
 
 **Response Structure**:
+
 ```json
 {
   "data": {
     "appointment": {
-      "base": { /* all series data */ },
-      "calculated": { /* computed data */ }
+      "base": {
+        /* all series data */
+      },
+      "calculated": {
+        /* computed data */
+      }
     }
   }
 }
@@ -110,6 +119,7 @@
 **Impact**: Instant filtering, no network requests, better UX
 
 **Implementation**:
+
 - Load 9999 days of appointments once
 - Apply tag filter in `applyFilters()` function
 - Watch for tag changes, re-filter locally
@@ -127,6 +137,7 @@
 **Problem**: Checkbox state not updating when using `Set.add()` and `Set.delete()`  
 **Solution**: Create new Set instance on each change for Vue reactivity  
 **Code**:
+
 ```javascript
 // Before (not reactive)
 selectedItems.value.add(itemId)
@@ -142,6 +153,7 @@ selectedItems.value = newSet
 **Problem**: Multiple issues with nested data (image, description, additionals)  
 **Solution**: Understand API response structure and access correct fields  
 **Fixes**:
+
 - Image: `appointment.base.image.imageUrl` (not `image` directly)
 - Description: `appointment.base.description` (not deprecated `note`)
 - Additionals: Array of `{id, date}` objects (not date strings)
@@ -158,6 +170,7 @@ selectedItems.value = newSet
 **Problem**: Changing tags triggered API requests, causing data reload  
 **Solution**: Load all data once, filter client-side  
 **Implementation**:
+
 - Remove tag parameter from `useExpiringAppointments`
 - Filter in `applyFilters()` based on `selectedTagIds`
 - Watch only triggers local filtering
diff --git a/src/composables/useBulkAppointmentActions.ts b/src/composables/useBulkAppointmentActions.ts
index 73c3483..cf7dfd2 100644
--- a/src/composables/useBulkAppointmentActions.ts
+++ b/src/composables/useBulkAppointmentActions.ts
@@ -3,7 +3,7 @@ import { churchtoolsClient } from '@churchtools/churchtools-client'
 import { useToast } from './useToast'
 
 export function useBulkAppointmentActions() {
-  const { showToast } = useToast()
+  const { showSuccess, showError, showWarning } = useToast()
   const isProcessing = ref(false)
   const processedCount = ref(0)
   const errorCount = ref(0)
@@ -27,7 +27,8 @@ export function useBulkAppointmentActions() {
     for (const appointmentId of appointmentIds) {
       try {
         // Fetch current appointment data
-        const appointment = await churchtoolsClient.get(`/appointments/${appointmentId}`)
+        const response: any = await churchtoolsClient.get(`/appointments/${appointmentId}`)
+        const appointment = response.appointment || response
 
         if (!appointment || !appointment.base) {
           console.error(`Appointment ${appointmentId} not found or has no base data`)
@@ -71,17 +72,15 @@ export function useBulkAppointmentActions() {
 
     // Show result toast
     if (results.success > 0 && results.failed === 0) {
-      showToast(
-        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} erfolgreich verlängert`,
-        'success'
+      showSuccess(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} erfolgreich verlängert`
       )
     } else if (results.success > 0 && results.failed > 0) {
-      showToast(
-        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} verlängert, ${results.failed} fehlgeschlagen`,
-        'warning'
+      showWarning(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} verlängert, ${results.failed} fehlgeschlagen`
       )
     } else {
-      showToast(`Fehler beim Verlängern der Termine`, 'error')
+      showError(`Fehler beim Verlängern der Termine`)
     }
 
     return results
diff --git a/src/services/churchtools.ts b/src/services/churchtools.ts
index a86aca8..5526c87 100644
--- a/src/services/churchtools.ts
+++ b/src/services/churchtools.ts
@@ -127,19 +127,28 @@ export async function findExpiringSeries(
     const tags = 'tags' in appointment ? appointment.tags : []
 
     // Return the appointment with tags properly set in base.tags
-    return {
-      ...appointment,
-      base: {
-        ...appointment.base,
+    // Handle both AppointmentBase and AppointmentCalculated
+    if ('base' in appointment) {
+      return {
+        ...appointment,
+        base: {
+          ...(appointment as any).base,
+          tags: Array.isArray(tags) ? tags : [],
+        },
+      }
+    } else {
+      // For AppointmentBase, add tags directly
+      return {
+        ...appointment,
         tags: Array.isArray(tags) ? tags : [],
-      },
+      }
     }
   })
 
   // Find recurring appointments that are ending soon
   const expiringSeries = processedAppointments.filter((appointment) => {
     // Handle both AppointmentBase and AppointmentCalculated types
-    const base = 'base' in appointment ? appointment.base : appointment
+    const base = 'base' in appointment ? (appointment as any).base : appointment
 
     // Only consider recurring appointments (must have repeatId)
     if (!base.repeatId) return false
@@ -152,9 +161,9 @@ export async function findExpiringSeries(
     } else if (base.additionals && Array.isArray(base.additionals) && base.additionals.length > 0) {
       // Find the latest date in additionals
       const latestAdditional = base.additionals
-        .map((additional) => new Date(additional.date || additional.date))
-        .filter((date) => !isNaN(date.getTime()))
-        .sort((a, b) => b.getTime() - a.getTime())[0]
+        .map((additional: any) => new Date(additional.date || additional.startDate))
+        .filter((date: Date) => !isNaN(date.getTime()))
+        .sort((a: Date, b: Date) => b.getTime() - a.getTime())[0]
 
       if (latestAdditional) {
         effectiveEndDate = latestAdditional