feat: Complete Fiscal Clone deployment package
- SEC filings extraction (10-K, 10-Q, 8-K) - Portfolio analytics with real-time prices - Watchlist management - NextAuth.js authentication - OpenClaw AI integration - PostgreSQL database with auto P&L calculations - Elysia.js backend (Bun runtime) - Next.js 14 frontend (TailwindCSS + Recharts) - Production-ready Docker configurations
This commit is contained in:
Francesco
185
frontend/app/filings/page.tsx
Normal file
185
frontend/app/filings/page.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
'use client';
|
||||
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export default function FilingsPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const router = useRouter();
|
||||
const [filings, setFilings] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTicker, setSearchTicker] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'unauthenticated') {
|
||||
router.push('/auth/signin');
|
||||
return;
|
||||
}
|
||||
|
||||
if (session?.user) {
|
||||
fetchFilings();
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
const fetchFilings = 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`;
|
||||
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
setFilings(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching filings:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
fetchFilings(searchTicker || undefined);
|
||||
};
|
||||
|
||||
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 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';
|
||||
}
|
||||
};
|
||||
|
||||
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>;
|
||||
}
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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"
|
||||
>
|
||||
+ 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)"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg transition"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSearchTicker(''); fetchFilings(); }}
|
||||
className="bg-slate-700 hover:bg-slate-600 px-6 py-3 rounded-lg transition"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</form>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user