This code defines a React functional component, `MarketMachinesHome`, that renders...

June 28, 2025 at 04:37 AM

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const mockData = [
  { date: "Jan", ai: 102, hold: 100 },
  { date: "Feb", ai: 106, hold: 101 },
  { date: "Mar", ai: 110, hold: 103 },
  { date: "Apr", ai: 115, hold: 105 },
  { date: "May", ai: 120, hold: 107 },
  { date: "Jun", ai: 123, hold: 108 },
];

export default function MarketMachinesHome() {
  return (
    <div className="grid gap-6 p-6 max-w-4xl mx-auto">
      {/* Header */}
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold">Market Machines</h1>
        <p className="text-muted-foreground">
          Your AI-powered trading co-pilot. Not a broker. Just sharp signals.
        </p>
      </div>

      {/* Watchlist */}
      <div className="grid gap-4 md:grid-cols-3">
        {["AAPL", "AMD", "NVDA"].map((stock) => (
          <Card key={stock} className="shadow-md">
            <CardContent className="p-4 space-y-2">
              <div className="flex justify-between items-center">
                <h2 className="text-xl font-semibold">{stock}</h2>
                <Badge variant="destructive">SELL</Badge>
              </div>
              <p className="text-sm text-muted-foreground">
                Expected move: -3.1% | Target: $194.73
              </p>
              <Progress value={57} />
              <p className="text-xs text-muted-foreground">AI Confidence: 57%</p>
              <Button variant="outline" className="w-full text-xs">
                See Why
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Backtest Summary */}
      <Card className="shadow-md">
        <CardContent className="p-4 space-y-4">
          <h2 className="text-xl font-semibold">Backtest Results</h2>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <p className="font-semibold">Win Rate</p>
              <p>100% (2 of 2 trades)</p>
            </div>
            <div>
              <p className="font-semibold">Outperformed SPY</p>
              <p>+18.3%</p>
            </div>
            <div>
              <p className="font-semibold">Max Drawdown</p>
              <p>-13.7%</p>
            </div>
            <div>
              <p className="font-semibold">Sharpe Ratio</p>
              <p>1.60</p>
            </div>
          </div>

          <div className="h-48">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={mockData}>
                <XAxis dataKey="date" />
                <YAxis domain={[95, 130]} />
                <Tooltip />
                <Line type="monotone" dataKey="ai" stroke="#8884d8" name="AI Strategy" />
                <Line type="monotone" dataKey="hold" stroke="#82ca9d" name="Buy & Hold" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

This code defines a React functional component, MarketMachinesHome, that renders a user interface for an AI-powered trading dashboard. Here's what the code does:

Imports: It imports various UI components (Card, Button, Badge, etc.) and charting components (LineChart, Line, XAxis, etc.) from libraries (including @/components/ui), and mock data for the chart is provided in the mockData array.
Layout and Styling: The UI layout is styled using utility classes (likely from Tailwind CSS), and organizes the content into grids and sections for responsiveness and readability.
Interface Sections:
- Header: Displays the main app title "Market Machines" and a description about the app.
- Watchlist:
  - Iterates over an array of stock symbols (["AAPL", "AMD", "NVDA"]) and displays a Card for each stock.
  - Each card includes:
    - Stock symbol as the title.
    - A Badge marked with SELL (hard-coded for all stocks).
    - Text describing expected stock move and target price.
    - A progress bar and percentage (AI confidence set to 57% for all).
    - A button labeled "See Why".
- Backtest Summary:
  - Displays summary metrics from backtest performance metrics such as "Win Rate", "Outperformed SPY", "Max Drawdown", and "Sharpe Ratio".
  - Displays a chart (created using recharts) comparing "AI Strategy" with "Buy & Hold" (data from mockData):
    - X-axis (date) represents time (months).
    - Y-axis shows the range of performance metrics (ai and hold).
    - Two lines are plotted, one for each strategy's performance.
Chart: The LineChart component visualizes both the ai strategy performance and the hold strategy from the mockData.
Reusability: The component uses modular, reusable patterns for elements like Card and Badge, making it extendable for additional stocks or data.
Export: The component is exported as the default export (MarketMachinesHome), allowing it to be imported and used in other parts of the application.

Overall, this code creates a visually appealing and informative trading dashboard showing AI-based trading signals, performance summaries, and backtesting results.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr