react

src/components/Dashboard/HomePage.js

@@ -1,37 +1,113 @@
-// HomePage.js
-
-import React from 'react';
-import { BarChart } from '@mui/x-charts/BarChart'; // Import BarChart component
-
-const Card = ({ index }) => {
-  return (
-    <div className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
-      <h3 className="text-lg font-semibold mb-2">INDEX {index}</h3>
-      <p className="text-gray-600">{index}.</p>
-    </div>
-  );
-};
-
-const HomePage = () => {
-  return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
-      <h2 className="text-3xl font-semibold text-gray-700 mb-6">Welcome to the Dashboard!</h2>
-      <div className="flex flex-wrap justify-center">
-        <Card index={1} />
-        <Card index={2} />
-        <Card index={3} />
-      </div>
-      <div className="w-full mt-8 flex justify-center">
-        {/* Add BarChart component */}
-        <BarChart
-          xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
-          series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-          width={700}
-          height={400}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default HomePage;
+// HomePage.js
+
+import React from 'react';
+import { FaUsers, FaCog, FaChartBar, FaShieldAlt } from 'react-icons/fa';
+
+const StatCard = ({ icon: Icon, title, value, color }) => (
+  <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200">
+    <div className="flex items-center space-x-4">
+      <div className={`p-3 rounded-lg ${color}`}>
+        <Icon className="w-6 h-6 text-white" />
+      </div>
+      <div>
+        <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
+        <p className="text-2xl font-bold text-gray-800">{value}</p>
+      </div>
+    </div>
+  </div>
+);
+
+const HomePage = () => {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold text-gray-800">Welcome Back!</h1>
+        <div className="text-sm text-gray-500">Last updated: {new Date().toLocaleDateString()}</div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <StatCard
+          icon={FaUsers}
+          title="Total Users"
+          value="1,234"
+          color="bg-gradient-to-r from-purple-500 to-indigo-500"
+        />
+        <StatCard
+          icon={FaCog}
+          title="Active Systems"
+          value="12"
+          color="bg-gradient-to-r from-blue-500 to-cyan-500"
+        />
+        <StatCard
+          icon={FaChartBar}
+          title="Reports Generated"
+          value="456"
+          color="bg-gradient-to-r from-indigo-500 to-purple-500"
+        />
+        <StatCard
+          icon={FaShieldAlt}
+          title="Security Score"
+          value="98%"
+          color="bg-gradient-to-r from-green-500 to-emerald-500"
+        />
+      </div>
+
+      {/* Recent Activity */}
+      <div className="bg-white rounded-xl shadow-lg p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">Recent Activity</h2>
+        <div className="space-y-4">
+          {[1, 2, 3].map((item) => (
+            <div key={item} className="flex items-center space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
+              <div className="w-2 h-2 rounded-full bg-purple-500"></div>
+              <div className="flex-1">
+                <p className="text-gray-800">System update completed</p>
+                <p className="text-sm text-gray-500">2 hours ago</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl shadow-lg p-6 text-white">
+          <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
+          <div className="space-y-3">
+            <button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+              Generate Report
+            </button>
+            <button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+              Add New User
+            </button>
+            <button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+              System Settings
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl shadow-lg p-6 text-white">
+          <h2 className="text-xl font-semibold mb-4">System Status</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span>CPU Usage</span>
+              <span className="font-medium">45%</span>
+            </div>
+            <div className="w-full bg-white/20 rounded-full h-2">
+              <div className="bg-white h-2 rounded-full" style={{ width: '45%' }}></div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Memory Usage</span>
+              <span className="font-medium">62%</span>
+            </div>
+            <div className="w-full bg-white/20 rounded-full h-2">
+              <div className="bg-white h-2 rounded-full" style={{ width: '62%' }}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;