Merge version_1 into main

Merge version_1 into main

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-dashboard",  "version": "0.1.0",  "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",    "@testing-library/react": "^13.3.0",    "@testing-library/user-event": "^13.5.0",    "@types/jest": "^27.5.2",    "@types/node": "^16.11.47",    "@types/react": "^18.0.15",    "@types/react-dom": "^18.0.6",    "lucide-react": "^0.263.1",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-scripts": "5.0.1",    "typescript": "^4.7.4",    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^5.16.4",    "@testing-library/react": "^13.3.0",    "@testing-library/user-event": "^13.5.0",    "@types/jest": "^27.5.2",    "@types/node": "^16.11.45",    "@types/react": "^18.0.15",    "@types/react-dom": "^18.0.6",    "lucide-react": "^0.263.1",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-scripts": "5.0.1",    "typescript": "^4.7.4",    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"
@@ -18,8 +18,5 @@
     "development": [
       "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.7",    "postcss": "^8.4.14",    "tailwindcss": "^3.1.6"
   }
 }

src/App.css

@@ -1,7 +1,33 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .App {
   text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

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>
   );
 };

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}