ffae41237e
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>
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
'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>
|
|
)
|
|
}
|