Trading Bot UI

import React, { useState, useEffect } from "react"; import io from "socket.io-client"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button";  const socket = io("http://localhost:5000");  export default function TradingBotUI() { const [stockData, setStockData] = useState([]); const [latestPrice, setLatestPrice] = useState(null); const [movingAvg, setMovingAvg] = useState(null); const [signal, setSignal] = useState("HOLD");  useEffect(() => { socket.on("stock_update", (data) => { setLatestPrice(data.price); setMovingAvg(data.movingAvg); setSignal(data.signal); setStockData((prevData) => [...prevData.slice(-20), { time: data.time, price: data.price }]); });  return () => socket.disconnect(); }, []);  return ( <div className="p-6"> <h1 className="text-2xl font-bold mb-4">📊 Live Stock Trading Dashboard</h1> <Card> <CardContent className="p-4"> <p className="text-lg">Latest Price: <strong>${latestPrice}</strong></p> <p>Moving Average: ${movingAvg}</p> <p>Signal: <span className={signal === "BUY" ? "text-green-600" : signal === "SELL" ? "text-red-600" : "text-gray-600"}>{signal}</span></p> </CardContent> </Card> <ResponsiveContainer width="100%" height={300} className="mt-6"> <LineChart data={stockData}> <XAxis dataKey="time" hide={true} /> <YAxis domain={["auto", "auto"]} /> <Tooltip /> <Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} /> </LineChart> </ResponsiveContainer> <Button className="mt-4" onClick={() => socket.emit("fetch_latest")}>Refresh Data</Button> </div> ); }