From ffae41237e55d24e649ded870ef9abdac47514e6 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Wed, 15 Apr 2026 08:24:48 +0200
Subject: [PATCH] refactor(admin): split email-templates page.tsx into
 colocated components

Extract tabs nav, templates grid, editor split view, settings form,
logs table, and data-loading/actions hook into _components/ and
_hooks/. page.tsx reduced from 816 to 88 LOC.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../email-templates/_components/EditorTab.tsx | 131 +++
 .../email-templates/_components/LogsTab.tsx   |  55 ++
 .../_components/SettingsTab.tsx               | 143 ++++
 .../email-templates/_components/TabNav.tsx    |  43 +
 .../_components/TemplateCard.tsx              |  49 ++
 .../_components/TemplatesTab.tsx              |  64 ++
 .../_hooks/useEmailTemplates.ts               | 227 +++++
 .../app/sdk/email-templates/_types.ts         |  84 ++
 .../app/sdk/email-templates/page.tsx          | 776 +-----------------
 9 files changed, 820 insertions(+), 752 deletions(-)
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/EditorTab.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/LogsTab.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/SettingsTab.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/TabNav.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/TemplateCard.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_components/TemplatesTab.tsx
 create mode 100644 admin-compliance/app/sdk/email-templates/_hooks/useEmailTemplates.ts
 create mode 100644 admin-compliance/app/sdk/email-templates/_types.ts

