This commit is contained in:
2025-09-17 19:32:40 -05:00
parent 6d12e7e151
commit 2cac2af5ab
9 changed files with 395 additions and 135 deletions

View File

@@ -40,7 +40,11 @@ export default function Emails() {
if (!res.ok) throw new Error('Failed to fetch emails');
return res.json();
})
.then(setEmails)
.then(data => {
// Sortiere nach date descending
const sorted = data.sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
setEmails(sorted);
})
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, [bucket, mailbox]);
@@ -48,6 +52,11 @@ export default function Emails() {
if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-100">Loading...</div>;
if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-100 text-red-500">{error}</div>;
const formatDate = (dateStr: string) => {
const date = new Date(dateStr);
return date.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
};
const handleResendAll = async () => {
const auth = localStorage.getItem('auth');
if (!auth) return setMessage('Not authenticated');
@@ -87,32 +96,45 @@ export default function Emails() {
};
return (
<div className="min-h-screen bg-gray-100 p-8">
<h1 className="text-3xl font-bold mb-6 text-center">Emails for {mailbox} in {bucket}</h1>
<div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-8">
<nav className="max-w-4xl 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">
<li><Link href="/" className="hover:text-blue-600">Home</Link></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 className="mx-1">/</li>
<li className="font-semibold text-gray-700">Emails</li>
</ol>
</nav>
<h1 className="text-4xl font-bold mb-8 text-center text-gray-800">Emails for {mailbox} in {bucket}</h1>
<div className="flex justify-center mb-6">
<button
onClick={handleResendAll}
className="bg-green-500 text-white px-6 py-3 rounded hover:bg-green-600 transition"
className="bg-green-500 text-white px-8 py-3 rounded-lg hover:bg-green-600 transition shadow-md"
>
Resend all unprocessed
</button>
</div>
{message && <p className="text-center mb-4 text-blue-500">{message}</p>}
{message && <p className="text-center mb-6 text-blue-600 font-medium">{message}</p>}
<div className="overflow-x-auto max-w-4xl mx-auto bg-white rounded-lg shadow-md">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<thead className="bg-blue-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Processed</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Subject</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Date</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">S3 Key</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Processed</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{emails.map((e: Email) => (
<tr key={e.key} className="hover:bg-gray-50 transition">
<tr key={e.key} className="hover:bg-blue-50 transition">
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{e.subject}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{e.date}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(e.date)}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 truncate max-w-xs">{e.key}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<input
type="checkbox"
@@ -122,7 +144,7 @@ export default function Emails() {
/>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<Link href={`/email?bucket=${bucket}&key=${e.key}`} className="text-blue-600 hover:text-blue-900 mr-4">
<Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-900 mr-4">
View
</Link>
<button onClick={() => handleResend(e.key)} className="text-green-600 hover:text-green-900">