From 06b865c1c2aace5d6aecef65b14674925ab436cd Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Wed, 5 Mar 2025 18:02:46 -0800
Subject: [PATCH] feat: Implement stock price component and api

---
 agent/stockbroker/nodes/tools.tsx           |   69 +-
 agent/types.ts                              |   10 +
 agent/uis/stockbroker/stock-price/index.tsx | 1135 ++++---------------
 package.json                                |    5 +
 pnpm-lock.yaml                              |  391 +++++++
 src/components/ui/card.tsx                  |   75 ++
 src/components/ui/chart.tsx                 |  353 ++++++
 src/index.css                               |   15 +
 8 files changed, 1116 insertions(+), 937 deletions(-)
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/chart.tsx

diff --git a/agent/stockbroker/nodes/tools.tsx b/agent/stockbroker/nodes/tools.tsx
index d434b06..7bc2d50 100644
--- a/agent/stockbroker/nodes/tools.tsx
+++ b/agent/stockbroker/nodes/tools.tsx
@@ -5,6 +5,63 @@ import type ComponentMap from "../../uis/index";
 import { z } from "zod";
 import { LangGraphRunnableConfig } from "@langchain/langgraph";
 import { findToolCall } from "../../find-tool-call";
+import { format, subDays } from "date-fns";
+import { Price } from "../../types";
+
+async function getPricesForTicker(ticker: string): Promise<{
+  oneDayPrices: Price[];
+  thirtyDayPrices: Price[];
+}> {
+  if (!process.env.FINANCIAL_DATASETS_API_KEY) {
+    throw new Error("Financial datasets API key not set");
+  }
+
+  const options = {
+    method: "GET",
+    headers: { "X-API-KEY": process.env.FINANCIAL_DATASETS_API_KEY },
+  };
+
+  const url = "https://api.financialdatasets.ai/prices";
+
+  const oneMonthAgo = format(subDays(new Date(), 30), "yyyy-MM-dd");
+  const now = format(new Date(), "yyyy-MM-dd");
+
+  const queryParamsOneDay = new URLSearchParams({
+    ticker,
+    interval: "minute",
+    interval_multiplier: "5",
+    start_date: now,
+    end_date: now,
+    limit: "5000",
+  });
+
+  const queryParamsThirtyDays = new URLSearchParams({
+    ticker,
+    interval: "minute",
+    interval_multiplier: "30",
+    start_date: oneMonthAgo,
+    end_date: now,
+    limit: "5000",
+  });
+
+  const [resOneDay, resThirtyDays] = await Promise.all([
+    fetch(`${url}?${queryParamsOneDay.toString()}`, options),
+    fetch(`${url}?${queryParamsThirtyDays.toString()}`, options),
+  ]);
+  if (!resOneDay.ok || !resThirtyDays.ok) {
+    throw new Error("Failed to fetch prices");
+  }
+  const { prices: pricesOneDay } = await resOneDay.json();
+  const { prices: pricesThirtyDays } = await resThirtyDays.json();
+
+  console.log("pricesOneDay", pricesOneDay.length);
+  console.log("pricesThirtyDays", pricesThirtyDays.length);
+
+  return {
+    oneDayPrices: pricesOneDay,
+    thirtyDayPrices: pricesThirtyDays,
+  };
+}
 
 const llm = new ChatOpenAI({ model: "gpt-4o-mini", temperature: 0 });
 