diff --git a/admin-compliance/app/sdk/email-templates/_components/EditorTab.tsx b/admin-compliance/app/sdk/email-templates/_components/EditorTab.tsx
new file mode 100644
index 0000000..441d0cc
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/EditorTab.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import { CATEGORIES, EmailTemplate, STATUS_BADGE, TemplateVersion } from '../_types'
+
+interface EditorTabProps {
+  template: EmailTemplate | null
+  version: TemplateVersion | null
+  subject: string
+  html: string
+  previewHtml: string | null
+  saving: boolean
+  onSubjectChange: (v: string) => void
+  onHtmlChange: (v: string) => void
+  onSave: () => void
+  onPublish: () => void
+  onPreview: () => void
+  onBack: () => void
+}
+
+export function EditorTab({
+  template, version, subject, html, previewHtml, saving,
+  onSubjectChange, onHtmlChange, onSave, onPublish, onPreview, onBack,
+}: EditorTabProps) {
+  if (!template) {
+    return (
+      <div className="text-center py-12 text-gray-500">
+        Waehlen Sie ein Template aus der Liste.
+        <br />
+        <button onClick={onBack} className="mt-2 text-purple-600 underline">Zurueck zur Liste</button>
+      </div>
+    )
+  }
+
+  const cat = CATEGORIES[template.category] || CATEGORIES.general
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button onClick={onBack} className="text-gray-500 hover:text-gray-700">&larr; Zurueck</button>
+          <h2 className="text-lg font-semibold">{template.name}</h2>
+          <span className={`px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>{cat.label}</span>
+          {version && (
+            <span className={`px-2 py-0.5 rounded text-xs ${(STATUS_BADGE[version.status] || STATUS_BADGE.draft).color}`}>
+              {(STATUS_BADGE[version.status] || STATUS_BADGE.draft).label}
+            </span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={onSave}
+            disabled={saving}
+            className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Version speichern'}
+          </button>
+          {version && version.status !== 'published' && (
+            <button
+              onClick={onPublish}
+              disabled={saving}
+              className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 disabled:opacity-50"
+            >
+              Publizieren
+            </button>
+          )}
+          {version && (
+            <button
+              onClick={onPreview}
+              className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50"
+            >
+              Vorschau
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Variables */}
+      <div className="flex flex-wrap gap-1.5">
+        <span className="text-xs text-gray-500 mr-1">Variablen:</span>
+        {(template.variables || []).map(v => (
+          <button
+            key={v}
+            onClick={() => onHtmlChange(html + `{{${v}}}`)}
+            className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-mono hover:bg-purple-100 transition-colors"
+          >
+            {`{{${v}}}`}
+          </button>
+        ))}
+      </div>
+
+      {/* Split View */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Editor */}
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
+            <input
+              type="text"
+              value={subject}
+              onChange={e => onSubjectChange(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              placeholder="E-Mail Betreff..."
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">HTML-Inhalt</label>
+            <textarea
+              value={html}
+              onChange={e => onHtmlChange(e.target.value)}
+              rows={20}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-y"
+              placeholder="<p>Sehr geehrte(r) {{user_name}},</p>"
+            />
+          </div>
+        </div>
+
+        {/* Preview */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Vorschau</label>
+          <div className="border border-gray-200 rounded-lg bg-white p-4 min-h-[400px]">
+            {previewHtml ? (
+              <div dangerouslySetInnerHTML={{ __html: previewHtml }} />
+            ) : (
+              <div dangerouslySetInnerHTML={{ __html: html }} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_components/LogsTab.tsx b/admin-compliance/app/sdk/email-templates/_components/LogsTab.tsx
new file mode 100644
index 0000000..5a6a897
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/LogsTab.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { SendLog } from '../_types'
+
+interface LogsTabProps {
+  logs: SendLog[]
+  total: number
+}
+
+export function LogsTab({ logs, total }: LogsTabProps) {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold">E-Mail-Verlauf ({total})</h2>
+
+      {logs.length === 0 ? (
+        <p className="text-gray-500 text-sm">Noch keine E-Mails gesendet.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200">
+                <th className="text-left py-2 px-3 text-gray-500 font-medium">Typ</th>
+                <th className="text-left py-2 px-3 text-gray-500 font-medium">Empfaenger</th>
+                <th className="text-left py-2 px-3 text-gray-500 font-medium">Betreff</th>
+                <th className="text-left py-2 px-3 text-gray-500 font-medium">Status</th>
+                <th className="text-left py-2 px-3 text-gray-500 font-medium">Datum</th>
+              </tr>
+            </thead>
+            <tbody>
+              {logs.map(log => (
+                <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
+                  <td className="py-2 px-3 font-mono text-xs">{log.template_type}</td>
+                  <td className="py-2 px-3">{log.recipient}</td>
+                  <td className="py-2 px-3">{log.subject}</td>
+                  <td className="py-2 px-3">
+                    <span className={`px-2 py-0.5 rounded text-xs ${
+                      log.status === 'sent' || log.status === 'test_sent'
+                        ? 'bg-green-100 text-green-700'
+                        : 'bg-red-100 text-red-700'
+                    }`}>
+                      {log.status}
+                    </span>
+                  </td>
+                  <td className="py-2 px-3 text-gray-500">
+                    {log.sent_at ? new Date(log.sent_at).toLocaleString('de-DE') : '-'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_components/SettingsTab.tsx b/admin-compliance/app/sdk/email-templates/_components/SettingsTab.tsx
new file mode 100644
index 0000000..4b37a5f
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/SettingsTab.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import { Settings } from '../_types'
+
+interface SettingsTabProps {
+  settings: Settings
+  saving: boolean
+  onChange: (s: Settings) => void
+  onSave: () => void
+}
+
+export function SettingsTab({ settings, saving, onChange, onSave }: SettingsTabProps) {
+  const update = (field: keyof Settings, value: string) => {
+    onChange({ ...settings, [field]: value })
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <h2 className="text-lg font-semibold">E-Mail-Einstellungen</h2>
+
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-Name</label>
+            <input
+              type="text"
+              value={settings.sender_name || ''}
+              onChange={e => update('sender_name', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-E-Mail</label>
+            <input
+              type="email"
+              value={settings.sender_email || ''}
+              onChange={e => update('sender_email', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Antwort-Adresse</label>
+          <input
+            type="email"
+            value={settings.reply_to || ''}
+            onChange={e => update('reply_to', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            placeholder="optional"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Firmenname</label>
+            <input
+              type="text"
+              value={settings.company_name || ''}
+              onChange={e => update('company_name', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Logo URL</label>
+            <input
+              type="url"
+              value={settings.logo_url || ''}
+              onChange={e => update('logo_url', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+              placeholder="https://..."
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Primaerfarbe</label>
+            <div className="flex gap-2">
+              <input
+                type="color"
+                value={settings.primary_color || '#4F46E5'}
+                onChange={e => update('primary_color', e.target.value)}
+                className="h-10 w-10 rounded cursor-pointer"
+              />
+              <input
+                type="text"
+                value={settings.primary_color || ''}
+                onChange={e => update('primary_color', e.target.value)}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Sekundaerfarbe</label>
+            <div className="flex gap-2">
+              <input
+                type="color"
+                value={settings.secondary_color || '#7C3AED'}
+                onChange={e => update('secondary_color', e.target.value)}
+                className="h-10 w-10 rounded cursor-pointer"
+              />
+              <input
+                type="text"
+                value={settings.secondary_color || ''}
+                onChange={e => update('secondary_color', e.target.value)}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Firmenadresse</label>
+          <textarea
+            value={settings.company_address || ''}
+            onChange={e => update('company_address', e.target.value)}
+            rows={2}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Footer-Text</label>
+          <textarea
+            value={settings.footer_text || ''}
+            onChange={e => update('footer_text', e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+          />
+        </div>
+      </div>
+
+      <button
+        onClick={onSave}
+        disabled={saving}
+        className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+      >
+        {saving ? 'Speichern...' : 'Einstellungen speichern'}
+      </button>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_components/TabNav.tsx b/admin-compliance/app/sdk/email-templates/_components/TabNav.tsx
new file mode 100644
index 0000000..f4750fe
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/TabNav.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { TabId } from '../_types'
+
+interface TabNavProps {
+  activeTab: TabId
+  onTabChange: (tab: TabId) => void
+  logsTotal: number
+}
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'templates', label: 'Templates' },
+  { id: 'editor', label: 'Editor' },
+  { id: 'settings', label: 'Einstellungen' },
+  { id: 'logs', label: 'Logs' },
+]
+
+export function TabNav({ activeTab, onTabChange, logsTotal }: TabNavProps) {
+  return (
+    <div className="border-b border-gray-200">
+      <nav className="flex gap-1 -mb-px">
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === tab.id
+                ? 'border-purple-600 text-purple-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
+          >
+            {tab.label}
+            {tab.id === 'logs' && logsTotal > 0 && (
+              <span className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
+                {logsTotal}
+              </span>
+            )}
+          </button>
+        ))}
+      </nav>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_components/TemplateCard.tsx b/admin-compliance/app/sdk/email-templates/_components/TemplateCard.tsx
new file mode 100644
index 0000000..ca6fee0
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/TemplateCard.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { CATEGORIES, EmailTemplate, STATUS_BADGE } from '../_types'
+
+interface TemplateCardProps {
+  template: EmailTemplate
+  onEdit: () => void
+}
+
+export function TemplateCard({ template, onEdit }: TemplateCardProps) {
+  const cat = CATEGORIES[template.category] || CATEGORIES.general
+  const version = template.latest_version
+  const status = version ? (STATUS_BADGE[version.status] || STATUS_BADGE.draft) : STATUS_BADGE.draft
+
+  return (
+    <div
+      className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
+      onClick={onEdit}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <div>
+          <h3 className="font-medium text-gray-900 text-sm">{template.name}</h3>
+          <span className={`inline-block mt-1 px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>
+            {cat.label}
+          </span>
+        </div>
+        <span className={`px-2 py-0.5 rounded text-xs ${status.color}`}>{status.label}</span>
+      </div>
+      {template.description && (
+        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
+      )}
+      <div className="mt-3 flex flex-wrap gap-1">
+        {(template.variables || []).slice(0, 4).map(v => (
+          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
+            {`{{${v}}}`}
+          </span>
+        ))}
+        {(template.variables || []).length > 4 && (
+          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
+        )}
+      </div>
+      {version && (
+        <div className="mt-3 text-xs text-gray-400">
+          v{version.version} &middot; {version.created_at ? new Date(version.created_at).toLocaleDateString('de-DE') : ''}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_components/TemplatesTab.tsx b/admin-compliance/app/sdk/email-templates/_components/TemplatesTab.tsx
new file mode 100644
index 0000000..5e30fac
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_components/TemplatesTab.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { CATEGORIES, EmailTemplate } from '../_types'
+import { TemplateCard } from './TemplateCard'
+
+interface TemplatesTabProps {
+  templates: EmailTemplate[]
+  loading: boolean
+  selectedCategory: string | null
+  onCategoryChange: (cat: string | null) => void
+  onEdit: (t: EmailTemplate) => void
+  onInitialize: () => void
+}
+
+export function TemplatesTab({
+  templates, loading, selectedCategory, onCategoryChange, onEdit, onInitialize,
+}: TemplatesTabProps) {
+  return (
+    <div className="space-y-4">
+      {/* Category Pills */}
+      <div className="flex flex-wrap gap-2">
+        <button
+          onClick={() => onCategoryChange(null)}
+          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+            !selectedCategory ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+          }`}
+        >
+          Alle
+        </button>
+        {Object.entries(CATEGORIES).map(([key, cat]) => (
+          <button
+            key={key}
+            onClick={() => onCategoryChange(key)}
+            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+              selectedCategory === key ? 'bg-purple-600 text-white' : `${cat.bgColor} ${cat.color} hover:opacity-80`
+            }`}
+          >
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-gray-500">Lade Templates...</div>
+      ) : templates.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 mb-4">Keine Templates vorhanden.</p>
+          <button
+            onClick={onInitialize}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+          >
+            Standard-Templates erstellen
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {templates.map(t => (
+            <TemplateCard key={t.id} template={t} onEdit={() => onEdit(t)} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/email-templates/_hooks/useEmailTemplates.ts b/admin-compliance/app/sdk/email-templates/_hooks/useEmailTemplates.ts
new file mode 100644
index 0000000..b51b6d6
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_hooks/useEmailTemplates.ts
@@ -0,0 +1,227 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import {
+  API_BASE,
+  EmailTemplate,
+  SendLog,
+  Settings,
+  TabId,
+  TemplateType,
+  TemplateVersion,
+  getHeaders,
+} from '../_types'
+
+export function useEmailTemplates(activeTab: TabId) {
+  const [templates, setTemplates] = useState<EmailTemplate[]>([])
+  const [templateTypes, setTemplateTypes] = useState<TemplateType[]>([])
+  const [settings, setSettings] = useState<Settings | null>(null)
+  const [logs, setLogs] = useState<SendLog[]>([])
+  const [logsTotal, setLogsTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+
+  // Editor state
+  const [selectedTemplate, setSelectedTemplate] = useState<EmailTemplate | null>(null)
+  const [editorSubject, setEditorSubject] = useState('')
+  const [editorHtml, setEditorHtml] = useState('')
+  const [editorVersion, setEditorVersion] = useState<TemplateVersion | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [previewHtml, setPreviewHtml] = useState<string | null>(null)
+
+  // Settings form
+  const [settingsForm, setSettingsForm] = useState<Settings | null>(null)
+  const [savingSettings, setSavingSettings] = useState(false)
+
+  const loadTemplates = useCallback(async () => {
+    try {
+      const url = selectedCategory ? `${API_BASE}?category=${selectedCategory}` : API_BASE
+      const res = await fetch(url, { headers: getHeaders() })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+      setTemplates(Array.isArray(data) ? data : [])
+    } catch (e: any) {
+      setError(e.message)
+    }
+  }, [selectedCategory])
+
+  const loadTypes = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/types`, { headers: getHeaders() })
+      if (res.ok) {
+        const data = await res.json()
+        setTemplateTypes(Array.isArray(data) ? data : [])
+      }
+    } catch { /* ignore */ }
+  }, [])
+
+  const loadSettings = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/settings`, { headers: getHeaders() })
+      if (res.ok) {
+        const data = await res.json()
+        setSettings(data)
+        setSettingsForm(data)
+      }
+    } catch { /* ignore */ }
+  }, [])
+
+  const loadLogs = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/logs?limit=50`, { headers: getHeaders() })
+      if (res.ok) {
+        const data = await res.json()
+        setLogs(data.logs || [])
+        setLogsTotal(data.total || 0)
+      }
+    } catch { /* ignore */ }
+  }, [])
+
+  useEffect(() => {
+    setLoading(true)
+    Promise.all([loadTemplates(), loadTypes(), loadSettings()])
+      .finally(() => setLoading(false))
+  }, [loadTemplates, loadTypes, loadSettings])
+
+  useEffect(() => {
+    if (activeTab === 'logs') loadLogs()
+  }, [activeTab, loadLogs])
+
+  useEffect(() => {
+    loadTemplates()
+  }, [selectedCategory, loadTemplates])
+
+  const openEditor = useCallback(async (template: EmailTemplate) => {
+    setSelectedTemplate(template)
+    setPreviewHtml(null)
+
+    if (template.latest_version) {
+      setEditorSubject(template.latest_version.subject)
+      setEditorHtml(template.latest_version.body_html)
+      setEditorVersion(template.latest_version)
+    } else {
+      // Load default content
+      try {
+        const res = await fetch(`${API_BASE}/default/${template.template_type}`, { headers: getHeaders() })
+        if (res.ok) {
+          const data = await res.json()
+          setEditorSubject(data.default_subject || '')
+          setEditorHtml(data.default_body_html || '')
+        }
+      } catch { /* ignore */ }
+      setEditorVersion(null)
+    }
+  }, [])
+
+  const saveVersion = useCallback(async () => {
+    if (!selectedTemplate) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${API_BASE}/${selectedTemplate.id}/versions`, {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify({
+          version: editorVersion ? `${parseFloat(editorVersion.version) + 0.1}` : '1.0',
+          language: 'de',
+          subject: editorSubject,
+          body_html: editorHtml,
+        }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const version = await res.json()
+      setEditorVersion(version)
+      await loadTemplates()
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }, [selectedTemplate, editorSubject, editorHtml, editorVersion, loadTemplates])
+
+  const publishVersion = useCallback(async () => {
+    if (!editorVersion) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/publish`, {
+        method: 'POST',
+        headers: getHeaders(),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const updated = await res.json()
+      setEditorVersion(updated)
+      await loadTemplates()
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }, [editorVersion, loadTemplates])
+
+  const loadPreview = useCallback(async () => {
+    if (!editorVersion) return
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/preview`, {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify({ variables: {} }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setPreviewHtml(data.body_html)
+      }
+    } catch { /* ignore */ }
+  }, [editorVersion])
+
+  const saveSettings2 = useCallback(async () => {
+    if (!settingsForm) return
+    setSavingSettings(true)
+    try {
+      const res = await fetch(`${API_BASE}/settings`, {
+        method: 'PUT',
+        headers: getHeaders(),
+        body: JSON.stringify(settingsForm),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setSettings(data)
+        setSettingsForm(data)
+      }
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setSavingSettings(false)
+    }
+  }, [settingsForm])
+
+  const initializeDefaults = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/initialize`, {
+        method: 'POST',
+        headers: getHeaders(),
+      })
+      if (res.ok) {
+        await loadTemplates()
+      }
+    } catch (e: any) {
+      setError(e.message)
+    }
+  }, [loadTemplates])
+
+  return {
+    // Data
+    templates, templateTypes, settings, logs, logsTotal, loading, error,
+    selectedCategory,
+    // Editor
+    selectedTemplate, editorSubject, editorHtml, editorVersion, saving, previewHtml,
+    // Settings
+    settingsForm, savingSettings,
+    // Setters
+    setError, setSelectedCategory,
+    setEditorSubject, setEditorHtml,
+    setSettingsForm,
+    // Actions
+    openEditor, saveVersion, publishVersion, loadPreview,
+    saveSettings2, initializeDefaults,
+  }
+}
diff --git a/admin-compliance/app/sdk/email-templates/_types.ts b/admin-compliance/app/sdk/email-templates/_types.ts
new file mode 100644
index 0000000..417121f
--- /dev/null
+++ b/admin-compliance/app/sdk/email-templates/_types.ts
@@ -0,0 +1,84 @@
+export interface EmailTemplate {
+  id: string
+  template_type: string
+  name: string
+  description: string | null
+  category: string
+  is_active: boolean
+  sort_order: number
+  variables: string[]
+  latest_version?: TemplateVersion | null
+  created_at: string | null
+  updated_at: string | null
+}
+
+export interface TemplateVersion {
+  id: string
+  template_id: string
+  version: string
+  language: string
+  subject: string
+  body_html: string
+  body_text: string | null
+  status: string
+  submitted_at: string | null
+  published_at: string | null
+  created_at: string | null
+}
+
+export interface TemplateType {
+  type: string
+  name: string
+  category: string
+  variables: string[]
+}
+
+export interface SendLog {
+  id: string
+  template_type: string
+  recipient: string
+  subject: string
+  status: string
+  sent_at: string | null
+}
+
+export interface Settings {
+  sender_name: string
+  sender_email: string
+  reply_to: string | null
+  logo_url: string | null
+  primary_color: string
+  secondary_color: string
+  footer_text: string
+  company_name: string | null
+  company_address: string | null
+}
+
+export type TabId = 'templates' | 'editor' | 'settings' | 'logs'
+
+export const API_BASE = '/api/sdk/v1/compliance/email-templates'
+
+export function getHeaders(): HeadersInit {
+  if (typeof window === 'undefined') return { 'Content-Type': 'application/json' }
+  return {
+    'Content-Type': 'application/json',
+    'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e',
+    'X-User-ID': localStorage.getItem('bp_user_id') || '',
+  }
+}
+
+export const CATEGORIES: Record<string, { label: string; color: string; bgColor: string }> = {
+  general: { label: 'Allgemein', color: 'text-gray-700', bgColor: 'bg-gray-100' },
+  dsr: { label: 'Betroffenenrechte', color: 'text-blue-700', bgColor: 'bg-blue-100' },
+  consent: { label: 'Einwilligung', color: 'text-green-700', bgColor: 'bg-green-100' },
+  breach: { label: 'Datenpanne', color: 'text-red-700', bgColor: 'bg-red-100' },
+  vendor: { label: 'Dienstleister', color: 'text-purple-700', bgColor: 'bg-purple-100' },
+  training: { label: 'Schulung', color: 'text-orange-700', bgColor: 'bg-orange-100' },
+}
+
+export const STATUS_BADGE: Record<string, { label: string; color: string }> = {
+  draft: { label: 'Entwurf', color: 'bg-gray-100 text-gray-700' },
+  review: { label: 'Pruefung', color: 'bg-yellow-100 text-yellow-700' },
+  approved: { label: 'Genehmigt', color: 'bg-blue-100 text-blue-700' },
+  published: { label: 'Publiziert', color: 'bg-green-100 text-green-700' },
+}
diff --git a/admin-compliance/app/sdk/email-templates/page.tsx b/admin-compliance/app/sdk/email-templates/page.tsx
index 99a7a76..32ef2c0 100644
--- a/admin-compliance/app/sdk/email-templates/page.tsx
+++ b/admin-compliance/app/sdk/email-templates/page.tsx
@@ -1,323 +1,34 @@
 'use client'
 
-import React, { useState, useEffect, useCallback } from 'react'
-import { useSDK } from '@/lib/sdk'
+import { useState } from 'react'
 import { StepHeader } from '@/components/sdk/StepHeader'
 
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface EmailTemplate {
-  id: string
-  template_type: string
-  name: string
-  description: string | null
-  category: string
-  is_active: boolean
-  sort_order: number
-  variables: string[]
-  latest_version?: TemplateVersion | null
-  created_at: string | null
-  updated_at: string | null
-}
-
-interface TemplateVersion {
-  id: string
-  template_id: string
-  version: string
-  language: string
-  subject: string
-  body_html: string
-  body_text: string | null
-  status: string
-  submitted_at: string | null
-  published_at: string | null
-  created_at: string | null
-}
-
-interface TemplateType {
-  type: string
-  name: string
-  category: string
-  variables: string[]
-}
-
-interface SendLog {
-  id: string
-  template_type: string
-  recipient: string
-  subject: string
-  status: string
-  sent_at: string | null
-}
-
-interface Settings {
-  sender_name: string
-  sender_email: string
-  reply_to: string | null
-  logo_url: string | null
-  primary_color: string
-  secondary_color: string
-  footer_text: string
-  company_name: string | null
-  company_address: string | null
-}
-
-type TabId = 'templates' | 'editor' | 'settings' | 'logs'
-
-const API_BASE = '/api/sdk/v1/compliance/email-templates'
-
-function getHeaders(): HeadersInit {
-  if (typeof window === 'undefined') return { 'Content-Type': 'application/json' }
-  return {
-    'Content-Type': 'application/json',
-    'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e',
-    'X-User-ID': localStorage.getItem('bp_user_id') || '',
-  }
-}
-
-// =============================================================================
-// CATEGORY CONFIG
-// =============================================================================
-
-const CATEGORIES: Record<string, { label: string; color: string; bgColor: string }> = {
-  general: { label: 'Allgemein', color: 'text-gray-700', bgColor: 'bg-gray-100' },
-  dsr: { label: 'Betroffenenrechte', color: 'text-blue-700', bgColor: 'bg-blue-100' },
-  consent: { label: 'Einwilligung', color: 'text-green-700', bgColor: 'bg-green-100' },
-  breach: { label: 'Datenpanne', color: 'text-red-700', bgColor: 'bg-red-100' },
-  vendor: { label: 'Dienstleister', color: 'text-purple-700', bgColor: 'bg-purple-100' },
-  training: { label: 'Schulung', color: 'text-orange-700', bgColor: 'bg-orange-100' },
-}
-
-const STATUS_BADGE: Record<string, { label: string; color: string }> = {
-  draft: { label: 'Entwurf', color: 'bg-gray-100 text-gray-700' },
-  review: { label: 'Pruefung', color: 'bg-yellow-100 text-yellow-700' },
-  approved: { label: 'Genehmigt', color: 'bg-blue-100 text-blue-700' },
-  published: { label: 'Publiziert', color: 'bg-green-100 text-green-700' },
-}
-
-// =============================================================================
-// PAGE
-// =============================================================================
+import { EmailTemplate, TabId } from './_types'
+import { useEmailTemplates } from './_hooks/useEmailTemplates'
+import { TabNav } from './_components/TabNav'
+import { TemplatesTab } from './_components/TemplatesTab'
+import { EditorTab } from './_components/EditorTab'
+import { SettingsTab } from './_components/SettingsTab'
+import { LogsTab } from './_components/LogsTab'
 
 export default function EmailTemplatesPage() {
-  const sdk = useSDK()
   const [activeTab, setActiveTab] = useState<TabId>('templates')
-  const [templates, setTemplates] = useState<EmailTemplate[]>([])
-  const [templateTypes, setTemplateTypes] = useState<TemplateType[]>([])
-  const [settings, setSettings] = useState<Settings | null>(null)
-  const [logs, setLogs] = useState<SendLog[]>([])
-  const [logsTotal, setLogsTotal] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+  const {
+    templates, logs, logsTotal, loading, error,
+    selectedCategory,
+    selectedTemplate, editorSubject, editorHtml, editorVersion, saving, previewHtml,
+    settingsForm, savingSettings,
+    setError, setSelectedCategory,
+    setEditorSubject, setEditorHtml,
+    setSettingsForm,
+    openEditor, saveVersion, publishVersion, loadPreview,
+    saveSettings2, initializeDefaults,
+  } = useEmailTemplates(activeTab)
 
-  // Editor state
-  const [selectedTemplate, setSelectedTemplate] = useState<EmailTemplate | null>(null)
-  const [editorSubject, setEditorSubject] = useState('')
-  const [editorHtml, setEditorHtml] = useState('')
-  const [editorVersion, setEditorVersion] = useState<TemplateVersion | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [previewHtml, setPreviewHtml] = useState<string | null>(null)
-
-  // Settings form
-  const [settingsForm, setSettingsForm] = useState<Settings | null>(null)
-  const [savingSettings, setSavingSettings] = useState(false)
-
-  // =============================================================================
-  // DATA LOADING
-  // =============================================================================
-
-  const loadTemplates = useCallback(async () => {
-    try {
-      const url = selectedCategory ? `${API_BASE}?category=${selectedCategory}` : API_BASE
-      const res = await fetch(url, { headers: getHeaders() })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json()
-      setTemplates(Array.isArray(data) ? data : [])
-    } catch (e: any) {
-      setError(e.message)
-    }
-  }, [selectedCategory])
-
-  const loadTypes = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/types`, { headers: getHeaders() })
-      if (res.ok) {
-        const data = await res.json()
-        setTemplateTypes(Array.isArray(data) ? data : [])
-      }
-    } catch { /* ignore */ }
-  }, [])
-
-  const loadSettings = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/settings`, { headers: getHeaders() })
-      if (res.ok) {
-        const data = await res.json()
-        setSettings(data)
-        setSettingsForm(data)
-      }
-    } catch { /* ignore */ }
-  }, [])
-
-  const loadLogs = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/logs?limit=50`, { headers: getHeaders() })
-      if (res.ok) {
-        const data = await res.json()
-        setLogs(data.logs || [])
-        setLogsTotal(data.total || 0)
-      }
-    } catch { /* ignore */ }
-  }, [])
-
-  useEffect(() => {
-    setLoading(true)
-    Promise.all([loadTemplates(), loadTypes(), loadSettings()])
-      .finally(() => setLoading(false))
-  }, [loadTemplates, loadTypes, loadSettings])
-
-  useEffect(() => {
-    if (activeTab === 'logs') loadLogs()
-  }, [activeTab, loadLogs])
-
-  useEffect(() => {
-    loadTemplates()
-  }, [selectedCategory, loadTemplates])
-
-  // =============================================================================
-  // EDITOR ACTIONS
-  // =============================================================================
-
-  const openEditor = useCallback(async (template: EmailTemplate) => {
-    setSelectedTemplate(template)
+  const handleEdit = async (template: EmailTemplate) => {
     setActiveTab('editor')
-    setPreviewHtml(null)
-
-    if (template.latest_version) {
-      setEditorSubject(template.latest_version.subject)
-      setEditorHtml(template.latest_version.body_html)
-      setEditorVersion(template.latest_version)
-    } else {
-      // Load default content
-      try {
-        const res = await fetch(`${API_BASE}/default/${template.template_type}`, { headers: getHeaders() })
-        if (res.ok) {
-          const data = await res.json()
-          setEditorSubject(data.default_subject || '')
-          setEditorHtml(data.default_body_html || '')
-        }
-      } catch { /* ignore */ }
-      setEditorVersion(null)
-    }
-  }, [])
-
-  const saveVersion = useCallback(async () => {
-    if (!selectedTemplate) return
-    setSaving(true)
-    try {
-      const res = await fetch(`${API_BASE}/${selectedTemplate.id}/versions`, {
-        method: 'POST',
-        headers: getHeaders(),
-        body: JSON.stringify({
-          version: editorVersion ? `${parseFloat(editorVersion.version) + 0.1}` : '1.0',
-          language: 'de',
-          subject: editorSubject,
-          body_html: editorHtml,
-        }),
-      })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const version = await res.json()
-      setEditorVersion(version)
-      await loadTemplates()
-    } catch (e: any) {
-      setError(e.message)
-    } finally {
-      setSaving(false)
-    }
-  }, [selectedTemplate, editorSubject, editorHtml, editorVersion, loadTemplates])
-
-  const publishVersion = useCallback(async () => {
-    if (!editorVersion) return
-    setSaving(true)
-    try {
-      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/publish`, {
-        method: 'POST',
-        headers: getHeaders(),
-      })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const updated = await res.json()
-      setEditorVersion(updated)
-      await loadTemplates()
-    } catch (e: any) {
-      setError(e.message)
-    } finally {
-      setSaving(false)
-    }
-  }, [editorVersion, loadTemplates])
-
-  const loadPreview = useCallback(async () => {
-    if (!editorVersion) return
-    try {
-      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/preview`, {
-        method: 'POST',
-        headers: getHeaders(),
-        body: JSON.stringify({ variables: {} }),
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setPreviewHtml(data.body_html)
-      }
-    } catch { /* ignore */ }
-  }, [editorVersion])
-
-  const saveSettings2 = useCallback(async () => {
-    if (!settingsForm) return
-    setSavingSettings(true)
-    try {
-      const res = await fetch(`${API_BASE}/settings`, {
-        method: 'PUT',
-        headers: getHeaders(),
-        body: JSON.stringify(settingsForm),
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setSettings(data)
-        setSettingsForm(data)
-      }
-    } catch (e: any) {
-      setError(e.message)
-    } finally {
-      setSavingSettings(false)
-    }
-  }, [settingsForm])
-
-  const initializeDefaults = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/initialize`, {
-        method: 'POST',
-        headers: getHeaders(),
-      })
-      if (res.ok) {
-        await loadTemplates()
-      }
-    } catch (e: any) {
-      setError(e.message)
-    }
-  }, [loadTemplates])
-
-  // =============================================================================
-  // RENDER
-  // =============================================================================
-
-  const tabs: { id: TabId; label: string }[] = [
-    { id: 'templates', label: 'Templates' },
-    { id: 'editor', label: 'Editor' },
-    { id: 'settings', label: 'Einstellungen' },
-    { id: 'logs', label: 'Logs' },
-  ]
+    await openEditor(template)
+  }
 
   return (
     <div className="space-y-6">
@@ -330,38 +41,15 @@ export default function EmailTemplatesPage() {
         </div>
       )}
 
-      {/* Tab Navigation */}
-      <div className="border-b border-gray-200">
-        <nav className="flex gap-1 -mb-px">
-          {tabs.map(tab => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === tab.id
-                  ? 'border-purple-600 text-purple-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              {tab.label}
-              {tab.id === 'logs' && logsTotal > 0 && (
-                <span className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
-                  {logsTotal}
-                </span>
-              )}
-            </button>
-          ))}
-        </nav>
-      </div>
+      <TabNav activeTab={activeTab} onTabChange={setActiveTab} logsTotal={logsTotal} />
 
-      {/* Tab Content */}
       {activeTab === 'templates' && (
         <TemplatesTab
           templates={templates}
           loading={loading}
           selectedCategory={selectedCategory}
           onCategoryChange={setSelectedCategory}
-          onEdit={openEditor}
+          onEdit={handleEdit}
           onInitialize={initializeDefaults}
         />
       )}
@@ -398,419 +86,3 @@ export default function EmailTemplatesPage() {
     </div>
   )
 }
-
-// =============================================================================
-// TAB COMPONENTS
-// =============================================================================
-
-function TemplatesTab({
-  templates, loading, selectedCategory, onCategoryChange, onEdit, onInitialize,
-}: {
-  templates: EmailTemplate[]
-  loading: boolean
-  selectedCategory: string | null
-  onCategoryChange: (cat: string | null) => void
-  onEdit: (t: EmailTemplate) => void
-  onInitialize: () => void
-}) {
-  return (
-    <div className="space-y-4">
-      {/* Category Pills */}
-      <div className="flex flex-wrap gap-2">
-        <button
-          onClick={() => onCategoryChange(null)}
-          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
-            !selectedCategory ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-          }`}
-        >
-          Alle
-        </button>
-        {Object.entries(CATEGORIES).map(([key, cat]) => (
-          <button
-            key={key}
-            onClick={() => onCategoryChange(key)}
-            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
-              selectedCategory === key ? 'bg-purple-600 text-white' : `${cat.bgColor} ${cat.color} hover:opacity-80`
-            }`}
-          >
-            {cat.label}
-          </button>
-        ))}
-      </div>
-
-      {loading ? (
-        <div className="text-center py-12 text-gray-500">Lade Templates...</div>
-      ) : templates.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-gray-500 mb-4">Keine Templates vorhanden.</p>
-          <button
-            onClick={onInitialize}
-            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
-            Standard-Templates erstellen
-          </button>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {templates.map(t => (
-            <TemplateCard key={t.id} template={t} onEdit={() => onEdit(t)} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function TemplateCard({ template, onEdit }: { template: EmailTemplate; onEdit: () => void }) {
-  const cat = CATEGORIES[template.category] || CATEGORIES.general
-  const version = template.latest_version
-  const status = version ? (STATUS_BADGE[version.status] || STATUS_BADGE.draft) : STATUS_BADGE.draft
-
-  return (
-    <div
-      className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
-      onClick={onEdit}
-    >
-      <div className="flex items-start justify-between mb-2">
-        <div>
-          <h3 className="font-medium text-gray-900 text-sm">{template.name}</h3>
-          <span className={`inline-block mt-1 px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>
-            {cat.label}
-          </span>
-        </div>
-        <span className={`px-2 py-0.5 rounded text-xs ${status.color}`}>{status.label}</span>
-      </div>
-      {template.description && (
-        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
-      )}
-      <div className="mt-3 flex flex-wrap gap-1">
-        {(template.variables || []).slice(0, 4).map(v => (
-          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
-            {`{{${v}}}`}
-          </span>
-        ))}
-        {(template.variables || []).length > 4 && (
-          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
-        )}
-      </div>
-      {version && (
-        <div className="mt-3 text-xs text-gray-400">
-          v{version.version} &middot; {version.created_at ? new Date(version.created_at).toLocaleDateString('de-DE') : ''}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function EditorTab({
-  template, version, subject, html, previewHtml, saving,
-  onSubjectChange, onHtmlChange, onSave, onPublish, onPreview, onBack,
-}: {
-  template: EmailTemplate | null
-  version: TemplateVersion | null
-  subject: string
-  html: string
-  previewHtml: string | null
-  saving: boolean
-  onSubjectChange: (v: string) => void
-  onHtmlChange: (v: string) => void
-  onSave: () => void
-  onPublish: () => void
-  onPreview: () => void
-  onBack: () => void
-}) {
-  if (!template) {
-    return (
-      <div className="text-center py-12 text-gray-500">
-        Waehlen Sie ein Template aus der Liste.
-        <br />
-        <button onClick={onBack} className="mt-2 text-purple-600 underline">Zurueck zur Liste</button>
-      </div>
-    )
-  }
-
-  const cat = CATEGORIES[template.category] || CATEGORIES.general
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <button onClick={onBack} className="text-gray-500 hover:text-gray-700">&larr; Zurueck</button>
-          <h2 className="text-lg font-semibold">{template.name}</h2>
-          <span className={`px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>{cat.label}</span>
-          {version && (
-            <span className={`px-2 py-0.5 rounded text-xs ${(STATUS_BADGE[version.status] || STATUS_BADGE.draft).color}`}>
-              {(STATUS_BADGE[version.status] || STATUS_BADGE.draft).label}
-            </span>
-          )}
-        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={onSave}
-            disabled={saving}
-            className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Version speichern'}
-          </button>
-          {version && version.status !== 'published' && (
-            <button
-              onClick={onPublish}
-              disabled={saving}
-              className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 disabled:opacity-50"
-            >
-              Publizieren
-            </button>
-          )}
-          {version && (
-            <button
-              onClick={onPreview}
-              className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50"
-            >
-              Vorschau
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Variables */}
-      <div className="flex flex-wrap gap-1.5">
-        <span className="text-xs text-gray-500 mr-1">Variablen:</span>
-        {(template.variables || []).map(v => (
-          <button
-            key={v}
-            onClick={() => onHtmlChange(html + `{{${v}}}`)}
-            className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-mono hover:bg-purple-100 transition-colors"
-          >
-            {`{{${v}}}`}
-          </button>
-        ))}
-      </div>
-
-      {/* Split View */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Editor */}
-        <div className="space-y-3">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
-            <input
-              type="text"
-              value={subject}
-              onChange={e => onSubjectChange(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              placeholder="E-Mail Betreff..."
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">HTML-Inhalt</label>
-            <textarea
-              value={html}
-              onChange={e => onHtmlChange(e.target.value)}
-              rows={20}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-y"
-              placeholder="<p>Sehr geehrte(r) {{user_name}},</p>"
-            />
-          </div>
-        </div>
-
-        {/* Preview */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Vorschau</label>
-          <div className="border border-gray-200 rounded-lg bg-white p-4 min-h-[400px]">
-            {previewHtml ? (
-              <div dangerouslySetInnerHTML={{ __html: previewHtml }} />
-            ) : (
-              <div dangerouslySetInnerHTML={{ __html: html }} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SettingsTab({
-  settings, saving, onChange, onSave,
-}: {
-  settings: Settings
-  saving: boolean
-  onChange: (s: Settings) => void
-  onSave: () => void
-}) {
-  const update = (field: keyof Settings, value: string) => {
-    onChange({ ...settings, [field]: value })
-  }
-
-  return (
-    <div className="max-w-2xl space-y-6">
-      <h2 className="text-lg font-semibold">E-Mail-Einstellungen</h2>
-
-      <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-Name</label>
-            <input
-              type="text"
-              value={settings.sender_name || ''}
-              onChange={e => update('sender_name', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-E-Mail</label>
-            <input
-              type="email"
-              value={settings.sender_email || ''}
-              onChange={e => update('sender_email', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Antwort-Adresse</label>
-          <input
-            type="email"
-            value={settings.reply_to || ''}
-            onChange={e => update('reply_to', e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-            placeholder="optional"
-          />
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Firmenname</label>
-            <input
-              type="text"
-              value={settings.company_name || ''}
-              onChange={e => update('company_name', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Logo URL</label>
-            <input
-              type="url"
-              value={settings.logo_url || ''}
-              onChange={e => update('logo_url', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              placeholder="https://..."
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Primaerfarbe</label>
-            <div className="flex gap-2">
-              <input
-                type="color"
-                value={settings.primary_color || '#4F46E5'}
-                onChange={e => update('primary_color', e.target.value)}
-                className="h-10 w-10 rounded cursor-pointer"
-              />
-              <input
-                type="text"
-                value={settings.primary_color || ''}
-                onChange={e => update('primary_color', e.target.value)}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
-              />
-            </div>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Sekundaerfarbe</label>
-            <div className="flex gap-2">
-              <input
-                type="color"
-                value={settings.secondary_color || '#7C3AED'}
-                onChange={e => update('secondary_color', e.target.value)}
-                className="h-10 w-10 rounded cursor-pointer"
-              />
-              <input
-                type="text"
-                value={settings.secondary_color || ''}
-                onChange={e => update('secondary_color', e.target.value)}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Firmenadresse</label>
-          <textarea
-            value={settings.company_address || ''}
-            onChange={e => update('company_address', e.target.value)}
-            rows={2}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Footer-Text</label>
-          <textarea
-            value={settings.footer_text || ''}
-            onChange={e => update('footer_text', e.target.value)}
-            rows={3}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-          />
-        </div>
-      </div>
-
-      <button
-        onClick={onSave}
-        disabled={saving}
-        className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
-      >
-        {saving ? 'Speichern...' : 'Einstellungen speichern'}
-      </button>
-    </div>
-  )
-}
-
-function LogsTab({ logs, total }: { logs: SendLog[]; total: number }) {
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg font-semibold">E-Mail-Verlauf ({total})</h2>
-
-      {logs.length === 0 ? (
-        <p className="text-gray-500 text-sm">Noch keine E-Mails gesendet.</p>
-      ) : (
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-200">
-                <th className="text-left py-2 px-3 text-gray-500 font-medium">Typ</th>
-                <th className="text-left py-2 px-3 text-gray-500 font-medium">Empfaenger</th>
-                <th className="text-left py-2 px-3 text-gray-500 font-medium">Betreff</th>
-                <th className="text-left py-2 px-3 text-gray-500 font-medium">Status</th>
-                <th className="text-left py-2 px-3 text-gray-500 font-medium">Datum</th>
-              </tr>
-            </thead>
-            <tbody>
-              {logs.map(log => (
-                <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
-                  <td className="py-2 px-3 font-mono text-xs">{log.template_type}</td>
-                  <td className="py-2 px-3">{log.recipient}</td>
-                  <td className="py-2 px-3">{log.subject}</td>
-                  <td className="py-2 px-3">
-                    <span className={`px-2 py-0.5 rounded text-xs ${
-                      log.status === 'sent' || log.status === 'test_sent'
-                        ? 'bg-green-100 text-green-700'
-                        : 'bg-red-100 text-red-700'
-                    }`}>
-                      {log.status}
-                    </span>
-                  </td>
-                  <td className="py-2 px-3 text-gray-500">
-                    {log.sent_at ? new Date(log.sent_at).toLocaleString('de-DE') : '-'}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  )
-}