implement attendance

Author: “kebean”

package-lock.json

@@ -74,6 +74,7 @@
     "istanbul": "^0.4.5",
     "jsonwebtoken": "^9.0.1",
     "jwt-decode": "^3.1.2",
+    "lucide-react": "^0.445.0",
     "moment": "^2.29.4",
     "pnpm": "^8.6.11",
     "react-apexcharts": "^1.4.1",

package.json

@@ -1,22 +1,39 @@
 import { gql } from '@apollo/client';
 
-export const GET_ATTENDANCE = gql`
-  query ExampleQuery {
-    getTraineeAttendance {
+export const GET_TEAM_ATTENDANCE = gql`
+  query GetTeamAttendance($team: String!, $orgToken: String) {
+    getTeamAttendance(team: $team, orgToken: $orgToken) {
       id
-      trainees {
-        traineeId
-        traineeEmail
-        status {
-          days
-          value
+      week
+      phase {
+        _id
+        name
+      }
+      cohort {
+        name
+      }
+      teams {
+        team {
+          id
+          name
+        }
+        trainees {
+          trainee {
+            id
+            email
+            profile {
+              name
+            }
+          }
+          status {
+            day
+            score
+          }
         }
       }
-      week
     }
   }
 `;
-
 export const GET_ATTENDANCE_BY_ID = gql`
   query GetAttendance($id: ID!) {
     getTraineeAttendanceByID(id: $id) {
@@ -33,7 +50,6 @@ export const GET_ATTENDANCE_BY_ID = gql`
     }
   }
 `;
-
 export const GET_WEEKLY_ATTENDANCE = gql`
   query GetTraineeAttendanceByID($traineeEmail: String!) {
     getTraineeAttendanceByID(traineeEmail: $traineeEmail) {
@@ -46,6 +62,41 @@ export const GET_WEEKLY_ATTENDANCE = gql`
   }
 `;
 
+export const RECORD_ATTENDANCE = gql`
+  mutation RecordAttendance(
+    $week: Int!
+    $team: String!
+    $trainees: [TraineeInput!]!
+    $orgToken: String!
+  ) {
+    recordAttendance(
+      week: $week
+      team: $team
+      trainees: $trainees
+      orgToken: $orgToken
+    ) {
+      team {
+        id
+        name
+        cohort {
+          name
+        }
+      }
+      trainees {
+        trainee {
+          profile {
+            name
+          }
+        }
+        status {
+          day
+          score
+        }
+      }
+    }
+  }
+`;
+
 export const UPDATE_ATTENDANCE = gql`
   mutation RecordAttendance(
     $week: String!

src/Mutations/Attendance.tsx

@@ -58,6 +58,7 @@ export const GET_TRAINEES_QUERY = gql`
       }
       team {
         name
+        id
         cohort {
           id
           startDate
@@ -369,6 +370,7 @@ export const ADD_MEMBER_TO_TEAM = gql`
 export const GET_TEAM_TRAINEE_QUERY = gql`
   query GetTeamTrainees($orgToken: String, $team: String) {
     getTeamTrainees(orgToken: $orgToken, team: $team) {
+      id
       profile {
         firstName
         lastName

src/Mutations/manageStudentMutations.tsx

@@ -10,6 +10,21 @@ export const GET_TEAMS = gql`
 `;
 export default GET_TEAMS;
 
+export const GET_ALL_TEAMS = gql`
+  query Query($orgToken: String) {
+    getAllTeams(orgToken: $orgToken) {
+      id
+      name
+      cohort {
+        name
+        coordinator {
+          id
+        }
+      }
+    }
+  }
+`;
+
 export const ADD_TEAMS = gql`
   mutation Mutation(
     $name: String!

src/Mutations/teamMutation.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+type AttendanceCardProps = {
+  name: string;
+  email: string;
+  score: 'present' | 'late' | 'absent';
+};
+
+const scoreColors = {
+  present: 'text-green-500',
+  late: 'text-yellow-500',
+  absent: 'text-red-500',
+};
+
+const scoreIcons = {
+  present: '✅',
+  late: '⚠️',
+  absent: '❌',
+};
+
+function AttendanceCard({ name, email, score }: AttendanceCardProps) {
+  return (
+    <tr className="bg-white dark:bg-gray-800">
+      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
+        {name}
+      </td>
+      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
+        {email}
+      </td>
+      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+        <span className={scoreColors[score]}>{scoreIcons[score]}</span>
+      </td>
+    </tr>
+  );
+}
+
+export default AttendanceCard;

src/components/AttendanceCard.tsx

@@ -26,8 +26,11 @@ export const GET_TEAMS_CARDS = gql`
         professional_Skills
       }
       members {
+        id
         profile {
           name
+          lastName
+          firstName
         }
       }
       active
@@ -164,23 +167,21 @@ function ManagerCard() {
       });
 
   return (
-    <div
-    className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto "
-  >
-    {loading ? (
-      <div className="flex items-center justify-center w-full h-full">
-            <div className="spinner" />
-      </div>
-    ) : (
-      <div className="pl-10 flex">
-         {teamData &&
+    <div className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto ">
+      {loading ? (
+        <div className="flex items-center justify-center w-full h-full">
+          <div className="spinner" />
+        </div>
+      ) : (
+        <div className="pl-10 flex">
+          {teamData &&
             teamData.map((teamProps: any, index: number) => (
-              <Link key={index} to={`/team/${(teamProps.teamname)}`}>
+              <Link key={index} to={`/team/${teamProps.teamname}`}>
                 <Card {...teamProps} />
               </Link>
             ))}
-      </div>
-    )}
+        </div>
+      )}
     </div>
   );
 }