Create Stock news screeer

Stock news screeer

@@ -0,0 +1,71 @@
+// Wall Street Watchdog AI - React Frontend
+// Uses TailwindCSS, TradingView widget, and fetches from backend every 5 min
+
+import React, { useEffect, useState } from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ReloadIcon } from "lucide-react";
+import axios from 'axios';
+
+const API_ENDPOINT = "/api/alerts"; // Your backend API route
+
+export default function WatchdogApp() {
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [countdown, setCountdown] = useState(300);
+
+  const fetchAlerts = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(API_ENDPOINT);
+      setAlerts(res.data.alerts);
+    } catch (err) {
+      console.error("Error fetching alerts:", err);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchAlerts();
+    const interval = setInterval(fetchAlerts, 300000); // Every 5 minutes
+    const countdownInterval = setInterval(() => setCountdown((c) => (c > 0 ? c - 1 : 300)), 1000);
+    return () => {
+      clearInterval(interval);
+      clearInterval(countdownInterval);
+    };
+  }, []);
+
+  return (
+    <div className="p-6 bg-black text-white min-h-screen">
+      <h1 className="text-3xl font-bold mb-4">Wall Street Watchdog AI</h1>
+      <div className="flex justify-between items-center mb-2">
+        <p className="text-sm">Auto-refresh in {countdown}s</p>
+        <Button onClick={fetchAlerts} disabled={loading}>
+          {loading ? <ReloadIcon className="animate-spin" /> : "Refresh Now"}
+        </Button>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {alerts.map((alert, idx) => (
+          <Card key={idx} className="bg-gray-900 border border-gray-700 rounded-2xl shadow-xl">
+            <CardContent className="p-4">
+              <p className="text-xl font-semibold">{alert.ticker} — {alert.action}</p>
+              <p className="text-sm text-gray-400">{alert.source}</p>
+              <p className="text-base mt-2">{alert.summary}</p>
+              <div className="mt-4">
+                <iframe
+                  src={`https://s.tradingview.com/embed-widget/mini-symbol-overview/?symbol=${alert.ticker}&locale=en`}
+                  width="100%"
+                  height="100"
+                  frameBorder="0"
+                  allowTransparency
+                  scrolling="no"
+                />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}