Add Next.js components

nextjs-app/src/components/AuthForm.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { useRouter } from 'next/navigation';
+import { Mail, Lock, User, AlertCircle, Loader2 } from 'lucide-react';
+
+export default function AuthForm() {
+  const [isLogin, setIsLogin] = useState(true);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { signIn, signUp } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const { error } = isLogin
+        ? await signIn(email, password)
+        : await signUp(email, password);
+
+      if (error) {
+        setError(error.message);
+      } else {
+        if (!isLogin) {
+          setError('Kayıt başarılı! Lütfen email adresinizi doğrulayın.');
+        } else {
+          router.push('/portfolio');
+        }
+      }
+    } catch (err) {
+      setError('Bir hata oluştu. Lütfen tekrar deneyin.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8">
+        <div className="text-center mb-8">
+          <User className="w-12 h-12 text-primary-600 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold text-gray-900">
+            {isLogin ? 'Giriş Yap' : 'Kayıt Ol'}
+          </h2>
+          <p className="text-gray-600 mt-2">
+            {isLogin
+              ? 'Portföyünüze erişmek için giriş yapın'
+              : 'Yeni bir hesap oluşturun'}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Email
+            </label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                placeholder="ornek@email.com"
+                required
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Şifre
+            </label>
+            <div className="relative">
+              <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                placeholder="••••••••"
+                required
+                minLength={6}
+              />
+            </div>
+            {!isLogin && (
+              <p className="text-xs text-gray-500 mt-1">En az 6 karakter</p>
+            )}
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-2 p-4 bg-red-50 border border-red-200 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-red-600">{error}</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-primary-600 text-white py-3 rounded-lg hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center gap-2 font-medium"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-5 h-5 animate-spin" />
+                İşlem yapılıyor...
+              </>
+            ) : isLogin ? (
+              'Giriş Yap'
+            ) : (
+              'Kayıt Ol'
+            )}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center">
+          <button
+            onClick={() => {
+              setIsLogin(!isLogin);
+              setError('');
+            }}
+            className="text-primary-600 hover:text-primary-800 font-medium"
+          >
+            {isLogin
+              ? 'Hesabınız yok mu? Kayıt olun'
+              : 'Zaten hesabınız var mı? Giriş yapın'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs-app/src/components/MLPredictionCard.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { TrendingUp, TrendingDown, Minus, Brain, Target, Activity } from 'lucide-react';
+
+interface PredictionData {
+  symbol: string;
+  current_price: number;
+  predicted_price: number;
+  prediction_change: number;
+  confidence: number;
+  signal: 'BUY' | 'SELL' | 'HOLD';
+  factors: {
+    trend: string;
+    momentum: string;
+    volatility: string;
+    volume: string;
+  };
+  timestamp: string;
+}
+
+interface MLPredictionCardProps {
+  symbol: string;
+}
+
+export default function MLPredictionCard({ symbol }: MLPredictionCardProps) {
+  const [prediction, setPrediction] = useState<PredictionData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchPrediction();
+  }, [symbol]);
+
+  const fetchPrediction = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const response = await fetch(`/api/ml/predict?symbol=${symbol}`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch prediction');
+      }
+      
+      const data = await response.json();
+      setPrediction(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Brain className="w-5 h-5 text-purple-600" />
+          <h2 className="text-lg font-semibold">ML Tahmin Analizi</h2>
+        </div>
+        <div className="animate-pulse space-y-4">
+          <div className="h-20 bg-gray-200 rounded"></div>
+          <div className="h-32 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !prediction) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Brain className="w-5 h-5 text-purple-600" />
+          <h2 className="text-lg font-semibold">ML Tahmin Analizi</h2>
+        </div>
+        <p className="text-red-600">Tahmin yüklenemedi: {error}</p>
+      </div>
+    );
+  }
+
+  const getSignalColor = (signal: string) => {
+    switch (signal) {
+      case 'BUY':
+        return 'bg-green-100 text-green-800 border-green-300';
+      case 'SELL':
+        return 'bg-red-100 text-red-800 border-red-300';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-300';
+    }
+  };
+
+  const getSignalIcon = (signal: string) => {
+    switch (signal) {
+      case 'BUY':
+        return <TrendingUp className="w-5 h-5" />;
+      case 'SELL':
+        return <TrendingDown className="w-5 h-5" />;
+      default:
+        return <Minus className="w-5 h-5" />;
+    }
+  };
+
+  const getConfidenceColor = (confidence: number) => {
+    if (confidence >= 80) return 'text-green-600';
+    if (confidence >= 60) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-2">
+          <Brain className="w-5 h-5 text-purple-600" />
+          <h2 className="text-lg font-semibold">ML Tahmin Analizi</h2>
+        </div>
+        <button
+          onClick={fetchPrediction}
+          className="text-sm text-purple-600 hover:text-purple-800"
+        >
+          Yenile
+        </button>
+      </div>
+
+      {/* Main Prediction Card */}
+      <div className={`border-2 rounded-lg p-4 mb-6 ${getSignalColor(prediction.signal)}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            {getSignalIcon(prediction.signal)}
+            <span className="text-2xl font-bold">{prediction.signal}</span>
+          </div>
+          <div className="text-right">
+            <div className="text-sm text-gray-600">Güven Skoru</div>
+            <div className={`text-2xl font-bold ${getConfidenceColor(prediction.confidence)}`}>
+              {prediction.confidence}%
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 pt-4 border-t border-current border-opacity-20">
+          <div>
+            <div className="text-sm opacity-75">Mevcut Fiyat</div>
+            <div className="text-xl font-semibold">
+              ₺{prediction.current_price.toFixed(2)}
+            </div>
+          </div>
+          <div>
+            <div className="text-sm opacity-75">Tahmini Fiyat (5 Gün)</div>
+            <div className="text-xl font-semibold">
+              ₺{prediction.predicted_price.toFixed(2)}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-current border-opacity-20">
+          <div className="flex items-center justify-between">
+            <span className="text-sm opacity-75">Beklenen Değişim</span>
+            <span className={`text-lg font-bold ${prediction.prediction_change >= 0 ? 'text-green-700' : 'text-red-700'}`}>
+              {prediction.prediction_change >= 0 ? '+' : ''}
+              {prediction.prediction_change.toFixed(2)}%
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Factors Analysis */}
+      <div className="space-y-3">
+        <h3 className="font-semibold text-gray-700 flex items-center gap-2">
+          <Target className="w-4 h-4" />
+          Analiz Faktörleri
+        </h3>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-gray-50 rounded-lg p-3">
+            <div className="text-xs text-gray-600 mb-1">Trend</div>
+            <div className="font-semibold text-sm">{prediction.factors.trend}</div>
+          </div>
+
+          <div className="bg-gray-50 rounded-lg p-3">
+            <div className="text-xs text-gray-600 mb-1">Momentum</div>
+            <div className="font-semibold text-sm">{prediction.factors.momentum}</div>
+          </div>
+
+          <div className="bg-gray-50 rounded-lg p-3">
+            <div className="text-xs text-gray-600 mb-1">Volatilite</div>
+            <div className="font-semibold text-sm">{prediction.factors.volatility}</div>
+          </div>
+
+          <div className="bg-gray-50 rounded-lg p-3">
+            <div className="text-xs text-gray-600 mb-1">Hacim Trendi</div>
+            <div className="font-semibold text-sm">{prediction.factors.volume}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Methodology Note */}
+      <div className="mt-6 pt-4 border-t border-gray-200">
+        <div className="flex items-start gap-2 text-xs text-gray-500">
+          <Activity className="w-4 h-4 flex-shrink-0 mt-0.5" />
+          <p>
+            Bu tahmin, SMA, EMA, RSI, MACD, Bollinger Bands ve ATR gibi teknik göstergelerin 
+            makine öğrenmesi algoritmaları ile analiz edilmesiyle oluşturulmuştur. 
+            Yatırım tavsiyesi değildir.
+          </p>
+        </div>
+        <div className="text-xs text-gray-400 mt-2">
+          Son Güncelleme: {new Date(prediction.timestamp).toLocaleString('tr-TR')}
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs-app/src/components/MLPredictions.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { MLPrediction } from '@/types'
+import { formatCurrency, formatPercent } from '@/lib/utils'
+import { Brain, TrendingUp, TrendingDown } from 'lucide-react'
+
+export function MLPredictions({ predictions }: { predictions: MLPrediction[] }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center space-x-2 mb-6">
+        <Brain className="h-6 w-6 text-primary-600" />
+        <h2 className="text-xl font-bold text-gray-900">ML Tahminleri</h2>
+      </div>
+
+      <div className="space-y-4">
+        {predictions.map((prediction) => (
+          <PredictionCard key={prediction.id} prediction={prediction} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function PredictionCard({ prediction }: { prediction: MLPrediction }) {
+  const isPositive = prediction.predicted_change_pct > 0
+  const confidencePercent = (prediction.confidence_score * 100).toFixed(1)
+
+  return (
+    <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between mb-3">
+        <div>
+          <div className="flex items-center space-x-2">
+            <span className="text-sm font-semibold text-gray-900">
+              {prediction.model_type}
+            </span>
+            <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
+              prediction.confidence_score > 0.8
+                ? 'bg-green-100 text-green-800'
+                : prediction.confidence_score > 0.6
+                ? 'bg-yellow-100 text-yellow-800'
+                : 'bg-gray-100 text-gray-800'
+            }`}>
+              Güven: {confidencePercent}%
+            </span>
+          </div>
+          <div className="text-xs text-gray-500 mt-1">
+            Tahmin: {new Date(prediction.prediction_date).toLocaleDateString('tr-TR')} → 
+            Hedef: {new Date(prediction.target_date).toLocaleDateString('tr-TR')}
+          </div>
+        </div>
+
+        <div className="text-right">
+          <div className="text-2xl font-bold text-gray-900">
+            {formatCurrency(prediction.predicted_price)}
+          </div>
+          <div className={`flex items-center justify-end space-x-1 mt-1 ${
+            isPositive ? 'text-success' : 'text-danger'
+          }`}>
+            {isPositive ? (
+              <TrendingUp className="h-4 w-4" />
+            ) : (
+              <TrendingDown className="h-4 w-4" />
+            )}
+            <span className="text-sm font-semibold">
+              {formatPercent(prediction.predicted_change_pct)}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {prediction.lower_bound && prediction.upper_bound && (
+        <div className="bg-gray-50 rounded p-3 mt-3">
+          <div className="text-xs text-gray-600 mb-2">Tahmin Aralığı</div>
+          <div className="flex items-center justify-between text-sm">
+            <div>
+              <span className="text-gray-500">Alt: </span>
+              <span className="font-semibold text-gray-900">
+                {formatCurrency(prediction.lower_bound)}
+              </span>
+            </div>
+            <div>
+              <span className="text-gray-500">Üst: </span>
+              <span className="font-semibold text-gray-900">
+                {formatCurrency(prediction.upper_bound)}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {prediction.actual_price && (
+        <div className="mt-3 pt-3 border-t border-gray-200">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-gray-600">Gerçekleşen:</span>
+            <div className="flex items-center space-x-4">
+              <span className="font-semibold text-gray-900">
+                {formatCurrency(prediction.actual_price)}
+              </span>
+              {prediction.prediction_error !== null && (
+                <span className={`text-xs ${
+                  Math.abs(prediction.prediction_error) < 5 
+                    ? 'text-green-600' 
+                    : 'text-red-600'
+                }`}>
+                  Hata: {prediction.prediction_error.toFixed(2)}%
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

nextjs-app/src/components/MarketOverview.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { TrendingUp, TrendingDown, Activity } from 'lucide-react'
+
+interface MarketStats {
+  totalStocks: number
+  gainers: number
+  losers: number
+  unchanged: number
+}
+
+export function MarketOverview() {
+  const [stats, setStats] = useState<MarketStats | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        const response = await fetch('/api/stocks')
+        const data = await response.json()
+        const stocks = Array.isArray(data) ? data : []
+        
+        const statsData = {
+          totalStocks: stocks.length,
+          gainers: stocks.filter((s: any) => s.change_pct > 0).length,
+          losers: stocks.filter((s: any) => s.change_pct < 0).length,
+          unchanged: stocks.filter((s: any) => s.change_pct === 0).length,
+        }
+        
+        setStats(statsData)
+      } catch (error) {
+        console.error('Failed to fetch market stats:', error)
+        setStats({ totalStocks: 0, gainers: 0, losers: 0, unchanged: 0 })
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchStats()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="bg-white rounded-lg shadow p-6 animate-pulse">
+            <div className="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
+            <div className="h-8 bg-gray-200 rounded w-3/4"></div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (!stats) return null
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+      <StatCard
+        title="Toplam Hisse"
+        value={stats.totalStocks}
+        icon={<Activity className="h-6 w-6" />}
+        color="blue"
+      />
+      <StatCard
+        title="Yükselenler"
+        value={stats.gainers}
+        icon={<TrendingUp className="h-6 w-6" />}
+        color="green"
+      />
+      <StatCard
+        title="Düşenler"
+        value={stats.losers}
+        icon={<TrendingDown className="h-6 w-6" />}
+        color="red"
+      />
+      <StatCard
+        title="Değişmeyenler"
+        value={stats.unchanged}
+        icon={<Activity className="h-6 w-6" />}
+        color="gray"
+      />
+    </div>
+  )
+}
+
+function StatCard({ 
+  title, 
+  value, 
+  icon, 
+  color 
+}: { 
+  title: string
+  value: number
+  icon: React.ReactNode
+  color: 'blue' | 'green' | 'red' | 'gray'
+}) {
+  const colorClasses = {
+    blue: 'bg-blue-50 text-blue-600',
+    green: 'bg-green-50 text-green-600',
+    red: 'bg-red-50 text-red-600',
+    gray: 'bg-gray-50 text-gray-600',
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className="text-3xl font-bold text-gray-900 mt-2">{value}</p>
+        </div>
+        <div className={`p-3 rounded-lg ${colorClasses[color]}`}>
+          {icon}
+        </div>
+      </div>
+    </div>
+  )
+}

nextjs-app/src/components/Navigation.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+import { 
+  TrendingUp, BarChart3, Brain, Sparkles, Briefcase, LogIn, LogOut, 
+  Activity, Search, Zap, Building2, History, Newspaper, Target, Menu, X 
+} from 'lucide-react'
+import { useAuth } from '@/contexts/AuthContext'
+
+export function Navigation() {
+  const { user, signOut, loading } = useAuth();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <nav className="bg-white shadow-sm border-b sticky top-0 z-50">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          <Link href="/" className="flex items-center space-x-2">
+            <TrendingUp className="h-8 w-8 text-blue-600" />
+            <span className="text-xl font-bold text-gray-900">BIST Analiz</span>
+          </Link>
+
+          {/* Desktop Menu */}
+          <div className="hidden lg:flex items-center space-x-1">
+            <NavLink href="/" icon={<BarChart3 className="h-4 w-4" />}>
+              Piyasa
+            </NavLink>
+            <NavLink href="/bist100" icon={<Activity className="h-4 w-4" />}>
+              BIST100
+            </NavLink>
+            <NavLink href="/scanner" icon={<Search className="h-4 w-4" />}>
+              Tarayıcı
+            </NavLink>
+            <NavLink href="/ml-scan" icon={<Zap className="h-4 w-4" />}>
+              ML Tarama
+            </NavLink>
+            <NavLink href="/ai-analysis" icon={<Brain className="h-4 w-4" />}>
+              AI Analiz
+            </NavLink>
+            <NavLink href="/backtest" icon={<Target className="h-4 w-4" />}>
+              Backtest
+            </NavLink>
+            <NavLink href="/sentiment" icon={<Sparkles className="h-4 w-4" />}>
+              Duygu Analizi
+            </NavLink>
+            <NavLink href="/news" icon={<Newspaper className="h-4 w-4" />}>
+              Haberler
+            </NavLink>
+            <NavLink href="/profiles" icon={<Building2 className="h-4 w-4" />}>
+              Profiller
+            </NavLink>
+            
+            {!loading && (
+              <>
+                {user ? (
+                  <>
+                    <NavLink href="/history" icon={<History className="h-4 w-4" />}>
+                      Geçmiş
+                    </NavLink>
+                    <NavLink href="/portfolio" icon={<Briefcase className="h-4 w-4" />}>
+                      Portföy
+                    </NavLink>
+                    <button
+                      onClick={() => signOut()}
+                      className="flex items-center space-x-2 px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100 transition-colors text-sm"
+                    >
+                      <LogOut className="h-4 w-4" />
+                      <span className="font-medium">Çıkış</span>
+                    </button>
+                  </>
+                ) : (
+                  <NavLink href="/login" icon={<LogIn className="h-4 w-4" />}>
+                    Giriş
+                  </NavLink>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="lg:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100"
+          >
+            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="lg:hidden py-4 space-y-2 border-t">
+            <MobileNavLink href="/" icon={<BarChart3 className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              Piyasa
+            </MobileNavLink>
+            <MobileNavLink href="/bist100" icon={<Activity className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              BIST100
+            </MobileNavLink>
+            <MobileNavLink href="/scanner" icon={<Search className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              Teknik Tarayıcı
+            </MobileNavLink>
+            <MobileNavLink href="/ml-scan" icon={<Zap className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              ML Toplu Tarama
+            </MobileNavLink>
+            <MobileNavLink href="/ai-analysis" icon={<Brain className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              AI Analiz
+            </MobileNavLink>
+            <MobileNavLink href="/backtest" icon={<Target className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              ML Backtest
+            </MobileNavLink>
+            <MobileNavLink href="/sentiment" icon={<Sparkles className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              Duygu Analizi
+            </MobileNavLink>
+            <MobileNavLink href="/news" icon={<Newspaper className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              Haberler
+            </MobileNavLink>
+            <MobileNavLink href="/profiles" icon={<Building2 className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+              Hisse Profilleri
+            </MobileNavLink>
+            
+            {!loading && user && (
+              <>
+                <MobileNavLink href="/history" icon={<History className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+                  Analiz Geçmişi
+                </MobileNavLink>
+                <MobileNavLink href="/portfolio" icon={<Briefcase className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+                  Portföyüm
+                </MobileNavLink>
+              </>
+            )}
+
+            {!loading && (
+              <div className="pt-2 border-t">
+                {user ? (
+                  <button
+                    onClick={() => {
+                      signOut();
+                      setMobileMenuOpen(false);
+                    }}
+                    className="w-full flex items-center space-x-3 px-4 py-3 rounded-md text-gray-700 hover:bg-gray-100 transition-colors"
+                  >
+                    <LogOut className="h-5 w-5" />
+                    <span className="font-medium">Çıkış Yap</span>
+                  </button>
+                ) : (
+                  <MobileNavLink href="/login" icon={<LogIn className="h-5 w-5" />} onClick={() => setMobileMenuOpen(false)}>
+                    Giriş Yap
+                  </MobileNavLink>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </nav>
+  )
+}
+
+function NavLink({ 
+  href, 
+  icon, 
+  children 
+}: { 
+  href: string
+  icon: React.ReactNode
+  children: React.ReactNode 
+}) {
+  return (
+    <Link
+      href={href}
+      className="flex items-center space-x-1.5 px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100 hover:text-blue-600 transition-colors text-sm"
+    >
+      {icon}
+      <span className="font-medium">{children}</span>
+    </Link>
+  )
+}
+
+function MobileNavLink({ 
+  href, 
+  icon, 
+  children,
+  onClick 
+}: { 
+  href: string
+  icon: React.ReactNode
+  children: React.ReactNode
+  onClick?: () => void
+}) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className="flex items-center space-x-3 px-4 py-3 rounded-md text-gray-700 hover:bg-gray-100 hover:text-blue-600 transition-colors"
+    >
+      {icon}
+      <span className="font-medium">{children}</span>
+    </Link>
+  )
+}

nextjs-app/src/components/NewsCard.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { ExternalLink, TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+interface NewsItem {
+  id: number;
+  symbol: string;
+  title: string;
+  content: string;
+  source: string;
+  published_at: string;
+  url: string;
+  sentiment: 'positive' | 'negative' | 'neutral';
+}
+
+export default function NewsCard({ news }: { news: NewsItem }) {
+  const getSentimentIcon = (sentiment: string) => {
+    switch (sentiment) {
+      case 'positive':
+        return <TrendingUp className="w-4 h-4 text-green-600" />;
+      case 'negative':
+        return <TrendingDown className="w-4 h-4 text-red-600" />;
+      default:
+        return <Minus className="w-4 h-4 text-gray-600" />;
+    }
+  };
+
+  const getSentimentColor = (sentiment: string) => {
+    switch (sentiment) {
+      case 'positive':
+        return 'bg-green-50 border-green-200';
+      case 'negative':
+        return 'bg-red-50 border-red-200';
+      default:
+        return 'bg-gray-50 border-gray-200';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffHours < 1) {
+      const diffMins = Math.floor(diffMs / (1000 * 60));
+      return `${diffMins} dakika önce`;
+    } else if (diffHours < 24) {
+      return `${diffHours} saat önce`;
+    } else if (diffDays < 7) {
+      return `${diffDays} gün önce`;
+    } else {
+      return date.toLocaleDateString('tr-TR');
+    }
+  };
+
+  return (
+    <div
+      className={`p-4 rounded-lg border ${getSentimentColor(
+        news.sentiment
+      )} hover:shadow-md transition-shadow`}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">
+            {news.symbol}
+          </span>
+          <span className="text-xs text-gray-500">{news.source}</span>
+          {getSentimentIcon(news.sentiment)}
+        </div>
+        <span className="text-xs text-gray-500">{formatDate(news.published_at)}</span>
+      </div>
+
+      <h3 className="font-semibold text-gray-900 mb-2">{news.title}</h3>
+      <p className="text-sm text-gray-600 mb-3 line-clamp-2">{news.content}</p>
+
+      <a
+        href={news.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
+      >
+        Detayları Gör
+        <ExternalLink className="w-3 h-3" />
+      </a>
+    </div>
+  );
+}

nextjs-app/src/components/PriceChart.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { formatCurrency } from '@/lib/utils'
+
+interface PriceData {
+  date: string
+  close: number
+  high: number
+  low: number
+  volume: number
+}
+
+export function PriceChart({ symbol }: { symbol: string }) {
+  const [data, setData] = useState<PriceData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [period, setPeriod] = useState(30)
+
+  useEffect(() => {
+    async function fetchPrices() {
+      try {
+        const response = await fetch(`/api/stocks/${symbol}/prices?days=${period}`)
+        const prices = await response.json()
+        setData(prices)
+      } catch (error) {
+        console.error('Failed to fetch prices:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchPrices()
+  }, [symbol, period])
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="h-96 bg-gray-100 rounded animate-pulse"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-gray-900">Fiyat Grafiği</h2>
+        <div className="flex space-x-2">
+          {[7, 30, 90, 180].map((days) => (
+            <button
+              key={days}
+              onClick={() => setPeriod(days)}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+                period === days
+                  ? 'bg-primary-600 text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {days}G
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {data.length > 0 ? (
+        <ResponsiveContainer width="100%" height={400}>
+          <LineChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            <XAxis 
+              dataKey="date" 
+              stroke="#6b7280"
+              tick={{ fontSize: 12 }}
+            />
+            <YAxis 
+              stroke="#6b7280"
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `₺${value}`}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#fff',
+                border: '1px solid #e5e7eb',
+                borderRadius: '8px',
+              }}
+              formatter={(value: any) => formatCurrency(value)}
+            />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="close"
+              stroke="#0ea5e9"
+              strokeWidth={2}
+              dot={false}
+              name="Kapanış"
+            />
+            <Line
+              type="monotone"
+              dataKey="high"
+              stroke="#10b981"
+              strokeWidth={1}
+              dot={false}
+              strokeDasharray="5 5"
+              name="Yüksek"
+            />
+            <Line
+              type="monotone"
+              dataKey="low"
+              stroke="#ef4444"
+              strokeWidth={1}
+              dot={false}
+              strokeDasharray="5 5"
+              name="Düşük"
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="h-96 flex items-center justify-center text-gray-500">
+          Fiyat verisi bulunamadı
+        </div>
+      )}
+    </div>
+  )
+}

nextjs-app/src/components/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { useRouter } from 'next/navigation';
+import { Loader2 } from 'lucide-react';
+
+export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push('/login');
+    }
+  }, [user, loading, router]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

nextjs-app/src/components/SentimentAnalyzer.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import { MessageSquare, TrendingUp, TrendingDown, Minus, Sparkles } from 'lucide-react';
+
+interface SentimentResult {
+  label: 'POSITIVE' | 'NEGATIVE' | 'NEUTRAL';
+  score: number;
+}
+
+interface SentimentData {
+  text: string;
+  sentiment: SentimentResult;
+  timestamp: string;
+}
+
+export default function SentimentAnalyzer() {
+  const [text, setText] = useState('');
+  const [result, setResult] = useState<SentimentData | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const analyzeSentiment = async () => {
+    if (!text.trim()) return;
+    
+    setLoading(true);
+    try {
+      const response = await fetch('/api/sentiment', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text })
+      });
+      
+      const data = await response.json();
+      setResult(data);
+    } catch (error) {
+      console.error('Sentiment analysis failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getSentimentColor = (label: string) => {
+    switch (label) {
+      case 'POSITIVE':
+        return 'text-green-600 bg-green-50 border-green-200';
+      case 'NEGATIVE':
+        return 'text-red-600 bg-red-50 border-red-200';
+      default:
+        return 'text-gray-600 bg-gray-50 border-gray-200';
+    }
+  };
+
+  const getSentimentIcon = (label: string) => {
+    switch (label) {
+      case 'POSITIVE':
+        return <TrendingUp className="w-5 h-5" />;
+      case 'NEGATIVE':
+        return <TrendingDown className="w-5 h-5" />;
+      default:
+        return <Minus className="w-5 h-5" />;
+    }
+  };
+
+  const getSentimentLabel = (label: string) => {
+    switch (label) {
+      case 'POSITIVE':
+        return 'Pozitif';
+      case 'NEGATIVE':
+        return 'Negatif';
+      default:
+        return 'Nötr';
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Sparkles className="w-5 h-5 text-indigo-600" />
+        <h2 className="text-lg font-semibold">Haber Duygu Analizi</h2>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Haber Metni (Türkçe)
+          </label>
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Örnek: THYAO hisseleri bugün %5 yükseliş gösterdi ve yeni rekor kırdı..."
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
+            rows={4}
+          />
+        </div>
+
+        <button
+          onClick={analyzeSentiment}
+          disabled={loading || !text.trim()}
+          className="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          <MessageSquare className="w-5 h-5" />
+          {loading ? 'Analiz Ediliyor...' : 'Duygu Analizi Yap'}
+        </button>
+
+        {result && (
+          <div className={`mt-6 p-4 border-2 rounded-lg ${getSentimentColor(result.sentiment.label)}`}>
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                {getSentimentIcon(result.sentiment.label)}
+                <span className="text-xl font-bold">
+                  {getSentimentLabel(result.sentiment.label)}
+                </span>
+              </div>
+              <div className="text-right">
+                <div className="text-sm opacity-75">Güven</div>
+                <div className="text-2xl font-bold">
+                  {Math.round(result.sentiment.score * 100)}%
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 pt-4 border-t border-current border-opacity-20">
+              <div className="text-sm opacity-75">Analiz Edilen Metin:</div>
+              <div className="mt-2 text-sm italic">"{result.text}"</div>
+            </div>
+          </div>
+        )}
+
+        <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <div className="flex items-start gap-2 text-sm text-blue-800">
+            <MessageSquare className="w-4 h-4 flex-shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold mb-1">Türkçe NLP ile Duygu Analizi</p>
+              <p className="text-xs text-blue-700">
+                Haber metinleri, sosyal medya paylaşımları ve finansal raporların 
+                duygusal tonunu analiz eder. HuggingFace BERT modelini kullanır, 
+                fallback olarak kural tabanlı analiz yapar.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs-app/src/components/StockDetail.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { PriceChart } from './PriceChart'
+import { TechnicalIndicators } from './TechnicalIndicators'
+import { MLPredictions } from './MLPredictions'
+import MLPredictionCard from './MLPredictionCard'
+import { formatCurrency, formatPercent } from '@/lib/utils'
+import { TrendingUp, TrendingDown, ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
+interface StockData {
+  stock: any
+  latestPrice: any
+  indicators: any
+  predictions: any[]
+}
+
+export function StockDetail({ symbol }: { symbol: string }) {
+  const [data, setData] = useState<StockData | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchStockData() {
+      try {
+        const response = await fetch(`/api/stocks/${symbol}`)
+        const stockData = await response.json()
+        setData(stockData)
+      } catch (error) {
+        console.error('Failed to fetch stock data:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchStockData()
+  }, [symbol])
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="h-32 bg-white rounded-lg shadow animate-pulse"></div>
+        <div className="h-96 bg-white rounded-lg shadow animate-pulse"></div>
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="bg-white rounded-lg shadow p-12 text-center">
+        <p className="text-gray-500">Hisse bilgisi bulunamadı</p>
+        <Link href="/" className="text-primary-600 hover:text-primary-800 mt-4 inline-block">
+          Ana sayfaya dön
+        </Link>
+      </div>
+    )
+  }
+
+  const { stock, latestPrice } = data
+  const changePct = latestPrice?.change_pct || 0
+  const isPositive = changePct > 0
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      <Link 
+        href="/"
+        className="inline-flex items-center space-x-2 text-gray-600 hover:text-gray-900"
+      >
+        <ArrowLeft className="h-5 w-5" />
+        <span>Geri</span>
+      </Link>
+
+      {/* Header */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">{stock.symbol}</h1>
+            <p className="text-lg text-gray-600 mt-1">{stock.name}</p>
+            <p className="text-sm text-gray-500 mt-1">{stock.sector}</p>
+          </div>
+          <div className="text-right">
+            <div className="text-3xl font-bold text-gray-900">
+              {latestPrice?.last_price ? formatCurrency(latestPrice.last_price) : '-'}
+            </div>
+            {latestPrice && (
+              <div className={`flex items-center justify-end space-x-2 mt-2 ${
+                isPositive ? 'text-success' : 'text-danger'
+              }`}>
+                {isPositive ? (
+                  <TrendingUp className="h-5 w-5" />
+                ) : (
+                  <TrendingDown className="h-5 w-5" />
+                )}
+                <span className="text-lg font-semibold">
+                  {formatPercent(changePct)}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Key stats */}
+        <div className="grid grid-cols-4 gap-4 mt-6 pt-6 border-t">
+          <StatItem label="Açılış" value={latestPrice?.last_price} format="currency" />
+          <StatItem label="Yüksek" value={latestPrice?.day_high} format="currency" />
+          <StatItem label="Düşük" value={latestPrice?.day_low} format="currency" />
+          <StatItem label="Hacim" value={latestPrice?.volume} format="number" />
+        </div>
+      </div>
+
+      {/* Price Chart */}
+      <PriceChart symbol={symbol} />
+
+      {/* Technical Indicators */}
+      {data.indicators && (
+        <TechnicalIndicators indicators={data.indicators} />
+      )}
+
+      {/* ML Prediction Analysis */}
+      <MLPredictionCard symbol={symbol} />
+
+      {/* ML Predictions (Old) */}
+      {data.predictions && data.predictions.length > 0 && (
+        <MLPredictions predictions={data.predictions} />
+      )}
+    </div>
+  )
+}
+
+function StatItem({ 
+  label, 
+  value, 
+  format 
+}: { 
+  label: string
+  value: any
+  format: 'currency' | 'number' | 'percent'
+}) {
+  const formatValue = () => {
+    if (value === null || value === undefined) return '-'
+    
+    switch (format) {
+      case 'currency':
+        return formatCurrency(value)
+      case 'number':
+        return new Intl.NumberFormat('tr-TR').format(value)
+      case 'percent':
+        return formatPercent(value)
+      default:
+        return value
+    }
+  }
+
+  return (
+    <div>
+      <div className="text-sm text-gray-500">{label}</div>
+      <div className="text-lg font-semibold text-gray-900 mt-1">
+        {formatValue()}
+      </div>
+    </div>
+  )
+}

nextjs-app/src/components/StockList.tsx

@@ -0,0 +1,176 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { StockSummary } from '@/types'
+import { formatCurrency, formatPercent } from '@/lib/utils'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+export function StockList() {
+  const [stocks, setStocks] = useState<StockSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [filter, setFilter] = useState('')
+
+  useEffect(() => {
+    async function fetchStocks() {
+      try {
+        const response = await fetch('/api/stocks')
+        const data = await response.json()
+        setStocks(Array.isArray(data) ? data : [])
+      } catch (error) {
+        console.error('Failed to fetch stocks:', error)
+        setStocks([])
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchStocks()
+  }, [])
+
+  const filteredStocks = (stocks || []).filter(stock =>
+    stock.symbol.toLowerCase().includes(filter.toLowerCase()) ||
+    stock.name.toLowerCase().includes(filter.toLowerCase())
+  )
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow">
+        <div className="p-6 border-b">
+          <div className="h-8 bg-gray-200 rounded w-1/4 animate-pulse"></div>
+        </div>
+        <div className="p-6 space-y-4">
+          {[...Array(10)].map((_, i) => (
+            <div key={i} className="h-16 bg-gray-100 rounded animate-pulse"></div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow">
+      <div className="p-6 border-b">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Hisse Senetleri</h2>
+        <input
+          type="text"
+          placeholder="Hisse ara (sembol veya isim)..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+        />
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-50 border-b">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Sembol
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Şirket
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Fiyat
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Değişim
+              </th>
+              <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Trend
+              </th>
+              <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                RSI
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {filteredStocks.map((stock) => (
+              <tr key={stock.id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <Link 
+                    href={`/stocks/${stock.symbol}`}
+                    className="text-primary-600 font-semibold hover:text-primary-800"
+                  >
+                    {stock.symbol}
+                  </Link>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900">{stock.name}</div>
+                  <div className="text-xs text-gray-500">{stock.sector}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right">
+                  <div className="text-sm font-medium text-gray-900">
+                    {stock.last_price ? formatCurrency(stock.last_price) : '-'}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right">
+                  {stock.change_pct !== null && stock.change_pct !== undefined ? (
+                    <div className="flex items-center justify-end space-x-1">
+                      {stock.change_pct > 0 ? (
+                        <>
+                          <TrendingUp className="h-4 w-4 text-success" />
+                          <span className="text-sm font-medium text-success">
+                            {formatPercent(stock.change_pct)}
+                          </span>
+                        </>
+                      ) : stock.change_pct < 0 ? (
+                        <>
+                          <TrendingDown className="h-4 w-4 text-danger" />
+                          <span className="text-sm font-medium text-danger">
+                            {formatPercent(stock.change_pct)}
+                          </span>
+                        </>
+                      ) : (
+                        <span className="text-sm text-gray-500">0.00%</span>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-center">
+                  {stock.trend ? (
+                    <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                      stock.trend === 'bullish' 
+                        ? 'bg-green-100 text-green-800'
+                        : stock.trend === 'bearish'
+                        ? 'bg-red-100 text-red-800'
+                        : 'bg-gray-100 text-gray-800'
+                    }`}>
+                      {stock.trend === 'bullish' ? 'Yükseliş' : stock.trend === 'bearish' ? 'Düşüş' : 'Nötr'}
+                    </span>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-center">
+                  {stock.rsi_14 !== null ? (
+                    <span className={`text-sm font-medium ${
+                      stock.rsi_14 > 70 
+                        ? 'text-red-600'
+                        : stock.rsi_14 < 30
+                        ? 'text-green-600'
+                        : 'text-gray-600'
+                    }`}>
+                      {stock.rsi_14.toFixed(1)}
+                    </span>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {filteredStocks.length === 0 && (
+        <div className="p-12 text-center text-gray-500">
+          Hiç hisse bulunamadı
+        </div>
+      )}
+    </div>
+  )
+}

nextjs-app/src/components/TechnicalIndicators.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { TechnicalIndicator } from '@/types'
+
+export function TechnicalIndicators({ indicators }: { indicators: TechnicalIndicator }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h2 className="text-xl font-bold text-gray-900 mb-6">Teknik Göstergeler</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* Moving Averages */}
+        <IndicatorGroup title="Hareketli Ortalamalar">
+          <IndicatorItem label="SMA 5" value={indicators.sma_5} />
+          <IndicatorItem label="SMA 10" value={indicators.sma_10} />
+          <IndicatorItem label="SMA 20" value={indicators.sma_20} />
+          <IndicatorItem label="SMA 50" value={indicators.sma_50} />
+          <IndicatorItem label="SMA 200" value={indicators.sma_200} />
+          <IndicatorItem label="EMA 12" value={indicators.ema_12} />
+          <IndicatorItem label="EMA 26" value={indicators.ema_26} />
+        </IndicatorGroup>
+
+        {/* Oscillators */}
+        <IndicatorGroup title="Osilatörler">
+          <IndicatorItem 
+            label="RSI (14)" 
+            value={indicators.rsi_14} 
+            colorize={(val) => 
+              val > 70 ? 'text-red-600' : 
+              val < 30 ? 'text-green-600' : 
+              'text-gray-900'
+            }
+          />
+          <IndicatorItem label="MACD" value={indicators.macd} precision={4} />
+          <IndicatorItem label="MACD Signal" value={indicators.macd_signal} precision={4} />
+          <IndicatorItem label="MACD Histogram" value={indicators.macd_histogram} precision={4} />
+          <IndicatorItem label="Stochastic K" value={indicators.stochastic_k} />
+          <IndicatorItem label="Stochastic D" value={indicators.stochastic_d} />
+          <IndicatorItem label="Williams %R" value={indicators.williams_r} />
+          <IndicatorItem label="CCI (20)" value={indicators.cci_20} precision={2} />
+        </IndicatorGroup>
+
+        {/* Volatility */}
+        <IndicatorGroup title="Volatilite">
+          <IndicatorItem label="Bollinger Üst" value={indicators.bollinger_upper} />
+          <IndicatorItem label="Bollinger Orta" value={indicators.bollinger_middle} />
+          <IndicatorItem label="Bollinger Alt" value={indicators.bollinger_lower} />
+          <IndicatorItem label="ATR (14)" value={indicators.atr_14} precision={4} />
+        </IndicatorGroup>
+      </div>
+
+      <div className="mt-4 pt-4 border-t text-sm text-gray-500">
+        Son güncelleme: {new Date(indicators.date).toLocaleDateString('tr-TR')}
+      </div>
+    </div>
+  )
+}
+
+function IndicatorGroup({ 
+  title, 
+  children 
+}: { 
+  title: string
+  children: React.ReactNode 
+}) {
+  return (
+    <div className="space-y-3">
+      <h3 className="font-semibold text-gray-700 text-sm uppercase tracking-wide">
+        {title}
+      </h3>
+      <div className="space-y-2">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function IndicatorItem({ 
+  label, 
+  value,
+  precision = 2,
+  colorize
+}: { 
+  label: string
+  value: number | null
+  precision?: number
+  colorize?: (value: number) => string
+}) {
+  const displayValue = value !== null && value !== undefined
+    ? value.toFixed(precision)
+    : '-'
+
+  const colorClass = value !== null && colorize 
+    ? colorize(value)
+    : 'text-gray-900'
+
+  return (
+    <div className="flex items-center justify-between py-1">
+      <span className="text-sm text-gray-600">{label}</span>
+      <span className={`text-sm font-semibold ${colorClass}`}>
+        {displayValue}
+      </span>
+    </div>
+  )
+}

nextjs-app/src/components/TopMLPredictions.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Brain, TrendingUp, TrendingDown, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+
+interface TopPrediction {
+  symbol: string;
+  name: string;
+  current_price: number;
+  predicted_price: number;
+  prediction_change: number;
+  confidence: number;
+  signal: 'BUY' | 'SELL' | 'HOLD';
+}
+
+export default function TopMLPredictions() {
+  const [predictions, setPredictions] = useState<TopPrediction[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchTopPredictions();
+  }, []);
+
+  const fetchTopPredictions = async () => {
+    try {
+      setLoading(true);
+      
+      // Get top stocks
+      const stocksRes = await fetch('/api/stocks?limit=21');
+      const stocks = await stocksRes.json();
+      
+      // Get predictions for all stocks
+      const symbols = stocks.map((s: any) => s.symbol);
+      const predictionsRes = await fetch('/api/ml/predict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ symbols })
+      });
+      
+      const data = await predictionsRes.json();
+      
+      // Combine stock info with predictions
+      const combined = data.predictions.map((pred: any) => {
+        const stock = stocks.find((s: any) => s.symbol === pred.symbol);
+        return {
+          ...pred,
+          name: stock?.name || pred.symbol
+        };
+      });
+      
+      // Sort by signal (BUY first) and confidence
+      const sorted = combined.sort((a: TopPrediction, b: TopPrediction) => {
+        if (a.signal === 'BUY' && b.signal !== 'BUY') return -1;
+        if (a.signal !== 'BUY' && b.signal === 'BUY') return 1;
+        return b.confidence - a.confidence;
+      });
+      
+      setPredictions(sorted.slice(0, 5)); // Top 5
+    } catch (error) {
+      console.error('Failed to fetch predictions:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Brain className="w-5 h-5 text-purple-600" />
+          <h2 className="text-lg font-semibold">Top ML Tahminleri</h2>
+        </div>
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Brain className="w-5 h-5 text-purple-600" />
+          <h2 className="text-lg font-semibold">Top ML Tahminleri</h2>
+        </div>
+        <button
+          onClick={fetchTopPredictions}
+          className="text-sm text-purple-600 hover:text-purple-800"
+        >
+          Yenile
+        </button>
+      </div>
+
+      <div className="space-y-3">
+        {predictions.map((pred) => (
+          <Link
+            key={pred.symbol}
+            href={`/stocks/${pred.symbol}`}
+            className="block p-4 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-semibold text-gray-900">{pred.symbol}</span>
+                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                    pred.signal === 'BUY' 
+                      ? 'bg-green-100 text-green-800'
+                      : pred.signal === 'SELL'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}>
+                    {pred.signal}
+                  </span>
+                </div>
+                <div className="text-sm text-gray-600 mt-1">{pred.name}</div>
+              </div>
+              
+              <div className="text-right">
+                <div className="text-sm text-gray-600">
+                  Güven: <span className="font-semibold">{pred.confidence}%</span>
+                </div>
+                <div className={`text-sm font-semibold mt-1 flex items-center justify-end gap-1 ${
+                  pred.prediction_change >= 0 ? 'text-green-600' : 'text-red-600'
+                }`}>
+                  {pred.prediction_change >= 0 ? (
+                    <TrendingUp className="w-4 h-4" />
+                  ) : (
+                    <TrendingDown className="w-4 h-4" />
+                  )}
+                  <span>
+                    {pred.prediction_change >= 0 ? '+' : ''}
+                    {pred.prediction_change.toFixed(2)}%
+                  </span>
+                </div>
+              </div>
+            </div>
+            
+            <div className="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-500">
+              <span>Mevcut: ₺{pred.current_price.toFixed(2)}</span>
+              <span>Tahmin: ₺{pred.predicted_price.toFixed(2)}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      <div className="mt-4 text-xs text-gray-500 text-center">
+        Teknik gösterge bazlı ML analizi ile oluşturulmuştur
+      </div>
+    </div>
+  );
+}

nextjs-app/src/components/TopMovers.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { formatPercent } from '@/lib/utils'
+
+interface Mover {
+  symbol: string
+  name: string
+  change_pct: number
+}
+
+export function TopMovers() {
+  const [gainers, setGainers] = useState<Mover[]>([])
+  const [losers, setLosers] = useState<Mover[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchMovers() {
+      try {
+        const response = await fetch('/api/movers')
+        const data = await response.json()
+        setGainers(Array.isArray(data?.gainers) ? data.gainers : [])
+        setLosers(Array.isArray(data?.losers) ? data.losers : [])
+      } catch (error) {
+        console.error('Failed to fetch movers:', error)
+        setGainers([])
+        setLosers([])
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchMovers()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="h-6 bg-gray-200 rounded w-1/2 mb-4 animate-pulse"></div>
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-12 bg-gray-100 rounded animate-pulse"></div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Gainers */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center space-x-2 mb-4">
+          <TrendingUp className="h-5 w-5 text-success" />
+          <h3 className="text-lg font-semibold text-gray-900">En Çok Yükselenler</h3>
+        </div>
+        <div className="space-y-3">
+          {gainers.slice(0, 5).map((stock) => (
+            <div key={stock.symbol} className="flex items-center justify-between">
+              <div>
+                <div className="font-semibold text-gray-900">{stock.symbol}</div>
+                <div className="text-xs text-gray-500 truncate max-w-[120px]">
+                  {stock.name}
+                </div>
+              </div>
+              <div className="text-success font-semibold">
+                {formatPercent(stock.change_pct)}
+              </div>
+            </div>
+          ))}
+        </div>
+        {gainers.length === 0 && (
+          <p className="text-sm text-gray-500 text-center py-4">
+            Veri bulunamadı
+          </p>
+        )}
+      </div>
+
+      {/* Losers */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center space-x-2 mb-4">
+          <TrendingDown className="h-5 w-5 text-danger" />
+          <h3 className="text-lg font-semibold text-gray-900">En Çok Düşenler</h3>
+        </div>
+        <div className="space-y-3">
+          {losers.slice(0, 5).map((stock) => (
+            <div key={stock.symbol} className="flex items-center justify-between">
+              <div>
+                <div className="font-semibold text-gray-900">{stock.symbol}</div>
+                <div className="text-xs text-gray-500 truncate max-w-[120px]">
+                  {stock.name}
+                </div>
+              </div>
+              <div className="text-danger font-semibold">
+                {formatPercent(stock.change_pct)}
+              </div>
+            </div>
+          ))}
+        </div>
+        {losers.length === 0 && (
+          <p className="text-sm text-gray-500 text-center py-4">
+            Veri bulunamadı
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}