79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { getLogs, getLogsByEntity } from '../api/logsApi'
|
|
import { getEntities } from '../api/entitiesApi'
|
|
|
|
export default function LogsPage() {
|
|
const [selectedEntityId, setSelectedEntityId] = useState<string>('')
|
|
|
|
const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
|
|
const { data: logs = [] } = useQuery({
|
|
queryKey: ['logs', selectedEntityId],
|
|
queryFn: () => selectedEntityId ? getLogsByEntity(selectedEntityId) : getLogs(),
|
|
})
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-slate-100">Dispatch Logs</h1>
|
|
<select
|
|
value={selectedEntityId}
|
|
onChange={(e) => setSelectedEntityId(e.target.value)}
|
|
className="rounded border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100"
|
|
>
|
|
<option value="">All Entities</option>
|
|
{entities.map((entity) => (
|
|
<option key={entity.id} value={entity.id}>
|
|
{entity.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="mt-6 overflow-hidden rounded-lg border border-slate-800 bg-slate-900/70 shadow-sm">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-800/50 text-left text-xs font-medium uppercase tracking-wide text-slate-400">
|
|
<tr>
|
|
<th className="px-4 py-3">Subject</th>
|
|
<th className="px-4 py-3">Entity</th>
|
|
<th className="px-4 py-3">Status</th>
|
|
<th className="px-4 py-3">Dispatched At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800">
|
|
{logs.map((log) => (
|
|
<tr key={log.id}>
|
|
<td className="px-4 py-3 font-medium text-slate-100">{log.emailSubject}</td>
|
|
<td className="px-4 py-3 text-slate-400">{log.entityName}</td>
|
|
<td className="px-4 py-3">
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
log.status === 'SENT'
|
|
? 'bg-green-900/40 text-green-400'
|
|
: log.status === 'FAILED'
|
|
? 'bg-red-900/40 text-red-400'
|
|
: 'bg-yellow-900/40 text-yellow-400'
|
|
}`}
|
|
>
|
|
{log.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-slate-500">
|
|
{new Date(log.dispatchedAt).toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{logs.length === 0 && (
|
|
<tr>
|
|
<td colSpan={4} className="px-4 py-6 text-center text-slate-400">
|
|
No logs found.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|