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

frontend/Dockerfile

@@ -0,0 +1,35 @@
+FROM node:20-alpine AS base
+
+WORKDIR /app
+
+# Install dependencies
+FROM base AS deps
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Build
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# Production
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+CMD ["node", "server.js"]

frontend/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,64 @@
+import NextAuth from 'next-auth'
+import GitHub from 'next-auth/providers/github'
+import Google from 'next-auth/providers/google'
+import Credentials from 'next-auth/providers/credentials'
+
+const handler = NextAuth({
+  providers: [
+    GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    Credentials({
+      name: 'Credentials',
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" }
+      },
+      async authorize(credentials) {
+        // Call backend API to verify credentials
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(credentials)
+        })
+
+        const user = await res.json()
+        if (res.ok && user) {
+          return user
+        }
+        return null
+      }
+    })
+  ],
+  pages: {
+    signIn: '/auth/signin',
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id
+        token.email = user.email
+        token.name = user.name
+      }
+      return token
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id
+        session.user.email = token.email
+      }
+      return session
+    }
+  },
+  session: {
+    strategy: 'jwt',
+    maxAge: 30 * 24 * 60 * 60, // 30 days
+  }
+})
+
+export { handler as GET, handler as POST }

frontend/app/auth/signin/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { signIn } from 'next-auth/react';
+import { useState } from 'react';
+
+export default function SignIn() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleCredentialsLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false
+      });
+
+      if (result?.error) {
+        setError('Invalid credentials');
+      } else {
+        window.location.href = '/';
+      }
+    } catch (err) {
+      setError('Login 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>
+
+        {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={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>
+
+          <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}
+            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>
+
+        <div className="mt-6">
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-slate-600"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-slate-800 text-slate-400">Or continue with</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 grid grid-cols-2 gap-4">
+          <button
+            onClick={() => signIn('github')}
+            className="bg-slate-700 hover:bg-slate-600 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center gap-2"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546 1.377-1.333 1.377-1.333 1.06 0 1.783.591 1.783.591.266 0 .494-.107.68-.297.107-.297.469-.936.469-1.684 0-1.251-1.006-2.261-2.261-2.261-.965 0-1.757.781-1.757 1.753 0 .286.08.526.212.743.265.265.265.265.673 0 .995-.265.323-.646.454-.646.454-.323 0-.543-.181-.699-.468-.156-.287-.234-.744-.234-1.364v-2.261c-3.37.726-4.148-1.417-4.148-1.417-.557 1.39-1.353 1.39-1.353 1.073 0 1.814.603 1.814.603.277 0 .516-.111.728-.296.212-.185.313-.61.313-1.303 0-1.258-1.018-2.274-2.274-2.274-.984 0-1.796.802-1.796 1.796 0 .29.095.536.26.758.26.26.26.669 0 .996-.266.327-.649.457-.649.457-.33 0-.556-.186-.713-.48-.157-.293-.236-.767-.236-1.404v-2.279c-3.404.741-4.242-1.447-4.242-1.447-.569 1.416-1.379 1.416-1.379 1.084 0 1.829.616 1.829.616.283 0 .523-.113.742-.301.22-.188.327-.626.327-1.323 0-1.265-1.03-2.29-2.29-2.29-1.006 0-1.831.825-1.831 1.831 0 .294.099.543.277.767.277.277.277.693 0 1.004-.27.311-.663.437-.663.437-.34 0-.571-.197-.736-.506-.165-.31-.248-.794-.248-1.447v-2.293c-3.432.748-4.338-1.48-4.338-1.48-.583 1.44-1.404 1.44-1.404 1.095 0 1.846.629 1.846.629.29 0 .537-.116.76-.308.223-.192.34-.648.34-1.35 0-1.271-1.044-2.304-2.304-2.304-1.029 0-1.867.839-1.867 1.867 0 .298.102.55.286.775.286.286.286.718 0 1.039-.278.316-.682.443-.682.443-.349 0-.597-.204-.761-.523-.165-.32-.248-.825-.248-1.491v-2.307c-3.462.756-4.432-1.514-4.432-1.514-.597 1.463-1.431 1.463-1.431 1.105 0 1.864.64 1.864.64.297 0 .55-.119.774-.313.224-.193.353-.672.353-1.377 0-1.277-1.059-2.318-2.318-2.318-1.053 0-1.904.865-1.904 1.904 0 .302.105.557.297.786.297.297.297.741 0 1.075-.284.32-.716.447-.716.447-.358 0-.622-.211-.788-.549-.167-.338-.25-.858-.25-1.536v-2.322c-3.49.764-4.525-1.549-4.525-1.549-.611 1.487-1.457 1.487-1.457 1.116 0 1.882.651 1.882.651.303 0 .562-.123.792-.319.23-.196.361-.696.361-1.405 0-1.283-1.074-2.332-2.332-2.332-1.078 0-1.94.881-1.94 1.94 0 .306.107.567.303.798.303.303.303.763 0 1.111-.29.325-.75.452-.75.452-.367 0-.646-.219-.814-.575-.168-.357-.254-.891-.254-1.582v-2.336c-3.52.772-4.617-1.585-4.617-1.585-.625 1.511-1.484 1.511-1.484 1.127 0 1.9.663 1.9.663.309 0 .574-.127.81-.326.236-.199.368-.721.368-1.432 0-1.29-1.089-2.346-2.346-2.346-1.103 0-1.976.904-1.976 1.976 0 .31.109.579.31.81.31.31.31.784 0 1.147-.298.331-.783.457-.783.457-.376 0-.67-.227-.842-.602-.172-.376-.259-.923-.259-1.628v-2.35z"/>
+            </svg>
+            GitHub
+          </button>
+          <button
+            onClick={() => signIn('google')}
+            className="bg-slate-700 hover:bg-slate-600 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center gap-2"
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+              <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+              <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+              <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+            </svg>
+            Google
+          </button>
+        </div>
+
+        <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>
+  );
+}

frontend/app/auth/signup/page.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function SignUp() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          password: formData.password
+        })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.error || 'Registration failed');
+      } else {
+        setSuccess(true);
+        setTimeout(() => {
+          window.location.href = '/auth/signin';
+        }, 2000);
+      }
+    } catch (err) {
+      setError('Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    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 text-center">
+          <div className="text-green-400 text-6xl mb-4">✓</div>
+          <h2 className="text-2xl font-bold text-white mb-2">Account Created!</h2>
+          <p className="text-slate-400">Redirecting to sign in...</p>
+        </div>
+      </div>
+    );
+  }
+
+  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={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">
+              Name
+            </label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={(e) => setFormData({...formData, name: 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="John Doe"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">
+              Email
+            </label>
+            <input
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData({...formData, email: 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={formData.password}
+              onChange={(e) => setFormData({...formData, password: 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>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              value={formData.confirmPassword}
+              onChange={(e) => setFormData({...formData, confirmPassword: 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}
+            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...' : 'Create Account'}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-slate-400">
+          Already have an account?{' '}
+          <a href="/auth/signin" className="text-blue-400 hover:text-blue-300">
+            Sign in
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/app/filings/page.tsx

@@ -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>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/layout.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { SessionProvider } from 'next-auth/react';
+import './globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <SessionProvider>
+          {children}
+        </SessionProvider>
+      </body>
+    </html>
+  )
+}

frontend/app/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+export default function Home() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const [stats, setStats] = useState({ filings: 0, portfolioValue: 0, watchlist: 0 });
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      router.push('/auth/signin');
+      return;
+    }
+
+    if (session?.user) {
+      fetchStats(session.user.id);
+    }
+  }, [session, status, router]);
+
+  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 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
+      });
+    } catch (error) {
+      console.error('Error fetching stats:', error);
+    }
+  };
+
+  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="mb-6">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-slate-400">Welcome back, {session?.user?.name}</p>
+        </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>
+  );
+}

