add admin dashboard feature reverted

package.json

@@ -129,6 +129,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,27 @@
+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/iconss/SvgIcons.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+export const CoordinatorIcon = () => (
+  <svg
+    width="70"
+    height="70"
+    viewBox="0 0 70 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M46.6668 61.2493L45.7918 56.8743C45.2085 56.6313 44.6621 56.3766 44.1527 56.1102C43.6432 55.8438 43.1202 55.5152 42.5835 55.1243L38.3543 56.4368L35.4377 51.4785L38.7918 48.5618C38.6946 47.8813 38.646 47.2493 38.646 46.666C38.646 46.0827 38.6946 45.4507 38.7918 44.7702L35.4377 41.8535L38.3543 36.8952L42.5835 38.2077C43.1182 37.8188 43.6413 37.4912 44.1527 37.2248C44.6641 36.9584 45.2104 36.7027 45.7918 36.4577L46.6668 32.0827H52.5002L53.3752 36.4577C53.9585 36.7007 54.5059 36.9681 55.0173 37.2598C55.5286 37.5514 56.0507 37.916 56.5835 38.3535L60.8127 36.8952L63.7293 41.9993L60.3752 44.916C60.4724 45.4993 60.521 46.107 60.521 46.7389C60.521 47.3709 60.4724 47.9785 60.3752 48.5618L63.7293 51.4785L60.8127 56.4368L56.5835 55.1243C56.0488 55.5132 55.5267 55.8419 55.0173 56.1102C54.5078 56.3785 53.9604 56.6332 53.3752 56.8743L52.5002 61.2493H46.6668ZM5.8335 58.3327V50.166C5.8335 48.5618 6.24669 47.0549 7.07308 45.6452C7.89947 44.2355 9.04183 43.166 10.5002 42.4368C12.9793 41.173 15.7745 40.1035 18.8856 39.2285C21.9967 38.3535 25.4238 37.916 29.1668 37.916H30.1877C30.4793 37.916 30.771 37.9646 31.0627 38.0618C29.6529 41.5618 29.0696 45.0375 29.3127 48.4889C29.5557 51.9403 30.7224 55.2216 32.8127 58.3327H5.8335ZM49.5835 52.4993C51.1877 52.4993 52.5614 51.9287 53.7047 50.7873C54.8481 49.6459 55.4188 48.2721 55.4168 46.666C55.4149 45.0599 54.8442 43.6871 53.7047 42.5477C52.5653 41.4082 51.1916 40.8366 49.5835 40.8327C47.9754 40.8288 46.6027 41.4005 45.4652 42.5477C44.3277 43.6949 43.756 45.0677 43.7502 46.666C43.7443 48.2643 44.316 49.6381 45.4652 50.7873C46.6143 51.9364 47.9871 52.5071 49.5835 52.4993ZM29.1668 34.9993C25.9585 34.9993 23.212 33.857 20.9272 31.5723C18.6425 29.2875 17.5002 26.541 17.5002 23.3327C17.5002 20.1243 18.6425 17.3778 20.9272 15.0931C23.212 12.8084 25.9585 11.666 29.1668 11.666C32.3752 11.666 35.1217 12.8084 37.4064 15.0931C39.6911 17.3778 40.8335 20.1243 40.8335 23.3327C40.8335 26.541 39.6911 29.2875 37.4064 31.5723C35.1217 33.857 32.3752 34.9993 29.1668 34.9993Z"
+      fill="#4ECB71"
+    />
+  </svg>
+);
+
+export const PerformanceIcon = () => (
+  <svg
+    width="54"
+    height="62"
+    viewBox="0 0 54 62"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.75 6.58333C0.75 5.03624 1.36458 3.55251 2.45854 2.45854C3.55251 1.36458 5.03624 0.75 6.58333 0.75H47.4167C48.9638 0.75 50.4475 1.36458 51.5415 2.45854C52.6354 3.55251 53.25 5.03624 53.25 6.58333V47.4167C53.25 48.9638 52.6354 50.4475 51.5415 51.5415C50.4475 52.6354 48.9638 53.25 47.4167 53.25H6.58333C5.03624 53.25 3.55251 52.6354 2.45854 51.5415C1.36458 50.4475 0.75 48.9638 0.75 47.4167V6.58333ZM32.6554 14.3271C31.6258 11.7517 27.9363 11.8975 27.1079 14.5429L21.9979 30.8938L20.8663 28.6275C20.6215 28.1385 20.2456 27.7273 19.7804 27.4399C19.3153 27.1524 18.7793 27.0001 18.2325 27H12.4167C11.6431 27 10.9013 27.3073 10.3543 27.8543C9.80729 28.4013 9.5 29.1431 9.5 29.9167C9.5 30.6902 9.80729 31.4321 10.3543 31.9791C10.9013 32.526 11.6431 32.8333 12.4167 32.8333H16.4475L19.9825 39.9062C21.1696 42.2775 24.6404 41.9975 25.4308 39.4688L30.255 24.0308L33.0346 30.9813C33.4808 32.1012 34.5658 32.8333 35.7704 32.8333H41.5833C42.3569 32.8333 43.0988 32.526 43.6457 31.9791C44.1927 31.4321 44.5 30.6902 44.5 29.9167C44.5 29.1431 44.1927 28.4013 43.6457 27.8543C43.0988 27.3073 42.3569 27 41.5833 27H37.7246L32.6554 14.3271Z"
+      fill="#4ECB71"
+    />
+  </svg>
+);
+
+export const TraineeIcon = () => (
+  <svg
+    width="70"
+    height="70"
+    viewBox="0 0 70 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M61.2481 42H69.9979V70H34.9989V42H43.7487V32.6667H61.2481V42ZM48.1235 42H56.8733V37.3333H48.1235V42ZM65.623 56H61.2481V60.6667H56.8733V56H48.1235V60.6667H43.7487V56H39.3738V65.3333H65.623V56ZM39.3738 46.6667V51.3333H65.623V46.6667H39.3738ZM30.6241 28C30.6241 30.2604 30.157 32.375 29.2227 34.3438C28.2885 36.3125 26.9556 37.9653 25.2238 39.3021C26.2492 39.8611 27.2176 40.5052 28.129 41.2344C29.0405 41.9635 29.8721 42.7778 30.6241 43.6771V56C30.6241 54.0799 30.2823 52.2691 29.5987 50.5677C28.9151 48.8663 27.9809 47.3837 26.7961 46.1198C25.6112 44.8559 24.2099 43.8472 22.5921 43.0938C20.9743 42.3403 19.2768 41.9757 17.4995 42C15.6766 42 13.9791 42.3646 12.4068 43.0938C10.8346 43.8229 9.4447 44.8194 8.23705 46.0833C7.02941 47.3472 6.0838 48.842 5.40023 50.5677C4.71665 52.2934 4.37487 54.1042 4.37487 56H0C0 54.2257 0.227858 52.5122 0.683573 50.8594C1.13929 49.2066 1.78868 47.6389 2.63176 46.1562C3.47483 44.6736 4.51158 43.3611 5.74201 42.2188C6.97244 41.0764 8.3168 40.092 9.77509 39.2656C8.06616 37.9531 6.74459 36.3125 5.81037 34.3438C4.87615 32.375 4.39765 30.2604 4.37487 28C4.37487 26.0799 4.71665 24.2691 5.40023 22.5677C6.0838 20.8663 7.01802 19.3837 8.20288 18.1198C9.38774 16.8559 10.7777 15.8472 12.3727 15.0937C13.9677 14.3403 15.6766 13.9757 17.4995 14C19.14 14 20.7009 14.3038 22.1819 14.9115C23.663 15.5191 25.0188 16.4184 26.2492 17.6094C26.9783 16.9045 27.7872 16.2847 28.6759 15.75C27.9012 14.8993 27.3087 13.9149 26.8986 12.7969C26.4885 11.6788 26.272 10.5243 26.2492 9.33333C26.2492 8.04514 26.4771 6.84201 26.9328 5.72396C27.3885 4.6059 28.0151 3.60938 28.8126 2.73438C29.6101 1.85938 30.5329 1.19097 31.5811 0.729167C32.6292 0.267361 33.7685 0.0243056 34.9989 0C36.2066 0 37.3345 0.243056 38.3826 0.729167C39.4308 1.21528 40.365 1.88368 41.1853 2.73438C42.0056 3.58507 42.6322 4.56944 43.0651 5.6875C43.498 6.80556 43.7259 8.02083 43.7487 9.33333C43.7487 10.5243 43.5436 11.6788 43.1334 12.7969C42.7233 13.9149 42.1195 14.8993 41.322 15.75C43.2132 16.8681 44.7512 18.375 45.9361 20.2708C47.121 18.375 48.659 16.8681 50.5502 15.75C49.7755 14.8993 49.1831 13.9149 48.7729 12.7969C48.3628 11.6788 48.1463 10.5243 48.1235 9.33333C48.1235 8.04514 48.3514 6.84201 48.8071 5.72396C49.2628 4.6059 49.8894 3.60938 50.6869 2.73438C51.4844 1.85938 52.4073 1.19097 53.4554 0.729167C54.5035 0.267361 55.6428 0.0243056 56.8733 0C58.0809 0 59.2088 0.243056 60.257 0.729167C61.3051 1.21528 62.2393 1.88368 63.0596 2.73438C63.8799 3.58507 64.5065 4.56944 64.9394 5.6875C65.3724 6.80556 65.6002 8.02083 65.623 9.33333C65.623 10.5243 65.4179 11.6788 65.0078 12.7969C64.5976 13.9149 63.9938 14.8993 63.1963 15.75C64.2445 16.3576 65.1901 17.099 66.0331 17.974C66.8762 18.849 67.5826 19.809 68.1522 20.8542C68.7219 21.8993 69.1776 23.0417 69.5194 24.2812C69.8612 25.5208 70.0207 26.7604 69.9979 28H65.623C65.623 26.7118 65.3951 25.5087 64.9394 24.3906C64.4837 23.2726 63.8571 22.276 63.0596 21.401C62.2621 20.526 61.3393 19.8576 60.2911 19.3958C59.243 18.934 58.1037 18.691 56.8733 18.6667C55.6656 18.6667 54.5377 18.9097 53.4896 19.3958C52.4414 19.8819 51.5072 20.5503 50.6869 21.401C49.8666 22.2517 49.24 23.2361 48.8071 24.3542C48.3742 25.4722 48.1463 26.6875 48.1235 28H43.7487C43.7487 26.7118 43.5208 25.5087 43.0651 24.3906C42.6094 23.2726 41.9828 22.276 41.1853 21.401C40.3878 20.526 39.4649 19.8576 38.4168 19.3958C37.3687 18.934 36.2294 18.691 34.9989 18.6667C33.8824 18.6667 32.8001 18.8854 31.752 19.3229C30.7038 19.7604 29.781 20.4045 28.9835 21.2552C29.5303 22.276 29.9405 23.3576 30.2139 24.5C30.4874 25.6424 30.6241 26.809 30.6241 28ZM56.8733 4.66667C56.258 4.66667 55.6884 4.78819 55.1643 5.03125C54.6403 5.27431 54.1845 5.60243 53.7972 6.01562C53.4098 6.42882 53.0908 6.92708 52.8402 7.51042C52.5895 8.09375 52.4756 8.70139 52.4984 9.33333C52.4984 9.98958 52.6123 10.5972 52.8402 11.1562C53.068 11.7153 53.3756 12.2014 53.763 12.6146C54.1504 13.0278 54.6175 13.3681 55.1643 13.6354C55.7112 13.9028 56.2808 14.0243 56.8733 14C57.4885 14 58.0581 13.8785 58.5822 13.6354C59.1063 13.3924 59.562 13.0642 59.9493 12.651C60.3367 12.2378 60.6557 11.7396 60.9063 11.1562C61.157 10.5729 61.2709 9.96528 61.2481 9.33333C61.2481 8.67708 61.1342 8.06944 60.9063 7.51042C60.6785 6.95139 60.3709 6.46528 59.9835 6.05208C59.5962 5.63889 59.1291 5.29861 58.5822 5.03125C58.0353 4.76389 57.4657 4.64236 56.8733 4.66667ZM34.9989 4.66667C34.3837 4.66667 33.8141 4.78819 33.29 5.03125C32.7659 5.27431 32.3102 5.60243 31.9229 6.01562C31.5355 6.42882 31.2165 6.92708 30.9659 7.51042C30.7152 8.09375 30.6013 8.70139 30.6241 9.33333C30.6241 9.98958 30.738 10.5972 30.9659 11.1562C31.1937 11.7153 31.5013 12.2014 31.8887 12.6146C32.276 13.0278 32.7431 13.3681 33.29 13.6354C33.8369 13.9028 34.4065 14.0243 34.9989 14C35.6141 14 36.1838 13.8785 36.7079 13.6354C37.2319 13.3924 37.6876 13.0642 38.075 12.651C38.4624 12.2378 38.7814 11.7396 39.032 11.1562C39.2827 10.5729 39.3966 9.96528 39.3738 9.33333C39.3738 8.67708 39.2599 8.06944 39.032 7.51042C38.8042 6.95139 38.4965 6.46528 38.1092 6.05208C37.7218 5.63889 37.2547 5.29861 36.7079 5.03125C36.161 4.76389 35.5914 4.64236 34.9989 4.66667ZM17.4995 37.3333C18.7071 37.3333 19.835 37.0903 20.8832 36.6042C21.9313 36.1181 22.8655 35.4496 23.6858 34.599C24.5061 33.7483 25.1327 32.7639 25.5656 31.6458C25.9986 30.5278 26.2264 29.3125 26.2492 28C26.2492 26.7118 26.0213 25.5087 25.5656 24.3906C25.1099 23.2726 24.4833 22.276 23.6858 21.401C22.8883 20.526 21.9655 19.8576 20.9173 19.3958C19.8692 18.934 18.7299 18.691 17.4995 18.6667C16.2918 18.6667 15.1639 18.9097 14.1158 19.3958C13.0676 19.8819 12.1334 20.5503 11.3131 21.401C10.4928 22.2517 9.86624 23.2361 9.43331 24.3542C9.00038 25.4722 8.77252 26.6875 8.74973 28C8.74973 29.2882 8.97759 30.4913 9.43331 31.6094C9.88902 32.7274 10.5156 33.724 11.3131 34.599C12.1106 35.474 13.0335 36.1424 14.0816 36.6042C15.1297 37.066 16.269 37.309 17.4995 37.3333Z"
+      fill="#4ECB71"
+    />
+  </svg>
+);
+
+export const CohortIcon = () => (
+  <svg
+    width="70"
+    height="76"
+    viewBox="0 0 70 76"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 25H68.5V0H1V75H23.5V0"
+      stroke="#4ECB71"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M1 50H46V0"
+      stroke="#4ECB71"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

src/hooks/useDashboardData.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { getAlltraineeapplicants } from "../redux/actions/filterTraineeActions";
+import { getAllCohorts } from "../redux/actions/cohortActions";
+import { getAllCoordinators } from "../redux/actions/users";
+import { getAllPrograms } from "../redux/actions/programsActions";
+
+type PerformanceMetric = {
+  name: string;
+  performance: number;
+};
+
+export const useDashboardData = () => {
+  const [traineeCount, setTraineeCount] = useState(0);
+  const [cohortCount, setCohortCount] = useState(0);
+  const [coordinatorCount, setCoordinatorCount] = useState(0);
+  const [programCount, setProgramCount] = useState(0);
+  const [averagePerformance, setAveragePerformance] = useState(0);
+  const [performanceData, setPerformanceData] = useState<PerformanceMetric[]>(
+    []
+  );
+  const [currentDate, setCurrentDate] = useState<string>("");
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const trainees = await dispatch(getAlltraineeapplicants());
+        const cohorts = await dispatch(getAllCohorts());
+        const coordinators = await dispatch(getAllCoordinators());
+        const programs = await dispatch(getAllPrograms());
+        setTraineeCount(trainees);
+        setCohortCount(cohorts);
+        setCoordinatorCount(coordinators);
+        setProgramCount(programs);
+
+        const performanceMetric: PerformanceMetric[] = [
+          { name: "0", performance: trainees / coordinators },
+          { name: "1", performance: trainees / programs },
+          { name: "2", performance: cohorts / programs },
+          { name: "3", performance: programs / coordinators },
+          { name: "4", performance: trainees / cohorts },
+          { name: "5", performance: coordinators / cohorts },
+          { name: "6", performance: programs / trainees },
+          { name: "7", performance: coordinators / programs },
+          { name: "8", performance: programs / cohorts },
+          { name: "9 Sprint", performance: coordinators / trainees },
+        ];
+        setPerformanceData(performanceMetric);
+        const totalPerformance = performanceMetric.reduce(
+          (acc, curr) => acc + curr.performance,
+          0
+        );
+        setAveragePerformance(totalPerformance / performanceMetric.length);
+      } catch (error) {}
+    };
+    const formatDate = () => {
+      const date = new Date();
+      const options: Intl.DateTimeFormatOptions = {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      };
+      return date.toLocaleDateString(undefined, options);
+    };
+    setCurrentDate(formatDate());
+    fetchData();
+  }, [dispatch]);
+  return {
+    traineeCount,
+    cohortCount,
+    coordinatorCount,
+    programCount,
+    performanceData,
+    averagePerformance,
+    currentDate,
+  };
+};

src/index.css

@@ -11,7 +11,10 @@
   display: none !important;
 }
 body {
-  background: #f4f4f4;
+  background: #262E3D;
+}
+body.light-mode {
+  background: #ffffff;
 }
 
 /* Other existing CSS rules for input and label styles */