feat: rebuild fiscal clone architecture and harden coolify deployment
This commit is contained in:
@@ -1,17 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import { signIn, useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 0;
|
||||
|
||||
export default function SignIn() {
|
||||
const { data: session, isPending: sessionPending } = useSession();
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { signIn, useSession } from '@/lib/better-auth';
|
||||
import { AuthShell } from '@/components/auth/auth-shell';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function SignInPage() {
|
||||
const router = useRouter();
|
||||
const { data: session, isPending: sessionPending } = useSession();
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionPending && session?.user) {
|
||||
@@ -19,91 +26,64 @@ export default function SignIn() {
|
||||
}
|
||||
}, [sessionPending, session, router]);
|
||||
|
||||
const handleCredentialsLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await signIn.email({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
const result = await signIn.email({ email, password });
|
||||
|
||||
if (result.error) {
|
||||
setError(result.error.message || 'Invalid credentials');
|
||||
return;
|
||||
} else {
|
||||
router.replace('/');
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
router.replace('/');
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError('Login failed');
|
||||
} catch {
|
||||
setError('Sign in failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4">
|
||||
<div className="max-w-md w-full bg-slate-800/50 rounded-lg p-8 border border-slate-700">
|
||||
<h1 className="text-3xl font-bold text-center mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
</h1>
|
||||
<p className="text-slate-400 text-center mb-8">Sign in to your account</p>
|
||||
<AuthShell
|
||||
title="Sign in"
|
||||
subtitle="Authenticate with Better Auth session-backed credentials."
|
||||
footer={(
|
||||
<>
|
||||
No account yet?{' '}
|
||||
<Link href="/auth/signup" className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
||||
Create one
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-[color:var(--terminal-muted)]">Email</label>
|
||||
<Input type="email" required value={email} onChange={(event) => setEmail(event.target.value)} placeholder="you@company.com" />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/20 border border-red-500 text-red-400 px-4 py-3 rounded-lg mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-[color:var(--terminal-muted)]">Password</label>
|
||||
<Input
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder="********"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCredentialsLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error ? <p className="text-sm text-[#ff9f9f]">{error}</p> : null}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="•••••••••"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || sessionPending}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-semibold py-3 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Signing in...' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-8 text-center text-sm text-slate-400">
|
||||
Don't have an account?{' '}
|
||||
<a href="/auth/signup" className="text-blue-400 hover:text-blue-300">
|
||||
Sign up
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={loading || sessionPending}>
|
||||
{loading ? 'Signing in...' : 'Sign in'}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { signUp, useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 0;
|
||||
|
||||
export default function SignUp() {
|
||||
const { data: session, isPending: sessionPending } = useSession();
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { signUp, useSession } from '@/lib/better-auth';
|
||||
import { AuthShell } from '@/components/auth/auth-shell';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function SignUpPage() {
|
||||
const router = useRouter();
|
||||
const { data: session, isPending: sessionPending } = useSession();
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionPending && session?.user) {
|
||||
@@ -20,25 +27,25 @@ export default function SignUp() {
|
||||
}
|
||||
}, [sessionPending, session, router]);
|
||||
|
||||
const handleSignUp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await signUp.email({
|
||||
email,
|
||||
password,
|
||||
name,
|
||||
email,
|
||||
password
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
setError(result.error.message || 'Sign up failed');
|
||||
setError(result.error.message || 'Unable to create account');
|
||||
} else {
|
||||
router.replace('/');
|
||||
router.refresh();
|
||||
}
|
||||
} catch (err) {
|
||||
} catch {
|
||||
setError('Sign up failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -46,79 +53,47 @@ export default function SignUp() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4">
|
||||
<div className="max-w-md w-full bg-slate-800/50 rounded-lg p-8 border border-slate-700">
|
||||
<h1 className="text-3xl font-bold text-center mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
</h1>
|
||||
<p className="text-slate-400 text-center mb-8">Create your account</p>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/20 border border-red-500 text-red-400 px-4 py-3 rounded-lg mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSignUp} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="•••••••••"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || sessionPending}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-semibold py-3 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Creating account...' : 'Sign Up'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-8 text-center text-sm text-slate-400">
|
||||
Already have an account?{' '}
|
||||
<a href="/auth/signin" className="text-blue-400 hover:text-blue-300">
|
||||
<AuthShell
|
||||
title="Create account"
|
||||
subtitle="Provision an analyst workspace with Better Auth sessions."
|
||||
footer={(
|
||||
<>
|
||||
Already registered?{' '}
|
||||
<Link href="/auth/signin" className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-[color:var(--terminal-muted)]">Name</label>
|
||||
<Input required value={name} onChange={(event) => setName(event.target.value)} placeholder="Operator name" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-[color:var(--terminal-muted)]">Email</label>
|
||||
<Input type="email" required value={email} onChange={(event) => setEmail(event.target.value)} placeholder="you@company.com" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-[color:var(--terminal-muted)]">Password</label>
|
||||
<Input
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder="Minimum 8 characters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-sm text-[#ff9f9f]">{error}</p> : null}
|
||||
|
||||
<Button type="submit" className="w-full" disabled={loading || sessionPending}>
|
||||
{loading ? 'Creating account...' : 'Create account'}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,185 +1,251 @@
|
||||
'use client';
|
||||
|
||||
import { useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { Bot, Download, Search, TimerReset } from 'lucide-react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useTaskPoller } from '@/hooks/use-task-poller';
|
||||
import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
|
||||
import type { Filing, Task } from '@/lib/types';
|
||||
import { formatCompactCurrency } from '@/lib/format';
|
||||
|
||||
export default function FilingsPage() {
|
||||
const { data: session, isPending } = useSession();
|
||||
const router = useRouter();
|
||||
const [filings, setFilings] = useState([]);
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [filings, setFilings] = useState<Filing[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [syncTickerInput, setSyncTickerInput] = useState('');
|
||||
const [filterTickerInput, setFilterTickerInput] = useState('');
|
||||
const [searchTicker, setSearchTicker] = useState('');
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && !session) {
|
||||
router.push('/auth/signin');
|
||||
return;
|
||||
const ticker = searchParams.get('ticker');
|
||||
if (ticker) {
|
||||
const normalized = ticker.toUpperCase();
|
||||
setSyncTickerInput(normalized);
|
||||
setFilterTickerInput(normalized);
|
||||
setSearchTicker(normalized);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
if (session?.user) {
|
||||
fetchFilings();
|
||||
}
|
||||
}, [session, isPending, router]);
|
||||
|
||||
const fetchFilings = async (ticker?: string) => {
|
||||
const loadFilings = useCallback(async (ticker?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const url = ticker
|
||||
? `${process.env.NEXT_PUBLIC_API_URL}/api/filings/${ticker}`
|
||||
: `${process.env.NEXT_PUBLIC_API_URL}/api/filings`;
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
setFilings(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching filings:', error);
|
||||
try {
|
||||
const response = await listFilings({ ticker, limit: 120 });
|
||||
setFilings(response.filings);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unable to fetch filings');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
fetchFilings(searchTicker || undefined);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!isPending && isAuthenticated) {
|
||||
void loadFilings(searchTicker || undefined);
|
||||
}
|
||||
}, [isPending, isAuthenticated, searchTicker, loadFilings]);
|
||||
|
||||
const polledTask = useTaskPoller({
|
||||
taskId: activeTask?.id ?? null,
|
||||
onTerminalState: async () => {
|
||||
setActiveTask(null);
|
||||
await loadFilings(searchTicker || undefined);
|
||||
}
|
||||
});
|
||||
|
||||
const liveTask = polledTask ?? activeTask;
|
||||
|
||||
const triggerSync = async () => {
|
||||
if (!syncTickerInput.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleRefresh = async (ticker: string) => {
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/filings/refresh/${ticker}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
fetchFilings(ticker);
|
||||
} catch (error) {
|
||||
console.error('Error refreshing filings:', error);
|
||||
const { task } = await queueFilingSync({ ticker: syncTickerInput.trim().toUpperCase(), limit: 20 });
|
||||
const latest = await getTask(task.id);
|
||||
setActiveTask(latest.task);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue filing sync');
|
||||
}
|
||||
};
|
||||
|
||||
const getFilingTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case '10-K': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
||||
case '10-Q': return 'bg-green-500/20 text-green-400 border-green-500/30';
|
||||
case '8-K': return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
|
||||
default: return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
|
||||
const triggerAnalysis = async (accessionNumber: string) => {
|
||||
try {
|
||||
const { task } = await queueFilingAnalysis(accessionNumber);
|
||||
const latest = await getTask(task.id);
|
||||
setActiveTask(latest.task);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue filing analysis');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center">Loading...</div>;
|
||||
const groupedByTicker = useMemo(() => {
|
||||
const counts = new Map<string, number>();
|
||||
|
||||
for (const filing of filings) {
|
||||
counts.set(filing.ticker, (counts.get(filing.ticker) ?? 0) + 1);
|
||||
}
|
||||
|
||||
return counts;
|
||||
}, [filings]);
|
||||
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
|
||||
<nav className="border-b border-slate-700 bg-slate-900/50 backdrop-blur">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/filings" className="hover:text-blue-400 transition">
|
||||
Filings
|
||||
</Link>
|
||||
<Link href="/portfolio" className="hover:text-blue-400 transition">
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="/watchlist" className="hover:text-blue-400 transition">
|
||||
Watchlist
|
||||
</Link>
|
||||
<AppShell
|
||||
title="Filings Stream"
|
||||
subtitle="Sync SEC submissions and generate AI red-flag analysis asynchronously."
|
||||
actions={(
|
||||
<Button variant="secondary" onClick={() => void loadFilings(searchTicker || undefined)}>
|
||||
<TimerReset className="size-4" />
|
||||
Refresh table
|
||||
</Button>
|
||||
)}
|
||||
>
|
||||
{liveTask ? (
|
||||
<Panel title="Active Task" subtitle={`${liveTask.task_type} is processing in worker.`}>
|
||||
<div className="flex items-center justify-between gap-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{liveTask.id}</p>
|
||||
<StatusPill status={liveTask.status} />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{liveTask.error ? <p className="mt-2 text-sm text-[#ff9898]">{liveTask.error}</p> : null}
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">SEC Filings</h1>
|
||||
<Link
|
||||
href="/watchlist/add"
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
|
||||
<div className="grid grid-cols-1 gap-5 lg:grid-cols-[1.2fr_1fr]">
|
||||
<Panel title="Sync Controller" subtitle="Queue ingestion jobs by ticker symbol.">
|
||||
<form
|
||||
className="flex flex-wrap items-center gap-3"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void triggerSync();
|
||||
}}
|
||||
>
|
||||
+ Add to Watchlist
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700 mb-8">
|
||||
<form onSubmit={handleSearch} className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTicker}
|
||||
onChange={(e) => setSearchTicker(e.target.value)}
|
||||
className="flex-1 bg-slate-700/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Search by ticker (e.g., AAPL)"
|
||||
<Input
|
||||
value={syncTickerInput}
|
||||
onChange={(event) => setSyncTickerInput(event.target.value.toUpperCase())}
|
||||
placeholder="Ticker (AAPL)"
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg transition"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
<button
|
||||
<Button type="submit">
|
||||
<Download className="size-4" />
|
||||
Queue sync
|
||||
</Button>
|
||||
</form>
|
||||
</Panel>
|
||||
|
||||
<Panel title="Search Index" subtitle="Filter by ticker in the local filing index.">
|
||||
<form
|
||||
className="flex flex-wrap items-center gap-3"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
setSearchTicker(filterTickerInput.trim().toUpperCase());
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
value={filterTickerInput}
|
||||
onChange={(event) => setFilterTickerInput(event.target.value.toUpperCase())}
|
||||
placeholder="Ticker filter"
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<Button type="submit" variant="secondary">
|
||||
<Search className="size-4" />
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => { setSearchTicker(''); fetchFilings(); }}
|
||||
className="bg-slate-700 hover:bg-slate-600 px-6 py-3 rounded-lg transition"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setFilterTickerInput('');
|
||||
setSearchTicker('');
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 rounded-lg border border-slate-700 overflow-hidden">
|
||||
{filings.length > 0 ? (
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-700/50">
|
||||
<Panel title="Filing Ledger" subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}.`}>
|
||||
{error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Fetching filings...</p>
|
||||
) : filings.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No filings available. Queue a sync job to ingest fresh SEC data.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="data-table min-w-[980px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Ticker</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Company</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Type</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Filing Date</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Actions</th>
|
||||
<th>Ticker</th>
|
||||
<th>Type</th>
|
||||
<th>Filed</th>
|
||||
<th>Revenue Snapshot</th>
|
||||
<th>Company</th>
|
||||
<th>AI</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filings.map((filing: any) => (
|
||||
<tr key={filing.id} className="border-t border-slate-700 hover:bg-slate-700/30 transition">
|
||||
<td className="px-6 py-4 font-semibold">{filing.ticker}</td>
|
||||
<td className="px-6 py-4">{filing.company_name}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold border ${getFilingTypeColor(filing.filing_type)}`}>
|
||||
{filing.filing_type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{format(new Date(filing.filing_date), 'MMM dd, yyyy')}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={() => window.open(`https://www.sec.gov/Archives/${filing.accession_number.replace(/-/g, '')}/${filing.accession_number}-index.htm`, '_blank')}
|
||||
className="text-blue-400 hover:text-blue-300 transition mr-4"
|
||||
>
|
||||
View on SEC
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRefresh(filing.ticker)}
|
||||
className="text-green-400 hover:text-green-300 transition"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filings.map((filing) => {
|
||||
const revenue = filing.metrics?.revenue;
|
||||
const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);
|
||||
|
||||
return (
|
||||
<tr key={filing.accession_number}>
|
||||
<td>
|
||||
<div className="font-medium text-[color:var(--terminal-bright)]">{filing.ticker}</div>
|
||||
<div className="text-xs text-[color:var(--terminal-muted)]">{groupedByTicker.get(filing.ticker)} filings</div>
|
||||
</td>
|
||||
<td>{filing.filing_type}</td>
|
||||
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
|
||||
<td>{revenue ? formatCompactCurrency(revenue) : 'n/a'}</td>
|
||||
<td>{filing.company_name}</td>
|
||||
<td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
|
||||
<td>
|
||||
<div className="flex items-center gap-2">
|
||||
{filing.filing_url ? (
|
||||
<a
|
||||
href={filing.filing_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
||||
>
|
||||
SEC
|
||||
</a>
|
||||
) : null}
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => void triggerAnalysis(filing.accession_number)}
|
||||
className="px-2 py-1 text-xs"
|
||||
>
|
||||
<Bot className="size-3" />
|
||||
Analyze
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-slate-400 text-lg mb-4">No filings found</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Add stocks to your watchlist to track their SEC filings
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,20 +2,124 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
:root {
|
||||
--bg-0: #05080d;
|
||||
--bg-1: #08121a;
|
||||
--bg-2: #0b1f28;
|
||||
--panel: rgba(6, 17, 24, 0.8);
|
||||
--panel-soft: rgba(7, 22, 31, 0.62);
|
||||
--panel-bright: rgba(10, 33, 45, 0.9);
|
||||
--line-weak: rgba(126, 217, 255, 0.22);
|
||||
--line-strong: rgba(123, 255, 217, 0.75);
|
||||
--accent: #68ffd5;
|
||||
--accent-strong: #8cffeb;
|
||||
--danger: #ff7070;
|
||||
--danger-soft: rgba(122, 33, 33, 0.44);
|
||||
--terminal-bright: #e8fff8;
|
||||
--terminal-muted: #94b9c5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
color: var(--terminal-bright);
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, rgba(126, 217, 255, 0.25), transparent 35%),
|
||||
radial-gradient(circle at 84% 0%, rgba(104, 255, 213, 0.2), transparent 30%),
|
||||
linear-gradient(140deg, var(--bg-0), var(--bg-1) 50%, var(--bg-2));
|
||||
}
|
||||
|
||||
.app-surface,
|
||||
.auth-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ambient-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(126, 217, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(126, 217, 255, 0.07) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.noise-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
background-image: radial-gradient(rgba(160, 255, 227, 0.15) 0.7px, transparent 0.7px);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
.terminal-caption {
|
||||
font-family: var(--font-mono), monospace;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
font-family: var(--font-mono), monospace;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
border-bottom: 1px solid var(--line-weak);
|
||||
padding: 0.75rem 0.65rem;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background-color: rgba(17, 47, 61, 0.45);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.ambient-grid {
|
||||
animation: subtle-grid-shift 18s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes subtle-grid-shift {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
@media (max-width: 1024px) {
|
||||
.ambient-grid {
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,26 @@
|
||||
import './globals.css';
|
||||
import type { Metadata } from 'next';
|
||||
import { JetBrains_Mono, Space_Grotesk } from 'next/font/google';
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const display = Space_Grotesk({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-display'
|
||||
});
|
||||
|
||||
const mono = JetBrains_Mono({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-mono'
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Fiscal Clone',
|
||||
description: 'Futuristic fiscal intelligence terminal powered by Better Auth and durable AI tasks.'
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
{children}
|
||||
</body>
|
||||
<html lang="en" className={`${display.variable} ${mono.variable}`}>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,110 +1,229 @@
|
||||
'use client';
|
||||
|
||||
import { useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MetricCard } from '@/components/dashboard/metric-card';
|
||||
import { TaskFeed } from '@/components/dashboard/task-feed';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useTaskPoller } from '@/hooks/use-task-poller';
|
||||
import {
|
||||
getLatestPortfolioInsight,
|
||||
getPortfolioSummary,
|
||||
getTask,
|
||||
listFilings,
|
||||
listRecentTasks,
|
||||
listWatchlist,
|
||||
queuePortfolioInsights,
|
||||
queuePriceRefresh
|
||||
} from '@/lib/api';
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
||||
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
||||
|
||||
export default function Home() {
|
||||
const { data: session, isPending } = useSession();
|
||||
const router = useRouter();
|
||||
const [stats, setStats] = useState({ filings: 0, portfolioValue: 0, watchlist: 0 });
|
||||
type DashboardState = {
|
||||
summary: PortfolioSummary;
|
||||
filingsCount: number;
|
||||
watchlistCount: number;
|
||||
tasks: Task[];
|
||||
latestInsight: PortfolioInsight | null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && !session) {
|
||||
router.push('/auth/signin');
|
||||
return;
|
||||
}
|
||||
const EMPTY_STATE: DashboardState = {
|
||||
summary: {
|
||||
positions: 0,
|
||||
total_value: '0',
|
||||
total_gain_loss: '0',
|
||||
total_cost_basis: '0',
|
||||
avg_return_pct: '0'
|
||||
},
|
||||
filingsCount: 0,
|
||||
watchlistCount: 0,
|
||||
tasks: [],
|
||||
latestInsight: null
|
||||
};
|
||||
|
||||
if (session?.user) {
|
||||
fetchStats(session.user.id);
|
||||
}
|
||||
}, [session, isPending, router]);
|
||||
export default function CommandCenterPage() {
|
||||
const { isPending, isAuthenticated, session } = useAuthGuard();
|
||||
const [state, setState] = useState<DashboardState>(EMPTY_STATE);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const fetchStats = async (userId: string) => {
|
||||
try {
|
||||
const [portfolioRes, watchlistRes, filingsRes] = await Promise.all([
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio/${userId}/summary`),
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist/${userId}`),
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/filings`)
|
||||
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
|
||||
getPortfolioSummary(),
|
||||
listFilings({ limit: 200 }),
|
||||
listWatchlist(),
|
||||
listRecentTasks(20),
|
||||
getLatestPortfolioInsight()
|
||||
]);
|
||||
|
||||
const portfolioData = await portfolioRes.json();
|
||||
const watchlistData = await watchlistRes.json();
|
||||
const filingsData = await filingsRes.json();
|
||||
|
||||
setStats({
|
||||
filings: filingsData.length || 0,
|
||||
portfolioValue: portfolioData.total_value || 0,
|
||||
watchlist: watchlistData.length || 0
|
||||
setState({
|
||||
summary: summaryRes.summary,
|
||||
filingsCount: filingsRes.filings.length,
|
||||
watchlistCount: watchlistRes.items.length,
|
||||
tasks: tasksRes.tasks,
|
||||
latestInsight: insightRes.insight
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching stats:', error);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load dashboard');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && isAuthenticated) {
|
||||
void loadData();
|
||||
}
|
||||
}, [isPending, isAuthenticated, loadData]);
|
||||
|
||||
const trackedTask = useTaskPoller({
|
||||
taskId: activeTaskId,
|
||||
onTerminalState: () => {
|
||||
setActiveTaskId(null);
|
||||
void loadData();
|
||||
}
|
||||
});
|
||||
|
||||
const headerActions = (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const { task } = await queuePriceRefresh();
|
||||
setActiveTaskId(task.id);
|
||||
const latest = await getTask(task.id);
|
||||
setState((prev) => ({ ...prev, tasks: [latest.task, ...prev.tasks] }));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue price refresh');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Refresh prices
|
||||
</Button>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
const { task } = await queuePortfolioInsights();
|
||||
setActiveTaskId(task.id);
|
||||
const latest = await getTask(task.id);
|
||||
setState((prev) => ({ ...prev, tasks: [latest.task, ...prev.tasks] }));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue AI insight');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-4" />
|
||||
Queue AI insight
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const signedGain = useMemo(() => {
|
||||
const gain = Number(state.summary.total_gain_loss ?? 0);
|
||||
return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
|
||||
}, [state.summary.total_gain_loss]);
|
||||
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Booting secure terminal...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
|
||||
<nav className="border-b border-slate-700 bg-slate-900/50 backdrop-blur">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
<AppShell
|
||||
title="Command Center"
|
||||
subtitle={`Welcome back${session?.user?.name ? `, ${session.user.name}` : ''}. Review tasks, portfolio health, and AI outputs.`}
|
||||
actions={headerActions}
|
||||
>
|
||||
{activeTaskId && trackedTask ? (
|
||||
<Panel title="Live Task" subtitle={`Task ${activeTaskId.slice(0, 8)} is active.`}>
|
||||
<div className="flex items-center justify-between gap-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{trackedTask.task_type.replace('_', ' ')}</p>
|
||||
<StatusPill status={trackedTask.status} />
|
||||
</div>
|
||||
{trackedTask.error ? (
|
||||
<p className="mt-3 text-sm text-[#ff9898]">{trackedTask.error}</p>
|
||||
) : null}
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<Panel>
|
||||
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
|
||||
<MetricCard
|
||||
label="Unrealized P&L"
|
||||
value={signedGain}
|
||||
delta={formatPercent(state.summary.avg_return_pct)}
|
||||
positive={Number(state.summary.total_gain_loss) >= 0}
|
||||
/>
|
||||
<MetricCard label="Tracked Filings" value={String(state.filingsCount)} delta="Last 200 records" />
|
||||
<MetricCard label="Watchlist Nodes" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
||||
<Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
|
||||
) : (
|
||||
<TaskFeed tasks={state.tasks} />
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<Panel title="AI Brief" subtitle="Latest portfolio insight from OpenClaw/ZeroClaw" className="xl:col-span-2">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
|
||||
) : state.latestInsight ? (
|
||||
<>
|
||||
<div className="mb-3 inline-flex items-center gap-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-xs text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3.5" />
|
||||
{state.latestInsight.provider} :: {state.latestInsight.model}
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{state.latestInsight.content}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No AI brief yet. Queue one from the action bar.</p>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<Panel title="Quick Links" subtitle="Feature modules">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
<Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/filings">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/portfolio">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Portfolio</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage holdings and mark to market in real time.</p>
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/watchlist">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Watchlist</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track priority tickers for monitoring and ingestion.</p>
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/filings" className="hover:text-blue-400 transition">
|
||||
Filings
|
||||
</Link>
|
||||
<Link href="/portfolio" className="hover:text-blue-400 transition">
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="/watchlist" className="hover:text-blue-400 transition">
|
||||
Watchlist
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</Panel>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold">Dashboard</h1>
|
||||
<p className="text-slate-400">Welcome back, {session?.user?.name}</p>
|
||||
<Panel>
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-4" />
|
||||
Runtime state: {loading ? 'syncing' : 'stable'}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Total Filings</h3>
|
||||
<p className="text-4xl font-bold text-blue-400">{stats.filings}</p>
|
||||
</div>
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Portfolio Value</h3>
|
||||
<p className="text-4xl font-bold text-green-400">
|
||||
${stats.portfolioValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Watchlist</h3>
|
||||
<p className="text-4xl font-bold text-purple-400">{stats.watchlist}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Link href="/watchlist/add" className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-center transition">
|
||||
Add to Watchlist
|
||||
</Link>
|
||||
<Link href="/portfolio" className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg text-center transition">
|
||||
Add to Portfolio
|
||||
</Link>
|
||||
<Link href="/filings" className="bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-lg text-center transition">
|
||||
Search SEC Filings
|
||||
</Link>
|
||||
<Link href="/portfolio" className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg text-center transition">
|
||||
View Portfolio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Panel>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,301 +1,332 @@
|
||||
'use client';
|
||||
|
||||
import { useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts';
|
||||
import { format } from 'date-fns';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
|
||||
import { BrainCircuit, Plus, RefreshCcw, Trash2 } from 'lucide-react';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useTaskPoller } from '@/hooks/use-task-poller';
|
||||
import {
|
||||
deleteHolding,
|
||||
getLatestPortfolioInsight,
|
||||
getTask,
|
||||
getPortfolioSummary,
|
||||
listHoldings,
|
||||
queuePortfolioInsights,
|
||||
queuePriceRefresh,
|
||||
upsertHolding
|
||||
} from '@/lib/api';
|
||||
import type { Holding, PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
||||
import { asNumber, formatCurrency, formatPercent } from '@/lib/format';
|
||||
|
||||
type FormState = {
|
||||
ticker: string;
|
||||
shares: string;
|
||||
avgCost: string;
|
||||
currentPrice: string;
|
||||
};
|
||||
|
||||
const CHART_COLORS = ['#6effd8', '#5fd3ff', '#66ffa1', '#8dbbff', '#f4f88f', '#ff9c9c'];
|
||||
|
||||
const EMPTY_SUMMARY: PortfolioSummary = {
|
||||
positions: 0,
|
||||
total_value: '0',
|
||||
total_gain_loss: '0',
|
||||
total_cost_basis: '0',
|
||||
avg_return_pct: '0'
|
||||
};
|
||||
|
||||
export default function PortfolioPage() {
|
||||
const { data: session, isPending } = useSession();
|
||||
const router = useRouter();
|
||||
const [portfolio, setPortfolio] = useState([]);
|
||||
const [summary, setSummary] = useState({ total_value: 0, total_gain_loss: 0, cost_basis: 0 });
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
|
||||
const [holdings, setHoldings] = useState<Holding[]>([]);
|
||||
const [summary, setSummary] = useState<PortfolioSummary>(EMPTY_SUMMARY);
|
||||
const [latestInsight, setLatestInsight] = useState<PortfolioInsight | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [newHolding, setNewHolding] = useState({ ticker: '', shares: '', avg_cost: '' });
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
const [form, setForm] = useState<FormState>({ ticker: '', shares: '', avgCost: '', currentPrice: '' });
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && !session) {
|
||||
router.push('/auth/signin');
|
||||
return;
|
||||
}
|
||||
const loadPortfolio = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
if (session?.user?.id) {
|
||||
fetchPortfolio(session.user.id);
|
||||
}
|
||||
}, [session, isPending, router]);
|
||||
|
||||
const fetchPortfolio = async (userId: string) => {
|
||||
try {
|
||||
const [portfolioRes, summaryRes] = await Promise.all([
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio/${userId}`),
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio/${userId}/summary`)
|
||||
const [holdingsRes, summaryRes, insightRes] = await Promise.all([
|
||||
listHoldings(),
|
||||
getPortfolioSummary(),
|
||||
getLatestPortfolioInsight()
|
||||
]);
|
||||
|
||||
const portfolioData = await portfolioRes.json();
|
||||
const summaryData = await summaryRes.json();
|
||||
|
||||
setPortfolio(portfolioData);
|
||||
setSummary(summaryData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching portfolio:', error);
|
||||
setHoldings(holdingsRes.holdings);
|
||||
setSummary(summaryRes.summary);
|
||||
setLatestInsight(insightRes.insight);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Could not fetch portfolio data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAddHolding = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const userId = session?.user?.id;
|
||||
if (!userId) return;
|
||||
useEffect(() => {
|
||||
if (!isPending && isAuthenticated) {
|
||||
void loadPortfolio();
|
||||
}
|
||||
}, [isPending, isAuthenticated, loadPortfolio]);
|
||||
|
||||
const polledTask = useTaskPoller({
|
||||
taskId: activeTask?.id ?? null,
|
||||
onTerminalState: async () => {
|
||||
setActiveTask(null);
|
||||
await loadPortfolio();
|
||||
}
|
||||
});
|
||||
|
||||
const liveTask = polledTask ?? activeTask;
|
||||
|
||||
const allocationData = useMemo(
|
||||
() => holdings.map((holding) => ({
|
||||
name: holding.ticker,
|
||||
value: asNumber(holding.market_value)
|
||||
})),
|
||||
[holdings]
|
||||
);
|
||||
|
||||
const performanceData = useMemo(
|
||||
() => holdings.map((holding) => ({
|
||||
name: holding.ticker,
|
||||
value: asNumber(holding.gain_loss_pct)
|
||||
})),
|
||||
[holdings]
|
||||
);
|
||||
|
||||
const submitHolding = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
user_id: userId,
|
||||
ticker: newHolding.ticker.toUpperCase(),
|
||||
shares: parseFloat(newHolding.shares),
|
||||
avg_cost: parseFloat(newHolding.avg_cost)
|
||||
})
|
||||
await upsertHolding({
|
||||
ticker: form.ticker.toUpperCase(),
|
||||
shares: Number(form.shares),
|
||||
avgCost: Number(form.avgCost),
|
||||
currentPrice: form.currentPrice ? Number(form.currentPrice) : undefined
|
||||
});
|
||||
|
||||
setShowAddModal(false);
|
||||
setNewHolding({ ticker: '', shares: '', avg_cost: '' });
|
||||
fetchPortfolio(userId);
|
||||
} catch (error) {
|
||||
console.error('Error adding holding:', error);
|
||||
setForm({ ticker: '', shares: '', avgCost: '', currentPrice: '' });
|
||||
await loadPortfolio();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save holding');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteHolding = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this holding?')) return;
|
||||
const userId = session?.user?.id;
|
||||
if (!userId) return;
|
||||
|
||||
const queueRefresh = async () => {
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
fetchPortfolio(userId);
|
||||
} catch (error) {
|
||||
console.error('Error deleting holding:', error);
|
||||
const { task } = await queuePriceRefresh();
|
||||
const latest = await getTask(task.id);
|
||||
setActiveTask(latest.task);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unable to queue price refresh');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center">Loading...</div>;
|
||||
const queueInsights = async () => {
|
||||
try {
|
||||
const { task } = await queuePortfolioInsights();
|
||||
const latest = await getTask(task.id);
|
||||
setActiveTask(latest.task);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unable to queue portfolio insights');
|
||||
}
|
||||
};
|
||||
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading portfolio matrix...</div>;
|
||||
}
|
||||
|
||||
const pieData = portfolio.length > 0 ? portfolio.map((p: any) => ({
|
||||
name: p.ticker,
|
||||
value: p.current_value || (p.shares * p.avg_cost)
|
||||
})) : [];
|
||||
|
||||
const COLORS = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
|
||||
<nav className="border-b border-slate-700 bg-slate-900/50 backdrop-blur">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/filings" className="hover:text-blue-400 transition">
|
||||
Filings
|
||||
</Link>
|
||||
<Link href="/portfolio" className="hover:text-blue-400 transition">
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="/watchlist" className="hover:text-blue-400 transition">
|
||||
Watchlist
|
||||
</Link>
|
||||
<AppShell
|
||||
title="Portfolio Matrix"
|
||||
subtitle="Position management, market valuation, and AI generated portfolio commentary."
|
||||
actions={(
|
||||
<>
|
||||
<Button variant="secondary" onClick={() => void queueRefresh()}>
|
||||
<RefreshCcw className="size-4" />
|
||||
Queue price refresh
|
||||
</Button>
|
||||
<Button onClick={() => void queueInsights()}>
|
||||
<BrainCircuit className="size-4" />
|
||||
Generate AI brief
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
>
|
||||
{liveTask ? (
|
||||
<Panel title="Task Runner" subtitle={liveTask.id}>
|
||||
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{liveTask.task_type}</p>
|
||||
<StatusPill status={liveTask.status} />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{liveTask.error ? <p className="mt-2 text-sm text-[#ff9f9f]">{liveTask.error}</p> : null}
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">Portfolio</h1>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
|
||||
>
|
||||
+ Add Holding
|
||||
</button>
|
||||
</div>
|
||||
{error ? (
|
||||
<Panel>
|
||||
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Total Value</h3>
|
||||
<p className="text-3xl font-bold text-green-400">
|
||||
${summary.total_value?.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) || '$0.00'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Total Gain/Loss</h3>
|
||||
<p className={`text-3xl font-bold ${summary.total_gain_loss >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{summary.total_gain_loss >= 0 ? '+' : ''}${summary.total_gain_loss?.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) || '$0.00'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-slate-400 mb-2">Positions</h3>
|
||||
<p className="text-3xl font-bold text-blue-400">{portfolio.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<Panel title="Total Value" className="lg:col-span-1">
|
||||
<p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(summary.total_value)}</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">Cost basis {formatCurrency(summary.total_cost_basis)}</p>
|
||||
</Panel>
|
||||
<Panel title="Unrealized P&L" className="lg:col-span-1">
|
||||
<p className={`text-3xl font-semibold ${asNumber(summary.total_gain_loss) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}`}>
|
||||
{formatCurrency(summary.total_gain_loss)}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">Average return {formatPercent(summary.avg_return_pct)}</p>
|
||||
</Panel>
|
||||
<Panel title="Positions" className="lg:col-span-1">
|
||||
<p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{summary.positions}</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">Active symbols in portfolio.</p>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-xl font-semibold mb-4">Portfolio Allocation</h3>
|
||||
{pieData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
||||
<Panel title="Allocation">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading chart...</p>
|
||||
) : allocationData.length > 0 ? (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={100}
|
||||
label={(entry) => `${entry.name} ($${(entry.value / 1000).toFixed(1)}k)`}
|
||||
>
|
||||
{pieData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
<Pie data={allocationData} dataKey="value" nameKey="name" innerRadius={56} outerRadius={104} paddingAngle={2}>
|
||||
{allocationData.map((entry, index) => (
|
||||
<Cell key={`${entry.name}-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<Tooltip formatter={(value: number) => formatCurrency(value)} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<p className="text-slate-400 text-center py-8">No holdings yet</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No holdings yet.</p>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<div className="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
||||
<h3 className="text-xl font-semibold mb-4">Performance</h3>
|
||||
{portfolio.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={portfolio.map((p: any) => ({ name: p.ticker, value: p.gain_loss_pct || 0 }))}>
|
||||
<XAxis dataKey="name" stroke="#64748b" />
|
||||
<YAxis stroke="#64748b" />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '#334155', borderRadius: '8px' }} />
|
||||
<Line type="monotone" dataKey="value" stroke="#8b5cf6" strokeWidth={2} dot={{ fill: '#8b5cf6' }} />
|
||||
</LineChart>
|
||||
<Panel title="Performance %">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading chart...</p>
|
||||
) : performanceData.length > 0 ? (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={performanceData}>
|
||||
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
|
||||
<XAxis dataKey="name" stroke="#8cb6c5" fontSize={12} />
|
||||
<YAxis stroke="#8cb6c5" fontSize={12} />
|
||||
<Tooltip formatter={(value: number) => `${value.toFixed(2)}%`} />
|
||||
<Bar dataKey="value" fill="#68ffd5" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<p className="text-slate-400 text-center py-8">No performance data yet</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No performance data yet.</p>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 rounded-lg border border-slate-700 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-700/50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Ticker</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Shares</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Avg Cost</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Current Price</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Value</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Gain/Loss</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">%</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-300">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{portfolio.map((holding: any) => (
|
||||
<tr key={holding.id} className="border-t border-slate-700 hover:bg-slate-700/30 transition">
|
||||
<td className="px-6 py-4 font-semibold">{holding.ticker}</td>
|
||||
<td className="px-6 py-4">{holding.shares.toLocaleString()}</td>
|
||||
<td className="px-6 py-4">${holding.avg_cost.toFixed(2)}</td>
|
||||
<td className="px-6 py-4">${holding.current_price?.toFixed(2) || 'N/A'}</td>
|
||||
<td className="px-6 py-4">${holding.current_value?.toFixed(2) || 'N/A'}</td>
|
||||
<td className={`px-6 py-4 ${holding.gain_loss >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{holding.gain_loss >= 0 ? '+' : ''}${holding.gain_loss?.toFixed(2) || '0.00'}
|
||||
</td>
|
||||
<td className={`px-6 py-4 ${holding.gain_loss_pct >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{holding.gain_loss_pct >= 0 ? '+' : ''}{holding.gain_loss_pct?.toFixed(2) || '0.00'}%
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleDeleteHolding(holding.id)}
|
||||
className="text-red-400 hover:text-red-300 transition"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.5fr_1fr]">
|
||||
<Panel title="Holdings Table" subtitle="Live mark-to-market values from latest refresh.">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading holdings...</p>
|
||||
) : holdings.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No holdings added yet.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="data-table min-w-[780px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticker</th>
|
||||
<th>Shares</th>
|
||||
<th>Avg Cost</th>
|
||||
<th>Price</th>
|
||||
<th>Value</th>
|
||||
<th>Gain/Loss</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{holdings.map((holding) => (
|
||||
<tr key={holding.id}>
|
||||
<td>{holding.ticker}</td>
|
||||
<td>{asNumber(holding.shares).toLocaleString()}</td>
|
||||
<td>{formatCurrency(holding.avg_cost)}</td>
|
||||
<td>{holding.current_price ? formatCurrency(holding.current_price) : 'n/a'}</td>
|
||||
<td>{formatCurrency(holding.market_value)}</td>
|
||||
<td className={asNumber(holding.gain_loss) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9898]'}>
|
||||
{formatCurrency(holding.gain_loss)} ({formatPercent(holding.gain_loss_pct)})
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
variant="danger"
|
||||
className="px-2 py-1 text-xs"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await deleteHolding(holding.id);
|
||||
await loadPortfolio();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete holding');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-3" />
|
||||
Delete
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
{showAddModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
|
||||
<div className="bg-slate-800 rounded-lg p-6 border border-slate-700 max-w-md w-full">
|
||||
<h2 className="text-2xl font-bold mb-4">Add Holding</h2>
|
||||
<form onSubmit={handleAddHolding} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Ticker</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newHolding.ticker}
|
||||
onChange={(e) => setNewHolding({...newHolding, ticker: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="AAPL"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Shares</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.0001"
|
||||
value={newHolding.shares}
|
||||
onChange={(e) => setNewHolding({...newHolding, shares: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="100"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Average Cost</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={newHolding.avg_cost}
|
||||
onChange={(e) => setNewHolding({...newHolding, avg_cost: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="150.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg transition"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="flex-1 bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<Panel title="Add / Update Holding">
|
||||
<form onSubmit={submitHolding} className="space-y-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Ticker</label>
|
||||
<Input value={form.ticker} onChange={(event) => setForm((prev) => ({ ...prev, ticker: event.target.value.toUpperCase() }))} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Shares</label>
|
||||
<Input type="number" step="0.0001" min="0.0001" value={form.shares} onChange={(event) => setForm((prev) => ({ ...prev, shares: event.target.value }))} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Average Cost</label>
|
||||
<Input type="number" step="0.0001" min="0.0001" value={form.avgCost} onChange={(event) => setForm((prev) => ({ ...prev, avgCost: event.target.value }))} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Current Price (optional)</label>
|
||||
<Input type="number" step="0.0001" min="0" value={form.currentPrice} onChange={(event) => setForm((prev) => ({ ...prev, currentPrice: event.target.value }))} />
|
||||
</div>
|
||||
<Button type="submit" className="w-full">
|
||||
<Plus className="size-4" />
|
||||
Save holding
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-5 border-t border-[color:var(--line-weak)] pt-4">
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Latest AI Insight</p>
|
||||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">
|
||||
{latestInsight?.content ?? 'No insight available yet. Queue an AI brief from the header.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,224 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import { useSession } from '@/lib/better-auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { ArrowRight, Eye, Plus, Trash2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useTaskPoller } from '@/hooks/use-task-poller';
|
||||
import { deleteWatchlistItem, getTask, listWatchlist, queueFilingSync, upsertWatchlistItem } from '@/lib/api';
|
||||
import type { Task, WatchlistItem } from '@/lib/types';
|
||||
|
||||
type FormState = {
|
||||
ticker: string;
|
||||
companyName: string;
|
||||
sector: string;
|
||||
};
|
||||
|
||||
export default function WatchlistPage() {
|
||||
const { data: session, isPending } = useSession();
|
||||
const router = useRouter();
|
||||
const [watchlist, setWatchlist] = useState([]);
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
|
||||
const [items, setItems] = useState<WatchlistItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [newStock, setNewStock] = useState({ ticker: '', company_name: '', sector: '' });
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
const [form, setForm] = useState<FormState>({ ticker: '', companyName: '', sector: '' });
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && !session) {
|
||||
router.push('/auth/signin');
|
||||
return;
|
||||
}
|
||||
const loadWatchlist = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
if (session?.user?.id) {
|
||||
fetchWatchlist(session.user.id);
|
||||
}
|
||||
}, [session, isPending, router]);
|
||||
|
||||
const fetchWatchlist = async (userId: string) => {
|
||||
try {
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist/${userId}`);
|
||||
const data = await response.json();
|
||||
setWatchlist(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching watchlist:', error);
|
||||
const response = await listWatchlist();
|
||||
setItems(response.items);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load watchlist');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAddStock = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const userId = session?.user?.id;
|
||||
if (!userId) return;
|
||||
useEffect(() => {
|
||||
if (!isPending && isAuthenticated) {
|
||||
void loadWatchlist();
|
||||
}
|
||||
}, [isPending, isAuthenticated, loadWatchlist]);
|
||||
|
||||
const polledTask = useTaskPoller({
|
||||
taskId: activeTask?.id ?? null,
|
||||
onTerminalState: () => {
|
||||
setActiveTask(null);
|
||||
}
|
||||
});
|
||||
|
||||
const liveTask = polledTask ?? activeTask;
|
||||
|
||||
const submit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
user_id: userId,
|
||||
ticker: newStock.ticker.toUpperCase(),
|
||||
company_name: newStock.company_name,
|
||||
sector: newStock.sector
|
||||
})
|
||||
await upsertWatchlistItem({
|
||||
ticker: form.ticker.toUpperCase(),
|
||||
companyName: form.companyName,
|
||||
sector: form.sector || undefined
|
||||
});
|
||||
|
||||
setShowAddModal(false);
|
||||
setNewStock({ ticker: '', company_name: '', sector: '' });
|
||||
fetchWatchlist(userId);
|
||||
} catch (error) {
|
||||
console.error('Error adding stock:', error);
|
||||
setForm({ ticker: '', companyName: '', sector: '' });
|
||||
await loadWatchlist();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save watchlist item');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteStock = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to remove this stock from watchlist?')) return;
|
||||
const userId = session?.user?.id;
|
||||
if (!userId) return;
|
||||
|
||||
const queueSync = async (ticker: string) => {
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
fetchWatchlist(userId);
|
||||
} catch (error) {
|
||||
console.error('Error deleting stock:', error);
|
||||
const { task } = await queueFilingSync({ ticker, limit: 20 });
|
||||
const latest = await getTask(task.id);
|
||||
setActiveTask(latest.task);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : `Failed to queue sync for ${ticker}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center">Loading...</div>;
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading watchlist terminal...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
|
||||
<nav className="border-b border-slate-700 bg-slate-900/50 backdrop-blur">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Fiscal Clone
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/filings" className="hover:text-blue-400 transition">
|
||||
Filings
|
||||
</Link>
|
||||
<Link href="/portfolio" className="hover:text-blue-400 transition">
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="/watchlist" className="hover:text-blue-400 transition">
|
||||
Watchlist
|
||||
</Link>
|
||||
<AppShell
|
||||
title="Watchlist"
|
||||
subtitle="Track symbols, company context, and trigger filing ingestion jobs from one surface."
|
||||
>
|
||||
{liveTask ? (
|
||||
<Panel title="Queue Status">
|
||||
<div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{liveTask.task_type}</p>
|
||||
<StatusPill status={liveTask.status} />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</Panel>
|
||||
) : null}
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">Watchlist</h1>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
|
||||
>
|
||||
+ Add Stock
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.6fr_1fr]">
|
||||
<Panel title="Symbols" subtitle="Your monitored universe.">
|
||||
{error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading watchlist...</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No symbols yet. Add one from the right panel.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
{items.map((item) => (
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<Eye className="size-4 text-[color:var(--accent)]" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{watchlist.map((stock: any) => (
|
||||
<div key={stock.id} className="bg-slate-800/50 rounded-lg p-6 border border-slate-700 hover:border-slate-600 transition">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">{stock.ticker}</h3>
|
||||
<p className="text-slate-400">{stock.company_name}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteStock(stock.id)}
|
||||
className="text-red-400 hover:text-red-300 transition"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{stock.sector && (
|
||||
<div className="inline-block bg-purple-500/20 text-purple-400 px-3 py-1 rounded-full text-sm">
|
||||
{stock.sector}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-4 flex gap-2">
|
||||
<Link
|
||||
href={`/filings?ticker=${stock.ticker}`}
|
||||
className="flex-1 bg-slate-700 hover:bg-slate-600 text-white py-2 rounded-lg text-center transition"
|
||||
>
|
||||
Filings
|
||||
</Link>
|
||||
<Link
|
||||
href={`/portfolio/add?ticker=${stock.ticker}`}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg text-center transition"
|
||||
>
|
||||
Add to Portfolio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{watchlist.length === 0 && (
|
||||
<div className="col-span-full text-center py-12 bg-slate-800/50 rounded-lg border border-slate-700">
|
||||
<p className="text-slate-400 text-lg mb-4">Your watchlist is empty</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Add stocks to track their SEC filings and monitor performance
|
||||
</p>
|
||||
<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)}>
|
||||
Sync filings
|
||||
</Button>
|
||||
<Link
|
||||
href={`/filings?ticker=${item.ticker}`}
|
||||
className="inline-flex items-center gap-1 text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
||||
>
|
||||
Open stream
|
||||
<ArrowRight className="size-3" />
|
||||
</Link>
|
||||
<Button
|
||||
variant="danger"
|
||||
className="ml-auto px-2 py-1 text-xs"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await deleteWatchlistItem(item.id);
|
||||
await loadWatchlist();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to remove symbol');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-3" />
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</Panel>
|
||||
|
||||
{showAddModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
|
||||
<div className="bg-slate-800 rounded-lg p-6 border border-slate-700 max-w-md w-full">
|
||||
<h2 className="text-2xl font-bold mb-4">Add to Watchlist</h2>
|
||||
<form onSubmit={handleAddStock} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Ticker</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newStock.ticker}
|
||||
onChange={(e) => setNewStock({...newStock, ticker: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="AAPL"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newStock.company_name}
|
||||
onChange={(e) => setNewStock({...newStock, company_name: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="Apple Inc."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-2">Sector (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newStock.sector}
|
||||
onChange={(e) => setNewStock({...newStock, sector: e.target.value})}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white"
|
||||
placeholder="Technology"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg transition"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="flex-1 bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Panel title="Add Symbol" subtitle="Create or update a watchlist item.">
|
||||
<form onSubmit={submit} className="space-y-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Ticker</label>
|
||||
<Input value={form.ticker} onChange={(event) => setForm((prev) => ({ ...prev, ticker: event.target.value.toUpperCase() }))} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Company Name</label>
|
||||
<Input value={form.companyName} onChange={(event) => setForm((prev) => ({ ...prev, companyName: event.target.value }))} required />
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<Button type="submit" className="w-full">
|
||||
<Plus className="size-4" />
|
||||
Save symbol
|
||||
</Button>
|
||||
</form>
|
||||
</Panel>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user