fixes
This commit is contained in:
parent
3dce4dace1
commit
9702bd6768
|
|
@ -9,7 +9,7 @@ interface Email {
|
||||||
subject: string;
|
subject: string;
|
||||||
date: string;
|
date: string;
|
||||||
processed: string;
|
processed: string;
|
||||||
processedAt: string | null;
|
processedAt: string | null; // Wird nicht mehr angezeigt, aber im Interface belassen
|
||||||
processedBy: string | null;
|
processedBy: string | null;
|
||||||
queuedTo: string | null;
|
queuedTo: string | null;
|
||||||
status: string | null;
|
status: string | null;
|
||||||
|
|
@ -51,100 +51,122 @@ export default function Emails() {
|
||||||
.finally(() => setLoading(false));
|
.finally(() => setLoading(false));
|
||||||
}, [bucket, mailbox]);
|
}, [bucket, mailbox]);
|
||||||
|
|
||||||
if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-100">Loading...</div>;
|
if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-50">Loading...</div>;
|
||||||
if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-100 text-red-500">{error}</div>;
|
if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-50 text-red-500">{error}</div>;
|
||||||
|
|
||||||
const formatDate = (dateStr: string | null) => {
|
const formatDate = (dateStr: string | null) => {
|
||||||
if (!dateStr) return 'N/A';
|
if (!dateStr) return '';
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
return date.toLocaleString('en-US', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
|
// Kompaktes Datum formatieren
|
||||||
|
return date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// DEFINITION DES GRID LAYOUTS
|
||||||
|
// 1fr = Subject (nimmt den Rest)
|
||||||
|
// auto = Passt sich exakt der Breite des Inhalts an (für Key, Date, etc.)
|
||||||
|
const gridLayoutClass = "grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto_auto] gap-x-4 items-center";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// 1. "w-full" statt fixer max-width, um den ganzen Schirm zu nutzen
|
<div className="min-h-screen bg-gray-50 p-4">
|
||||||
<div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-4 md:p-8">
|
<nav className="w-full mb-6 bg-white p-3 rounded shadow-sm border border-gray-100">
|
||||||
<nav className="w-full mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
|
|
||||||
<ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
|
<ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
|
||||||
|
{/* Breadcrumbs verkürzt für Übersichtlichkeit */}
|
||||||
<li><Link href="/" className="hover:text-blue-600">Home</Link></li>
|
<li><Link href="/" className="hover:text-blue-600">Home</Link></li>
|
||||||
<li className="mx-1">/</li>
|
<li className="mx-1">/</li>
|
||||||
<li><Link href="/domains" className="hover:text-blue-600">Domains</Link></li>
|
|
||||||
<li className="mx-1">/</li>
|
|
||||||
<li><Link href={`/mailboxes?bucket=${bucket}`} className="hover:text-blue-600">Mailboxes</Link></li>
|
<li><Link href={`/mailboxes?bucket=${bucket}`} className="hover:text-blue-600">Mailboxes</Link></li>
|
||||||
<li className="mx-1">/</li>
|
<li className="mx-1">/</li>
|
||||||
<li className="font-semibold text-gray-700">Emails</li>
|
<li className="font-semibold text-gray-700">Emails</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
<h1 className="text-3xl font-bold mb-8 text-center text-gray-800">Emails for {mailbox} in {bucket}</h1>
|
|
||||||
|
|
||||||
{/* Container für die Tabelle */}
|
<h1 className="text-2xl font-bold mb-6 text-gray-800 break-all">
|
||||||
<div className="w-full bg-white rounded-lg shadow-md overflow-hidden">
|
{mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
{/* 2. "table-fixed": Zwingt die Tabelle, die definierten Breiten einzuhalten
|
{/* Container - overflow-x-auto erlaubt Scrollen nur wenn der Key GIGANTISCH ist und den Bildschirm sprengt */}
|
||||||
und Texte abzuschneiden, statt die Tabelle zu verbreitern.
|
<div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-x-auto">
|
||||||
*/}
|
<div className="min-w-fit">
|
||||||
<table className="w-full table-fixed divide-y divide-gray-200 text-xs md:text-sm">
|
|
||||||
<thead className="bg-blue-50">
|
|
||||||
<tr>
|
|
||||||
{/* Subject bekommt keine feste Breite -> nimmt den verfügbaren Platz */}
|
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-auto">Subject</th>
|
|
||||||
|
|
||||||
{/* Anderen Spalten geben wir feste Breiten (w-...), damit sie gut aussehen */}
|
{/* HEADER */}
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Date</th>
|
<div className={`${gridLayoutClass} px-4 py-3 bg-gray-100 border-b border-gray-200 text-xs font-semibold text-gray-600 uppercase tracking-wider`}>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20 md:w-24">Key</th>
|
<div>Subject</div>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Proc.</th>
|
<div className="whitespace-nowrap">Date</div>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Proc. At</th>
|
<div>Key</div>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Proc. By</th>
|
<div className="text-center">Proc.</div>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Queued</th>
|
{/* Proc At entfernt */}
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Status</th>
|
<div>Proc. By</div>
|
||||||
<th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Act</th>
|
<div>Queued</div>
|
||||||
</tr>
|
<div>Status</div>
|
||||||
</thead>
|
<div className="text-right">Action</div>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
</div>
|
||||||
|
|
||||||
|
{/* ROWS */}
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
{emails.length === 0 ? (
|
{emails.length === 0 ? (
|
||||||
<tr>
|
<div className="p-8 text-center text-gray-500">No emails found</div>
|
||||||
<td colSpan={9} className="px-4 py-8 text-center text-gray-500">No emails found</td>
|
|
||||||
</tr>
|
|
||||||
) : emails.map((e: Email) => (
|
) : emails.map((e: Email) => (
|
||||||
<tr key={e.key} className="hover:bg-blue-50 transition">
|
<div key={e.key} className={`${gridLayoutClass} px-4 py-2 hover:bg-blue-50 transition-colors text-sm`}>
|
||||||
|
|
||||||
{/* 3. Subject Cell:
|
{/* 1. Subject: truncate sorgt für "..." am Ende, min-w-0 ist wichtig für Grid Truncation */}
|
||||||
"truncate" macht "..." wenn der Text zu lang ist.
|
<div className="font-medium text-gray-900 truncate min-w-0 pr-4" title={e.subject}>
|
||||||
"title" zeigt den vollen Text beim Hovern an.
|
|
||||||
*/}
|
|
||||||
<td className="px-2 py-3 text-gray-900 truncate" title={e.subject}>
|
|
||||||
{e.subject}
|
{e.subject}
|
||||||
</td>
|
</div>
|
||||||
|
|
||||||
<td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.date)}</td>
|
{/* 2. Date: Fixed width content via whitespace-nowrap */}
|
||||||
<td className="px-2 py-3 text-gray-900 truncate" title={e.key}>{e.key}</td>
|
<div className="whitespace-nowrap text-gray-500 text-xs">
|
||||||
<td className="px-2 py-3">
|
{formatDate(e.date)}
|
||||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
|
</div>
|
||||||
|
|
||||||
|
{/* 3. Key: Monospace Font, volle Sichtbarkeit, selektierbar */}
|
||||||
|
<div className="font-mono text-xs text-gray-600 select-all">
|
||||||
|
{e.key}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 4. Processed: Kurz */}
|
||||||
|
<div className="text-center">
|
||||||
|
<span className={`inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium ${
|
||||||
|
e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
|
||||||
|
}`}>
|
||||||
{e.processed === 'true' ? 'Y' : 'N'}
|
{e.processed === 'true' ? 'Y' : 'N'}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</div>
|
||||||
<td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.processedAt)}</td>
|
|
||||||
<td className="px-2 py-3 text-gray-500 truncate" title={e.processedBy || ''}>{e.processedBy || '-'}</td>
|
{/* Proc At entfernt */}
|
||||||
<td className="px-2 py-3 text-gray-500 truncate" title={e.queuedTo || ''}>{e.queuedTo || '-'}</td>
|
|
||||||
<td className="px-2 py-3 truncate">
|
{/* 5. Processed By: Auto width */}
|
||||||
|
<div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.processedBy || ''}>
|
||||||
|
{e.processedBy ? e.processedBy.split('@')[0] : '-'}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 6. Queued: Auto width */}
|
||||||
|
<div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.queuedTo || ''}>
|
||||||
|
{e.queuedTo || '-'}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 7. Status */}
|
||||||
|
<div className="whitespace-nowrap">
|
||||||
{e.status ? (
|
{e.status ? (
|
||||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
<span className={`text-xs ${
|
||||||
e.status === 'delivered' ? 'bg-green-100 text-green-800' :
|
e.status === 'delivered' ? 'text-green-600' :
|
||||||
e.status === 'failed' ? 'bg-red-100 text-red-800' :
|
e.status === 'failed' ? 'text-red-600' :
|
||||||
'bg-gray-100 text-gray-800'
|
'text-gray-500'
|
||||||
}`}>
|
}`}>
|
||||||
{e.status}
|
{e.status}
|
||||||
</span>
|
</span>
|
||||||
) : '-'}
|
) : <span className="text-gray-300">-</span>}
|
||||||
</td>
|
</div>
|
||||||
<td className="px-2 py-3 font-medium text-center">
|
|
||||||
<Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-900">
|
{/* 8. Action: Rechtsbündig aligned mit Header */}
|
||||||
|
<div className="text-right font-medium">
|
||||||
|
<Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
|
||||||
View
|
View
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue