Attendance Page

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
-    "chart.js": "^4.4.7",
+    "chart.js": "^4.4.9",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
     "glob": "^10.4.5",
@@ -20,8 +20,9 @@
     "lucide-react": "^0.457.0",
     "next": "^15.0.3",
     "react": "^18.3.1",
-    "react-chartjs-2": "^5.2.0",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
+    "react-dropdown": "^1.11.0",
     "react-github-calendar": "^4.5.2",
     "react-hot-toast": "^2.5.2",
     "rimraf": "^5.0.10",
@@ -35,6 +36,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.19.0",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.17.0",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-next": "^0.0.0",
@@ -50,5 +52,10 @@
       "@typescript-eslint/no-unused-vars": "off",
       "@typescript-eslint/no-explicit-any": "off"
     }
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

src/app/dashboard/attendance.tsx

@@ -1,83 +1,169 @@
 "use client";
-import React, { useEffect, useState } from "react";
-
-import { AttendanceDetails } from "@/types/types";
+import React, { use, useEffect, useState } from "react";
+import { Chart, ArcElement } from "chart.js";
+Chart.register(ArcElement);
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale,
+  RadialLinearScale,
+} from "chart.js";
+import { Bar, Doughnut } from "react-chartjs-2";
+
+ChartJS.register(
+  RadialLinearScale,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  TimeScale,
+  Title,
+  Tooltip,
+  Legend
+);
+
+import { AttendanceDetails, updatedAttendanceDetails } from "@/types/types";
 import { AttendanceDetailRow } from "@/components/attendance-track/AttendanceDetails";
 import { AttendanceService } from "@/services/attendance-service"; // Ensure the service is imported
