[split-required] Split 500-1000 LOC files across all services

backend-lehrer (5 files):
- alerts_agent/db/repository.py (992 → 5), abitur_docs_api.py (956 → 3)
- teacher_dashboard_api.py (951 → 3), services/pdf_service.py (916 → 3)
- mail/mail_db.py (987 → 6)

klausur-service (5 files):
- legal_templates_ingestion.py (942 → 3), ocr_pipeline_postprocess.py (929 → 4)
- ocr_pipeline_words.py (876 → 3), ocr_pipeline_ocr_merge.py (616 → 2)
- KorrekturPage.tsx (956 → 6)

website (5 pages):
- mail (985 → 9), edu-search (958 → 8), mac-mini (950 → 7)
- ocr-labeling (946 → 7), audit-workspace (871 → 4)

studio-v2 (5 files + 1 deleted):
- page.tsx (946 → 5), MessagesContext.tsx (925 → 4)
- korrektur (914 → 6), worksheet-cleanup (899 → 6)
- useVocabWorksheet.ts (888 → 3)
- Deleted dead page-original.tsx (934 LOC)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

website/app/admin/edu-search/_components/CrawlTab.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import type { CrawlStats } from '../types'
+
+export default function CrawlTab({
+  stats,
+  loading,
+  onStartCrawl,
+}: {
+  stats: CrawlStats
+  loading: boolean
+  onStartCrawl: () => void
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Crawl Status */}
+      <div className="bg-slate-50 rounded-lg p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold text-slate-900">Crawl-Status</h3>
+            <p className="text-sm text-slate-500">
+              Letzter Crawl: {stats.lastCrawlTime ? new Date(stats.lastCrawlTime).toLocaleString('de-DE') : 'Noch nie'}
+            </p>
+          </div>
+          <div className={`px-3 py-1.5 rounded-full text-sm font-medium ${
+            stats.crawlStatus === 'running' ? 'bg-blue-100 text-blue-700' :
+            stats.crawlStatus === 'error' ? 'bg-red-100 text-red-700' :
+            'bg-green-100 text-green-700'
+          }`}>
+            {stats.crawlStatus === 'running' ? '🔄 Läuft...' :
+             stats.crawlStatus === 'error' ? '❌ Fehler' :
+             '✅ Bereit'}
+          </div>
+        </div>
+        <button
+          onClick={onStartCrawl}
+          disabled={loading || stats.crawlStatus === 'running'}
+          className="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+        >
+          {loading ? (
+            <>
+              <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              Crawl läuft...
+            </>
+          ) : (
+            <>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Crawl starten
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Crawl Settings */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white border border-slate-200 rounded-lg p-6">
+          <h4 className="font-semibold text-slate-900 mb-4">Crawl-Einstellungen</h4>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Max. Seiten pro Crawl</label>
+              <input type="number" defaultValue={500} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Rate-Limit (Requests/Sek)</label>
+              <input type="number" defaultValue={0.2} step={0.1} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Max. Crawl-Tiefe</label>
+              <input type="number" defaultValue={4} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
+            </div>
+          </div>
+        </div>
+        <div className="bg-white border border-slate-200 rounded-lg p-6">
+          <h4 className="font-semibold text-slate-900 mb-4">Scheduler</h4>
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <input type="checkbox" id="autoSchedule" className="rounded border-slate-300" />
+              <label htmlFor="autoSchedule" className="text-sm text-slate-700">Automatischer Crawl aktiviert</label>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Intervall</label>
+              <select className="w-full px-3 py-2 border border-slate-300 rounded-lg">
+                <option value="daily">Täglich</option>
+                <option value="weekly">Wöchentlich</option>
+                <option value="monthly">Monatlich</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

website/app/admin/edu-search/_components/RulesTab.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+export default function RulesTab() {
+  return (
+    <div className="space-y-6">
+      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+        <div className="flex items-start gap-3">
+          <span className="text-2xl">⚠️</span>
+          <div>
+            <h4 className="font-semibold text-amber-800">Tagging-Regeln Editor</h4>
+            <p className="text-sm text-amber-700">
+              Die Tagging-Regeln werden aktuell über YAML-Dateien verwaltet.
+              Ein visueller Editor ist in Entwicklung.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6">
+        {[
+          { name: 'Doc-Type Regeln', file: 'doc_type_rules.yaml', desc: 'Klassifiziert Dokumente (Lehrplan, Arbeitsblatt, etc.)' },
+          { name: 'Fach-Regeln', file: 'subject_rules.yaml', desc: 'Erkennt Unterrichtsfächer' },
+          { name: 'Schulstufen-Regeln', file: 'level_rules.yaml', desc: 'Erkennt Primar, SekI, SekII, etc.' },
+          { name: 'Trust-Score Regeln', file: 'trust_rules.yaml', desc: 'Domain-basierte Vertrauensbewertung' },
+        ].map(rule => (
+          <div key={rule.file} className="bg-white border border-slate-200 rounded-lg p-6">
+            <h4 className="font-semibold text-slate-900 mb-2">{rule.name}</h4>
+            <p className="text-sm text-slate-500 mb-4">{rule.desc}</p>
+            <code className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-600">
+              /rules/{rule.file}
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

website/app/admin/edu-search/_components/SeedModal.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { useState } from 'react'
+import type { SeedURL, Category } from '../types'
+
+export default function SeedModal({
+  seed,
+  categories,
+  onClose,
+  onSaved,
+}: {
+  seed?: SeedURL | null
+  categories: Category[]
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const [formData, setFormData] = useState<Partial<SeedURL>>(seed || {
+    url: '',
+    category: 'federal',
+    name: '',
+    description: '',
+    trustBoost: 0.5,
+    enabled: true,
+  })
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    setSaveError(null)
+
+    try {
+      const category = categories.find(c => c.name === formData.category || c.id === formData.category)
+
+      const payload = {
+        url: formData.url,
+        name: formData.name,
+        description: formData.description || '',
+        category_id: category?.id || null,
+        trust_boost: formData.trustBoost,
+        enabled: formData.enabled,
+        source_type: 'GOV',
+        scope: 'FEDERAL',
+      }
+
+      if (seed) {
+        const res = await fetch(`/api/admin/edu-search?id=${seed.id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+        if (!res.ok) {
+          const errData = await res.json()
+          throw new Error(errData.detail || errData.error || `HTTP ${res.status}`)
+        }
+      } else {
+        const res = await fetch(`/api/admin/edu-search?action=seed`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+        if (!res.ok) {
+          const errData = await res.json()
+          throw new Error(errData.detail || errData.error || `HTTP ${res.status}`)
+        }
+      }
+
+      onSaved()
+      onClose()
+    } catch (err) {
+      console.error('Failed to save seed:', err)
+      setSaveError(err instanceof Error ? err.message : 'Fehler beim Speichern')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4">
+        <div className="px-6 py-4 border-b border-slate-200">
+          <h3 className="text-lg font-semibold">{seed ? 'Seed bearbeiten' : 'Neue Seed-URL hinzufügen'}</h3>
+        </div>
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {saveError && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm">
+              {saveError}
+            </div>
+          )}
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">URL *</label>
+            <input
+              type="url"
+              required
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              placeholder="https://www.example.de"
+              value={formData.url}
+              onChange={e => setFormData({ ...formData, url: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Name *</label>
+            <input
+              type="text"
+              required
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              placeholder="Name der Quelle"
+              value={formData.name}
+              onChange={e => setFormData({ ...formData, name: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Kategorie *</label>
+            <select
+              required
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              value={formData.category}
+              onChange={e => setFormData({ ...formData, category: e.target.value })}
+            >
+              {categories.map(cat => (
+                <option key={cat.id} value={cat.name}>{cat.icon} {cat.display_name || cat.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
+            <textarea
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              rows={2}
+              placeholder="Kurze Beschreibung der Quelle"
+              value={formData.description}
+              onChange={e => setFormData({ ...formData, description: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Trust-Boost: {formData.trustBoost?.toFixed(2)}
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              className="w-full"
+              value={formData.trustBoost}
+              onChange={e => setFormData({ ...formData, trustBoost: parseFloat(e.target.value) })}
+            />
+            <p className="text-xs text-slate-500 mt-1">
+              Höhere Werte für vertrauenswürdigere Quellen (1.0 = max für offizielle Regierungsquellen)
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="enabled"
+              className="rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+              checked={formData.enabled}
+              onChange={e => setFormData({ ...formData, enabled: e.target.checked })}
+            />
+            <label htmlFor="enabled" className="text-sm text-slate-700">Aktiv (wird beim nächsten Crawl berücksichtigt)</label>
+          </div>
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 flex items-center gap-2"
+            >
+              {saving && (
+                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              )}
+              {seed ? 'Speichern' : 'Hinzufügen'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

website/app/admin/edu-search/_components/SeedsTab.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import { useState } from 'react'
+import type { SeedURL, Category } from '../types'
+import SeedModal from './SeedModal'
+
+export default function SeedsTab({
+  seeds,
+  allSeeds,
+  categories,
+  searchQuery,
+  setSearchQuery,
+  selectedCategory,
+  setSelectedCategory,
+  onToggleEnabled,
+  onDelete,
+  onSaved,
+}: {
+  seeds: SeedURL[]
+  allSeeds: SeedURL[]
+  categories: Category[]
+  searchQuery: string
+  setSearchQuery: (q: string) => void
+  selectedCategory: string
+  setSelectedCategory: (cat: string) => void
+  onToggleEnabled: (id: string) => void
+  onDelete: (id: string) => void
+  onSaved: () => void
+}) {
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [editingSeed, setEditingSeed] = useState<SeedURL | null>(null)
+
+  const filteredSeeds = seeds.filter(seed => {
+    const matchesCategory = selectedCategory === 'all' || seed.category === selectedCategory
+    const matchesSearch = seed.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         seed.url.toLowerCase().includes(searchQuery.toLowerCase())
+    return matchesCategory && matchesSearch
+  })
+
+  return (
+    <div>
+      {/* Header with filters */}
+      <div className="flex flex-wrap items-center gap-4 mb-6">
+        <div className="flex-1 min-w-[200px]">
+          <input
+            type="text"
+            placeholder="Suche nach Name oder URL..."
+            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <select
+          className="px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+          value={selectedCategory}
+          onChange={e => setSelectedCategory(e.target.value)}
+        >
+          <option value="all">Alle Kategorien</option>
+          {categories.map(cat => (
+            <option key={cat.id} value={cat.name}>{cat.icon} {cat.display_name || cat.name}</option>
+          ))}
+        </select>
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors flex items-center gap-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          Neue Seed-URL
+        </button>
+      </div>
+
+      {/* Category Quick Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-6">
+        {categories.map(cat => {
+          const count = allSeeds.filter(s => s.category === cat.name).length
+          return (
+            <button
+              key={cat.id}
+              onClick={() => setSelectedCategory(selectedCategory === cat.name ? 'all' : cat.name)}
+              className={`p-4 rounded-lg border transition-colors text-left ${
+                selectedCategory === cat.name
+                  ? 'border-primary-500 bg-primary-50'
+                  : 'border-slate-200 hover:border-slate-300'
+              }`}
+            >
+              <div className="text-2xl mb-1">{cat.icon}</div>
+              <div className="font-medium text-slate-900 text-sm">{cat.display_name || cat.name}</div>
+              <div className="text-sm text-slate-500">{count} Seeds</div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Seeds Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-slate-200">
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Status</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Name</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">URL</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Kategorie</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Trust</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Dokumente</th>
+              <th className="text-left py-3 px-4 font-medium text-slate-700">Aktionen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredSeeds.map(seed => (
+              <tr key={seed.id} className="border-b border-slate-100 hover:bg-slate-50">
+                <td className="py-3 px-4">
+                  <button
+                    onClick={() => onToggleEnabled(seed.id)}
+                    className={`w-10 h-6 rounded-full transition-colors ${
+                      seed.enabled ? 'bg-green-500' : 'bg-slate-300'
+                    }`}
+                  >
+                    <span className={`block w-4 h-4 bg-white rounded-full transform transition-transform ${
+                      seed.enabled ? 'translate-x-5' : 'translate-x-1'
+                    }`} />
+                  </button>
+                </td>
+                <td className="py-3 px-4">
+                  <div className="font-medium text-slate-900">{seed.name}</div>
+                  <div className="text-sm text-slate-500">{seed.description}</div>
+                </td>
+                <td className="py-3 px-4">
+                  <a href={seed.url} target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline text-sm">
+                    {seed.url.replace(/^https?:\/\/(www\.)?/, '').slice(0, 30)}...
+                  </a>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="inline-flex items-center gap-1 px-2 py-1 bg-slate-100 rounded text-sm">
+                    {categories.find(c => c.name === seed.category)?.icon || '📁'}
+                    {categories.find(c => c.name === seed.category)?.display_name || seed.category}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className={`inline-flex px-2 py-1 rounded text-sm font-medium ${
+                    seed.trustBoost >= 0.4 ? 'bg-green-100 text-green-700' :
+                    seed.trustBoost >= 0.2 ? 'bg-yellow-100 text-yellow-700' :
+                    'bg-slate-100 text-slate-700'
+                  }`}>
+                    +{seed.trustBoost.toFixed(2)}
+                  </span>
+                </td>
+                <td className="py-3 px-4 text-slate-600">
+                  {seed.documentCount?.toLocaleString() || '-'}
+                </td>
+                <td className="py-3 px-4">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => setEditingSeed(seed)}
+                      className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded"
+                      title="Bearbeiten"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => onDelete(seed.id)}
+                      className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded"
+                      title="Löschen"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {filteredSeeds.length === 0 && (
+        <div className="text-center py-12 text-slate-500">
+          Keine Seed-URLs gefunden
+        </div>
+      )}
+
+      {/* Modals */}
+      {(showAddModal || editingSeed) && (
+        <SeedModal
+          seed={editingSeed}
+          categories={categories}
+          onClose={() => {
+            setShowAddModal(false)
+            setEditingSeed(null)
+          }}
+          onSaved={onSaved}
+        />
+      )}
+    </div>
+  )
+}

website/app/admin/edu-search/_components/StatsTab.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import type { CrawlStats, Category } from '../types'
+
+export default function StatsTab({
+  stats,
+  categories,
+}: {
+  stats: CrawlStats
+  categories: Category[]
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Overview Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-5 text-white">
+          <div className="text-3xl font-bold">{stats.totalDocuments.toLocaleString()}</div>
+          <div className="text-blue-100">Dokumente indexiert</div>
+        </div>
+        <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-5 text-white">
+          <div className="text-3xl font-bold">{stats.totalSeeds}</div>
+          <div className="text-green-100">Seed-URLs aktiv</div>
+        </div>
+        <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-5 text-white">
+          <div className="text-3xl font-bold">{(stats.avgTrustScore * 100).toFixed(0)}%</div>
+          <div className="text-purple-100">Ø Trust-Score</div>
+        </div>
+        <div className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-5 text-white">
+          <div className="text-3xl font-bold">{Object.keys(stats.documentsPerDocType).length}</div>
+          <div className="text-orange-100">Dokumenttypen</div>
+        </div>
+      </div>
+
+      {/* Charts */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white border border-slate-200 rounded-lg p-6">
+          <h4 className="font-semibold text-slate-900 mb-4">Dokumente nach Kategorie</h4>
+          <div className="space-y-3">
+            {Object.entries(stats.documentsPerCategory).map(([cat, count]) => {
+              const category = categories.find(c => c.name === cat)
+              const percentage = stats.totalDocuments > 0 ? (count / stats.totalDocuments) * 100 : 0
+              return (
+                <div key={cat}>
+                  <div className="flex justify-between text-sm mb-1">
+                    <span>{category?.icon || '📁'} {category?.display_name || cat}</span>
+                    <span className="text-slate-500">{count.toLocaleString()} ({percentage.toFixed(1)}%)</span>
+                  </div>
+                  <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-primary-500 rounded-full"
+                      style={{ width: `${percentage}%` }}
+                    />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="bg-white border border-slate-200 rounded-lg p-6">
+          <h4 className="font-semibold text-slate-900 mb-4">Dokumente nach Typ</h4>
+          <div className="space-y-3">
+            {Object.entries(stats.documentsPerDocType)
+              .sort(([,a], [,b]) => b - a)
+              .slice(0, 6)
+              .map(([docType, count]) => {
+                const percentage = (count / stats.totalDocuments) * 100
+                return (
+                  <div key={docType}>
+                    <div className="flex justify-between text-sm mb-1">
+                      <span>{docType.replace(/_/g, ' ')}</span>
+                      <span className="text-slate-500">{count.toLocaleString()} ({percentage.toFixed(1)}%)</span>
+                    </div>
+                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-green-500 rounded-full"
+                        style={{ width: `${percentage}%` }}
+                      />
+                    </div>
+                  </div>
+                )
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}