Celes Renata
64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate } from '@tanstack/react-router';
|
|
import { useDocuments } from '../api/hooks';
|
|
import { DataTable, type Column } from '../components/DataTable';
|
|
import { StatusBadge, LoadingSpinner, TickerFilter } from '../components/ui';
|
|
import type { Document } from '../api/hooks';
|
|
|
|
const STATUS_OPTIONS = ['', 'extracted', 'parsed', 'extraction_failed', 'low_quality'] as const;
|
|
|
|
export function DocumentsPage() {
|
|
const navigate = useNavigate();
|
|
const [ticker, setTicker] = useState('');
|
|
const [status, setStatus] = useState('');
|
|
const { data, isLoading, error } = useDocuments({
|
|
ticker: ticker || undefined,
|
|
status: status || undefined,
|
|
limit: 100,
|
|
});
|
|
|
|
const columns: Column<Document>[] = [
|
|
{ key: 'title', header: 'Title', render: (r) => <span className="line-clamp-1 max-w-xs">{r.title ?? '—'}</span> },
|
|
{ key: 'document_type', header: 'Type' },
|
|
{ key: 'source_type', header: 'Source' },
|
|
{ key: 'published_at', header: 'Published', render: (r) => <span className="text-xs">{r.published_at ? new Date(r.published_at).toLocaleDateString() : '—'}</span> },
|
|
{ key: 'parse_confidence', header: 'Parse Quality', render: (r) => <StatusBadge status={r.parse_confidence ?? 'unknown'} /> },
|
|
{ key: 'status', header: 'Status', render: (r) => <StatusBadge status={r.status} /> },
|
|
];
|
|
|
|
if (isLoading) return <LoadingSpinner />;
|
|
if (error) return <div className="text-red-400">Failed to load documents</div>;
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h1 className="text-xl font-semibold text-gray-100">Documents</h1>
|
|
<div className="flex items-center gap-3">
|
|
<select
|
|
value={status}
|
|
onChange={(e) => setStatus(e.target.value)}
|
|
className="rounded-md border border-surface-700 bg-surface-900 px-3 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
|
|
aria-label="Filter by status"
|
|
>
|
|
<option value="">All statuses</option>
|
|
{STATUS_OPTIONS.filter(Boolean).map((s) => (
|
|
<option key={s} value={s}>{s}</option>
|
|
))}
|
|
</select>
|
|
<TickerFilter value={ticker} onChange={setTicker} />
|
|
</div>
|
|
</div>
|
|
<DataTable<Document>
|
|
data={data ?? []}
|
|
columns={columns}
|
|
keyField="id"
|
|
onRowClick={(row) => navigate({ to: '/documents/$id', params: { id: row.id } })}
|
|
filterFn={(row, q) => {
|
|
const lq = q.toLowerCase();
|
|
return (row.title ?? '').toLowerCase().includes(lq) || row.document_type.toLowerCase().includes(lq);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|