import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"; import { motion } from "framer-motion";

const data = [ { month: "Jan", value: 12000 }, { month: "Feb", value: 15000 }, { month: "Mar", value: 17000 }, { month: "Apr", value: 16500 }, { month: "May", value: 19000 }, ];

export default function InvestmentDashboard() { const [balance] = useState(19000);

return (

<motion.h1 initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-3xl font-bold mb-6" > Investment Dashboard </motion.h1>

Total Balance

${balance.toLocaleString()}

<Card className="rounded-2xl shadow">
  <CardContent className="p-6">
    <p className="text-gray-500">Monthly Return</p>
    <h2 className="text-2xl font-semibold text-green-600">+12.4%</h2>
  </CardContent>
</Card>

<Card className="rounded-2xl shadow">
  <CardContent className="p-6">
    <p className="text-gray-500">Active Investments</p>
    <h2 className="text-2xl font-semibold">5</h2>
  </CardContent>
</Card>

Portfolio Growth

Your Investments

Crypto Fund +$2,400

Stock Portfolio +$1,100

Real Estate Pool +$3,200

Deposit Withdraw

); }