+import Calendar from "@/components/Calendar";
 
 export const AttendancePage: React.FC = () => {
   // State for attendance data
-  const [attendanceData, setAttendanceData] = useState<AttendanceDetails[]>([]);
+  const [attendanceData, setAttendanceData] = useState<
+    updatedAttendanceDetails[]
+  >([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState(new Date());
 
-  const attendanceListTitle = [
-    "Name",
-    "Year",
-    "Date",
-    "In Time",
-    "Out Time",
-
-  ];
+  const attendanceListTitle = ["Name", "Year", "In Time", "Out Time"];
   // const absentListTitle = [
   //   "Name",
   //   "Year",
   // ];
 
-
   useEffect(() => {
     const fetchAttendanceData = async () => {
       try {
-        // Get today's date in IST
-        const today = new Date().toLocaleDateString('en-GB', {
-          timeZone: 'Asia/Kolkata',
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit'
-        });
-
-        // Format it as 'YYYY-MM-DD'
-        const [day, month, year] = today.split('/');
-        const date = `${year}-${month}-${day}`; // 'YYYY-MM-DD' format
-
-        const data = await AttendanceService.getAttendanceDetails(date);
+        const data = await AttendanceService.getAttendanceDetails(
+          selectedDate.toISOString().split("T")[0]
+        );
         setAttendanceData(data);
         setLoading(false);
+        console.log(data);
       } catch (err) {
-        setError('Failed to fetch attendance data' + err);
+        setError("Failed to fetch attendance data " + err);
         setLoading(false);
       }
     };
-
     fetchAttendanceData();
-  }, []);
+  }, [selectedDate]);
 
+  useEffect(() => {}, [selectedDate]);
 
-  const presentMembers = attendanceData.filter(member => member.isPresent);
-  const absentMembers = attendanceData.filter(member => !member.isPresent);
+  const handleDateClick = (date: Date) => {
+    setSelectedDate(date);
+  };
+
+  const presentMembers = attendanceData.filter((member) => member.isPresent);
+  const absentMembers = attendanceData.filter((member) => !member.isPresent);
+  const lateMembers = attendanceData.filter(
+    (member) => member.isPresent && member.timeIn > "17:30:00"
+  ); // Assuming 10:00 AM is the cutoff for being late
   const filteredData = [...presentMembers, ...absentMembers];
+  const onTimeMembers = attendanceData.filter(
+    (member) => member.isPresent && member.timeIn === "17:30:00"
+  );
+  const EarlyMembers = attendanceData.filter(
+    (member) => member.isPresent && member.timeIn < "17:30:00"
+  );
 
   return (
-    <div className="flex h-screen flex-row  w-full flex-shrink-0 ">
-
+    <div className="flex overflow-scroll h-screen flex-row  w-full flex-shrink-0 ">
       <div className="flex flex-col w-full max-h-fit p-5  ">
-        <div className="flex flex-[1] w-full max-h-10">
+        <div className=" mx-2 max-h-30 pb-10 ">
           {/* Additional content can go here */}
+          <Calendar onDateClick={handleDateClick} />
         </div>
         <div className="flex flex-col min-h-full lg:flex-row w-full">
-          <AttendanceDetailRow complete={true} titles={attendanceListTitle} loading={loading} attendanceData={filteredData} error={error} />
-
-          {/* Flex container for the boxes */}
-          <div className="flex flex-col lg:flex-col gap-4 lg:w-2/5 lg:h-full w-full lg:ml-5 lg:mt-0 mt-5 md:w-full md:h-56 ">
-            <div className="flex flex-col bg-panelButtonColor rounded-md p-4 h-full">
+          <AttendanceDetailRow
+            complete={true}
+            titles={attendanceListTitle}
+            loading={loading}
+            attendanceData={filteredData}
+            error={error}
+          />
+
+          {/* Flex container for the two boxes */}
+          <div className="flex flex-col lg:flex-col gap-4 lg:w-2/3 lg:h-full w-full lg:ml-5 lg:mt-0 mt-5 md:w-full md:h-56 ">
+            <div className="flex flex-col bg-panelButtonColor rounded-md p-8 items-center justify-center h-[400px] w-full">
               {/*TODO: need to implement absentee list.*/}
+              <Doughnut
+                data={{
+                  labels: ["Present", "Absent", "Late"],
+                  datasets: [
+                    {
+                      label: "Attendance Summary",
+                      data: [
+                        presentMembers.length,
+                        absentMembers.length,
+                        lateMembers.length,
+                      ],
+                      backgroundColor: [
+                        "rgba(255, 205, 86, 0.2)",
+                        "rgba(255, 99, 132, 0.2)",
+                        "rgba(255, 159, 64, 0.2)",
+                      ],
+                      borderColor: [
+                        "rgb(255, 205, 86)",
+                        "rgb(255, 99, 132)",
+                        "rgb(255, 159, 64)",
+                      ],
+                      hoverOffset: 4,
+                    },
+                  ],
+                }}
+              ></Doughnut>
             </div>
-            <div className="flex flex-col bg-panelButtonColor rounded-md p-4 h-full">
+            <div className="flex flex-col bg-panelButtonColor items-center justify-center pb-10 rounded-md h-full w-full">
               {/*need to implement some sorta graph*/}
+              <Bar
+                className=" h-full w-full p-5"
+                data={{
+                  labels: ["Present", "Absent", "Late"],
+                  datasets: [
+                    {
+                      label: "Attendance Statistics",
+                      data: [
+                        presentMembers.length,
+                        absentMembers.length,
+                        lateMembers.length,
+                      ],
+                      backgroundColor: [
+                        "rgba(255, 205, 86, 0.2)",
+                        "rgba(255, 99, 132, 0.2)",
+                        "rgba(255, 159, 64, 0.2)",
+                      ],
+                      borderColor: [
+                        "rgb(255, 205, 86)",
+                        "rgb(255, 99, 132)",
+                        "rgb(255, 159, 64)",
+                      ],
+                      borderWidth: 1,
+                      borderRadius: 5,
+                    },
+                  ],
+                }}
+              ></Bar>
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );