#394 implement attendance feature

index.html

@@ -40,6 +40,9 @@
       href="https://fonts.googleapis.com/css2?family=Inria+Serif:ital@1&family=Lexend+Deca:wght@600&family=Open+Sans:wght@300;400;600;700;800&display=swap"
       rel="stylesheet"
     /> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <link
       href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"

package.json

@@ -115,7 +115,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@apollo/client": "^3.8.7",
+    "@apollo/client": "^3.11.8",
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@heroicons/react": "^1.0.6",

src/Mutations/Attendance.tsx

@@ -1,22 +1,42 @@
-import { gql } from '@apollo/client';
+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 {
+        id
+        name
+      }
+      teams {
+        team {
+          id
+          name
+        }
+        trainees {
+          trainee {
+            id
+            email
+            profile {
+              id
+              name
+            }
+          }
+          status {
+            day
+            date
+            score
+          }
         }
       }
-      week
     }
   }
 `;
-
 export const GET_ATTENDANCE_BY_ID = gql`
   query GetAttendance($id: ID!) {
     getTraineeAttendanceByID(id: $id) {
@@ -33,7 +53,6 @@ export const GET_ATTENDANCE_BY_ID = gql`
     }
   }
 `;
-
 export const GET_WEEKLY_ATTENDANCE = gql`
   query GetTraineeAttendanceByID($traineeEmail: String!) {
     getTraineeAttendanceByID(traineeEmail: $traineeEmail) {
@@ -46,27 +65,126 @@ export const GET_WEEKLY_ATTENDANCE = gql`
   }
 `;
 
-export const UPDATE_ATTENDANCE = gql`
+export const RECORD_ATTENDANCE = gql`
   mutation RecordAttendance(
-    $week: String!
-    $days: String!
+    $week: Int!
+    $team: String!
+    $date: String!
     $trainees: [TraineeInput!]!
-    $recordAttendanceOrgToken2: String!
+    $orgToken: String!
   ) {
     recordAttendance(
       week: $week
-      days: $days
+      team: $team
+      date: $date
       trainees: $trainees
-      orgToken: $recordAttendanceOrgToken2
+      orgToken: $orgToken
     ) {
-      id
-      week
+      team {
+        id
+        name
+        cohort {
+          name
+        }
+      }
       trainees {
-        traineeId
-        traineeEmail
+        trainee {
+          profile {
+            name
+          }
+        }
         status {
-          days
-          value
+          day
+          date
+          score
+        }
+      }
+    }
+  }
+`;
+
+export const UPDATE_ATTENDANCE = gql`
+  mutation UpdateAttendance(
+    $week: Int!
+    $team: String!
+    $phase: String!
+    $trainees: [TraineeInput!]!
+    $orgToken: String!
+  ) {
+    updateAttendance(
+      week: $week
+      team: $team
+      phase: $phase
+      trainees: $trainees
+      orgToken: $orgToken
+    ) {
+      id
+      week
+      phase {
+        id
+        name
+      }
+      cohort {
+        id
+        name
+      }
+      teams {
+        team {
+          id
+          name
+        }
+        trainees {
+          trainee {
+            id
+            email
+            profile {
+              id
+              name
+            }
+          }
+          status {
+            day
+            date
+            score
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const DELETE_ATTENDANCE = gql`
+  mutation DeleteAttendance($week: String!, $team: String!, $day: String!) {
+    deleteAttendance(week: $week, team: $team, day: $day) {
+      id
+      week
+      phase {
+        id
+        name
+      }
+      cohort {
+        id
+        name
+      }
+      teams {
+        team {
+          id
+          name
+        }
+        trainees {
+          trainee {
+            id
+            email
+            profile {
+              id
+              name
+            }
+          }
+          status {
+            day
+            date
+            score
+          }
         }
       }
     }

src/Mutations/manageStudentMutations.tsx

@@ -58,6 +58,7 @@ export const GET_TRAINEES_QUERY = gql`
       }
       team {
         name
+        id
         cohort {
           id
           startDate
@@ -373,6 +374,12 @@ 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
+      status {
+        date
+        reason
+        status
+      }
       profile {
         firstName
         lastName

src/Mutations/teamMutation.tsx

@@ -10,6 +10,25 @@ 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
+        phase {
+          id
+          name
+        }
+        coordinator {
+          id
+        }
+      }
+    }
+  }
+`;
+
 export const ADD_TEAMS = gql`
   mutation Mutation(
     $name: String!

src/components/AttendanceSymbols.tsx

@@ -0,0 +1,40 @@
+import React, { ReactElement } from 'react';
+import { BsCheckLg } from 'react-icons/bs';
+import { FaXmark } from 'react-icons/fa6';
+import { FaCheck } from 'react-icons/fa';
+import tilde from '../assets/tilde.svg';
+
+interface Props {
+  status: number | string;
+}
+
+interface Property {
+  color: string;
+  icon: ReactElement;
+}
+function AttendanceSymbols({ status }: Props) {
+  const score = String(status);
+  const property: Property = {
+    color: 'bg-[#0E8E0B]',
+    // icon: <i className="fa-solid fa-check font-semibold" />,
+    icon: <FaCheck className="text-[.8rem]" />,
+  };
+
+  if (score === '1') {
+    property.color = 'bg-[#FE8903]';
+    property.icon = <img src={tilde} alt="" />;
+  }
+  if (score === '0') {
+    property.color = 'bg-[#C30909]';
+    property.icon = <FaXmark className="text-base" />;
+  }
+  return (
+    <div
+      className={`${property.color} flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white`}
+    >
+      {property.icon}
+    </div>
+  );
+}
+
+export default AttendanceSymbols;

src/components/CoordinatorCard.tsx

@@ -26,8 +26,11 @@ export const GET_TEAMS_CARDS = gql`
         professional_Skills
       }
       members {
+        id
         profile {
           name
+          lastName
+          firstName
         }
       }
       active
@@ -167,7 +170,7 @@ function ManagerCard() {
     <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 className="spinner" data-testid="spinner" />
         </div>
       ) : (
         <div className="pl-10 flex">