Spaces:
Build error
Build error
File size: 2,507 Bytes
d25dea0 b697e80 d25dea0 b697e80 d25dea0 b697e80 d25dea0 b697e80 d25dea0 b697e80 d25dea0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import { useState } from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";
import "./App.css";
// Sample chart data
const data = [
{ name: "Jan", transactions: 4000, frauds: 240 },
{ name: "Feb", transactions: 3000, frauds: 180 },
{ name: "Mar", transactions: 5000, frauds: 350 },
{ name: "Apr", transactions: 4780, frauds: 210 },
];
function App() {
const [count, setCount] = useState(0);
return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white p-6">
<header className="flex justify-between items-center mb-8">
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-3xl font-bold tracking-wide"
>
🚀 Fraud Detection Dashboard
</motion.h1>
<Button
onClick={() => setCount(count + 1)}
className="rounded-2xl shadow-lg px-4"
>
Clicks: {count}
</Button>
</header>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Stats Card */}
<Card className="rounded-2xl shadow-lg bg-gray-800">
<CardContent className="p-6">
<h2 className="text-xl font-semibold mb-2">Overview</h2>
<p className="text-gray-300">Track fraud vs transactions in real time.</p>
</CardContent>
</Card>
{/* Chart Card */}
<Card className="rounded-2xl shadow-lg bg-gray-800">
<CardContent className="p-6">
<h2 className="text-xl font-semibold mb-4">Fraud Trends</h2>
<LineChart
width={400}
height={250}
data={data}
margin={{ top: 5, right: 30, left: 0, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" stroke="#555" />
<XAxis dataKey="name" stroke="#aaa" />
<YAxis stroke="#aaa" />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="transactions" stroke="#8884d8" strokeWidth={2} />
<Line type="monotone" dataKey="frauds" stroke="#ff4d4f" strokeWidth={2} />
</LineChart>
</CardContent>
</Card>
</div>
</div>
);
}
export default App;
|