From e8fbb829ddad82d659c423436263f46e2d069579 Mon Sep 17 00:00:00 2001
From: Ansh101112 <tanshuman145@gmail.com>
Date: Wed, 19 Jun 2024 20:19:58 +0530
Subject: [PATCH] admin ui added

---
 package-lock.json        | 27 ++++++++++++++
 package.json             |  2 ++
 src/Dashboards/AdminD.js | 78 +++++++++++++++++++++++++++++++++++++---
 3 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 63463b2..3471b16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,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",
@@ -4439,6 +4441,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -7026,6 +7033,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.2.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
@@ -19038,6 +19056,15 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/package.json b/package.json
index c664cd5..5674ca3 100644
--- 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
index 18346fd..c5521b0 100644
--- 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>
     </>
   );
 };