Merge pull request #309 from Ansh101112/admin

admin ui added
usha-madithati · Jun 19, 2024 · ffb6114 · ffb6114
2 parents 191ec2b + e8fbb82
commit ffb6114
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,9 +7,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
     "framer-motion": "^11.2.4",
     "jsqr": "^1.4.0",
     "react": "^18.3.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.0",
     "react-icons": "^5.2.1",
     "react-loader-spinner": "^6.1.6",

diff --git a/src/Dashboards/AdminD.js b/src/Dashboards/AdminD.js
@@ -1,14 +1,82 @@
 import React from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LineElement,
+} from "chart.js";
+import { Bar, Line } from "react-chartjs-2";
 import Navbar from "../components/Navbar";
+import "tailwindcss/tailwind.css";
+
+// Register the necessary components with Chart.js
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LineElement
+);
 
 const AdminD = () => {
+  const barData = {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [
+      {
+        label: "Sales",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: "rgba(75, 192, 192, 0.2)",
+        borderColor: "rgba(75, 192, 192, 1)",
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const lineData = {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [
+      {
+        label: "Revenue",
+        data: [65, 59, 80, 81, 56, 55],
+        fill: false,
+        backgroundColor: "rgba(153, 102, 255, 0.2)",
+        borderColor: "rgba(153, 102, 255, 1)",
+      },
+    ],
+  };
+
   return (
     <>
-      <Navbar></Navbar>
-      <h1 className="flex justify-center font-semibold">
-        Dashboard is in developement currently. Come back later...
-      </h1>
-      <h3 className="flex justify-center font-semibold">Happy Saving</h3>
+      <Navbar />
+      <div className="container mx-auto p-4">
+        <h1 className="text-2xl font-bold text-center mb-8">Admin Dashboard</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+          <div className="bg-white shadow-md rounded-lg p-4">
+            <h2 className="text-xl font-semibold mb-4">Sales Data</h2>
+            <Bar data={barData} />
+          </div>
+          <div className="bg-white shadow-md rounded-lg p-4">
+            <h2 className="text-xl font-semibold mb-4">Revenue Data</h2>
+            <Line data={lineData} />
+          </div>
+        </div>
+        <div className="bg-white shadow-md rounded-lg p-4">
+          <h2 className="text-xl font-semibold mb-4">Announcements</h2>
+          <ul className="list-disc list-inside">
+            <li>New feature release coming soon!</li>
+            <li>System maintenance scheduled for this weekend.</li>
+            <li>End-of-year sale starts next month.</li>
+          </ul>
+        </div>
+      </div>
     </>
   );
 };