Update src/App.js

src/App.js

@@ -1,25 +1,74 @@
-import logo from './logo.svg';
-import './App.css';
+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="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <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"
         >
-          Learn React
-        </a>
+          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;
+