implement attendance

Author: “kebean”

package-lock.json

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  UserGroupIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+} from '@heroicons/react/solid';
+import { useTranslation } from 'react-i18next';
+
+interface AttendanceCardProps {
+  user: string;
+  active: number;
+  drop: number;
+  week: number;
+  phase: string;
+  attendanceChange: number;
+}
+
+function AttendanceCard({
+  user,
+  active,
+  drop,
+  week,
+  phase,
+  attendanceChange,
+}: AttendanceCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-full p-4 md:w-[600px] bg-white shadow-lg rounded-lg flex flex-col md:flex-row items-start md:items-center justify-between">
+      <div className="flex items-center mb-4 md:mb-0">
+        <h2 className="text-2xl font-lexend">{user}</h2>
+      </div>
+      <div className="flex items-center text-gray-500">
+        <UserGroupIcon className="w-5 h-5 text-green-600" />
+        <p className="ml-2">
+          {t('Active')}: {active}
+        </p>
+        <p className="ml-2">|</p>
+        <p className="ml-2 text-red-500">
+          {t('Drop')}: {drop}
+        </p>
+      </div>
+      <div>
+        <p>
+          {t('Week')} {week} {t('in')} {phase}
+        </p>
+      </div>
+      <div className="flex items-center">
+        {attendanceChange >= 0 ? (
+          <ArrowUpIcon className="w-5 h-5 text-green-500" />
+        ) : (
+          <ArrowDownIcon className="w-5 h-5 text-red-500" />
+        )}
+        <p
+          className={`ml-2 ${
+            attendanceChange >= 0 ? 'text-green-700' : 'text-red-500'
+          }`}
+        >
+          {attendanceChange}%
+        </p>
+      </div>
+    </div>
+  );
+}
+
+
+export default AttendanceCard;

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/Sidebar.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 attendanceData={[]} />} />
             <Route path="/attendance-details" element={<AttendanceDetails />} />
             <Route path="/teams" element={<AdminTeams />} />
             <Route path="/cohorts" element={<AdminCohorts />} />

src/containers/DashRoutes.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
-import CheckRole from '../utils/CheckRoles';
+import AttendanceCard from '../components/AttendanceCard'
 
-const TraineeAttendanceTracker = React.lazy(
-  () => import('../pages/TraineeAttendance'),
-);
-const TraineeAttendance = React.lazy(
-  () => import('../components/TraineeAttendance'),
-);
+interface AttendanceCardProps {
+  user: string;
+  active: number;
+  drop: number;
+  week: number;
+  phase: string;
+  attendanceChange: number;
+}
 
-function Attendance() {
+function AttendancePage({ attendanceData }: { attendanceData: AttendanceCardProps[] }) {
   return (
-    <>
-      <CheckRole roles={['coordinator']}>
-        <TraineeAttendanceTracker />
-      </CheckRole>
-      <CheckRole roles={['trainee']}>
-        <TraineeAttendance />
-      </CheckRole>
-    </>
+    <div className="min-h-screen bg-gray-50 p-4 md:p-10">
+      <h1 className="text-3xl font-lexend mb-6">Attendance</h1>
+      <div className="grid gap-6">
+        {attendanceData.map((data) => (
+          <AttendanceCard key={data.user} {...data} />
+        ))}
+      </div>
+    </div>
   );
 }
 
-export default Attendance;
+
+export default AttendancePage;