implement attendance

Author: “kebean”

package-lock.json

@@ -0,0 +1,86 @@
+import React from "react";
+
+interface ModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+const ModalAttendance: React.FC<ModalProps> = ({ isVisible, onClose }) => {
+  const dummyTrainees = [
+    { name: "Ngoma Chris", attendance: 1 },
+    { name: "Ngoma Chris", attendance: 0 },
+    { name: "Ngoma Chris", attendance: 2 },
+  ];
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50">
+      <div className="bg-gray-800 text-white rounded-lg w-96 p-6 shadow-lg">
+        <h2 className="text-xl font-bold text-center text-purple-400 mb-4">
+          Take Attendance
+        </h2>
+        <div className="text-center">
+          <h3 className="font-semibold text-lg">Week 4</h3>
+          <p className="text-sm">Monday, 27th November 2023</p>
+        </div>
+
+        {/* Trainees List */}
+        <div className="mt-4 grid grid-cols-2 gap-2">
+          {dummyTrainees.map((trainee, index) => (
+            <div
+              key={index}
+              className="flex justify-between items-center bg-gray-700 rounded-lg p-2"
+            >
+              <span>{trainee.name}</span>
+              <div className="flex items-center space-x-2">
+                <span>[{trainee.attendance}]</span>
+                <button className="text-red-500">❌</button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Trainee Search Input */}
+        <div className="mt-4">
+          <label htmlFor="trainee" className="block text-sm font-medium">
+            Trainee Name
+          </label>
+          <div className="flex mt-1">
+            <input
+              id="trainee"
+              type="text"
+              className="bg-gray-700 text-white w-full py-2 px-3 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+              placeholder="Ngoma Chris"
+            />
+            <button className="ml-2 bg-purple-500 text-white px-4 py-2 rounded-md hover:bg-purple-600">
+              Search
+            </button>
+          </div>
+        </div>
+
+        {/* Attendance Status Icons */}
+        <div className="mt-4 flex items-center justify-center space-x-4">
+          <button className="text-green-500">✔️</button>
+          <button className="text-yellow-500">~</button>
+          <button className="text-red-500">❌</button>
+        </div>
+
+        {/* Buttons */}
+        <div className="mt-6 flex justify-between">
+          <button
+            onClick={onClose}
+            className="bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-600"
+          >
+            Cancel
+          </button>
+          <button className="bg-purple-500 text-white py-2 px-4 rounded-md hover:bg-purple-600">
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalAttendance;

src/components/AttendanceCard.tsx

@@ -81,6 +81,11 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
               <UserGroupIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
+          <CheckRole roles={['admin', 'coordinator']}>
+            <SideNavLink onClick={toggle} to="/Attendance" name="Attendance">
+              <UserGroupIcon className="w-5" />
+            </SideNavLink>
+          </CheckRole>
           {/* INVITATION */}
           <CheckRole roles={['admin', 'coordinator']}>
             <SideNavLink onClick={toggle} to="/invitation" name="Invitation">

src/components/ModalAttendance.tsx

@@ -126,7 +126,7 @@ function DashRoutes() {
             <Route path="/settings" element={<Settings />} />
             <Route path="/performance" element={<TraineePerfomance />} />
             {/* <Route path="/attendance" element={<TraineeAttendance />} /> */}
-            <Route path="/attendance" element={<Attendance />} />
+            <Route path="/attendance" element={<Attendance/>} />
             <Route path="/attendance-details" element={<AttendanceDetails />} />
             <Route path="/teams" element={<AdminTeams />} />
             <Route path="/cohorts" element={<AdminCohorts />} />

src/components/Sidebar.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import CheckRole from '../utils/CheckRoles';
-
-const TraineeAttendanceTracker = React.lazy(
-  () => import('../pages/TraineeAttendance'),
-);
-const TraineeAttendance = React.lazy(
-  () => import('../components/TraineeAttendance'),
-);
-
-function Attendance() {
-  return (
-    <>
-      <CheckRole roles={['coordinator']}>
-        <TraineeAttendanceTracker />
-      </CheckRole>
-      <CheckRole roles={['trainee']}>
-        <TraineeAttendance />
-      </CheckRole>
-    </>
-  );
-}
-
-export default Attendance;