@@ -48,15 +105,15 @@ export async function callTools(
     findToolCall("stock-price")<typeof getStockPriceSchema>,
   );
   const portfolioToolCall = message.tool_calls?.find(
-    findToolCall("portfolio")<typeof getStockPriceSchema>,
+    findToolCall("portfolio")<typeof getPortfolioSchema>,
   );
 
   if (stockbrokerToolCall) {
-    const instruction = `The stock price of ${
-      stockbrokerToolCall.args.ticker
-    } is ${Math.random() * 100}`;
-
-    ui.write("stock-price", { instruction, logo: "hey" });
+    const prices = await getPricesForTicker(stockbrokerToolCall.args.ticker);
+    ui.write("stock-price", {
+      ticker: stockbrokerToolCall.args.ticker,
+      ...prices,
+    });
   }
 
   if (portfolioToolCall) {
diff --git a/agent/types.ts b/agent/types.ts
index 8894f88..afdae92 100644
--- a/agent/types.ts
+++ b/agent/types.ts
@@ -25,3 +25,13 @@ export type Accommodation = {
   city: string;
   image: string;
 };
+
+export type Price = {
+  ticker: string;
+  open: number;
+  close: number;
+  high: number;
+  low: number;
+  volume: number;
+  time: string;
+};
diff --git a/agent/uis/stockbroker/stock-price/index.tsx b/agent/uis/stockbroker/stock-price/index.tsx
index 8413a2c..675aa7c 100644
--- a/agent/uis/stockbroker/stock-price/index.tsx
+++ b/agent/uis/stockbroker/stock-price/index.tsx
@@ -3,953 +3,226 @@ import {
   useStreamContext,
   type UIMessage,
 } from "@langchain/langgraph-sdk/react-ui";
-import type { AIMessage, Message, ToolMessage } from "@langchain/langgraph-sdk";
-import { useState, useEffect, useCallback } from "react";
+import type { Message } from "@langchain/langgraph-sdk";
+import { useState, useMemo } from "react";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { Price } from "../../../types";
+import { format } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-export default function StockPrice(props: {
-  instruction: string;
-  logo: string;
+const chartConfig = {
+  price: {
+    label: "Price",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig;
+
+type DisplayRange = "1d" | "5d" | "1m";
+
+function DisplayRangeSelector({
+  displayRange,
+  setDisplayRange,
+}: {
+  displayRange: DisplayRange;
+  setDisplayRange: (range: DisplayRange) => void;
 }) {
+  const sharedClass =
+    " bg-transparent text-gray-500 hover:bg-gray-50 transition-colors ease-in-out duration-200 p-2 cursor-pointer";
+  const selectedClass = `text-black bg-gray-100 hover:bg-gray-50`;
+  return (
+    <div className="flex flex-row items-center justify-start gap-2">
+      <Button
+        className={cn(sharedClass, displayRange === "1d" && selectedClass)}
+        variant={displayRange === "1d" ? "default" : "ghost"}
+        onClick={() => setDisplayRange("1d")}
+      >
+        1D
+      </Button>
+      <p className="text-gray-300">|</p>
+      <Button
+        className={cn(sharedClass, displayRange === "5d" && selectedClass)}
+        variant={displayRange === "5d" ? "default" : "ghost"}
+        onClick={() => setDisplayRange("5d")}
+      >
+        5D
+      </Button>
+      <p className="text-gray-300">|</p>
+      <Button
+        className={cn(sharedClass, displayRange === "1m" && selectedClass)}
+        variant={displayRange === "1m" ? "default" : "ghost"}
+        onClick={() => setDisplayRange("1m")}
+      >
+        1M
+      </Button>
+    </div>
+  );
+}
+
+function getPropsForDisplayRange(displayRange: DisplayRange, prices: Price[]) {
+  // Start by filtering prices by display range. use the `time` field on `price` which is a string date. compare it to the current date
+  const actualPrices: Price[] = [];
+  const now = new Date();
+  const oneDay = 24 * 60 * 60 * 1000;
+  const fiveDays = 5 * oneDay;
+  const oneMonth = 30 * oneDay;
+
+  switch (displayRange) {
+    case "1d":
+      console.log("Calculating for 1d", prices.length);
+      console.log(prices[prices.length - 1]);
+      actualPrices.push(
+        ...prices.filter(
+          (p) => new Date(p.time).getTime() >= now.getTime() - oneDay,
+        ),
+      );
+      break;
+    case "5d":
+      console.log("Calculating for 5d", prices.length);
+      actualPrices.push(
+        ...prices.filter(
+          (p) => new Date(p.time).getTime() >= now.getTime() - fiveDays,
+        ),
+      );
+      break;
+    case "1m":
+      console.log("Calculating for 1m", prices.length);
+      actualPrices.push(
+        ...prices.filter(
+          (p) => new Date(p.time).getTime() >= now.getTime() - oneMonth,
+        ),
+      );
+      break;
+  }
+  return actualPrices;
+}
+// TODO: UPDATE TO SUPPORT ONE DAY AND THIRTY DAY PRICES AS DIFFERENT PROPS
+export default function StockPrice(props: {
+  ticker: string;
+  oneDayPrices: Price[];
+  thirtyDayPrices: Price[];
+}) {
+  const { ticker } = props;
+  console.log(props.prices[0], props.prices[props.prices.length - 1]);
+  const [displayRange, setDisplayRange] = useState<DisplayRange>("1d");
   const thread = useStreamContext<
     { messages: Message[]; ui: UIMessage[] },
     { MetaType: { ui: UIMessage | undefined } }
   >();
 
-  const [quantity, setQuantity] = useState(1);
-  const [stockData, setStockData] = useState({
-    symbol: "AAPL",
-    name: "Apple Inc.",
-    price: 187.32,
-    change: 1.24,
-    changePercent: 0.67,
-    previousClose: 186.08,
-    open: 186.75,
-    dayHigh: 188.45,
-    dayLow: 186.2,
-    volume: 54320000,
-    marketCap: "2.92T",
-    peRatio: 29.13,
-    dividend: 0.96,
-    dividendYield: 0.51,
-    moving50Day: 182.46,
-    moving200Day: 175.8,
-    fiftyTwoWeekHigh: 201.48,
-    fiftyTwoWeekLow: 143.9,
-    analystRating: "Buy",
-    analystCount: 32,
-    priceTarget: 210.5,
-  });
+  const {
+    currentPrice,
+    openPrice,
+    dollarChange,
+    percentChange,
+    highPrice,
+    lowPrice,
+    chartData,
+    change,
+  } = useMemo(() => {
+    const prices = getPropsForDisplayRange(displayRange, props.prices);
+    console.log("prices", prices.length);
+    const firstPrice = prices[0];
+    const lastPrice = prices[prices.length - 1];
 
-  const [priceHistory, setPriceHistory] = useState<
-    { time: string; price: number }[]
-  >([]);
-  const [orderType, setOrderType] = useState<"buy" | "sell">("buy");
-  const [showOrder, setShowOrder] = useState(false);
-  const [activeTab, setActiveTab] = useState<"chart" | "details" | "analysis">(
-    "chart",
-  );
-  const [isLiveUpdating, setIsLiveUpdating] = useState(false);
-  const [orderTypeOptions] = useState([
-    { value: "market", label: "Market" },
-    { value: "limit", label: "Limit" },
-    { value: "stop", label: "Stop" },
-  ]);
-  const [selectedOrderTypeOption, setSelectedOrderTypeOption] =
-    useState("market");
-  const [limitPrice, setLimitPrice] = useState(stockData.price.toFixed(2));
-  const [showOrderSuccess, setShowOrderSuccess] = useState(false);
+    const currentPrice = lastPrice?.close;
+    const openPrice = firstPrice?.open;
+    const dollarChange = currentPrice - openPrice;
+    const percentChange = ((currentPrice - openPrice) / openPrice) * 100;
 
-  const aiTool = thread.messages.findLast(
-    (message): message is AIMessage =>
-      message.type === "ai" && !!message.tool_calls?.length,
-  );
+    const highPrice = prices.reduce(
+      (acc, p) => Math.max(acc, p.high),
+      -Infinity,
+    );
+    const lowPrice = prices.reduce((acc, p) => Math.min(acc, p.low), Infinity);
 
-  const toolCallId = aiTool?.tool_calls?.[0]?.id;
-  const toolResponse = thread.messages.findLast(
-    (message): message is ToolMessage =>
-      message.type === "tool" && message.tool_call_id === toolCallId,
-  );
+    const chartData = prices.map((p) => ({
+      time: p.time,
+      price: p.close,
+    }));
 
-  // Simulated price history generation on component mount
-  useEffect(() => {
-    generatePriceHistory();
-  }, []);
-
-  const generatePriceHistory = () => {
-    const now = new Date();
-    const history = [];
-
-    for (let i = 30; i >= 0; i--) {
-      const time = new Date(now.getTime() - i * 15 * 60000); // 15-minute intervals
-      const basePrice = 187.32;
-      // Make the price movement more interesting with some trends
-      const trend = Math.sin(i / 5) * 1.5;
-      const randomFactor = (Math.random() - 0.5) * 1.5;
-      const price = basePrice + trend + randomFactor;
-
-      history.push({
-        time: time.toLocaleTimeString([], {
-          hour: "2-digit",
-          minute: "2-digit",
-        }),
-        price: parseFloat(price.toFixed(2)),
-      });
-    }
-
-    setPriceHistory(history);
-  };
-
-  // Simulate live price updates
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (isLiveUpdating) {
-      interval = setInterval(() => {
-        setStockData((prev) => {
-          // Random small price movement
-          const priceChange = (Math.random() - 0.5) * 0.3;
-          const newPrice = parseFloat((prev.price + priceChange).toFixed(2));
-
-          // Update price history
-          setPriceHistory((history) => {
-            const now = new Date();
-            const newHistory = [...history];
-            if (newHistory.length > 30) {
-              newHistory.shift(); // Remove oldest entry to keep array length consistent
-            }
-            newHistory.push({
-              time: now.toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              }),
-              price: newPrice,
-            });
-            return newHistory;
-          });
-
-          return {
-            ...prev,
-            price: newPrice,
-            change: parseFloat((newPrice - prev.previousClose).toFixed(2)),
-            changePercent: parseFloat(
-              (
-                ((newPrice - prev.previousClose) / prev.previousClose) *
-                100
-              ).toFixed(2),
-            ),
-            dayHigh: Math.max(prev.dayHigh, newPrice),
-            dayLow: Math.min(prev.dayLow, newPrice),
-          };
-        });
-      }, 3000);
-    }
-
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [isLiveUpdating]);
-
-  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    if (value > 0 && value <= 1000) {
-      setQuantity(value);
-    }
-  };
-
-  const handleLimitPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (/^\d*\.?\d*$/.test(value)) {
-      setLimitPrice(value);
-    }
-  };
-
-  const toggleLiveUpdates = () => {
-    setIsLiveUpdating((prev) => !prev);
-  };
-
-  const handleOrder = () => {
-    // Submit the order through the thread
-    if (toolCallId) {
-      const orderDetails = {
-        action: orderType,
-        quantity,
-        symbol: stockData.symbol,
-        orderType: selectedOrderTypeOption,
-        ...(selectedOrderTypeOption !== "market" && {
-          limitPrice: parseFloat(limitPrice),
-        }),
-      };
-
-      thread.submit({
-        messages: [
-          {
-            type: "tool",
-            tool_call_id: toolCallId,
-            name: "stockbroker",
-            content: JSON.stringify(orderDetails),
-          },
-          {
-            type: "human",
-            content: `${orderType === "buy" ? "Bought" : "Sold"} ${quantity} shares of ${stockData.symbol} at ${
-              selectedOrderTypeOption === "market"
-                ? formatCurrency(stockData.price)
-                : formatCurrency(parseFloat(limitPrice))
-            }`,
-          },
-        ],
-      });
-
-      setShowOrderSuccess(true);
-      setTimeout(() => {
-        setShowOrderSuccess(false);
-        setShowOrder(false);
-      }, 2000);
-    }
-  };
-
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(value);
-  };
-
-  const formatPercent = (value: number) => {
-    return `${value > 0 ? "+" : ""}${value.toFixed(2)}%`;
-  };
-
-  const getMinMax = () => {
-    if (priceHistory.length === 0) return { min: 0, max: 0 };
-    const prices = priceHistory.map((item) => item.price);
+    const change: "up" | "down" = dollarChange > 0 ? "up" : "down";
     return {
-      min: Math.min(...prices),
-      max: Math.max(...prices),
+      currentPrice,
+      openPrice,
+      dollarChange,
+      percentChange,
+      highPrice,
+      lowPrice,
+      chartData,
+      change,
     };
-  };
+  }, [props.prices, displayRange]);
 
-  // Generate a simple price chart with the last price as endpoint
-  const generateChartPath = useCallback(() => {
-    if (priceHistory.length === 0) return "";
-
-    const { min, max } = getMinMax();
-    const range = max - min || 1;
-    const width = 100; // % of container width
-    const height = 100; // % of container height
-
-    const points = priceHistory.map((point, i) => {
-      const x = (i / (priceHistory.length - 1)) * width;
-      const y = height - ((point.price - min) / range) * height;
-      return `${x},${y}`;
-    });
-
-    return `M ${points.join(" L ")}`;
-  }, [priceHistory]);
-
-  const { min, max } = getMinMax();
-  const range = max - min || 1;
-  const chartPath = generateChartPath();
-
-  if (toolResponse) return <div>Responded</div>;
   return (
-    <div className="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
-      <div
-        className={`px-4 py-3 ${stockData.change >= 0 ? "bg-gradient-to-r from-green-600 to-green-500" : "bg-gradient-to-r from-red-600 to-red-500"}`}
-      >
-        <div className="flex justify-between items-center">
-          <div className="flex items-center">
-            {props.logo && (
-              <img
-                src={props.logo}
-                alt="Logo"
-                className="h-6 w-6 mr-2 rounded-full bg-white p-0.5"
+    <div className="w-full max-w-4xl rounded-xl shadow-md overflow-hidden border border-gray-200 flex flex-col gap-4 p-3">
+      <div className="flex items-center justify-start gap-4 mb-2 text-lg font-medium text-gray-700">
+        <p>{ticker}</p>
+        <p>${currentPrice}</p>
+      </div>
+      <div className="flex flex-col gap-2">
+        <p className={change === "up" ? "text-green-500" : "text-red-500"}>
+          ${dollarChange.toFixed(2)} (${percentChange.toFixed(2)}%)
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-4 text-sm">
+        <div className="flex flex-col gap-2">
+          <p>Open</p>
+          <p>High</p>
+          <p>Low</p>
+        </div>
+        <div className="flex flex-col gap-2">
+          <p>${openPrice}</p>
+          <p>${highPrice}</p>
+          <p>${lowPrice}</p>
+        </div>
+      </div>
+      <DisplayRangeSelector
+        displayRange={displayRange}
+        setDisplayRange={setDisplayRange}
+      />
+      <ChartContainer config={chartConfig}>
+        <LineChart
+          accessibilityLayer
+          data={chartData}
+          margin={{
+            left: 0,
+            right: 0,
+          }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="time"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            tickFormatter={(value) => format(value, "h:mm a")}
+          />
+          <YAxis
+            domain={[lowPrice - 2, highPrice + 2]}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            tickFormatter={(value) => `${value.toFixed(2)}`}
+          />
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                hideLabel={false}
+                labelFormatter={(value) => format(value, "h:mm a")}
               />
-            )}
-            <h3 className="text-white font-bold">
-              {stockData.symbol}{" "}
-              <span className="font-normal text-white/80 text-sm">
-                {stockData.name}
-              </span>
-            </h3>
-          </div>
-          <div className="flex items-center">
-            <span className="text-white font-bold text-xl mr-2">
-              {formatCurrency(stockData.price)}
-            </span>
-            <div
-              className={`flex items-center px-2 py-1 rounded text-xs font-medium text-white ${stockData.change >= 0 ? "bg-green-700/50" : "bg-red-700/50"} backdrop-blur-sm border ${stockData.change >= 0 ? "border-green-400/30" : "border-red-400/30"}`}
-            >
-              {stockData.change >= 0 ? "▲" : "▼"}{" "}
-              {formatCurrency(Math.abs(stockData.change))} (
-              {formatPercent(stockData.changePercent)})
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-between items-center text-xs text-white/80 mt-1">
-          <span className="italic">{props.instruction}</span>
-          <button
-            onClick={toggleLiveUpdates}
-            className={`flex items-center text-xs px-2 py-0.5 rounded ${isLiveUpdating ? "bg-white/30 text-white" : "bg-white/10 text-white/70"} hover:bg-white/20 transition-colors`}
-          >
-            <span
-              className={`inline-block w-2 h-2 rounded-full mr-1 ${isLiveUpdating ? "bg-green-400 animate-pulse" : "bg-gray-400"}`}
-            ></span>
-            {isLiveUpdating ? "Live" : "Static"}
-          </button>
-        </div>
-      </div>
-
-      <div className="border-b border-gray-200">
-        <div className="flex">
-          <button
-            onClick={() => setActiveTab("chart")}
-            className={`px-4 py-2 text-sm font-medium ${
-              activeTab === "chart"
-                ? "text-indigo-600 border-b-2 border-indigo-600"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Chart
-          </button>
-          <button
-            onClick={() => setActiveTab("details")}
-            className={`px-4 py-2 text-sm font-medium ${
-              activeTab === "details"
-                ? "text-indigo-600 border-b-2 border-indigo-600"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Details
-          </button>
-          <button
-            onClick={() => setActiveTab("analysis")}
-            className={`px-4 py-2 text-sm font-medium ${
-              activeTab === "analysis"
-                ? "text-indigo-600 border-b-2 border-indigo-600"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Analysis
-          </button>
-        </div>
-      </div>
-
-      <div className="p-4">
-        {activeTab === "chart" && (
-          <>
-            <div className="mb-4">
-              <div className="border rounded-lg p-3 bg-white shadow-sm">
-                <div className="flex justify-between text-xs text-gray-500 mb-1">
-                  <span className="font-medium">Price Chart</span>
-                  <div className="flex space-x-1">
-                    <button className="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 rounded text-xs font-medium">
-                      1D
-                    </button>
-                    <button className="px-1.5 py-0.5 hover:bg-gray-100 rounded text-xs text-gray-600">
-                      1W
-                    </button>
-                    <button className="px-1.5 py-0.5 hover:bg-gray-100 rounded text-xs text-gray-600">
-                      1M
-                    </button>
-                    <button className="px-1.5 py-0.5 hover:bg-gray-100 rounded text-xs text-gray-600">
-                      1Y
-                    </button>
-                  </div>
-                </div>
-
-                <div className="relative h-40 mt-2">
-                  <div className="absolute inset-0">
-                    {/* Chart grid lines */}
-                    <div className="h-full flex flex-col justify-between">
-                      {[0, 1, 2, 3].map((line) => (
-                        <div
-                          key={line}
-                          className="border-t border-gray-100 w-full h-0"
-                        ></div>
-                      ))}
-                    </div>
-
-                    {/* SVG Line Chart */}
-                    <svg
-                      className="absolute inset-0 w-full h-full"
-                      viewBox="0 0 100 100"
-                      preserveAspectRatio="none"
-                    >
-                      {/* Chart path */}
-                      <path
-                        d={chartPath}
-                        stroke={stockData.change >= 0 ? "#10b981" : "#ef4444"}
-                        strokeWidth="1.5"
-                        fill="none"
-                        strokeLinecap="round"
-                      />
-
-                      {/* Gradient area under the chart */}
-                      <path
-                        d={`${chartPath} L 100,100 L 0,100 Z`}
-                        fill={
-                          stockData.change >= 0
-                            ? "url(#greenGradient)"
-                            : "url(#redGradient)"
-                        }
-                        fillOpacity="0.2"
-                      />
-
-                      {/* Gradient definitions */}
-                      <defs>
-                        <linearGradient
-                          id="greenGradient"
-                          x1="0%"
-                          y1="0%"
-                          x2="0%"
-                          y2="100%"
-                        >
-                          <stop
-                            offset="0%"
-                            stopColor="#10b981"
-                            stopOpacity="0.8"
-                          />
-                          <stop
-                            offset="100%"
-                            stopColor="#10b981"
-                            stopOpacity="0"
-                          />
-                        </linearGradient>
-                        <linearGradient
-                          id="redGradient"
-                          x1="0%"
-                          y1="0%"
-                          x2="0%"
-                          y2="100%"
-                        >
-                          <stop
-                            offset="0%"
-                            stopColor="#ef4444"
-                            stopOpacity="0.8"
-                          />
-                          <stop
-                            offset="100%"
-                            stopColor="#ef4444"
-                            stopOpacity="0"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-
-                    {/* Price labels on Y-axis */}
-                    <div className="absolute right-0 inset-y-0 flex flex-col justify-between text-right pr-1 text-xs text-gray-400 pointer-events-none">
-                      <span>{formatCurrency(max)}</span>
-                      <span>{formatCurrency(min + range * 0.66)}</span>
-                      <span>{formatCurrency(min + range * 0.33)}</span>
-                      <span>{formatCurrency(min)}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex justify-between text-xs text-gray-500 mt-2">
-                  <div className="flex items-center">
-                    <span className="inline-block w-2 h-2 bg-gray-300 rounded-full mr-1"></span>
-                    {priceHistory[0]?.time || "9:30 AM"}
-                  </div>
-                  <div className="flex items-center">
-                    <span>Vol: {stockData.volume.toLocaleString()}</span>
-                  </div>
-                  <div className="flex items-center">
-                    <span className="inline-block w-2 h-2 bg-gray-300 rounded-full mr-1"></span>
-                    {priceHistory[priceHistory.length - 1]?.time || "4:00 PM"}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Key Stock Information */}
-            <div className="grid grid-cols-2 gap-3 mb-4">
-              <div className="bg-gray-50 rounded-lg p-2.5 shadow-sm border border-gray-100">
-                <p className="text-xs text-gray-500 font-medium">Day Range</p>
-                <div className="relative pt-1">
-                  <div className="overflow-hidden h-1.5 mb-1 text-xs flex rounded bg-gray-200 mt-1">
-                    <div
-                      className={`shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center ${stockData.change >= 0 ? "bg-green-500" : "bg-red-500"}`}
-                      style={{
-                        width: `${((stockData.price - stockData.dayLow) / (stockData.dayHigh - stockData.dayLow)) * 100}%`,
-                      }}
-                    ></div>
-                  </div>
-                  <div className="flex justify-between text-xs text-gray-600">
-                    <span>{formatCurrency(stockData.dayLow)}</span>
-                    <span>{formatCurrency(stockData.dayHigh)}</span>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-2.5 shadow-sm border border-gray-100">
-                <p className="text-xs text-gray-500 font-medium">
-                  52-Week Range
-                </p>
-                <div className="relative pt-1">
-                  <div className="overflow-hidden h-1.5 mb-1 text-xs flex rounded bg-gray-200 mt-1">
-                    <div
-                      className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500"
-                      style={{
-                        width: `${((stockData.price - stockData.fiftyTwoWeekLow) / (stockData.fiftyTwoWeekHigh - stockData.fiftyTwoWeekLow)) * 100}%`,
-                      }}
-                    ></div>
-                  </div>
-                  <div className="flex justify-between text-xs text-gray-600">
-                    <span>{formatCurrency(stockData.fiftyTwoWeekLow)}</span>
-                    <span>{formatCurrency(stockData.fiftyTwoWeekHigh)}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-
-        {activeTab === "details" && (
-          <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">Open</p>
-                <p className="font-medium">{formatCurrency(stockData.open)}</p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  Previous Close
-                </p>
-                <p className="font-medium">
-                  {formatCurrency(stockData.previousClose)}
-                </p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  Market Cap
-                </p>
-                <p className="font-medium">{stockData.marketCap}</p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">Volume</p>
-                <p className="font-medium">
-                  {stockData.volume.toLocaleString()}
-                </p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  P/E Ratio
-                </p>
-                <p className="font-medium">{stockData.peRatio}</p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  Dividend Yield
-                </p>
-                <p className="font-medium">{stockData.dividendYield}%</p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  50-Day Avg
-                </p>
-                <p className="font-medium">
-                  {formatCurrency(stockData.moving50Day)}
-                </p>
-              </div>
-              <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 shadow-sm">
-                <p className="text-xs text-gray-500 font-medium mb-1">
-                  200-Day Avg
-                </p>
-                <p className="font-medium">
-                  {formatCurrency(stockData.moving200Day)}
-                </p>
-              </div>
-            </div>
-
-            <div className="bg-indigo-50 rounded-lg p-4 border border-indigo-100">
-              <h4 className="font-medium text-indigo-900 text-sm mb-2">
-                Company Overview
-              </h4>
-              <p className="text-xs text-indigo-700">
-                {stockData.name} is a leading technology company that designs,
-                manufactures, and markets consumer electronics, computer
-                software, and online services. The company has a strong global
-                presence and is known for its innovation in the industry.
-              </p>
-            </div>
-          </div>
-        )}
-
-        {activeTab === "analysis" && (
-          <div className="space-y-4">
-            <div className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm">
-              <div className="flex justify-between items-center mb-2">
-                <h4 className="font-medium text-gray-900">Analyst Consensus</h4>
-                <div
-                  className={`px-2 py-0.5 rounded text-xs font-medium ${
-                    stockData.analystRating === "Buy"
-                      ? "bg-green-100 text-green-800"
-                      : stockData.analystRating === "Hold"
-                        ? "bg-yellow-100 text-yellow-800"
-                        : "bg-red-100 text-red-800"
-                  }`}
-                >
-                  {stockData.analystRating}
-                </div>
-              </div>
-
-              <div className="flex mb-1">
-                <div className="w-20 text-xs text-gray-500">Strong Buy</div>
-                <div className="flex-grow">
-                  <div className="h-4 bg-gray-200 rounded-sm overflow-hidden">
-                    <div
-                      className="h-4 bg-green-600"
-                      style={{ width: "65%" }}
-                    ></div>
-                  </div>
-                </div>
-                <div className="w-8 text-xs text-right text-gray-600">65%</div>
-              </div>
-              <div className="flex mb-1">
-                <div className="w-20 text-xs text-gray-500">Buy</div>
-                <div className="flex-grow">
-                  <div className="h-4 bg-gray-200 rounded-sm overflow-hidden">
-                    <div
-                      className="h-4 bg-green-500"
-                      style={{ width: "20%" }}
-                    ></div>
-                  </div>
-                </div>
-                <div className="w-8 text-xs text-right text-gray-600">20%</div>
-              </div>
-              <div className="flex mb-1">
-                <div className="w-20 text-xs text-gray-500">Hold</div>
-                <div className="flex-grow">
-                  <div className="h-4 bg-gray-200 rounded-sm overflow-hidden">
-                    <div
-                      className="h-4 bg-yellow-500"
-                      style={{ width: "10%" }}
-                    ></div>
-                  </div>
-                </div>
-                <div className="w-8 text-xs text-right text-gray-600">10%</div>
-              </div>
-              <div className="flex mb-1">
-                <div className="w-20 text-xs text-gray-500">Sell</div>
-                <div className="flex-grow">
-                  <div className="h-4 bg-gray-200 rounded-sm overflow-hidden">
-                    <div
-                      className="h-4 bg-red-500"
-                      style={{ width: "5%" }}
-                    ></div>
-                  </div>
-                </div>
-                <div className="w-8 text-xs text-right text-gray-600">5%</div>
-              </div>
-
-              <div className="mt-2 text-xs text-gray-500">
-                Based on {stockData.analystCount} analyst ratings
-              </div>
-            </div>
-
-            <div className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm">
-              <div className="flex justify-between items-center mb-3">
-                <h4 className="font-medium text-gray-900">Price Target</h4>
-                <span className="text-sm font-bold text-indigo-600">
-                  {formatCurrency(stockData.priceTarget)}
-                </span>
-              </div>
-
-              <div className="relative pt-1">
-                <div className="flex mb-2 items-center justify-between">
-                  <div className="text-xs text-gray-500">
-                    <span className="text-green-600 font-medium">
-                      +
-                      {(
-                        (stockData.priceTarget / stockData.price - 1) *
-                        100
-                      ).toFixed(2)}
-                      %
-                    </span>{" "}
-                    Upside
-                  </div>
-                </div>
-                <div className="overflow-hidden h-1.5 mb-1 text-xs flex rounded bg-gray-200">
-                  <div
-                    style={{
-                      width: `${(stockData.price / stockData.priceTarget) * 100}%`,
-                    }}
-                    className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-600"
-                  ></div>
-                </div>
-                <div className="flex justify-between text-xs text-gray-500">
-                  <span>Current: {formatCurrency(stockData.price)}</span>
-                  <span>Target: {formatCurrency(stockData.priceTarget)}</span>
-                </div>
-              </div>
-            </div>
-
-            <div className="bg-indigo-50 rounded-lg p-3 border border-indigo-100">
-              <h4 className="font-medium text-indigo-900 mb-2">Recent News</h4>
-              <div className="space-y-2">
-                <div className="text-xs text-indigo-800">
-                  <p className="font-medium">
-                    {stockData.name} Reports Strong Quarterly Earnings
-                  </p>
-                  <p className="text-indigo-600 text-xs">2 days ago</p>
-                </div>
-                <div className="text-xs text-indigo-800">
-                  <p className="font-medium">
-                    New Product Launch Expected Next Month
-                  </p>
-                  <p className="text-indigo-600 text-xs">5 days ago</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Order Interface */}
-        {!showOrder && !showOrderSuccess ? (
-          <div className="flex space-x-2 mt-4">
-            <button
-              onClick={() => {
-                setShowOrder(true);
-                setOrderType("buy");
-              }}
-              className="flex-1 bg-gradient-to-r from-green-600 to-green-500 hover:from-green-700 hover:to-green-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-all flex items-center justify-center"
-            >
-              <svg
-                className="w-4 h-4 mr-1"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              Buy
-            </button>
-            <button
-              onClick={() => {
-                setShowOrder(true);
-                setOrderType("sell");
-              }}
-              className="flex-1 bg-gradient-to-r from-red-600 to-red-500 hover:from-red-700 hover:to-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-all flex items-center justify-center"
-            >
-              <svg
-                className="w-4 h-4 mr-1"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              Sell
-            </button>
-          </div>
-        ) : showOrderSuccess ? (
-          <div className="mt-4 flex items-center justify-center bg-green-50 rounded-lg p-4 border border-green-200 text-green-800">
-            <svg
-              className="w-5 h-5 mr-2 text-green-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M5 13l4 4L19 7"
-              ></path>
-            </svg>
-            <span className="font-medium">Order submitted successfully!</span>
-          </div>
-        ) : (
-          <div className="mt-4 bg-white rounded-lg border border-gray-200 shadow-md p-4">
-            <div className="flex justify-between items-center mb-3">
-              <h4
-                className={`font-bold text-lg ${orderType === "buy" ? "text-green-600" : "text-red-600"}`}
-              >
-                {orderType === "buy" ? "Buy" : "Sell"} {stockData.symbol}
-              </h4>
-              <button
-                onClick={() => setShowOrder(false)}
-                className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full p-1 transition-colors"
-              >
-                <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"
-                  ></path>
-                </svg>
-              </button>
-            </div>
-
-            <div className="mb-3">
-              <div className="flex space-x-1 mb-3">
-                {orderTypeOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    onClick={() => setSelectedOrderTypeOption(option.value)}
-                    className={`flex-1 px-2 py-1.5 text-xs font-medium rounded-md transition-colors ${
-                      selectedOrderTypeOption === option.value
-                        ? `${orderType === "buy" ? "bg-green-100 text-green-800 border-green-300" : "bg-red-100 text-red-800 border-red-300"} border`
-                        : "bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200"
-                    }`}
-                  >
-                    {option.label}
-                  </button>
-                ))}
-              </div>
-
-              <div className="flex space-x-2 mb-3">
-                <div className="flex-1">
-                  <label
-                    htmlFor="quantity"
-                    className="block text-xs font-medium text-gray-700 mb-1"
-                  >
-                    Quantity
-                  </label>
-                  <div className="flex items-center">
-                    <button
-                      onClick={() => quantity > 1 && setQuantity(quantity - 1)}
-                      className="border rounded-l px-2 py-1 text-gray-600 hover:bg-gray-100"
-                    >
-                      -
-                    </button>
-                    <input
-                      type="number"
-                      id="quantity"
-                      min="1"
-                      max="1000"
-                      value={quantity}
-                      onChange={handleQuantityChange}
-                      className="border-t border-b w-full px-3 py-1 text-center focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                    />
-                    <button
-                      onClick={() =>
-                        quantity < 1000 && setQuantity(quantity + 1)
-                      }
-                      className="border rounded-r px-2 py-1 text-gray-600 hover:bg-gray-100"
-                    >
-                      +
-                    </button>
-                  </div>
-                </div>
-
-                {selectedOrderTypeOption !== "market" && (
-                  <div className="flex-1">
-                    <label
-                      htmlFor="limitPrice"
-                      className="block text-xs font-medium text-gray-700 mb-1"
-                    >
-                      {selectedOrderTypeOption === "limit"
-                        ? "Limit Price"
-                        : "Stop Price"}
-                    </label>
-                    <div className="flex items-center border rounded overflow-hidden">
-                      <span className="bg-gray-100 px-2 py-1 text-gray-500 text-sm border-r">
-                        $
-                      </span>
-                      <input
-                        type="text"
-                        id="limitPrice"
-                        value={limitPrice}
-                        onChange={handleLimitPriceChange}
-                        className="flex-1 px-3 py-1 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {selectedOrderTypeOption !== "market" && (
-                <div className="rounded-md bg-indigo-50 p-2 mb-3">
-                  <div className="flex items-start">
-                    <div className="flex-shrink-0">
-                      <svg
-                        className="h-5 w-5 text-indigo-400"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div className="ml-2">
-                      <p className="text-xs text-indigo-700">
-                        {selectedOrderTypeOption === "limit"
-                          ? `Your ${orderType} order will execute only at ${formatCurrency(parseFloat(limitPrice))} or better.`
-                          : `Your ${orderType} order will execute when the price reaches ${formatCurrency(parseFloat(limitPrice))}.`}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              <div className="bg-gray-50 rounded-md p-3 mb-4">
-                <div className="flex justify-between text-sm py-1">
-                  <span className="text-gray-600">Market Price</span>
-                  <span className="font-medium">
-                    {formatCurrency(stockData.price)}
-                  </span>
-                </div>
-
-                <div className="flex justify-between text-sm py-1">
-                  <span className="text-gray-600">
-                    {orderType === "buy" ? "Cost" : "Credit"} ({quantity}{" "}
-                    {quantity === 1 ? "share" : "shares"})
-                  </span>
-                  <span>{formatCurrency(stockData.price * quantity)}</span>
-                </div>
-
-                <div className="flex justify-between text-sm py-1">
-                  <span className="text-gray-600">Commission</span>
-                  <span>$0.00</span>
-                </div>
-
-                <div className="flex justify-between text-sm py-1 border-t mt-1 pt-1">
-                  <span className="font-medium">Estimated Total</span>
-                  <span className="font-bold">
-                    {formatCurrency(stockData.price * quantity)}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex space-x-2">
-              <button
-                onClick={() => setShowOrder(false)}
-                className="flex-1 py-2 px-4 border border-gray-300 rounded-md text-gray-700 font-medium hover:bg-gray-50 text-sm transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleOrder}
-                disabled={!toolCallId}
-                className={`flex-1 py-2 px-4 rounded-md font-medium text-white text-sm ${
-                  orderType === "buy"
-                    ? "bg-green-600 hover:bg-green-700"
-                    : "bg-red-600 hover:bg-red-700"
-                } ${!toolCallId ? "opacity-50 cursor-not-allowed" : ""} transition-colors`}
-              >
-                Review {orderType === "buy" ? "Purchase" : "Sale"}
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
+            }
+          />
+          <Line dataKey="price" type="natural" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ChartContainer>
     </div>
   );
 }
diff --git a/package.json b/package.json
index d7a0de5..1f10fa0 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-markdown": "^10.0.1",
     "react-router-dom": "^6.17.0",
     "react-syntax-highlighter": "^15.5.0",
+    "recharts": "^2.15.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
@@ -70,6 +71,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "dotenv": "^16.4.7",
     "eslint": "^9.19.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
@@ -80,5 +82,8 @@
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0"
   },
+  "overrides": {
+    "react-is": "^19.0.0-rc-69d4b800-20241021"
+  },
   "packageManager": "pnpm@10.5.1+sha512.c424c076bd25c1a5b188c37bb1ca56cc1e136fbf530d98bcb3289982a08fd25527b8c9c4ec113be5e3393c39af04521dd647bcf1d0801eaf8ac6a7b14da313af"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d61321d..910fdff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,9 @@ importers:
       react-syntax-highlighter:
         specifier: ^15.5.0
         version: 15.6.1(react@19.0.0)
+      recharts:
+        specifier: ^2.15.1
+        version: 2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
@@ -166,6 +169,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.3)
+      dotenv:
+        specifier: ^16.4.7
+        version: 16.4.7
       eslint:
         specifier: ^9.19.0
         version: 9.21.0(jiti@2.4.2)
@@ -1850,6 +1856,60 @@ packages:
         integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==,
       }
 
+  "@types/d3-array@3.2.1":
+    resolution:
+      {
+        integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==,
+      }
+
+  "@types/d3-color@3.1.3":
+    resolution:
+      {
+        integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==,
+      }
+
+  "@types/d3-ease@3.0.2":
+    resolution:
+      {
+        integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==,
+      }
+
+  "@types/d3-interpolate@3.0.4":
+    resolution:
+      {
+        integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==,
+      }
+
+  "@types/d3-path@3.1.1":
+    resolution:
+      {
+        integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==,
+      }
+
+  "@types/d3-scale@4.0.9":
+    resolution:
+      {
+        integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==,
+      }
+
+  "@types/d3-shape@3.1.7":
+    resolution:
+      {
+        integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==,
+      }
+
+  "@types/d3-time@3.0.4":
+    resolution:
+      {
+        integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==,
+      }
+
+  "@types/d3-timer@3.0.2":
+    resolution:
+      {
+        integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==,
+      }
+
   "@types/debug@4.1.12":
     resolution:
       {
@@ -2499,6 +2559,83 @@ packages:
         integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==,
       }
 
+  d3-array@3.2.4:
+    resolution:
+      {
+        integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==,
+      }
+    engines: { node: ">=12" }
+
+  d3-color@3.1.0:
+    resolution:
+      {
+        integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==,
+      }
+    engines: { node: ">=12" }
+
+  d3-ease@3.0.1:
+    resolution:
+      {
+        integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==,
+      }
+    engines: { node: ">=12" }
+
+  d3-format@3.1.0:
+    resolution:
+      {
+        integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==,
+      }
+    engines: { node: ">=12" }
+
+  d3-interpolate@3.0.1:
+    resolution:
+      {
+        integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==,
+      }
+    engines: { node: ">=12" }
+
+  d3-path@3.1.0:
+    resolution:
+      {
+        integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==,
+      }
+    engines: { node: ">=12" }
+
+  d3-scale@4.0.2:
+    resolution:
+      {
+        integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==,
+      }
+    engines: { node: ">=12" }
+
+  d3-shape@3.2.0:
+    resolution:
+      {
+        integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==,
+      }
+    engines: { node: ">=12" }
+
+  d3-time-format@4.1.0:
+    resolution:
+      {
+        integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==,
+      }
+    engines: { node: ">=12" }
+
+  d3-time@3.1.0:
+    resolution:
+      {
+        integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==,
+      }
+    engines: { node: ">=12" }
+
+  d3-timer@3.0.1:
+    resolution:
+      {
+        integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==,
+      }
+    engines: { node: ">=12" }
+
   date-fns@4.1.0:
     resolution:
       {
@@ -2524,6 +2661,12 @@ packages:
       }
     engines: { node: ">=0.10.0" }
 
+  decimal.js-light@2.5.1:
+    resolution:
+      {
+        integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==,
+      }
+
   decode-named-character-reference@1.0.2:
     resolution:
       {
@@ -2602,6 +2745,12 @@ packages:
         integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==,
       }
 
+  dom-helpers@5.2.1:
+    resolution:
+      {
+        integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==,
+      }
+
   dotenv@16.4.7:
     resolution:
       {
@@ -2898,6 +3047,13 @@ packages:
         integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==,
       }
 
+  fast-equals@5.2.2:
+    resolution:
+      {
+        integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==,
+      }
+    engines: { node: ">=6.0.0" }
+
   fast-glob@3.3.3:
     resolution:
       {
@@ -3354,6 +3510,13 @@ packages:
         integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==,
       }
 
+  internmap@2.0.3:
+    resolution:
+      {
+        integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==,
+      }
+    engines: { node: ">=12" }
+
   is-alphabetical@1.0.4:
     resolution:
       {
@@ -3743,6 +3906,12 @@ packages:
         integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==,
       }
 
+  lodash@4.17.21:
+    resolution:
+      {
+        integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==,
+      }
+
   logform@2.7.0:
     resolution:
       {
@@ -3756,6 +3925,13 @@ packages:
         integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==,
       }
 
+  loose-envify@1.4.0:
+    resolution:
+      {
+        integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==,
+      }
+    hasBin: true
+
   lowlight@1.20.0:
     resolution:
       {
@@ -4215,6 +4391,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  object-assign@4.1.1:
+    resolution:
+      {
+        integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
+      }
+    engines: { node: ">=0.10.0" }
+
   once@1.4.0:
     resolution:
       {
@@ -4491,6 +4674,12 @@ packages:
       }
     engines: { node: ">=6" }
 
+  prop-types@15.8.1:
+    resolution:
+      {
+        integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==,
+      }
+
   property-information@5.6.0:
     resolution:
       {
@@ -4530,6 +4719,18 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
+  react-is@16.13.1:
+    resolution:
+      {
+        integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==,
+      }
+
+  react-is@18.3.1:
+    resolution:
+      {
+        integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==,
+      }
+
   react-markdown@10.0.1:
     resolution:
       {
@@ -4600,6 +4801,15 @@ packages:
     peerDependencies:
       react: ">=16.8"
 
+  react-smooth@4.0.4:
+    resolution:
+      {
+        integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==,
+      }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-style-singleton@2.2.3:
     resolution:
       {
@@ -4630,6 +4840,15 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-transition-group@4.4.5:
+    resolution:
+      {
+        integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==,
+      }
+    peerDependencies:
+      react: ">=16.6.0"
+      react-dom: ">=16.6.0"
+
   react@19.0.0:
     resolution:
       {
@@ -4651,6 +4870,22 @@ packages:
       }
     engines: { node: ">= 14.18.0" }
 
+  recharts-scale@0.4.5:
+    resolution:
+      {
+        integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==,
+      }
+
+  recharts@2.15.1:
+    resolution:
+      {
+        integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==,
+      }
+    engines: { node: ">=14" }
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   refractor@3.6.0:
     resolution:
       {
@@ -5003,6 +5238,12 @@ packages:
         integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==,
       }
 
+  tiny-invariant@1.3.3:
+    resolution:
+      {
+        integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==,
+      }
+
   to-regex-range@5.0.1:
     resolution:
       {
@@ -5303,6 +5544,12 @@ packages:
         integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==,
       }
 
+  victory-vendor@36.9.2:
+    resolution:
+      {
+        integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==,
+      }
+
   vite@6.2.0:
     resolution:
       {
@@ -6512,6 +6759,30 @@ snapshots:
     dependencies:
       "@babel/types": 7.26.9
 
+  "@types/d3-array@3.2.1": {}
+
+  "@types/d3-color@3.1.3": {}
+
+  "@types/d3-ease@3.0.2": {}
+
+  "@types/d3-interpolate@3.0.4":
+    dependencies:
+      "@types/d3-color": 3.1.3
+
+  "@types/d3-path@3.1.1": {}
+
+  "@types/d3-scale@4.0.9":
+    dependencies:
+      "@types/d3-time": 3.0.4
+
+  "@types/d3-shape@3.1.7":
+    dependencies:
+      "@types/d3-path": 3.1.1
+
+  "@types/d3-time@3.0.4": {}
+
+  "@types/d3-timer@3.0.2": {}
+
   "@types/debug@4.1.12":
     dependencies:
       "@types/ms": 2.1.0
@@ -6880,6 +7151,44 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
   date-fns@4.1.0: {}
 
   debug@4.4.0:
@@ -6888,6 +7197,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js-light@2.5.1: {}
+
   decode-named-character-reference@1.0.2:
     dependencies:
       character-entities: 2.0.2
@@ -6917,6 +7228,11 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  dom-helpers@5.2.1:
+    dependencies:
+      "@babel/runtime": 7.26.9
+      csstype: 3.1.3
+
   dotenv@16.4.7: {}
 
   dunder-proto@1.0.1:
@@ -7154,6 +7470,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.2.2: {}
+
   fast-glob@3.3.3:
     dependencies:
       "@nodelib/fs.stat": 2.0.5
@@ -7444,6 +7762,8 @@ snapshots:
 
   inline-style-parser@0.2.4: {}
 
+  internmap@2.0.3: {}
+
   is-alphabetical@1.0.4: {}
 
   is-alphabetical@2.0.1: {}
@@ -7623,6 +7943,8 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
+  lodash@4.17.21: {}
+
   logform@2.7.0:
     dependencies:
       "@colors/colors": 1.6.0
@@ -7634,6 +7956,10 @@ snapshots:
 
   longest-streak@3.1.0: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lowlight@1.20.0:
     dependencies:
       fault: 1.0.4
@@ -8083,6 +8409,8 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  object-assign@4.1.1: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -8257,6 +8585,12 @@ snapshots:
 
   prismjs@1.29.0: {}
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   property-information@5.6.0:
     dependencies:
       xtend: 4.0.2
@@ -8277,6 +8611,10 @@ snapshots:
       react: 19.0.0
       scheduler: 0.25.0
 
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
   react-markdown@10.0.1(@types/react@19.0.10)(react@19.0.0):
     dependencies:
       "@types/hast": 3.0.4
@@ -8346,6 +8684,14 @@ snapshots:
       "@remix-run/router": 1.23.0
       react: 19.0.0
 
+  react-smooth@4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-transition-group: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+
   react-style-singleton@2.2.3(@types/react@19.0.10)(react@19.0.0):
     dependencies:
       get-nonce: 1.0.1
@@ -8373,6 +8719,15 @@ snapshots:
     transitivePeerDependencies:
       - "@types/react"
 
+  react-transition-group@4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      "@babel/runtime": 7.26.9
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react@19.0.0: {}
 
   readable-stream@3.6.2:
@@ -8383,6 +8738,23 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   refractor@3.6.0:
     dependencies:
       hastscript: 6.0.0
@@ -8607,6 +8979,8 @@ snapshots:
 
   text-hex@1.0.0: {}
 
+  tiny-invariant@1.3.3: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -8778,6 +9152,23 @@ snapshots:
       "@types/unist": 3.0.3
       vfile-message: 4.0.2
 
+  victory-vendor@36.9.2:
+    dependencies:
+      "@types/d3-array": 3.2.1
+      "@types/d3-ease": 3.0.2
+      "@types/d3-interpolate": 3.0.4
+      "@types/d3-scale": 4.0.9
+      "@types/d3-shape": 3.1.7
+      "@types/d3-time": 3.0.4
+      "@types/d3-timer": 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(tsx@4.19.3)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..a9a2c52
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..86503e7
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return (
+      <div className={cn("font-medium bg-white", labelClassName)}>{value}</div>
+    );
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          },
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center",
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/src/index.css b/src/index.css
index 6b18787..2d4d0d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -121,6 +121,21 @@
   body {
     @apply bg-background text-foreground;
   }
+  :root {
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
 @layer utilities {