From 8800663e0abe94f43f843904f0841cacbf888720 Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Fri, 16 Jan 2026 11:58:23 +0000
Subject: [PATCH] Update src/components/Dashboard.tsx

---
 src/components/Dashboard.tsx | 187 +++++++++++++++++------------------
 1 file changed, 91 insertions(+), 96 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index bfa382a..9d96824 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -1,113 +1,108 @@
 import React from 'react';
-import { BarChart3, Users, TrendingUp, DollarSign, Calendar, Bell, Search, Settings, Menu } from 'lucide-react';
+import { BarChart3, Users, DollarSign, TrendingUp } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  icon: React.ReactNode;
+  trend: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, value, icon, trend }) => {
+  return (
+    <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className="text-2xl font-bold text-gray-900">{value}</p>
+          <p className="text-xs text-green-600 font-medium">{trend}</p>
+        </div>
+        <div className="text-gray-400">
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const Dashboard: React.FC = () => {
+  const stats = [
+    {
+      title: "Total Revenue",      value: "$45,231",      icon: <DollarSign className="h-8 w-8" />,
+      trend: "+20.1% from last month"
+    },
+    {
+      title: "Active Users",      value: "2,350",      icon: <Users className="h-8 w-8" />,
+      trend: "+180.1% from last month"
+    },
+    {
+      title: "Sales",      value: "12,234",      icon: <BarChart3 className="h-8 w-8" />,
+      trend: "+19% from last month"
+    },
+    {
+      title: "Growth Rate",      value: "89.5%",      icon: <TrendingUp className="h-8 w-8" />,
+      trend: "+2.5% from last month"
+    }
+  ];
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white border-b border-gray-200 px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-4">
-            <Menu className="h-6 w-6 text-gray-600" />
-            <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Search className="h-5 w-5 text-gray-600" />
-            <Bell className="h-5 w-5 text-gray-600" />
-            <Settings className="h-5 w-5 text-gray-600" />
-          </div>
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <p className="text-gray-600">Welcome to your analytics dashboard</p>
         </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="px-6 py-8">
-        {/* Stats Cards */}
+        
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-600">Total Users</p>
-                <p className="text-3xl font-bold text-gray-900">2,543</p>
-              </div>
-              <Users className="h-8 w-8 text-blue-500" />
-            </div>
-            <p className="text-sm text-green-600 mt-2">+12% from last month</p>
-          </div>
-
-          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-600">Revenue</p>
-                <p className="text-3xl font-bold text-gray-900">$45,231</p>
-              </div>
-              <DollarSign className="h-8 w-8 text-green-500" />
-            </div>
-            <p className="text-sm text-green-600 mt-2">+8% from last month</p>
-          </div>
-
-          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-600">Growth</p>
-                <p className="text-3xl font-bold text-gray-900">+24%</p>
-              </div>
-              <TrendingUp className="h-8 w-8 text-purple-500" />
-            </div>
-            <p className="text-sm text-green-600 mt-2">+3% from last month</p>
-          </div>
-
-          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-600">Analytics</p>
-                <p className="text-3xl font-bold text-gray-900">98.5%</p>
-              </div>
-              <BarChart3 className="h-8 w-8 text-orange-500" />
-            </div>
-            <p className="text-sm text-green-600 mt-2">+2% from last month</p>
-          </div>
+          {stats.map((stat, index) => (
+            <StatCard
+              key={index}
+              title={stat.title}
+              value={stat.value}
+              icon={stat.icon}
+              trend={stat.trend}
+            />
+          ))}
         </div>
-
-        {/* Charts Section */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue Overview</h3>
-            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
-              <BarChart3 className="h-16 w-16 text-gray-400" />
-              <p className="text-gray-500 ml-4">Chart visualization would go here</p>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-3">
+                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                <span className="text-sm text-gray-600">New user registered</span>
+              </div>
+              <div className="flex items-center space-x-3">
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                <span className="text-sm text-gray-600">Payment received</span>
+              </div>
+              <div className="flex items-center space-x-3">
+                <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                <span className="text-sm text-gray-600">System update completed</span>
+              </div>
             </div>
           </div>
-
+          
           <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">User Activity</h3>
-            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
-              <TrendingUp className="h-16 w-16 text-gray-400" />
-              <p className="text-gray-500 ml-4">Activity chart would go here</p>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Stats</h3>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600">Conversion Rate</span>
+                <span className="text-sm font-semibold text-gray-900">3.2%</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600">Bounce Rate</span>
+                <span className="text-sm font-semibold text-gray-900">24.5%</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600">Session Duration</span>
+                <span className="text-sm font-semibold text-gray-900">2m 34s</span>
+              </div>
             </div>
           </div>
         </div>
-
-        {/* Recent Activity */}
-        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
-          <div className="space-y-4">
-            {[1, 2, 3, 4].map((item) => (
-              <div key={item} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
-                <img 
-                  src="/images/placeholder.webp" 
-                  alt="User avatar" 
-                  className="h-10 w-10 rounded-full"
-                />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-900">User {item} completed an action</p>
-                  <p className="text-xs text-gray-500">2 hours ago</p>
-                </div>
-                <Calendar className="h-5 w-5 text-gray-400" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </main>
+      </div>
     </div>
   );
 };