Add chart.js and react-chartjs-2 for displaying absence information

client/package.json

@@ -13,9 +13,11 @@
     "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.2",
+    "chart.js": "^4.4.1",
     "dotenv": "^16.3.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.2",
     "react-router-dom": "^6.21.0",

client/src/components/stats-page/AbsenceInfo.jsx

@@ -0,0 +1,44 @@
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export default function AbsenceInfo() {
+  const data = {
+    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+    datasets: [
+      {
+        label: "تغير نسبة الغياب",
+        data: [90, 89, 88, 87, 100, 85, 84, 60, 82, 81, 66, 70, 77, 40],
+        borderColor: "rgb(75, 192, 192)",
+        fill: false,
+        cubicInterpolationMode: "monotone",
+        tension: 0.4,
+      },
+    ],
+  };
+
+  return (
+    <div className="absence-info">
+      <h4>الغياب</h4>
+      <Line data={data} />
+    </div>
+  );
+}

client/src/components/stats-page/StatsPage.jsx

@@ -1,12 +1,14 @@
 import PageTitle from "../common/PageTitle";
 import InfoSectionMoneyPage from "../moneypage/InfoSectionMoneyPage";
 import GroupInfo from "./GroupInfo";
+import AbsenceInfo from "./AbsenceInfo";
 import "./StatsPage.scss";
 
 export default function StatsPage() {
   return (
     <div className="stats-page container">
       <PageTitle title="الاحصائيات" />
+      <AbsenceInfo />
       <InfoSectionMoneyPage />
       <GroupInfo />
     </div>