202 lines
8.4 KiB
TypeScript
202 lines
8.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { api } from '@/lib/api';
|
|
import Navbar from '@/components/Navbar';
|
|
import { Mail, Loader2, ExternalLink, CheckCircle, XCircle, Clock, Shield } from 'lucide-react';
|
|
|
|
interface MailEmail {
|
|
id: number;
|
|
account: string;
|
|
sender_email: string;
|
|
sender_domain: string;
|
|
subject: string;
|
|
received_at: string;
|
|
llm_verdict: 'important' | 'not_important';
|
|
notified_at: string | null;
|
|
feedback: 'important' | 'not_important' | 'never_notify' | 'always_notify' | null;
|
|
feedback_at: string | null;
|
|
feedback_token: string | null;
|
|
}
|
|
|
|
const FEEDBACK_LABELS: Record<string, string> = {
|
|
important: '重要だった',
|
|
not_important: '普通のメール',
|
|
never_notify: '通知しない',
|
|
always_notify: '常に通知',
|
|
};
|
|
|
|
const ACCOUNT_LABELS: Record<string, string> = {
|
|
gmail: 'Gmail',
|
|
hotmail: 'Hotmail',
|
|
xserver: 'Xserver',
|
|
gmail_service: 'Gmail (サービス用)',
|
|
};
|
|
|
|
export default function MailHistoryPage() {
|
|
const router = useRouter();
|
|
const [emails, setEmails] = useState<MailEmail[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filterAccount, setFilterAccount] = useState('');
|
|
const [filterVerdict, setFilterVerdict] = useState('');
|
|
|
|
useEffect(() => {
|
|
const fetchEmails = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (filterAccount) params.set('account', filterAccount);
|
|
if (filterVerdict) params.set('verdict', filterVerdict);
|
|
const res = await api.get(`/mail/emails/?${params.toString()}`);
|
|
setEmails(res.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch emails:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchEmails();
|
|
}, [filterAccount, filterVerdict]);
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleString('ja-JP', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Navbar />
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* ヘッダー */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<Mail className="h-6 w-6 text-blue-600" />
|
|
<h1 className="text-2xl font-bold text-gray-900">メール処理履歴</h1>
|
|
</div>
|
|
<button
|
|
onClick={() => router.push('/mail/rules')}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-gray-700"
|
|
>
|
|
<Shield className="h-4 w-4" />
|
|
ルール管理
|
|
</button>
|
|
</div>
|
|
|
|
{/* フィルター */}
|
|
<div className="bg-white rounded-lg shadow p-4 mb-4 flex gap-3">
|
|
<select
|
|
value={filterAccount}
|
|
onChange={(e) => setFilterAccount(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 rounded-md text-sm"
|
|
>
|
|
<option value="">全アカウント</option>
|
|
<option value="gmail">Gmail</option>
|
|
<option value="hotmail">Hotmail</option>
|
|
<option value="xserver">Xserver</option>
|
|
<option value="gmail_service">Gmail (サービス用)</option>
|
|
</select>
|
|
<select
|
|
value={filterVerdict}
|
|
onChange={(e) => setFilterVerdict(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 rounded-md text-sm"
|
|
>
|
|
<option value="">全判定</option>
|
|
<option value="important">重要</option>
|
|
<option value="not_important">通常</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* テーブル */}
|
|
{loading ? (
|
|
<div className="flex justify-center py-16">
|
|
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
|
</div>
|
|
) : emails.length === 0 ? (
|
|
<div className="text-center py-16 text-gray-500">処理済みメールはありません</div>
|
|
) : (
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 text-gray-500 font-medium whitespace-nowrap">受信日時</th>
|
|
<th className="text-left px-4 py-3 text-gray-500 font-medium">送信者</th>
|
|
<th className="text-left px-4 py-3 text-gray-500 font-medium">件名</th>
|
|
<th className="text-center px-4 py-3 text-gray-500 font-medium whitespace-nowrap">LLM判定</th>
|
|
<th className="text-center px-4 py-3 text-gray-500 font-medium whitespace-nowrap">フィードバック</th>
|
|
<th className="text-center px-4 py-3 text-gray-500 font-medium"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{emails.map((email) => (
|
|
<tr key={email.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 text-gray-600 whitespace-nowrap">
|
|
<div>{formatDate(email.received_at)}</div>
|
|
<div className="text-xs text-gray-400">{ACCOUNT_LABELS[email.account] ?? email.account}</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="text-gray-900 text-xs truncate max-w-[180px]">{email.sender_email}</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-900 max-w-xs">
|
|
<div className="truncate">{email.subject}</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{email.llm_verdict === 'important' ? (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-red-50 text-red-700 text-xs font-medium">
|
|
<CheckCircle className="h-3 w-3" />重要
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-gray-100 text-gray-500 text-xs">
|
|
<XCircle className="h-3 w-3" />通常
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{email.feedback ? (
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
email.feedback === 'important' ? 'bg-green-50 text-green-700' :
|
|
email.feedback === 'not_important' ? 'bg-gray-100 text-gray-600' :
|
|
email.feedback === 'never_notify' ? 'bg-orange-50 text-orange-700' :
|
|
'bg-blue-50 text-blue-700'
|
|
}`}>
|
|
{FEEDBACK_LABELS[email.feedback] ?? email.feedback}
|
|
</span>
|
|
) : email.llm_verdict === 'important' ? (
|
|
<span className="inline-flex items-center gap-1 text-amber-500 text-xs">
|
|
<Clock className="h-3 w-3" />未回答
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-400 text-xs">—</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{email.feedback_token && (
|
|
<a
|
|
href={`/mail/feedback/${email.feedback_token}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 text-xs"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
回答
|
|
</a>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<div className="px-4 py-3 text-xs text-gray-400 border-t border-gray-100">
|
|
最新100件を表示
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|