Admin dashboard

package.json

@@ -131,6 +131,7 @@
     "react-select": "^5.7.4",
     "react-table": "^7.8.0",
     "react-toastify": "^9.0.8",
+    "recharts": "^2.12.7",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-state-sync": "^3.1.4",

src/components/Performance/PerformanceChart.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useTheme } from "../../hooks/darkmode";
+import PerformanceChartHeader from "./PerformanceChartHeader";
+import PerformanceChartGraph from "./PerformanceChartGraph";
+
+interface PerformanceChartProps {
+  data: { name: string; performance: number }[];
+  currentDate: string;
+}
+
+const PerformanceChart: React.FC<PerformanceChartProps> = ({
+  data,
+  currentDate,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      className={`p-6 rounded-lg mt-8 border-2 ${
+        theme ? "bg-gray-100 border-gray-300" : "bg-[#1F2A37] border-white-500"
+      }`}
+    >
+      <PerformanceChartHeader theme={theme} currentDate={currentDate} />
+      <div className="mt-6">
+        <PerformanceChartGraph data={data} theme={theme} /> 
+      </div>
+    </div>
+  );
+};
+
+export default PerformanceChart;

src/components/Performance/PerformanceChartGraph.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  AreaChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Area,
+} from "recharts";
+
+interface PerformanceChartGraphProps {
+  data: { name: string; performance: number }[];
+  theme: boolean;
+}
+
+const PerformanceChartGraph: React.FC<PerformanceChartGraphProps> = ({
+  data,
+  theme,
+}) => (
+  <ResponsiveContainer width="100%" height={400}>
+    <AreaChart data={data}>
+      <CartesianGrid vertical={false} stroke={theme ? "#ccc" : "#374151"} />
+      <XAxis
+        dataKey="name"
+        tick={{ fill: theme ? "black" : "white" }}
+        tickLine={false}
+        axisLine={false}
+      />
+      <YAxis
+        domain={[0, 2]}
+        ticks={[1, 2]}
+        tick={{ fill: theme ? "black" : "white" }}
+        axisLine={false}
+        tickLine={false}
+      />
+      <Tooltip />
+      <Area
+        type="monotone"
+        dataKey="performance"
+        stroke="#56C870"
+        fillOpacity={1}
+        fill="url(#colorUv)"
+      />
+      <defs>
+        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+          <stop
+            offset="1%"
+            stopColor={theme ? "#F5F5F5" : "#243A3D"}
+            stopOpacity={1}
+          />
+          <stop
+            offset="99%"
+            stopColor={theme ? "#F5F5F5" : "#243A3D"}
+            stopOpacity={0}
+          />
+        </linearGradient>
+      </defs>
+      <Line
+        type="monotone"
+        dataKey="performance"
+        stroke="#56C870"
+        strokeWidth={4}
+        dot={false}
+      />
+    </AreaChart>
+  </ResponsiveContainer>
+);
+
+export default PerformanceChartGraph;

src/components/Performance/PerformanceChartHeader.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface PerformanceChartHeaderProps {
+  theme: boolean;
+  currentDate: string;
+}
+
+const PerformanceChartHeader: React.FC<PerformanceChartHeaderProps> = ({
+  theme,
+  currentDate,
+}) => (
+  <>
+    <h2 className={`${theme ? "text-black" : "text-white"} text-lg mb-2 ml-11`}>
+      Overall performance
+    </h2>
+    <p
+      className={`${
+        theme ? "text-gray-800" : "text-gray-400"
+      } text-sm mb-4 ml-11`}
+    >
+      as of {currentDate}
+    </p>
+    <p className={`${theme ? "text-black" : "text-white"} text-sm ml-11`}>
+      Overall performance
+    </p>
+  </>
+);
+
+export default PerformanceChartHeader;

src/components/StatCard.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useTheme } from "../hooks/darkmode";
+
+interface StatCardProps {
+  icon: JSX.Element;
+  title: string;
+  count: number | string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ icon, title, count }) => {
+  const { theme } = useTheme();
+  return (
+    <div
+      className={`p-6 rounded-2xl border-2 flex flex-col items-center justify-center ${
+        theme ? "bg-gray-200 border-gray-300" : "bg-[#374151] border-white-500"
+      }`}
+    >
+      {icon}
+      <h3 className={`${theme ? "text-black" : "text-white"} mt-4`}>{title}</h3>
+      <span className={`${theme ? "text-black" : "text-white"} text-4xl mt-2`}>{count}</span>
+    </div>
+  );
+};
+
+export default StatCard;

src/components/form/SignInForm.tsx

@@ -60,7 +60,7 @@ const LoginForm = () => {
       const role = localStorage.getItem("roleName") as string;
       if (role === "applicant") {
         navigate("/applicant");
-      } else if (role === "superAdmin") {
+      } else if (role === "superAdmin" || role === "admin") {
         navigate("/admin");
       } else {
         const searchParams = new URLSearchParams(location.search);