375b34a0d8
Agent-completed splits committed after agents hit rate limits before committing their work. All 4 pages now under 500 LOC: - consent-management: 1303 -> 193 LOC (+ 7 _components, _hooks, _data, _types) - control-library: 1210 -> 298 LOC (+ _components, _types) - incidents: 1150 -> 373 LOC (+ _components) - training: 1127 -> 366 LOC (+ _components) Verification: next build clean (142 pages generated). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
export function ApiTemplateEditor({
|
|
template,
|
|
saving,
|
|
onSave,
|
|
onPreview,
|
|
}: {
|
|
template: { id: string; template_key: string; subject: string; body: string; language: string; is_active: boolean }
|
|
saving: boolean
|
|
onSave: (subject: string, body: string) => void
|
|
onPreview: (subject: string, body: string) => void
|
|
}) {
|
|
const [subject, setSubject] = useState(template.subject)
|
|
const [body, setBody] = useState(template.body)
|
|
const [expanded, setExpanded] = useState(false)
|
|
|
|
return (
|
|
<div className="border border-slate-200 rounded-lg bg-white overflow-hidden">
|
|
<div className="p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className={`w-2.5 h-2.5 rounded-full ${template.is_active ? 'bg-green-400' : 'bg-slate-300'}`} />
|
|
<div>
|
|
<span className="font-medium text-slate-900 font-mono text-sm">{template.template_key}</span>
|
|
<p className="text-sm text-slate-500 truncate max-w-xs">{subject}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs uppercase">{template.language}</span>
|
|
<button
|
|
onClick={() => onPreview(subject, body)}
|
|
className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400"
|
|
>
|
|
Vorschau
|
|
</button>
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400"
|
|
>
|
|
{expanded ? 'Schliessen' : 'Bearbeiten'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{expanded && (
|
|
<div className="border-t border-slate-200 p-4 space-y-3 bg-slate-50">
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-700 mb-1">Betreff</label>
|
|
<input
|
|
type="text"
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-700 mb-1">Inhalt</label>
|
|
<textarea
|
|
value={body}
|
|
onChange={(e) => setBody(e.target.value)}
|
|
rows={8}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono"
|
|
/>
|
|
</div>
|
|
<div className="bg-white rounded-lg p-3 border border-slate-200">
|
|
<div className="text-xs font-medium text-slate-500 mb-1">Verfuegbare Platzhalter:</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{['{{name}}', '{{email}}', '{{date}}', '{{deadline}}', '{{company}}'].map(v => (
|
|
<span key={v} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs font-mono">{v}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={() => onSave(subject, body)}
|
|
disabled={saving}
|
|
className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-60"
|
|
>
|
|
{saving ? 'Speichern...' : 'Speichern'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|