changes
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user