frontend/app/portfolio/page.tsx

@@ -0,0 +1,297 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+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';
+
+export default function PortfolioPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const [portfolio, setPortfolio] = useState([]);
+  const [summary, setSummary] = useState({ total_value: 0, total_gain_loss: 0, cost_basis: 0 });
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newHolding, setNewHolding] = useState({ ticker: '', shares: '', avg_cost: '' });
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      router.push('/auth/signin');
+      return;
+    }
+
+    if (session?.user) {
+      fetchPortfolio(session.user.id);
+    }
+  }, [session, status, 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 portfolioData = await portfolioRes.json();
+      const summaryData = await summaryRes.json();
+
+      setPortfolio(portfolioData);
+      setSummary(summaryData);
+    } catch (error) {
+      console.error('Error fetching portfolio:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddHolding = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_id: session?.user?.id,
+          ticker: newHolding.ticker.toUpperCase(),
+          shares: parseFloat(newHolding.shares),
+          avg_cost: parseFloat(newHolding.avg_cost)
+        })
+      });
+
+      setShowAddModal(false);
+      setNewHolding({ ticker: '', shares: '', avg_cost: '' });
+      fetchPortfolio(session?.user?.id);
+    } catch (error) {
+      console.error('Error adding holding:', error);
+    }
+  };
+
+  const handleDeleteHolding = async (id: number) => {
+    if (!confirm('Are you sure you want to delete this holding?')) return;
+
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/portfolio/${id}`, {
+        method: 'DELETE'
+      });
+
+      fetchPortfolio(session?.user?.id);
+    } catch (error) {
+      console.error('Error deleting holding:', error);
+    }
+  };
+
+  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 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>
+          </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">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>
+
+        <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 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}>
+                <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>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+            ) : (
+              <p className="text-slate-400 text-center py-8">No holdings yet</p>
+            )}
+          </div>
+
+          <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>
+              </ResponsiveContainer>
+            ) : (
+              <p className="text-slate-400 text-center py-8">No performance data yet</p>
+            )}
+          </div>
+        </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>
+
+      {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>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/app/watchlist/page.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+export default function WatchlistPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const [watchlist, setWatchlist] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newStock, setNewStock] = useState({ ticker: '', company_name: '', sector: '' });
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      router.push('/auth/signin');
+      return;
+    }
+
+    if (session?.user) {
+      fetchWatchlist(session.user.id);
+    }
+  }, [session, status, 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);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddStock = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_id: session?.user?.id,
+          ticker: newStock.ticker.toUpperCase(),
+          company_name: newStock.company_name,
+          sector: newStock.sector
+        })
+      });
+
+      setShowAddModal(false);
+      setNewStock({ ticker: '', company_name: '', sector: '' });
+      fetchWatchlist(session?.user?.id);
+    } catch (error) {
+      console.error('Error adding stock:', error);
+    }
+  };
+
+  const handleDeleteStock = async (id: number) => {
+    if (!confirm('Are you sure you want to remove this stock from watchlist?')) return;
+
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/watchlist/${id}`, {
+        method: 'DELETE'
+      });
+
+      fetchWatchlist(session?.user?.id);
+    } catch (error) {
+      console.error('Error deleting stock:', error);
+    }
+  };
+
+  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">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 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>
+          )}
+        </div>
+      </main>
+
+      {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>
+  );
+}

frontend/lib/auth.ts

@@ -0,0 +1,12 @@
+import { getServerSession } from 'next-auth'
+import { redirect } from 'next/navigation'
+
+export async function requireAuth() {
+  const session = await getServerSession()
+
+  if (!session || !session.user) {
+    redirect('/auth/signin')
+  }
+
+  return session
+}

frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'
+  }
+}
+
+module.exports = nextConfig

frontend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "fiscal-frontend",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.0",
+    "next-auth": "^4.24.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "recharts": "^2.12.0",
+    "lucide-react": "^0.344.0",
+    "date-fns": "^3.3.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tailwind.config.js

@@ -0,0 +1,34 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}