Add category and tags granularity to company sync flows
This commit is contained in:
@@ -275,6 +275,21 @@ function AnalysisPageContent() {
|
||||
<p className="text-xl font-semibold text-[color:var(--terminal-bright)]">{analysis?.company.companyName ?? ticker}</p>
|
||||
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis?.company.ticker ?? ticker}</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.company.sector ?? 'Sector unavailable'}</p>
|
||||
{analysis?.company.category ? (
|
||||
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis.company.category}</p>
|
||||
) : null}
|
||||
{analysis?.company.tags.length ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{analysis.company.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</Panel>
|
||||
|
||||
<Panel title="Live Price">
|
||||
|
||||
@@ -47,6 +47,21 @@ function hasFinancialSnapshot(filing: Filing) {
|
||||
return filing.filing_type === '10-K' || filing.filing_type === '10-Q';
|
||||
}
|
||||
|
||||
function parseTagsInput(input: string) {
|
||||
const unique = new Set<string>();
|
||||
|
||||
for (const segment of input.split(',')) {
|
||||
const tag = segment.trim();
|
||||
if (!tag) {
|
||||
continue;
|
||||
}
|
||||
|
||||
unique.add(tag);
|
||||
}
|
||||
|
||||
return [...unique];
|
||||
}
|
||||
|
||||
function asScaledFinancialSnapshot(
|
||||
value: number | null | undefined,
|
||||
scale: NumberScaleUnit
|
||||
@@ -111,6 +126,8 @@ function FilingsPageContent() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [syncTickerInput, setSyncTickerInput] = useState('');
|
||||
const [syncCategoryInput, setSyncCategoryInput] = useState('');
|
||||
const [syncTagsInput, setSyncTagsInput] = useState('');
|
||||
const [filterTickerInput, setFilterTickerInput] = useState('');
|
||||
const [searchTicker, setSearchTicker] = useState('');
|
||||
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
|
||||
@@ -156,7 +173,12 @@ function FilingsPageContent() {
|
||||
}
|
||||
|
||||
try {
|
||||
await queueFilingSync({ ticker: syncTickerInput.trim().toUpperCase(), limit: 20 });
|
||||
await queueFilingSync({
|
||||
ticker: syncTickerInput.trim().toUpperCase(),
|
||||
limit: 20,
|
||||
category: syncCategoryInput.trim() || undefined,
|
||||
tags: parseTagsInput(syncTagsInput)
|
||||
});
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: ['filings'] });
|
||||
await loadFilings(searchTicker || undefined);
|
||||
@@ -227,6 +249,18 @@ function FilingsPageContent() {
|
||||
placeholder="Ticker (AAPL)"
|
||||
className="w-full sm:max-w-xs"
|
||||
/>
|
||||
<Input
|
||||
value={syncCategoryInput}
|
||||
onChange={(event) => setSyncCategoryInput(event.target.value)}
|
||||
placeholder="Category (optional)"
|
||||
className="w-full sm:max-w-xs"
|
||||
/>
|
||||
<Input
|
||||
value={syncTagsInput}
|
||||
onChange={(event) => setSyncTagsInput(event.target.value)}
|
||||
placeholder="Tags (comma-separated)"
|
||||
className="w-full sm:max-w-xs"
|
||||
/>
|
||||
<Button type="submit" className="w-full sm:w-auto">
|
||||
<Download className="size-4" />
|
||||
Queue sync
|
||||
|
||||
@@ -19,8 +19,25 @@ type FormState = {
|
||||
ticker: string;
|
||||
companyName: string;
|
||||
sector: string;
|
||||
category: string;
|
||||
tags: string;
|
||||
};
|
||||
|
||||
function parseTagsInput(input: string) {
|
||||
const unique = new Set<string>();
|
||||
|
||||
for (const segment of input.split(',')) {
|
||||
const tag = segment.trim();
|
||||
if (!tag) {
|
||||
continue;
|
||||
}
|
||||
|
||||
unique.add(tag);
|
||||
}
|
||||
|
||||
return [...unique];
|
||||
}
|
||||
|
||||
export default function WatchlistPage() {
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -29,7 +46,13 @@ export default function WatchlistPage() {
|
||||
const [items, setItems] = useState<WatchlistItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [form, setForm] = useState<FormState>({ ticker: '', companyName: '', sector: '' });
|
||||
const [form, setForm] = useState<FormState>({
|
||||
ticker: '',
|
||||
companyName: '',
|
||||
sector: '',
|
||||
category: '',
|
||||
tags: ''
|
||||
});
|
||||
|
||||
const loadWatchlist = useCallback(async () => {
|
||||
const options = watchlistQueryOptions();
|
||||
@@ -63,10 +86,18 @@ export default function WatchlistPage() {
|
||||
await upsertWatchlistItem({
|
||||
ticker: form.ticker.toUpperCase(),
|
||||
companyName: form.companyName,
|
||||
sector: form.sector || undefined
|
||||
sector: form.sector || undefined,
|
||||
category: form.category || undefined,
|
||||
tags: parseTagsInput(form.tags)
|
||||
});
|
||||
|
||||
setForm({ ticker: '', companyName: '', sector: '' });
|
||||
setForm({
|
||||
ticker: '',
|
||||
companyName: '',
|
||||
sector: '',
|
||||
category: '',
|
||||
tags: ''
|
||||
});
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.watchlist() });
|
||||
await loadWatchlist();
|
||||
} catch (err) {
|
||||
@@ -74,13 +105,18 @@ export default function WatchlistPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const queueSync = async (ticker: string) => {
|
||||
const queueSync = async (item: WatchlistItem) => {
|
||||
try {
|
||||
await queueFilingSync({ ticker, limit: 20 });
|
||||
await queueFilingSync({
|
||||
ticker: item.ticker,
|
||||
limit: 20,
|
||||
category: item.category ?? undefined,
|
||||
tags: item.tags.length > 0 ? item.tags : undefined
|
||||
});
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: ['filings'] });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : `Failed to queue sync for ${ticker}`);
|
||||
setError(err instanceof Error ? err.message : `Failed to queue sync for ${item.ticker}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -106,15 +142,30 @@ export default function WatchlistPage() {
|
||||
<article key={item.id} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">{item.sector ?? 'Unclassified'}</p>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
|
||||
{item.sector ?? 'Unclassified'}
|
||||
{item.category ? ` · ${item.category}` : ''}
|
||||
</p>
|
||||
<h3 className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">{item.ticker}</h3>
|
||||
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{item.company_name}</p>
|
||||
{item.tags.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{item.tags.map((tag) => (
|
||||
<span
|
||||
key={`${item.id}-${tag}`}
|
||||
className="rounded border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Eye className="size-4 text-[color:var(--accent)]" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
<Button variant="secondary" className="px-2 py-1 text-xs" onClick={() => void queueSync(item.ticker)}>
|
||||
<Button variant="secondary" className="px-2 py-1 text-xs" onClick={() => void queueSync(item)}>
|
||||
Sync filings
|
||||
</Button>
|
||||
<Link
|
||||
@@ -172,6 +223,14 @@ export default function WatchlistPage() {
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Sector</label>
|
||||
<Input value={form.sector} onChange={(event) => setForm((prev) => ({ ...prev, sector: event.target.value }))} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Category</label>
|
||||
<Input value={form.category} onChange={(event) => setForm((prev) => ({ ...prev, category: event.target.value }))} placeholder="e.g. Core, Speculative, Watch only" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Tags</label>
|
||||
<Input value={form.tags} onChange={(event) => setForm((prev) => ({ ...prev, tags: event.target.value }))} placeholder="Comma-separated tags" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full">
|
||||
<Plus className="size-4" />
|
||||
Save symbol
|
||||
|
||||
Reference in New Issue
Block a user