From 47b7099ba67bfa39367c15417ba3bcebd2dfc111 Mon Sep 17 00:00:00 2001
From: olli <o.schwarten@osdata.org>
Date: Mon, 10 Nov 2025 10:06:10 +0100
Subject: [PATCH] feat: Implement reusable CrudDataTable component for contact
 management

- Created a new CrudDataTable.vue component to handle data display and interactions.
- Integrated column configuration, filtering, and sorting functionalities.
- Added support for dynamic column visibility and order persistence using localStorage.
- Enhanced data loading with error handling and user feedback via toast notifications.
- Updated ContactManagement_old.vue to utilize the new CrudDataTable component, improving code organization and maintainability.
---
 assets/js/components/ColumnConfigDialog.vue   |  108 ++
 assets/js/components/CrudDataTable.vue        |  343 ++++++
 assets/js/views/ContactManagement.vue         | 1006 ++++++----------
 .../js/views/ContactManagement_old.vue.backup | 1065 +++++++++++++++++
 4 files changed, 1910 insertions(+), 612 deletions(-)
 create mode 100644 assets/js/components/ColumnConfigDialog.vue
 create mode 100644 assets/js/components/CrudDataTable.vue
 create mode 100644 assets/js/views/ContactManagement_old.vue.backup

diff --git a/assets/js/components/ColumnConfigDialog.vue b/assets/js/components/ColumnConfigDialog.vue
new file mode 100644
index 0000000..a892c5a
--- /dev/null
+++ b/assets/js/components/ColumnConfigDialog.vue
@@ -0,0 +1,108 @@
+<template>
+  <Dialog
+    :visible="visible"
+    @update:visible="$emit('update:visible', $event)"
+    header="Spalten anpassen"
+    :modal="true"
+    :style="{ width: '600px' }"
+  >
+    <div class="flex flex-col gap-3">
+      <p class="text-500 mb-2">Wählen Sie die anzuzeigenden Spalten aus und ziehen Sie sie, um die Reihenfolge zu ändern:</p>
+      
+      <div class="flex flex-col gap-2">
+        <div 
+          v-for="(column, index) in localColumns" 
+          :key="column.key" 
+          class="flex items-center gap-2 p-3 border rounded-md hover-row cursor-move"
+          draggable="true"
+          @dragstart="onDragStart(index)"
+          @dragover.prevent
+          @drop="onDrop(index)"
+        >
+          <i class="pi pi-bars text-500"></i>
+          <Checkbox 
+            :inputId="'col-' + column.key" 
+            v-model="localVisibility[column.key]" 
+            :binary="true"
+          />
+          <label :for="'col-' + column.key" class="cursor-pointer flex-1">{{ column.label }}</label>
+        </div>
+      </div>
+    </div>
+    
+    <template #footer>
+      <Button label="Abbrechen" outlined @click="cancel" />
+      <Button label="Speichern" @click="save" />
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  visibleColumns: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:visible', 'update:columns', 'update:visibleColumns', 'save'])
+
+// Local copies for editing
+const localColumns = ref([...props.columns])
+const localVisibility = ref({ ...props.visibleColumns })
+
+// Watch for prop changes
+watch(() => props.columns, (newVal) => {
+  localColumns.value = [...newVal]
+}, { deep: true })
+
+watch(() => props.visibleColumns, (newVal) => {
+  localVisibility.value = { ...newVal }
+}, { deep: true })
+
+// Drag and drop for column reordering
+let draggedIndex = null
+
+const onDragStart = (index) => {
+  draggedIndex = index
+}
+
+const onDrop = (dropIndex) => {
+  if (draggedIndex === null || draggedIndex === dropIndex) return
+  
+  const columns = [...localColumns.value]
+  const draggedItem = columns[draggedIndex]
+  
+  columns.splice(draggedIndex, 1)
+  columns.splice(dropIndex, 0, draggedItem)
+  
+  localColumns.value = columns
+  draggedIndex = null
+}
+
+const save = () => {
+  emit('update:columns', localColumns.value)
+  emit('update:visibleColumns', localVisibility.value)
+  emit('save')
+}
+
+const cancel = () => {
+  // Reset local changes
+  localColumns.value = [...props.columns]
+  localVisibility.value = { ...props.visibleColumns }
+  emit('update:visible', false)
+}
+</script>
diff --git a/assets/js/components/CrudDataTable.vue b/assets/js/components/CrudDataTable.vue
new file mode 100644
index 0000000..e1227f6
--- /dev/null
+++ b/assets/js/components/CrudDataTable.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="crud-datatable">
+    <Card>
+      <template #content>
+        <!-- Header mit Buttons -->
+        <div class="flex justify-between items-center mb-4">
+          <div class="font-semibold text-xl">{{ title }}</div>
+          <div class="flex gap-2">
+            <Button 
+              v-if="enableColumnConfig"
+              label="Spalten anpassen" 
+              icon="pi pi-cog" 
+              outlined
+              @click="columnConfigDialog = true" 
+            />
+            <slot name="header-actions">
+              <Button 
+                :label="createLabel" 
+                icon="pi pi-plus" 
+                @click="$emit('create')" 
+              />
+            </slot>
+          </div>
+        </div>
+
+        <!-- Optional: Custom Filter Buttons -->
+        <slot name="filter-buttons" :load-data="loadData"></slot>
+
+        <!-- DataTable -->
+        <DataTable
+          v-model:filters="internalFilters"
+          :value="data"
+          :loading="loading"
+          v-bind="mergedTableProps"
+          filterDisplay="menu"
+        >
+          <!-- Header mit Globaler Suche -->
+          <template #header>
+            <div class="flex justify-between flex-wrap gap-2">
+              <slot name="filter-row"></slot>
+              <IconField>
+                <InputIcon><i class="pi pi-search" /></InputIcon>
+                <InputText
+                  v-model="internalFilters['global'].value"
+                  placeholder="Suchen..."
+                />
+              </IconField>
+            </div>
+          </template>
+
+          <!-- Dynamische Spalten basierend auf Config -->
+          <template v-for="column in visibleColumnsOrdered" :key="column.key">
+            <Column
+              :field="column.field || column.key"
+              :header="column.label"
+              :sortable="column.sortable !== false"
+              :style="column.style"
+              :dataType="column.dataType"
+              :showFilterMatchModes="column.showFilterMatchModes !== false"
+              :showFilterOperator="column.showFilterOperator !== false"
+            >
+              <!-- Custom Body Template (via Slot) -->
+              <template v-if="$slots[`body-${column.key}`]" #body="slotProps">
+                <slot :name="`body-${column.key}`" v-bind="slotProps" />
+              </template>
+
+              <!-- Default Body Template -->
+              <template v-else #body="{ data }">
+                {{ getNestedValue(data, column.field || column.key) }}
+              </template>
+
+              <!-- Custom Filter Template -->
+              <template v-if="column.filterable !== false" #filter="{ filterModel }">
+                <slot :name="`filter-${column.key}`" :filterModel="filterModel">
+                  <InputText 
+                    v-model="filterModel.value" 
+                    type="text" 
+                    :placeholder="'Suche nach ' + column.label"
+                  />
+                </slot>
+              </template>
+            </Column>
+          </template>
+
+          <!-- Actions Column (immer sichtbar) -->
+          <Column :exportable="false" style="min-width: 120px" header="Aktionen">
+            <template #body="slotProps">
+              <slot name="actions" v-bind="slotProps">
+                <div class="flex gap-2">
+                  <Button
+                    icon="pi pi-pencil"
+                    outlined
+                    rounded
+                    @click="$emit('edit', slotProps.data)"
+                    size="small"
+                  />
+                  <Button
+                    icon="pi pi-trash"
+                    outlined
+                    rounded
+                    severity="danger"
+                    @click="$emit('delete', slotProps.data)"
+                    size="small"
+                  />
+                </div>
+              </slot>
+            </template>
+          </Column>
+
+          <template #empty>{{ emptyMessage }}</template>
+          <template #loading>Lädt Daten. Bitte warten...</template>
+        </DataTable>
+      </template>
+    </Card>
+
+    <!-- Column Config Dialog (wiederverwendbar) -->
+    <ColumnConfigDialog
+      v-model:visible="columnConfigDialog"
+      v-model:columns="availableColumns"
+      v-model:visible-columns="visibleColumns"
+      @save="saveColumnConfig"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Card from 'primevue/card'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import ColumnConfigDialog from './ColumnConfigDialog.vue'
+
+const props = defineProps({
+  title: { 
+    type: String, 
+    required: true 
+  },
+  entityName: { 
+    type: String, 
+    default: '' 
+  },
+  columns: { 
+    type: Array, 
+    required: true 
+  },
+  dataSource: { 
+    type: String, 
+    required: true 
+  },
+  storageKey: { 
+    type: String, 
+    required: true 
+  },
+  enableColumnConfig: { 
+    type: Boolean, 
+    default: true 
+  },
+  emptyMessage: { 
+    type: String, 
+    default: 'Keine Daten gefunden.' 
+  },
+  tableProps: { 
+    type: Object, 
+    default: () => ({}) 
+  }
+})
+
+const emit = defineEmits(['create', 'edit', 'delete', 'data-loaded'])
+
+const toast = useToast()
+const data = ref([])
+const loading = ref(false)
+const columnConfigDialog = ref(false)
+
+// Computed create button label
+const createLabel = computed(() => {
+  if (props.entityName) {
+    return `Neue${props.entityName.endsWith('e') ? 'r' : 'n'} ${props.entityName}`
+  }
+  return 'Neu'
+})
+
+// Default table props
+const defaultTableProps = {
+  paginator: true,
+  rows: 10,
+  rowsPerPageOptions: [10, 25, 50, 100],
+  rowHover: true,
+  showGridlines: true,
+  scrollable: true,
+  scrollHeight: 'flex',
+  paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
+  currentPageReportTemplate: 'Zeige {first} bis {last} von {totalRecords} Einträgen'
+}
+
+// Merge user props with defaults
+const mergedTableProps = computed(() => ({
+  ...defaultTableProps,
+  ...props.tableProps
+}))
+
+// Column Management
+const availableColumns = ref([])
+const visibleColumns = ref({})
+
+const visibleColumnsOrdered = computed(() => 
+  availableColumns.value.filter(col => visibleColumns.value[col.key])
+)
+
+// Filter Setup
+const internalFilters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+})
+
+// Helper function to get nested object values
+function getNestedValue(obj, path) {
+  return path.split('.').reduce((current, prop) => current?.[prop], obj)
+}
+
+function loadColumnConfig() {
+  const saved = localStorage.getItem(props.storageKey)
+  if (saved) {
+    const config = JSON.parse(saved)
+    
+    // Handle both old and new format
+    if (config.visibility) {
+      // Apply saved order
+      if (config.order) {
+        const ordered = []
+        config.order.forEach(key => {
+          const col = props.columns.find(c => c.key === key)
+          if (col) ordered.push(col)
+        })
+        // Add new columns not in saved order
+        props.columns.forEach(col => {
+          if (!ordered.find(c => c.key === col.key)) {
+            ordered.push(col)
+          }
+        })
+        availableColumns.value = ordered
+      } else {
+        availableColumns.value = [...props.columns]
+      }
+      return config.visibility
+    } else {
+      // Old format - just visibility object
+      availableColumns.value = [...props.columns]
+      return config
+    }
+  }
+  
+  // Default: Use column defaults
+  availableColumns.value = [...props.columns]
+  return props.columns.reduce((acc, col) => {
+    acc[col.key] = col.default !== false
+    return acc
+  }, {})
+}
+
+function saveColumnConfig() {
+  const config = {
+    visibility: visibleColumns.value,
+    order: availableColumns.value.map(col => col.key)
+  }
+  localStorage.setItem(props.storageKey, JSON.stringify(config))
+  columnConfigDialog.value = false
+  
+  toast.add({
+    severity: 'success',
+    summary: 'Gespeichert',
+    detail: 'Spaltenkonfiguration wurde gespeichert',
+    life: 3000
+  })
+}
+
+async function loadData(params = {}) {
+  loading.value = true
+  try {
+    const url = new URL(props.dataSource, window.location.origin)
+    url.searchParams.append('itemsPerPage', '5000')
+    
+    // Add custom params
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        url.searchParams.append(key, value)
+      }
+    })
+    
+    const response = await fetch(url, { 
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/ld+json'
+      }
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error['hydra:description'] || 'Fehler beim Laden der Daten')
+    }
+    
+    const json = await response.json()
+    data.value = json['hydra:member'] || json.member || json
+    emit('data-loaded', data.value)
+  } catch (error) {
+    console.error('Error loading data:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: error.message || 'Daten konnten nicht geladen werden',
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+// Initialize
+onMounted(() => {
+  visibleColumns.value = loadColumnConfig()
+  
+  // Initialize column-specific filters with operator structure for menu mode
+  props.columns.forEach(col => {
+    if (col.filterable !== false) {
+      internalFilters.value[col.key] = {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+      }
+    }
+  })
+  
+  // Auto-load data
+  loadData()
+})
+
+// Expose loadData for parent component
+defineExpose({ loadData })
+</script>
diff --git a/assets/js/views/ContactManagement.vue b/assets/js/views/ContactManagement.vue
index f4a8beb..cd20fe3 100644
--- a/assets/js/views/ContactManagement.vue
+++ b/assets/js/views/ContactManagement.vue
@@ -1,558 +1,400 @@
 <template>
   <div class="contact-management">
-    <div class="card">
-      <div class="flex justify-between items-center mb-4">
-        <div class="font-semibold text-xl">Kontakte</div>
-        <Button label="Neuer Kontakt" icon="pi pi-plus" @click="openNewContactDialog" />
-      </div>
+    <CrudDataTable
+      ref="tableRef"
+      title="Kontakte"
+      entity-name="Kontakt"
+      :columns="contactColumns"
+      data-source="/api/contacts"
+      storage-key="contactTableColumns"
+      @create="openNewContactDialog"
+      @edit="editContact"
+      @delete="confirmDelete"
+      @data-loaded="onDataLoaded"
+    >
+      <!-- Custom Filter Buttons -->
+      <template #filter-buttons="{ loadData }">
+        <div class="flex gap-2 mb-4">
+          <Button
+            label="Alle"
+            :outlined="typeFilter !== 'all'"
+            @click="filterByType('all', loadData)"
+            size="small"
+          />
+          <Button
+            label="Debitoren"
+            :outlined="typeFilter !== 'debtor'"
+            @click="filterByType('debtor', loadData)"
+            size="small"
+          />
+          <Button
+            label="Kreditoren"
+            :outlined="typeFilter !== 'creditor'"
+            @click="filterByType('creditor', loadData)"
+            size="small"
+          />
+        </div>
+      </template>
 
-      <DataTable
-        v-model:filters="filters"
-        :value="contacts"
-        :loading="loading"
-        :paginator="true"
-        :rows="10"
-        :rowsPerPageOptions="[10, 25, 50, 100]"
-        :rowHover="true"
-        :globalFilterFields="['companyName', 'city', 'email', 'phone']"
-        sortField="companyName"
-        :sortOrder="1"
-        dataKey="id"
-        filterDisplay="menu"
-        showGridlines
-        scrollable
-        scrollHeight="flex"
-        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-        currentPageReportTemplate="Zeige {first} bis {last} von {totalRecords} Einträgen"
-      >
-        <template #header>
-          <div class="flex justify-between flex-wrap gap-2">
-            <div class="flex gap-2">
-              <Button
-                label="Alle"
-                :outlined="typeFilter !== 'all'"
-                @click="filterByType('all')"
-                size="small"
-              />
-              <Button
-                label="Debitoren"
-                :outlined="typeFilter !== 'debtor'"
-                @click="filterByType('debtor')"
-                size="small"
-              />
-              <Button
-                label="Kreditoren"
-                :outlined="typeFilter !== 'creditor'"
-                @click="filterByType('creditor')"
-                size="small"
-              />
+      <!-- Custom Column Templates -->
+      <template #body-companyName="{ data }">
+        <div class="font-semibold">{{ data.companyName }}</div>
+      </template>
+
+      <template #body-street="{ data }">
+        {{ data.street }}
+      </template>
+
+      <template #body-zipCode="{ data }">
+        {{ data.zipCode }}
+      </template>
+
+      <template #body-city="{ data }">
+        {{ data.city }}
+      </template>
+
+      <template #body-country="{ data }">
+        {{ data.country }}
+      </template>
+
+      <template #body-contactPersons="{ data }">
+        <div v-if="data.contactPersons?.length > 0">
+          <div v-for="person in data.contactPersons.slice(0, 2)" :key="person.id" class="mb-1">
+            <div class="font-medium">
+              {{ person.firstName }} {{ person.lastName }}
+              <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-1" />
             </div>
-            <IconField>
-              <InputIcon>
-                <i class="pi pi-search" />
-              </InputIcon>
-              <InputText
-                v-model="filters['global'].value"
-                placeholder="Suchen..."
-              />
-            </IconField>
+            <div v-if="person.position" class="text-sm text-500">{{ person.position }}</div>
           </div>
-        </template>
-        <template #empty>Keine Kontakte gefunden.</template>
-        <template #loading>Lade Kontakte. Bitte warten...</template>
+          <div v-if="data.contactPersons.length > 2" class="text-sm text-500">
+            +{{ data.contactPersons.length - 2 }} weitere
+          </div>
+        </div>
+        <span v-else class="text-500">Keine Ansprechpartner</span>
+      </template>
 
-          <Column field="companyName" header="Firma" sortable style="min-width: 200px">
-            <template #body="{ data }">
-              <div class="font-semibold">{{ data.companyName }}</div>
-              <div class="text-sm text-500" v-if="data.companyNumber">
-                Nr: {{ data.companyNumber }}
-              </div>
-            </template>
-            <template #filter="{ filterModel }">
-              <InputText v-model="filterModel.value" type="text" placeholder="Suche nach Firma" />
-            </template>
-          </Column>
+      <template #body-phone="{ data }">
+        <a v-if="data.phone" :href="'tel:' + data.phone" class="text-primary">{{ data.phone }}</a>
+      </template>
 
-          <Column field="city" header="Ort" sortable style="min-width: 150px">
-            <template #body="{ data }">
-              <div v-if="data.zipCode || data.city">
-                {{ data.zipCode }} {{ data.city }}
-              </div>
-              <div class="text-sm text-500" v-if="data.country">
-                {{ data.country }}
-              </div>
-            </template>
-            <template #filter="{ filterModel }">
-              <InputText v-model="filterModel.value" type="text" placeholder="Suche nach Ort" />
-            </template>
-          </Column>
+      <template #body-fax="{ data }">
+        {{ data.fax }}
+      </template>
 
-          <Column header="Ansprechpartner" style="min-width: 200px">
-            <template #body="{ data }">
-              <div v-if="data.contactPersons && data.contactPersons.length > 0">
-                <div
-                  v-for="person in data.contactPersons.slice(0, 2)"
-                  :key="person.id"
-                  class="mb-1"
-                >
-                  <div class="font-medium">
-                    {{ person.firstName }} {{ person.lastName }}
-                    <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-1" />
-                  </div>
-                  <div class="text-sm text-500" v-if="person.email">
-                    {{ person.email }}
-                  </div>
-                </div>
-              </div>
-              <span v-else class="text-500">Keine Ansprechpartner</span>
-            </template>
-          </Column>
-          <Column header="Telefon" style="min-width: 150px">
-            <template #body="{ data }">
-              <div v-if="data.phone">
-                <i class="pi pi-phone mr-1"></i>
-                {{ data.phone }}
-              </div>
-              <span v-else class="text-500">---</span>
-            </template>
-          </Column>
+      <template #body-email="{ data }">
+        <a v-if="data.email" :href="'mailto:' + data.email" class="text-primary">{{ data.email }}</a>
+      </template>
 
-          <Column header="E-Mail" style="min-width: 200px">
-            <template #body="{ data }">
-              <div v-if="data.email">
-                <a :href="'mailto:' + data.email" class="text-primary">
-                  <i class="pi pi-envelope mr-1"></i>
-                  {{ data.email }}
-                </a>
-              </div>
-              <span v-else class="text-500">---</span>
-            </template>
-          </Column>
+      <template #body-website="{ data }">
+        <a v-if="data.website" :href="data.website" target="_blank" class="text-primary">
+          {{ data.website }}
+        </a>
+      </template>
 
-          <Column header="Website" style="min-width: 200px">
-            <template #body="{ data }">
-              <div v-if="data.website">
-                <a :href="data.website" target="_blank" class="text-primary">
-                  <i class="pi pi-globe mr-1"></i>
-                  {{ data.website }}
-                </a>
-              </div>
-              <span v-else class="text-500">---</span>
-            </template>
-          </Column>
+      <template #body-type="{ data }">
+        <div class="flex gap-1">
+          <Tag v-if="data.isDebtor" value="Debitor" severity="success" />
+          <Tag v-if="data.isCreditor" value="Kreditor" severity="warning" />
+        </div>
+      </template>
 
-          <Column header="Typ" style="min-width: 130px">
-            <template #body="{ data }">
-              <div class="flex gap-1">
-                <Tag v-if="data.isDebtor" value="Debitor" severity="success" />
-                <Tag v-if="data.isCreditor" value="Kreditor" severity="warning" />
-              </div>
-            </template>
-          </Column>
+      <template #body-status="{ data }">
+        <Tag :value="data.isActive ? 'Aktiv' : 'Inaktiv'" :severity="data.isActive ? 'success' : 'secondary'" />
+      </template>
 
-          <Column field="isActive" header="Status" dataType="boolean" style="min-width: 100px">
-            <template #body="{ data }">
-              <Tag
-                :value="data.isActive ? 'Aktiv' : 'Inaktiv'"
-                :severity="data.isActive ? 'success' : 'danger'"
-              />
-            </template>
-            <template #filter="{ filterModel }">
-              <Select 
-                v-model="filterModel.value" 
-                :options="statusOptions" 
-                optionLabel="label"
-                optionValue="value"
-                placeholder="Status wählen" 
-                showClear
-              >
-                <template #option="slotProps">
-                  <Tag :value="slotProps.option.label" :severity="slotProps.option.value ? 'success' : 'danger'" />
-                </template>
-              </Select>
-            </template>
-          </Column>
+      <template #body-notes="{ data }">
+        <div v-if="data.notes" class="text-sm text-500 line-clamp-2">{{ data.notes }}</div>
+      </template>
 
-          <Column :exportable="false" style="min-width: 120px">
-            <template #body="{ data }">
-              <div class="flex gap-2">
-                <Button
-                  icon="pi pi-pencil"
-                  outlined
-                  rounded
-                  @click="editContact(data)"
-                  size="small"
-                />
-                <Button
-                  icon="pi pi-trash"
-                  outlined
-                  rounded
-                  severity="danger"
-                  @click="confirmDelete(data)"
-                  size="small"
-                />
-              </div>
-            </template>
-          </Column>
+      <template #body-createdAt="{ data }">
+        {{ formatDate(data.createdAt) }}
+      </template>
 
-        </DataTable>
-      </div>
+      <template #body-updatedAt="{ data }">
+        {{ formatDate(data.updatedAt) }}
+      </template>
+    </CrudDataTable>
 
     <!-- Contact Dialog -->
     <Dialog
       v-model:visible="contactDialog"
       :header="editingContact?.id ? 'Kontakt bearbeiten' : 'Neuer Kontakt'"
       :modal="true"
-      :style="{ width: '1200px', maxHeight: '90vh' }"
-      :closable="true"
+      :style="{ width: '800px' }"
+      :closable="!saving"
     >
-      <div v-if="editingContact">
-        <!-- Basisdaten -->
-        <Card class="mb-3">
-          <template #title>
-            <div class="flex items-center gap-2">
-              <i class="pi pi-building text-primary"></i>
-              <span>Basisdaten</span>
-            </div>
-          </template>
-          <template #content>
-            <div class="flex flex-col gap-4">
-              <div class="flex flex-col md:flex-row gap-4">
-                <div class="flex flex-col gap-2 w-full md:w-2/3">
-                  <label for="companyName">Firmenname <span class="text-red-500">*</span></label>
-                  <InputText
-                    id="companyName"
-                    v-model="editingContact.companyName"
-                    :invalid="submitted && !editingContact.companyName"
-                  />
-                  <small v-if="submitted && !editingContact.companyName" class="text-red-500">
-                    Firmenname ist erforderlich
-                  </small>
-                </div>
+      <div class="flex flex-col gap-4">
+        <!-- Company Information -->
+        <div class="font-semibold">Firmeninformationen</div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2">
+            <label for="companyName">Firmenname *</label>
+            <InputText
+              id="companyName"
+              v-model="editingContact.companyName"
+              :class="{ 'p-invalid': submitted && !editingContact.companyName }"
+              :disabled="saving"
+            />
+            <small v-if="submitted && !editingContact.companyName" class="p-error">Firmenname ist erforderlich</small>
+          </div>
 
-                <div class="flex flex-col gap-2 w-full md:w-1/3">
-                  <label for="companyNumber">Kundennummer</label>
-                  <InputText id="companyNumber" v-model="editingContact.companyNumber" />
-                </div>
-              </div>
+          <div class="flex flex-col gap-2">
+            <label for="companyNumber">Kundennummer</label>
+            <InputText id="companyNumber" v-model="editingContact.companyNumber" :disabled="saving" />
+          </div>
+        </div>
 
-              <div class="flex gap-4">
-                <div class="flex items-center gap-2">
-                  <Checkbox inputId="isDebtor" v-model="editingContact.isDebtor" :binary="true" />
-                  <label for="isDebtor">Debitor</label>
-                </div>
-                <div class="flex items-center gap-2">
-                  <Checkbox inputId="isCreditor" v-model="editingContact.isCreditor" :binary="true" />
-                  <label for="isCreditor">Kreditor</label>
-                </div>
-                <div class="flex items-center gap-2">
-                  <Checkbox inputId="isActive" v-model="editingContact.isActive" :binary="true" />
-                  <label for="isActive">Aktiv</label>
-                </div>
-              </div>
-            </div>
-          </template>
-        </Card>
+        <!-- Address -->
+        <Divider />
+        <div class="font-semibold">Adresse</div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2 col-span-2">
+            <label for="street">Straße</label>
+            <InputText id="street" v-model="editingContact.street" :disabled="saving" />
+          </div>
 
-        <!-- Adresse -->
-        <Card class="mb-3">
-          <template #title>
-            <div class="flex items-center gap-2">
-              <i class="pi pi-map-marker text-primary"></i>
-              <span>Adresse</span>
-            </div>
-          </template>
-          <template #content>
-            <div class="flex flex-col gap-4">
-              <div class="flex flex-col gap-2">
-                <label for="street">Straße</label>
-                <InputText id="street" v-model="editingContact.street" />
-              </div>
+          <div class="flex flex-col gap-2">
+            <label for="zipCode">PLZ</label>
+            <InputText id="zipCode" v-model="editingContact.zipCode" :disabled="saving" />
+          </div>
 
-              <div class="flex flex-col md:flex-row gap-4">
-                <div class="flex flex-col gap-2 w-full md:w-1/4">
-                  <label for="zipCode">PLZ</label>
-                  <InputText id="zipCode" v-model="editingContact.zipCode" />
-                </div>
+          <div class="flex flex-col gap-2">
+            <label for="city">Ort</label>
+            <InputText id="city" v-model="editingContact.city" :disabled="saving" />
+          </div>
 
-                <div class="flex flex-col gap-2 w-full md:w-1/2">
-                  <label for="city">Ort</label>
-                  <InputText id="city" v-model="editingContact.city" />
-                </div>
+          <div class="flex flex-col gap-2 col-span-2">
+            <label for="country">Land</label>
+            <InputText id="country" v-model="editingContact.country" :disabled="saving" />
+          </div>
+        </div>
 
-                <div class="flex flex-col gap-2 w-full md:w-1/4">
-                  <label for="country">Land</label>
-                  <InputText id="country" v-model="editingContact.country" />
-                </div>
-              </div>
-            </div>
-          </template>
-        </Card>
+        <!-- Contact Information -->
+        <Divider />
+        <div class="font-semibold">Kontaktinformationen</div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2">
+            <label for="phone">Telefon</label>
+            <InputText id="phone" v-model="editingContact.phone" :disabled="saving" />
+          </div>
 
-        <!-- Kontaktdaten -->
-        <Card class="mb-3">
-          <template #title>
-            <div class="flex items-center gap-2">
-              <i class="pi pi-phone text-primary"></i>
-              <span>Kontaktdaten</span>
-            </div>
-          </template>
-          <template #content>
-            <div class="flex flex-col gap-4">
-              <div class="flex flex-col md:flex-row gap-4">
-                <div class="flex flex-col gap-2 w-full">
-                  <label for="phone">Telefon</label>
-                  <InputText id="phone" v-model="editingContact.phone" />
-                </div>
+          <div class="flex flex-col gap-2">
+            <label for="fax">Fax</label>
+            <InputText id="fax" v-model="editingContact.fax" :disabled="saving" />
+          </div>
 
-                <div class="flex flex-col gap-2 w-full">
-                  <label for="fax">Fax</label>
-                  <InputText id="fax" v-model="editingContact.fax" />
-                </div>
-              </div>
+          <div class="flex flex-col gap-2">
+            <label for="email">E-Mail</label>
+            <InputText id="email" v-model="editingContact.email" type="email" :disabled="saving" />
+          </div>
 
-              <div class="flex flex-col md:flex-row gap-4">
-                <div class="flex flex-col gap-2 w-full">
-                  <label for="email">E-Mail</label>
-                  <InputText id="email" v-model="editingContact.email" type="email" />
-                </div>
+          <div class="flex flex-col gap-2">
+            <label for="website">Website</label>
+            <InputText id="website" v-model="editingContact.website" :disabled="saving" />
+          </div>
+        </div>
 
-                <div class="flex flex-col gap-2 w-full">
-                  <label for="website">Website</label>
-                  <InputText id="website" v-model="editingContact.website" />
-                </div>
-              </div>
-            </div>
-          </template>
-        </Card>
+        <!-- Tax Information -->
+        <Divider />
+        <div class="font-semibold">Steuerinformationen</div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2">
+            <label for="taxNumber">Steuernummer</label>
+            <InputText id="taxNumber" v-model="editingContact.taxNumber" :disabled="saving" />
+          </div>
 
-        <!-- Steuerdaten -->
-        <Card class="mb-3">
-          <template #title>
-            <div class="flex items-center gap-2">
-              <i class="pi pi-calculator text-primary"></i>
-              <span>Steuerdaten</span>
-            </div>
-          </template>
-          <template #content>
-            <div class="flex flex-col md:flex-row gap-4">
-              <div class="flex flex-col gap-2 w-full">
-                <label for="taxNumber">Steuernummer</label>
-                <InputText id="taxNumber" v-model="editingContact.taxNumber" />
-              </div>
+          <div class="flex flex-col gap-2">
+            <label for="vatNumber">USt-IdNr.</label>
+            <InputText id="vatNumber" v-model="editingContact.vatNumber" :disabled="saving" />
+          </div>
+        </div>
 
-              <div class="flex flex-col gap-2 w-full">
-                <label for="vatNumber">USt-IdNr.</label>
-                <InputText id="vatNumber" v-model="editingContact.vatNumber" />
-              </div>
-            </div>
-          </template>
-        </Card>
+        <!-- Type and Status -->
+        <Divider />
+        <div class="font-semibold">Typ und Status</div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex items-center gap-2">
+            <Checkbox inputId="isDebtor" v-model="editingContact.isDebtor" :binary="true" :disabled="saving" />
+            <label for="isDebtor">Debitor</label>
+          </div>
 
-        <!-- Ansprechpartner -->
-        <Card class="mb-3">
-          <template #title>
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <i class="pi pi-users text-primary"></i>
-                <span>Ansprechpartner</span>
-              </div>
-              <Button
-                label="Hinzufügen"
-                icon="pi pi-plus"
-                size="small"
-                outlined
-                @click="addContactPerson"
-                :disabled="editingContact.contactPersons.length >= 2"
-              />
-            </div>
-          </template>
-          <template #content>
-            <div v-if="editingContact.contactPersons.length === 0" class="text-center py-4 text-500">
-              <i class="pi pi-user-plus text-4xl mb-3"></i>
-              <p>Noch keine Ansprechpartner hinzugefügt</p>
-            </div>
+          <div class="flex items-center gap-2">
+            <Checkbox inputId="isCreditor" v-model="editingContact.isCreditor" :binary="true" :disabled="saving" />
+            <label for="isCreditor">Kreditor</label>
+          </div>
 
-            <div
-              v-for="(person, index) in editingContact.contactPersons"
-              :key="index"
-              class="mb-4"
-            >
-              <Divider v-if="index > 0" />
-              <div class="flex flex-col gap-4">
-                <div class="flex justify-between items-center mb-3">
-                  <h4 class="m-0 font-semibold">
-                    <i class="pi pi-user mr-2"></i>
-                    Ansprechpartner {{ index + 1 }}
-                    <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-2" />
-                  </h4>
-                  <Button
-                    icon="pi pi-trash"
-                    text
-                    rounded
-                    severity="danger"
-                    @click="removeContactPerson(index)"
-                    size="small"
-                  />
-                </div>
+          <div class="flex items-center gap-2 col-span-2">
+            <Checkbox inputId="isActive" v-model="editingContact.isActive" :binary="true" :disabled="saving" />
+            <label for="isActive">Aktiv</label>
+          </div>
+        </div>
 
-                <div class="flex flex-col md:flex-row gap-4">
-                  <div class="flex flex-col gap-2 w-full md:w-1/4">
-                    <label :for="'salutation-' + index">Anrede</label>
-                    <Dropdown
-                      :id="'salutation-' + index"
-                      v-model="person.salutation"
-                      :options="salutations"
-                      placeholder="Wählen..."
-                    />
-                  </div>
+        <!-- Notes -->
+        <Divider />
+        <div class="flex flex-col gap-2">
+          <label for="notes">Notizen</label>
+          <Textarea id="notes" v-model="editingContact.notes" rows="3" :disabled="saving" />
+        </div>
 
-                  <div class="flex flex-col gap-2 w-full md:w-1/4">
-                    <label :for="'title-' + index">Titel</label>
-                    <InputText :id="'title-' + index" v-model="person.title" />
-                  </div>
+        <!-- Contact Persons -->
+        <Divider />
+        <div class="flex justify-between items-center">
+          <div class="font-semibold">Ansprechpartner</div>
+          <Button
+            label="Hinzufügen"
+            icon="pi pi-plus"
+            size="small"
+            outlined
+            @click="addContactPerson"
+            :disabled="saving"
+          />
+        </div>
 
-                  <div class="flex flex-col gap-2 w-full md:w-1/4">
-                    <label :for="'firstName-' + index">
-                      Vorname <span class="text-red-500">*</span>
-                    </label>
-                    <InputText
-                      :id="'firstName-' + index"
-                      v-model="person.firstName"
-                      :invalid="submitted && !person.firstName"
-                    />
-                  </div>
+        <div v-for="(person, index) in editingContact.contactPersons" :key="index" class="border p-3 rounded-md">
+          <div class="flex justify-between items-start mb-3">
+            <div class="font-medium">Ansprechpartner {{ index + 1 }}</div>
+            <Button
+              icon="pi pi-trash"
+              size="small"
+              text
+              rounded
+              severity="danger"
+              @click="removeContactPerson(index)"
+              :disabled="saving"
+            />
+          </div>
 
-                  <div class="flex flex-col gap-2 w-full md:w-1/4">
-                    <label :for="'lastName-' + index">
-                      Nachname <span class="text-red-500">*</span>
-                    </label>
-                    <InputText
-                      :id="'lastName-' + index"
-                      v-model="person.lastName"
-                      :invalid="submitted && !person.lastName"
-                    />
-                  </div>
-                </div>
-
-                <div class="flex flex-col md:flex-row gap-4">
-                  <div class="flex flex-col gap-2 w-full">
-                    <label :for="'position-' + index">Position</label>
-                    <InputText :id="'position-' + index" v-model="person.position" />
-                  </div>
-
-                  <div class="flex flex-col gap-2 w-full">
-                    <label :for="'department-' + index">Abteilung</label>
-                    <InputText :id="'department-' + index" v-model="person.department" />
-                  </div>
-                </div>
-
-                <div class="flex flex-col md:flex-row gap-4">
-                  <div class="flex flex-col gap-2 w-full">
-                    <label :for="'personPhone-' + index">Telefon</label>
-                    <InputText :id="'personPhone-' + index" v-model="person.phone" />
-                  </div>
-
-                  <div class="flex flex-col gap-2 w-full">
-                    <label :for="'mobile-' + index">Mobil</label>
-                    <InputText :id="'mobile-' + index" v-model="person.mobile" />
-                  </div>
-
-                  <div class="flex flex-col gap-2 w-full">
-                    <label :for="'personEmail-' + index">E-Mail</label>
-                    <InputText
-                      :id="'personEmail-' + index"
-                      v-model="person.email"
-                      type="email"
-                    />
-                  </div>
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <Checkbox
-                    :inputId="'isPrimary-' + index"
-                    v-model="person.isPrimary"
-                    :binary="true"
-                  />
-                  <label :for="'isPrimary-' + index">Hauptansprechpartner</label>
-                </div>
-              </div>
-            </div>
-          </template>
-        </Card>
-
-        <!-- Notizen -->
-        <Card>
-          <template #title>
-            <div class="flex items-center gap-2">
-              <i class="pi pi-comment text-primary"></i>
-              <span>Notizen</span>
-            </div>
-          </template>
-          <template #content>
+          <div class="grid grid-cols-2 gap-3">
             <div class="flex flex-col gap-2">
-              <label for="notes">Interne Notizen zu diesem Kontakt</label>
-              <Textarea 
-                id="notes" 
-                v-model="editingContact.notes" 
-                :rows="4"
-                placeholder="Interne Notizen..."
+              <label :for="'salutation-' + index">Anrede</label>
+              <Select
+                :id="'salutation-' + index"
+                v-model="person.salutation"
+                :options="salutations"
+                placeholder="Auswählen"
+                :disabled="saving"
               />
             </div>
-          </template>
-        </Card>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'title-' + index">Titel</label>
+              <InputText :id="'title-' + index" v-model="person.title" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'firstName-' + index">Vorname</label>
+              <InputText :id="'firstName-' + index" v-model="person.firstName" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'lastName-' + index">Nachname</label>
+              <InputText :id="'lastName-' + index" v-model="person.lastName" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'position-' + index">Position</label>
+              <InputText :id="'position-' + index" v-model="person.position" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'department-' + index">Abteilung</label>
+              <InputText :id="'department-' + index" v-model="person.department" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'person-phone-' + index">Telefon</label>
+              <InputText :id="'person-phone-' + index" v-model="person.phone" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label :for="'mobile-' + index">Mobil</label>
+              <InputText :id="'mobile-' + index" v-model="person.mobile" :disabled="saving" />
+            </div>
+
+            <div class="flex flex-col gap-2 col-span-2">
+              <label :for="'person-email-' + index">E-Mail</label>
+              <InputText :id="'person-email-' + index" v-model="person.email" type="email" :disabled="saving" />
+            </div>
+
+            <div class="flex items-center gap-2 col-span-2">
+              <Checkbox
+                :inputId="'isPrimary-' + index"
+                v-model="person.isPrimary"
+                :binary="true"
+                @change="setPrimaryContact(index)"
+                :disabled="saving"
+              />
+              <label :for="'isPrimary-' + index">Primärer Ansprechpartner</label>
+            </div>
+          </div>
+        </div>
       </div>
 
       <template #footer>
-        <Button label="Abbrechen" outlined @click="hideDialog" />
+        <Button label="Abbrechen" outlined @click="closeContactDialog" :disabled="saving" />
         <Button label="Speichern" @click="saveContact" :loading="saving" />
       </template>
     </Dialog>
 
-    <!-- Delete Confirmation -->
+    <!-- Delete Confirmation Dialog -->
     <Dialog
       v-model:visible="deleteDialog"
-      header="Bestätigung"
+      header="Kontakt löschen"
       :modal="true"
       :style="{ width: '450px' }"
+      :closable="!deleting"
     >
-      <div class="flex align-items-center">
-        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem; color: var(--red-500)"></i>
-        <span v-if="editingContact">
-          Möchten Sie den Kontakt <b>{{ editingContact.companyName }}</b> wirklich löschen?
-        </span>
+      <div class="flex items-center gap-3">
+        <i class="pi pi-exclamation-triangle text-3xl text-red-500"></i>
+        <span>Möchten Sie diesen Kontakt wirklich löschen?</span>
       </div>
       <template #footer>
-        <Button label="Nein" outlined @click="deleteDialog = false" />
-        <Button label="Ja" severity="danger" @click="deleteContact" :loading="deleting" />
+        <Button label="Abbrechen" outlined @click="deleteDialog = false" :disabled="deleting" />
+        <Button label="Löschen" severity="danger" @click="deleteContact" :loading="deleting" />
       </template>
     </Dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useToast } from 'primevue/usetoast'
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
+import CrudDataTable from '../components/CrudDataTable.vue'
+import Dialog from 'primevue/dialog'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
-import Dialog from 'primevue/dialog'
-import Card from 'primevue/card'
 import Tag from 'primevue/tag'
 import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
-import Divider from 'primevue/divider'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
 import Select from 'primevue/select'
+import Divider from 'primevue/divider'
 
 const toast = useToast()
+const tableRef = ref(null)
 
-const contacts = ref([])
-const loading = ref(false)
+// Column definitions
+const contactColumns = [
+  { key: 'companyName', label: 'Firma', field: 'companyName', sortable: true, style: 'min-width: 200px', default: true },
+  { key: 'companyNumber', label: 'Kundennummer', field: 'companyNumber', default: false },
+  { key: 'street', label: 'Straße', field: 'street', default: false },
+  { key: 'zipCode', label: 'PLZ', field: 'zipCode', default: false },
+  { key: 'city', label: 'Ort', field: 'city', sortable: true, default: true },
+  { key: 'country', label: 'Land', field: 'country', default: false },
+  { key: 'contactPersons', label: 'Ansprechpartner', style: 'min-width: 200px', default: true },
+  { key: 'phone', label: 'Telefon', field: 'phone', default: true },
+  { key: 'fax', label: 'Fax', field: 'fax', default: false },
+  { key: 'email', label: 'E-Mail', field: 'email', default: true },
+  { key: 'website', label: 'Website', field: 'website', default: true },
+  { key: 'taxNumber', label: 'Steuernummer', field: 'taxNumber', default: false },
+  { key: 'vatNumber', label: 'USt-IdNr.', field: 'vatNumber', default: false },
+  { key: 'type', label: 'Typ (Debitor/Kreditor)', default: true },
+  { key: 'status', label: 'Status', default: true },
+  { key: 'notes', label: 'Notizen', field: 'notes', default: false },
+  { key: 'createdAt', label: 'Erstellt am', field: 'createdAt', default: false },
+  { key: 'updatedAt', label: 'Zuletzt geändert', field: 'updatedAt', default: false }
+]
+
+// State
 const contactDialog = ref(false)
 const deleteDialog = ref(false)
 const editingContact = ref(null)
@@ -560,20 +402,10 @@ const submitted = ref(false)
 const saving = ref(false)
 const deleting = ref(false)
 const typeFilter = ref('all')
-const filters = ref({
-  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-  companyName: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-  city: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-  isActive: { value: null, matchMode: FilterMatchMode.EQUALS }
-})
 
 const salutations = ref(['Herr', 'Frau', 'Divers'])
-const statusOptions = ref([
-  { label: 'Aktiv', value: true },
-  { label: 'Inaktiv', value: false }
-])
-const typeOptions = ref(['Debitor', 'Kreditor'])
 
+// Helper functions
 const emptyContact = () => ({
   companyName: '',
   companyNumber: '',
@@ -607,54 +439,31 @@ const emptyContactPerson = () => ({
   isPrimary: false
 })
 
-onMounted(() => {
-  loadContacts()
-})
-
-const loadContacts = async () => {
-  loading.value = true
-  try {
-    // Alle Kontakte laden - API Platform unterstützt itemsPerPage Parameter
-    let url = '/api/contacts'
-    const params = new URLSearchParams()
-    
-    // Große Anzahl setzen, um alle Kontakte zu erhalten
-    params.append('itemsPerPage', '5000')
-    
-    if (typeFilter.value === 'debtor') {
-      params.append('isDebtor', 'true')
-    } else if (typeFilter.value === 'creditor') {
-      params.append('isCreditor', 'true')
-    }
-    
-    url += '?' + params.toString()
-    
-    const response = await fetch(url, {
-      credentials: 'include'
-    })
-    if (!response.ok) throw new Error('Fehler beim Laden der Kontakte')
-    const data = await response.json()
-    
-    // API Platform gibt hydra:member zurück
-    contacts.value = data['hydra:member'] || data.member || []
-  } catch (error) {
-    console.error('Error loading contacts:', error)
-    toast.add({
-      severity: 'error',
-      summary: 'Fehler',
-      detail: 'Kontakte konnten nicht geladen werden',
-      life: 3000
-    })
-  } finally {
-    loading.value = false
-  }
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
 }
 
-const filterByType = (type) => {
+// Filter by type
+const filterByType = (type, loadData) => {
   typeFilter.value = type
-  loadContacts()
+  const params = {}
+  
+  if (type === 'debtor') {
+    params.isDebtor = 'true'
+  } else if (type === 'creditor') {
+    params.isCreditor = 'true'
+  }
+  
+  loadData(params)
 }
 
+// CRUD Operations
 const openNewContactDialog = () => {
   editingContact.value = emptyContact()
   submitted.value = false
@@ -663,79 +472,43 @@ const openNewContactDialog = () => {
 
 const editContact = (contact) => {
   editingContact.value = { ...contact }
-  // Ensure contactPersons is initialized
-  if (!editingContact.value.contactPersons) {
-    editingContact.value.contactPersons = []
-  }
   submitted.value = false
   contactDialog.value = true
 }
 
-const hideDialog = () => {
+const closeContactDialog = () => {
   contactDialog.value = false
-  submitted.value = false
   editingContact.value = null
-}
-
-const addContactPerson = () => {
-  if (editingContact.value.contactPersons.length < 2) {
-    editingContact.value.contactPersons.push(emptyContactPerson())
-  }
-}
-
-const removeContactPerson = (index) => {
-  editingContact.value.contactPersons.splice(index, 1)
-}
-
-const validateContact = () => {
-  if (!editingContact.value.companyName) {
-    return false
-  }
-  
-  // Validate contact persons
-  for (const person of editingContact.value.contactPersons) {
-    if (!person.firstName || !person.lastName) {
-      return false
-    }
-  }
-  
-  return true
+  submitted.value = false
 }
 
 const saveContact = async () => {
   submitted.value = true
   
-  if (!validateContact()) {
-    toast.add({
-      severity: 'warn',
-      summary: 'Validierung fehlgeschlagen',
-      detail: 'Bitte füllen Sie alle Pflichtfelder aus',
-      life: 3000
-    })
+  if (!editingContact.value.companyName) {
     return
   }
-
+  
   saving.value = true
+  
   try {
-    const url = editingContact.value.id
-      ? `/api/contacts/${editingContact.value.id}`
-      : '/api/contacts'
-    
-    const method = editingContact.value.id ? 'PUT' : 'POST'
+    const isEdit = !!editingContact.value.id
+    const url = isEdit ? `/api/contacts/${editingContact.value.id}` : '/api/contacts'
+    const method = isEdit ? 'PUT' : 'POST'
     
     const response = await fetch(url, {
       method,
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/ld+json',
+        'Accept': 'application/ld+json'
       },
       credentials: 'include',
       body: JSON.stringify(editingContact.value)
     })
-
+    
     if (!response.ok) {
       const error = await response.json()
       
-      // API Platform liefert Validierungsfehler in 'violations' Array
       if (error.violations && error.violations.length > 0) {
         const errorMessages = error.violations
           .map(v => `${v.propertyPath}: ${v.message}`)
@@ -743,19 +516,18 @@ const saveContact = async () => {
         throw new Error(errorMessages)
       }
       
-      // Fallback für andere Fehlerformate
-      throw new Error(error['hydra:description'] || error.message || error.detail || 'Fehler beim Speichern')
+      throw new Error(error['hydra:description'] || error.message || 'Fehler beim Speichern')
     }
-
+    
     toast.add({
       severity: 'success',
       summary: 'Erfolg',
-      detail: 'Kontakt wurde gespeichert',
+      detail: `Kontakt wurde ${isEdit ? 'aktualisiert' : 'erstellt'}`,
       life: 3000
     })
-
-    hideDialog()
-    loadContacts()
+    
+    closeContactDialog()
+    tableRef.value?.loadData()
   } catch (error) {
     console.error('Error saving contact:', error)
     toast.add({
@@ -776,24 +548,26 @@ const confirmDelete = (contact) => {
 
 const deleteContact = async () => {
   deleting.value = true
+  
   try {
     const response = await fetch(`/api/contacts/${editingContact.value.id}`, {
       method: 'DELETE',
       credentials: 'include'
     })
-
-    if (!response.ok) throw new Error('Fehler beim Löschen')
-
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Löschen des Kontakts')
+    }
+    
     toast.add({
       severity: 'success',
       summary: 'Erfolg',
       detail: 'Kontakt wurde gelöscht',
       life: 3000
     })
-
+    
     deleteDialog.value = false
-    editingContact.value = null
-    loadContacts()
+    tableRef.value?.loadData()
   } catch (error) {
     console.error('Error deleting contact:', error)
     toast.add({
@@ -806,19 +580,27 @@ const deleteContact = async () => {
     deleting.value = false
   }
 }
+
+// Contact Person Management
+const addContactPerson = () => {
+  editingContact.value.contactPersons.push(emptyContactPerson())
+}
+
+const removeContactPerson = (index) => {
+  editingContact.value.contactPersons.splice(index, 1)
+}
+
+const setPrimaryContact = (index) => {
+  if (editingContact.value.contactPersons[index].isPrimary) {
+    editingContact.value.contactPersons.forEach((person, i) => {
+      if (i !== index) {
+        person.isPrimary = false
+      }
+    })
+  }
+}
+
+const onDataLoaded = (data) => {
+  // Optional: Do something when data is loaded
+}
 </script>
-
-<style scoped>
-.contact-management {
-  padding: 1rem;
-}
-
-.p-invalid {
-  border-color: var(--red-500);
-}
-
-.p-error {
-  color: var(--red-500);
-  font-size: 0.875rem;
-}
-</style>
diff --git a/assets/js/views/ContactManagement_old.vue.backup b/assets/js/views/ContactManagement_old.vue.backup
new file mode 100644
index 0000000..8595ac8
--- /dev/null
+++ b/assets/js/views/ContactManagement_old.vue.backup
@@ -0,0 +1,1065 @@
+<template>
+  <div class="contact-management">
+    <div class="card">
+      <div class="flex justify-between items-center mb-4">
+        <div class="font-semibold text-xl">Kontakte</div>
+        <div class="flex gap-2">
+          <Button 
+            label="Spalten anpassen" 
+            icon="pi pi-cog" 
+            outlined
+            @click="columnConfigDialog = true" 
+          />
+          <Button label="Neuer Kontakt" icon="pi pi-plus" @click="openNewContactDialog" />
+        </div>
+      </div>
+
+      <DataTable
+        v-model:filters="filters"
+        :value="contacts"
+        :loading="loading"
+        :paginator="true"
+        :rows="10"
+        :rowsPerPageOptions="[10, 25, 50, 100]"
+        :rowHover="true"
+        :globalFilterFields="['companyName', 'city', 'email', 'phone']"
+        sortField="companyName"
+        :sortOrder="1"
+        dataKey="id"
+        filterDisplay="menu"
+        showGridlines
+        scrollable
+        scrollHeight="flex"
+        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+        currentPageReportTemplate="Zeige {first} bis {last} von {totalRecords} Einträgen"
+      >
+        <template #header>
+          <div class="flex justify-between flex-wrap gap-2">
+            <div class="flex gap-2">
+              <Button
+                label="Alle"
+                :outlined="typeFilter !== 'all'"
+                @click="filterByType('all')"
+                size="small"
+              />
+              <Button
+                label="Debitoren"
+                :outlined="typeFilter !== 'debtor'"
+                @click="filterByType('debtor')"
+                size="small"
+              />
+              <Button
+                label="Kreditoren"
+                :outlined="typeFilter !== 'creditor'"
+                @click="filterByType('creditor')"
+                size="small"
+              />
+            </div>
+            <IconField>
+              <InputIcon>
+                <i class="pi pi-search" />
+              </InputIcon>
+              <InputText
+                v-model="filters['global'].value"
+                placeholder="Suchen..."
+              />
+            </IconField>
+          </div>
+        </template>
+        <template #empty>Keine Kontakte gefunden.</template>
+        <template #loading>Lade Kontakte. Bitte warten...</template>
+
+          <template v-for="column in availableColumns" :key="column.key">
+            <!-- Firma -->
+            <Column v-if="column.key === 'companyName' && visibleColumns.companyName" field="companyName" header="Firma" sortable style="min-width: 200px">
+              <template #body="{ data }">
+                <div class="font-semibold">{{ data.companyName }}</div>
+              </template>
+              <template #filter="{ filterModel }">
+                <InputText v-model="filterModel.value" type="text" placeholder="Suche nach Firma" />
+              </template>
+            </Column>
+
+            <!-- Kundennummer -->
+            <Column v-if="column.key === 'companyNumber' && visibleColumns.companyNumber" field="companyNumber" header="Kundennummer" sortable style="min-width: 130px">
+              <template #body="{ data }">
+                <div class="text-500">{{ data.companyNumber }}</div>
+              </template>
+            </Column>
+
+            <!-- Straße -->
+            <Column v-if="column.key === 'street' && visibleColumns.street" field="street" header="Straße" style="min-width: 200px">
+              <template #body="{ data }">
+                {{ data.street }}
+              </template>
+            </Column>
+
+            <!-- PLZ -->
+            <Column v-if="column.key === 'zipCode' && visibleColumns.zipCode" field="zipCode" header="PLZ" sortable style="min-width: 100px">
+              <template #body="{ data }">
+                {{ data.zipCode }}
+              </template>
+            </Column>
+
+            <!-- Ort -->
+            <Column v-if="column.key === 'city' && visibleColumns.city" field="city" header="Ort" sortable style="min-width: 150px">
+              <template #body="{ data }">
+                {{ data.city }}
+              </template>
+              <template #filter="{ filterModel }">
+                <InputText v-model="filterModel.value" type="text" placeholder="Suche nach Ort" />
+              </template>
+            </Column>
+
+            <!-- Land -->
+            <Column v-if="column.key === 'country' && visibleColumns.country" field="country" header="Land" sortable style="min-width: 120px">
+              <template #body="{ data }">
+                {{ data.country }}
+              </template>
+            </Column>
+
+            <!-- Ansprechpartner -->
+            <Column v-if="column.key === 'contactPersons' && visibleColumns.contactPersons" header="Ansprechpartner" style="min-width: 200px">
+              <template #body="{ data }">
+                <div v-if="data.contactPersons && data.contactPersons.length > 0">
+                  <div
+                    v-for="person in data.contactPersons.slice(0, 2)"
+                    :key="person.id"
+                    class="mb-1"
+                  >
+                    <div class="font-medium">
+                      {{ person.firstName }} {{ person.lastName }}
+                      <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-1" />
+                    </div>
+                    <div class="text-sm text-500" v-if="person.email">
+                      {{ person.email }}
+                    </div>
+                  </div>
+                </div>
+                <span v-else class="text-500">Keine Ansprechpartner</span>
+              </template>
+            </Column>
+
+            <!-- Telefon -->
+            <Column v-if="column.key === 'phone' && visibleColumns.phone" header="Telefon" style="min-width: 150px">
+              <template #body="{ data }">
+                <div v-if="data.phone">
+                  <i class="pi pi-phone mr-1"></i>
+                  {{ data.phone }}
+                </div>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- Fax -->
+            <Column v-if="column.key === 'fax' && visibleColumns.fax" header="Fax" style="min-width: 150px">
+              <template #body="{ data }">
+                <div v-if="data.fax">
+                  <i class="pi pi-print mr-1"></i>
+                  {{ data.fax }}
+                </div>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- E-Mail -->
+            <Column v-if="column.key === 'email' && visibleColumns.email" header="E-Mail" style="min-width: 200px">
+              <template #body="{ data }">
+                <div v-if="data.email">
+                  <a :href="'mailto:' + data.email" class="text-primary">
+                    <i class="pi pi-envelope mr-1"></i>
+                    {{ data.email }}
+                  </a>
+                </div>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- Website -->
+            <Column v-if="column.key === 'website' && visibleColumns.website" header="Website" style="min-width: 200px">
+              <template #body="{ data }">
+                <div v-if="data.website">
+                  <a :href="data.website" target="_blank" class="text-primary">
+                    <i class="pi pi-globe mr-1"></i>
+                    {{ data.website }}
+                  </a>
+                </div>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- Steuernummer -->
+            <Column v-if="column.key === 'taxNumber' && visibleColumns.taxNumber" header="Steuernummer" style="min-width: 150px">
+              <template #body="{ data }">
+                <span v-if="data.taxNumber">{{ data.taxNumber }}</span>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- USt-IdNr. -->
+            <Column v-if="column.key === 'vatNumber' && visibleColumns.vatNumber" header="USt-IdNr." style="min-width: 150px">
+              <template #body="{ data }">
+                <span v-if="data.vatNumber">{{ data.vatNumber }}</span>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- Typ -->
+            <Column v-if="column.key === 'type' && visibleColumns.type" header="Typ" style="min-width: 130px">
+              <template #body="{ data }">
+                <div class="flex gap-1">
+                  <Tag v-if="data.isDebtor" value="Debitor" severity="success" />
+                  <Tag v-if="data.isCreditor" value="Kreditor" severity="warning" />
+                </div>
+              </template>
+            </Column>
+
+            <!-- Notizen -->
+            <Column v-if="column.key === 'notes' && visibleColumns.notes" header="Notizen" style="min-width: 200px">
+              <template #body="{ data }">
+                <span v-if="data.notes" class="text-500">{{ data.notes.substring(0, 50) }}{{ data.notes.length > 50 ? '...' : '' }}</span>
+                <span v-else class="text-500">---</span>
+              </template>
+            </Column>
+
+            <!-- Erstellt am -->
+            <Column v-if="column.key === 'createdAt' && visibleColumns.createdAt" header="Erstellt am" sortable style="min-width: 150px">
+              <template #body="{ data }">
+                <span v-if="data.createdAt">{{ new Date(data.createdAt).toLocaleDateString('de-DE') }}</span>
+              </template>
+            </Column>
+
+            <!-- Zuletzt geändert -->
+            <Column v-if="column.key === 'updatedAt' && visibleColumns.updatedAt" header="Zuletzt geändert" sortable style="min-width: 150px">
+              <template #body="{ data }">
+                <span v-if="data.updatedAt">{{ new Date(data.updatedAt).toLocaleDateString('de-DE') }}</span>
+              </template>
+            </Column>
+
+            <!-- Status -->
+            <Column v-if="column.key === 'status' && visibleColumns.status" field="isActive" header="Status" dataType="boolean" style="min-width: 100px">
+              <template #body="{ data }">
+                <Tag
+                  :value="data.isActive ? 'Aktiv' : 'Inaktiv'"
+                  :severity="data.isActive ? 'success' : 'danger'"
+                />
+              </template>
+              <template #filter="{ filterModel }">
+                <Select 
+                  v-model="filterModel.value" 
+                  :options="statusOptions" 
+                  optionLabel="label"
+                  optionValue="value"
+                  placeholder="Status wählen" 
+                  showClear
+                >
+                  <template #option="slotProps">
+                    <Tag :value="slotProps.option.label" :severity="slotProps.option.value ? 'success' : 'danger'" />
+                  </template>
+                </Select>
+              </template>
+            </Column>
+          </template>
+
+          <Column :exportable="false" style="min-width: 120px">
+            <template #body="{ data }">
+              <div class="flex gap-2">
+                <Button
+                  icon="pi pi-pencil"
+                  outlined
+                  rounded
+                  @click="editContact(data)"
+                  size="small"
+                />
+                <Button
+                  icon="pi pi-trash"
+                  outlined
+                  rounded
+                  severity="danger"
+                  @click="confirmDelete(data)"
+                  size="small"
+                />
+              </div>
+            </template>
+          </Column>
+
+        </DataTable>
+      </div>
+
+    <!-- Contact Dialog -->
+    <Dialog
+      v-model:visible="contactDialog"
+      :header="editingContact?.id ? 'Kontakt bearbeiten' : 'Neuer Kontakt'"
+      :modal="true"
+      :style="{ width: '1200px', maxHeight: '90vh' }"
+      :closable="true"
+    >
+      <div v-if="editingContact">
+        <!-- Basisdaten -->
+        <Card class="mb-3">
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-building text-primary"></i>
+              <span>Basisdaten</span>
+            </div>
+          </template>
+          <template #content>
+            <div class="flex flex-col gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
+                <div class="flex flex-col gap-2 w-full md:w-2/3">
+                  <label for="companyName">Firmenname <span class="text-red-500">*</span></label>
+                  <InputText
+                    id="companyName"
+                    v-model="editingContact.companyName"
+                    :invalid="submitted && !editingContact.companyName"
+                  />
+                  <small v-if="submitted && !editingContact.companyName" class="text-red-500">
+                    Firmenname ist erforderlich
+                  </small>
+                </div>
+
+                <div class="flex flex-col gap-2 w-full md:w-1/3">
+                  <label for="companyNumber">Kundennummer</label>
+                  <InputText id="companyNumber" v-model="editingContact.companyNumber" />
+                </div>
+              </div>
+
+              <div class="flex gap-4">
+                <div class="flex items-center gap-2">
+                  <Checkbox inputId="isDebtor" v-model="editingContact.isDebtor" :binary="true" />
+                  <label for="isDebtor">Debitor</label>
+                </div>
+                <div class="flex items-center gap-2">
+                  <Checkbox inputId="isCreditor" v-model="editingContact.isCreditor" :binary="true" />
+                  <label for="isCreditor">Kreditor</label>
+                </div>
+                <div class="flex items-center gap-2">
+                  <Checkbox inputId="isActive" v-model="editingContact.isActive" :binary="true" />
+                  <label for="isActive">Aktiv</label>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Adresse -->
+        <Card class="mb-3">
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-map-marker text-primary"></i>
+              <span>Adresse</span>
+            </div>
+          </template>
+          <template #content>
+            <div class="flex flex-col gap-4">
+              <div class="flex flex-col gap-2">
+                <label for="street">Straße</label>
+                <InputText id="street" v-model="editingContact.street" />
+              </div>
+
+              <div class="flex flex-col md:flex-row gap-4">
+                <div class="flex flex-col gap-2 w-full md:w-1/4">
+                  <label for="zipCode">PLZ</label>
+                  <InputText id="zipCode" v-model="editingContact.zipCode" />
+                </div>
+
+                <div class="flex flex-col gap-2 w-full md:w-1/2">
+                  <label for="city">Ort</label>
+                  <InputText id="city" v-model="editingContact.city" />
+                </div>
+
+                <div class="flex flex-col gap-2 w-full md:w-1/4">
+                  <label for="country">Land</label>
+                  <InputText id="country" v-model="editingContact.country" />
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Kontaktdaten -->
+        <Card class="mb-3">
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-phone text-primary"></i>
+              <span>Kontaktdaten</span>
+            </div>
+          </template>
+          <template #content>
+            <div class="flex flex-col gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
+                <div class="flex flex-col gap-2 w-full">
+                  <label for="phone">Telefon</label>
+                  <InputText id="phone" v-model="editingContact.phone" />
+                </div>
+
+                <div class="flex flex-col gap-2 w-full">
+                  <label for="fax">Fax</label>
+                  <InputText id="fax" v-model="editingContact.fax" />
+                </div>
+              </div>
+
+              <div class="flex flex-col md:flex-row gap-4">
+                <div class="flex flex-col gap-2 w-full">
+                  <label for="email">E-Mail</label>
+                  <InputText id="email" v-model="editingContact.email" type="email" />
+                </div>
+
+                <div class="flex flex-col gap-2 w-full">
+                  <label for="website">Website</label>
+                  <InputText id="website" v-model="editingContact.website" />
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Steuerdaten -->
+        <Card class="mb-3">
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-calculator text-primary"></i>
+              <span>Steuerdaten</span>
+            </div>
+          </template>
+          <template #content>
+            <div class="flex flex-col md:flex-row gap-4">
+              <div class="flex flex-col gap-2 w-full">
+                <label for="taxNumber">Steuernummer</label>
+                <InputText id="taxNumber" v-model="editingContact.taxNumber" />
+              </div>
+
+              <div class="flex flex-col gap-2 w-full">
+                <label for="vatNumber">USt-IdNr.</label>
+                <InputText id="vatNumber" v-model="editingContact.vatNumber" />
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Ansprechpartner -->
+        <Card class="mb-3">
+          <template #title>
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <i class="pi pi-users text-primary"></i>
+                <span>Ansprechpartner</span>
+              </div>
+              <Button
+                label="Hinzufügen"
+                icon="pi pi-plus"
+                size="small"
+                outlined
+                @click="addContactPerson"
+                :disabled="editingContact.contactPersons.length >= 2"
+              />
+            </div>
+          </template>
+          <template #content>
+            <div v-if="editingContact.contactPersons.length === 0" class="text-center py-4 text-500">
+              <i class="pi pi-user-plus text-4xl mb-3"></i>
+              <p>Noch keine Ansprechpartner hinzugefügt</p>
+            </div>
+
+            <div
+              v-for="(person, index) in editingContact.contactPersons"
+              :key="index"
+              class="mb-4"
+            >
+              <Divider v-if="index > 0" />
+              <div class="flex flex-col gap-4">
+                <div class="flex justify-between items-center mb-3">
+                  <h4 class="m-0 font-semibold">
+                    <i class="pi pi-user mr-2"></i>
+                    Ansprechpartner {{ index + 1 }}
+                    <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-2" />
+                  </h4>
+                  <Button
+                    icon="pi pi-trash"
+                    text
+                    rounded
+                    severity="danger"
+                    @click="removeContactPerson(index)"
+                    size="small"
+                  />
+                </div>
+
+                <div class="flex flex-col md:flex-row gap-4">
+                  <div class="flex flex-col gap-2 w-full md:w-1/4">
+                    <label :for="'salutation-' + index">Anrede</label>
+                    <Dropdown
+                      :id="'salutation-' + index"
+                      v-model="person.salutation"
+                      :options="salutations"
+                      placeholder="Wählen..."
+                    />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full md:w-1/4">
+                    <label :for="'title-' + index">Titel</label>
+                    <InputText :id="'title-' + index" v-model="person.title" />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full md:w-1/4">
+                    <label :for="'firstName-' + index">
+                      Vorname <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                      :id="'firstName-' + index"
+                      v-model="person.firstName"
+                      :invalid="submitted && !person.firstName"
+                    />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full md:w-1/4">
+                    <label :for="'lastName-' + index">
+                      Nachname <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                      :id="'lastName-' + index"
+                      v-model="person.lastName"
+                      :invalid="submitted && !person.lastName"
+                    />
+                  </div>
+                </div>
+
+                <div class="flex flex-col md:flex-row gap-4">
+                  <div class="flex flex-col gap-2 w-full">
+                    <label :for="'position-' + index">Position</label>
+                    <InputText :id="'position-' + index" v-model="person.position" />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full">
+                    <label :for="'department-' + index">Abteilung</label>
+                    <InputText :id="'department-' + index" v-model="person.department" />
+                  </div>
+                </div>
+
+                <div class="flex flex-col md:flex-row gap-4">
+                  <div class="flex flex-col gap-2 w-full">
+                    <label :for="'personPhone-' + index">Telefon</label>
+                    <InputText :id="'personPhone-' + index" v-model="person.phone" />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full">
+                    <label :for="'mobile-' + index">Mobil</label>
+                    <InputText :id="'mobile-' + index" v-model="person.mobile" />
+                  </div>
+
+                  <div class="flex flex-col gap-2 w-full">
+                    <label :for="'personEmail-' + index">E-Mail</label>
+                    <InputText
+                      :id="'personEmail-' + index"
+                      v-model="person.email"
+                      type="email"
+                    />
+                  </div>
+                </div>
+
+                <div class="flex items-center gap-2">
+                  <Checkbox
+                    :inputId="'isPrimary-' + index"
+                    v-model="person.isPrimary"
+                    :binary="true"
+                  />
+                  <label :for="'isPrimary-' + index">Hauptansprechpartner</label>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Notizen -->
+        <Card>
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-comment text-primary"></i>
+              <span>Notizen</span>
+            </div>
+          </template>
+          <template #content>
+            <div class="flex flex-col gap-2">
+              <label for="notes">Interne Notizen zu diesem Kontakt</label>
+              <Textarea 
+                id="notes" 
+                v-model="editingContact.notes" 
+                :rows="4"
+                placeholder="Interne Notizen..."
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <template #footer>
+        <Button label="Abbrechen" outlined @click="hideDialog" />
+        <Button label="Speichern" @click="saveContact" :loading="saving" />
+      </template>
+    </Dialog>
+
+    <!-- Delete Confirmation -->
+    <Dialog
+      v-model:visible="deleteDialog"
+      header="Bestätigung"
+      :modal="true"
+      :style="{ width: '450px' }"
+    >
+      <div class="flex align-items-center">
+        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem; color: var(--red-500)"></i>
+        <span v-if="editingContact">
+          Möchten Sie den Kontakt <b>{{ editingContact.companyName }}</b> wirklich löschen?
+        </span>
+      </div>
+      <template #footer>
+        <Button label="Nein" outlined @click="deleteDialog = false" />
+        <Button label="Ja" severity="danger" @click="deleteContact" :loading="deleting" />
+      </template>
+    </Dialog>
+
+    <!-- Column Configuration Dialog -->
+    <Dialog
+      v-model:visible="columnConfigDialog"
+      header="Spalten anpassen"
+      :modal="true"
+      :style="{ width: '600px' }"
+    >
+      <div class="flex flex-col gap-3">
+        <p class="text-500 mb-2">Wählen Sie die anzuzeigenden Spalten aus und ziehen Sie sie, um die Reihenfolge zu ändern:</p>
+        
+        <div class="flex flex-col gap-2">
+          <div 
+            v-for="(column, index) in availableColumns" 
+            :key="column.key" 
+            class="flex items-center gap-2 p-3 border rounded-md hover-row cursor-move"
+            draggable="true"
+            @dragstart="onDragStart(index)"
+            @dragover.prevent
+            @drop="onDrop(index)"
+          >
+            <i class="pi pi-bars text-500"></i>
+            <Checkbox 
+              :inputId="'col-' + column.key" 
+              v-model="visibleColumns[column.key]" 
+              :binary="true"
+            />
+            <label :for="'col-' + column.key" class="cursor-pointer flex-1">{{ column.label }}</label>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <Button label="Abbrechen" outlined @click="columnConfigDialog = false" />
+        <Button label="Speichern" @click="saveColumnConfig" />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Dialog from 'primevue/dialog'
+import Card from 'primevue/card'
+import Tag from 'primevue/tag'
+import Checkbox from 'primevue/checkbox'
+import Dropdown from 'primevue/dropdown'
+import Divider from 'primevue/divider'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import Select from 'primevue/select'
+
+const toast = useToast()
+
+const contacts = ref([])
+const loading = ref(false)
+const contactDialog = ref(false)
+const deleteDialog = ref(false)
+const columnConfigDialog = ref(false)
+const editingContact = ref(null)
+const submitted = ref(false)
+const saving = ref(false)
+const deleting = ref(false)
+const typeFilter = ref('all')
+
+// Available columns configuration - default order
+const defaultColumns = [
+  { key: 'companyName', label: 'Firma' },
+  { key: 'companyNumber', label: 'Kundennummer' },
+  { key: 'city', label: 'Ort' },
+  { key: 'street', label: 'Straße' },
+  { key: 'zipCode', label: 'PLZ' },
+  { key: 'country', label: 'Land' },
+  { key: 'contactPersons', label: 'Ansprechpartner' },
+  { key: 'phone', label: 'Telefon' },
+  { key: 'fax', label: 'Fax' },
+  { key: 'email', label: 'E-Mail' },
+  { key: 'website', label: 'Website' },
+  { key: 'taxNumber', label: 'Steuernummer' },
+  { key: 'vatNumber', label: 'USt-IdNr.' },
+  { key: 'type', label: 'Typ (Debitor/Kreditor)' },
+  { key: 'status', label: 'Status' },
+  { key: 'notes', label: 'Notizen' },
+  { key: 'createdAt', label: 'Erstellt am' },
+  { key: 'updatedAt', label: 'Zuletzt geändert' }
+]
+
+// Load visible columns from localStorage or use defaults
+const loadColumnConfig = () => {
+  const saved = localStorage.getItem('contactTableColumns')
+  if (saved) {
+    const config = JSON.parse(saved)
+    
+    // Handle old format (just visibility object)
+    if (!config.visibility) {
+      return config
+    }
+    
+    // Apply saved order
+    if (config.order) {
+      const orderedColumns = []
+      config.order.forEach(key => {
+        const column = defaultColumns.find(col => col.key === key)
+        if (column) orderedColumns.push(column)
+      })
+      // Add any new columns that weren't in saved order
+      defaultColumns.forEach(col => {
+        if (!orderedColumns.find(c => c.key === col.key)) {
+          orderedColumns.push(col)
+        }
+      })
+      availableColumns.value = orderedColumns
+    }
+    
+    return config.visibility
+  }
+  
+  // Default: all columns visible
+  return {
+    companyName: true,
+    companyNumber: false,
+    city: true,
+    street: false,
+    zipCode: false,
+    country: false,
+    contactPersons: true,
+    phone: true,
+    fax: false,
+    email: true,
+    website: true,
+    taxNumber: false,
+    vatNumber: false,
+    type: true,
+    status: true,
+    notes: false,
+    createdAt: false,
+    updatedAt: false
+  }
+}
+
+const availableColumns = ref([...defaultColumns])
+
+const visibleColumns = ref(loadColumnConfig())
+
+// Drag and drop for column reordering
+let draggedIndex = null
+
+const onDragStart = (index) => {
+  draggedIndex = index
+}
+
+const onDrop = (dropIndex) => {
+  if (draggedIndex === null || draggedIndex === dropIndex) return
+  
+  const columns = [...availableColumns.value]
+  const draggedItem = columns[draggedIndex]
+  
+  columns.splice(draggedIndex, 1)
+  columns.splice(dropIndex, 0, draggedItem)
+  
+  availableColumns.value = columns
+  draggedIndex = null
+}
+
+const saveColumnConfig = () => {
+  // Save both visibility and order
+  const config = {
+    visibility: visibleColumns.value,
+    order: availableColumns.value.map(col => col.key)
+  }
+  localStorage.setItem('contactTableColumns', JSON.stringify(config))
+  columnConfigDialog.value = false
+  toast.add({
+    severity: 'success',
+    summary: 'Gespeichert',
+    detail: 'Spaltenkonfiguration wurde gespeichert',
+    life: 3000
+  })
+}
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  companyName: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+  city: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+  isActive: { value: null, matchMode: FilterMatchMode.EQUALS }
+})
+
+const salutations = ref(['Herr', 'Frau', 'Divers'])
+const statusOptions = ref([
+  { label: 'Aktiv', value: true },
+  { label: 'Inaktiv', value: false }
+])
+const typeOptions = ref(['Debitor', 'Kreditor'])
+
+const emptyContact = () => ({
+  companyName: '',
+  companyNumber: '',
+  street: '',
+  zipCode: '',
+  city: '',
+  country: 'Deutschland',
+  phone: '',
+  fax: '',
+  email: '',
+  website: '',
+  taxNumber: '',
+  vatNumber: '',
+  isDebtor: false,
+  isCreditor: false,
+  isActive: true,
+  notes: '',
+  contactPersons: []
+})
+
+const emptyContactPerson = () => ({
+  salutation: null,
+  title: '',
+  firstName: '',
+  lastName: '',
+  position: '',
+  department: '',
+  phone: '',
+  mobile: '',
+  email: '',
+  isPrimary: false
+})
+
+onMounted(() => {
+  loadContacts()
+})
+
+const loadContacts = async () => {
+  loading.value = true
+  try {
+    // Alle Kontakte laden - API Platform unterstützt itemsPerPage Parameter
+    let url = '/api/contacts'
+    const params = new URLSearchParams()
+    
+    // Große Anzahl setzen, um alle Kontakte zu erhalten
+    params.append('itemsPerPage', '5000')
+    
+    if (typeFilter.value === 'debtor') {
+      params.append('isDebtor', 'true')
+    } else if (typeFilter.value === 'creditor') {
+      params.append('isCreditor', 'true')
+    }
+    
+    url += '?' + params.toString()
+    
+    const response = await fetch(url, {
+      credentials: 'include'
+    })
+    if (!response.ok) throw new Error('Fehler beim Laden der Kontakte')
+    const data = await response.json()
+    
+    // API Platform gibt hydra:member zurück
+    contacts.value = data['hydra:member'] || data.member || []
+  } catch (error) {
+    console.error('Error loading contacts:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: 'Kontakte konnten nicht geladen werden',
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const filterByType = (type) => {
+  typeFilter.value = type
+  loadContacts()
+}
+
+const openNewContactDialog = () => {
+  editingContact.value = emptyContact()
+  submitted.value = false
+  contactDialog.value = true
+}
+
+const editContact = (contact) => {
+  editingContact.value = { ...contact }
+  // Ensure contactPersons is initialized
+  if (!editingContact.value.contactPersons) {
+    editingContact.value.contactPersons = []
+  }
+  submitted.value = false
+  contactDialog.value = true
+}
+
+const hideDialog = () => {
+  contactDialog.value = false
+  submitted.value = false
+  editingContact.value = null
+}
+
+const addContactPerson = () => {
+  if (editingContact.value.contactPersons.length < 2) {
+    editingContact.value.contactPersons.push(emptyContactPerson())
+  }
+}
+
+const removeContactPerson = (index) => {
+  editingContact.value.contactPersons.splice(index, 1)
+}
+
+const validateContact = () => {
+  if (!editingContact.value.companyName) {
+    return false
+  }
+  
+  // Validate contact persons
+  for (const person of editingContact.value.contactPersons) {
+    if (!person.firstName || !person.lastName) {
+      return false
+    }
+  }
+  
+  return true
+}
+
+const saveContact = async () => {
+  submitted.value = true
+  
+  if (!validateContact()) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validierung fehlgeschlagen',
+      detail: 'Bitte füllen Sie alle Pflichtfelder aus',
+      life: 3000
+    })
+    return
+  }
+
+  saving.value = true
+  try {
+    const url = editingContact.value.id
+      ? `/api/contacts/${editingContact.value.id}`
+      : '/api/contacts'
+    
+    const method = editingContact.value.id ? 'PUT' : 'POST'
+    
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(editingContact.value)
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      
+      // API Platform liefert Validierungsfehler in 'violations' Array
+      if (error.violations && error.violations.length > 0) {
+        const errorMessages = error.violations
+          .map(v => `${v.propertyPath}: ${v.message}`)
+          .join('\n')
+        throw new Error(errorMessages)
+      }
+      
+      // Fallback für andere Fehlerformate
+      throw new Error(error['hydra:description'] || error.message || error.detail || 'Fehler beim Speichern')
+    }
+
+    toast.add({
+      severity: 'success',
+      summary: 'Erfolg',
+      detail: 'Kontakt wurde gespeichert',
+      life: 3000
+    })
+
+    hideDialog()
+    loadContacts()
+  } catch (error) {
+    console.error('Error saving contact:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: error.message || 'Kontakt konnte nicht gespeichert werden',
+      life: 5000
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const confirmDelete = (contact) => {
+  editingContact.value = contact
+  deleteDialog.value = true
+}
+
+const deleteContact = async () => {
+  deleting.value = true
+  try {
+    const response = await fetch(`/api/contacts/${editingContact.value.id}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+
+    if (!response.ok) throw new Error('Fehler beim Löschen')
+
+    toast.add({
+      severity: 'success',
+      summary: 'Erfolg',
+      detail: 'Kontakt wurde gelöscht',
+      life: 3000
+    })
+
+    deleteDialog.value = false
+    editingContact.value = null
+    loadContacts()
+  } catch (error) {
+    console.error('Error deleting contact:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: 'Kontakt konnte nicht gelöscht werden',
+      life: 3000
+    })
+  } finally {
+    deleting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.contact-management {
+  padding: 1rem;
+}
+
+.p-invalid {
+  border-color: var(--red-500);
+}
+
+.p-error {
+  color: var(--red-500);
+  font-size: 0.875rem;
+}
+</style>