implement attendance

Author: “kebean”

package-lock.json

@@ -0,0 +1,66 @@
+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;
+}
+
+const AttendanceCard: React.FC<AttendanceCardProps> = ({
+  user,
+  active,
+  drop,
+  week,
+  phase,
+  attendanceChange,
+}) => {
+  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

@@ -0,0 +1,28 @@
+import React from 'react';
+import AttendanceCard from '../components/AttendanceCard'
+
+interface AttendanceCardProps {
+  user: string;
+  active: number;
+  drop: number;
+  week: number;
+  phase: string;
+  attendanceChange: number;
+}
+
+export const AttendancePage: React.FC<{
+  attendanceData: AttendanceCardProps[];
+}> = ({ attendanceData }) => {
+  return (
+    <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 AttendancePage;