admin/stonks-oracle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add status colors for document pipeline stages, add status filter to documents page

Browse Source
This commit is contained in:
Celes Renata
2026-04-16 08:06:12 +00:00
parent 87579d68da
commit 0b1640abb9
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui.tsx
+7
View File
@@ -17,10 +17,14 @@ const statusColors: Record<string, string> = {
active: 'bg-green-900/40 text-green-400 border-green-700/50',
approved: 'bg-green-900/40 text-green-400 border-green-700/50',
filled: 'bg-green-900/40 text-green-400 border-green-700/50',
extracted: 'bg-green-900/40 text-green-400 border-green-700/50',
running: 'bg-blue-900/40 text-blue-400 border-blue-700/50',
pending: 'bg-yellow-900/40 text-yellow-400 border-yellow-700/50',
parsed: 'bg-yellow-900/40 text-yellow-400 border-yellow-700/50',
failed: 'bg-red-900/40 text-red-400 border-red-700/50',
rejected: 'bg-red-900/40 text-red-400 border-red-700/50',
extraction_failed: 'bg-red-900/40 text-red-400 border-red-700/50',
low_quality: 'bg-orange-900/40 text-orange-400 border-orange-700/50',
cancelled: 'bg-gray-800/40 text-gray-400 border-gray-700/50',
disabled: 'bg-gray-800/40 text-gray-400 border-gray-700/50',
paper: 'bg-purple-900/40 text-purple-400 border-purple-700/50',
@@ -29,6 +33,9 @@ const statusColors: Record<string, string> = {
sell: 'bg-red-900/40 text-red-400 border-red-700/50',
hold: 'bg-yellow-900/40 text-yellow-400 border-yellow-700/50',
watch: 'bg-blue-900/40 text-blue-400 border-blue-700/50',
high: 'bg-green-900/40 text-green-400 border-green-700/50',
medium: 'bg-yellow-900/40 text-yellow-400 border-yellow-700/50',
low: 'bg-red-900/40 text-red-400 border-red-700/50',
};
export function StatusBadge({ status }: { status: string | null | undefined }) {
frontend/src/pages/Documents.tsx
+22 -2
View File
@@ -5,10 +5,17 @@ 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 { data, isLoading, error } = useDocuments({ ticker: ticker || undefined, limit: 100 });
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> },
@@ -26,7 +33,20 @@ export function DocumentsPage() {
<div>
<div className="mb-4 flex items-center justify-between">
<h1 className="text-xl font-semibold text-gray-100">Documents</h1>
<TickerFilter value={ticker} onChange={setTicker} />
<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 ?? []}