Merge pull request #6 from Aar-if/report

Issue #PS-1389 feat: UI for displaying center wise attendance report as per Figma within a Block with API integration

src/components/AttendanceComparison.tsx

@@ -21,20 +21,46 @@ import {
 import { useTranslation } from 'next-i18next';
 import useStore from '../store/store';
 import { useTheme } from '@mui/material/styles';
+import {
+ attendanceInPercentageStatusList,
+ attendanceStatusList,
+ overallAttendanceInPercentageStatusList,
+} from '@/services/AttendanceService';
+import { cohortPrivileges } from '@/utils/app.constant';
 
 const AttendanceComparison: React.FC = () => {
  const { t } = useTranslation();
  const [centerType, setCenterType] = useState('Regular');
  const store = useStore();
  const theme = useTheme<any>();
-
+ const scope = cohortPrivileges?.STUDENT;
+
  const handleCenterTypeChange = (
  event: React.ChangeEvent<HTMLInputElement>
  ) => {
  setCenterType(event.target.value);
  };
 
- const data = store?.pairs?.filter((pair: { cohortType: string }) => pair?.cohortType === centerType)
+ useEffect(() => {
+ const data = store?.cohorts?.map((pair: { cohortId: any }) => pair?.cohortId);
+ const fetchData = async () => {
+ data.map((pair: { cohortId: any }) => pair.cohortId);
+ const promises = data.map((cohortId: any) =>
+ overallAttendanceInPercentageStatusList({
+ limit: 0,
+ page: 0,
+ filters: { contextId: cohortId, scope },
+ facets: ['contextId'],
+ })
+ );
+ const results = await Promise.all(promises);
+ console.log(results);
+ };
+ fetchData();
+ }, []);
+
+ const data = store?.cohorts
+ ?.filter((pair: { cohortType: string }) => pair?.cohortType === centerType)
  .map((pair: { name: any }) => ({
  name: pair.name,
  Attendance: Math.floor(Math.random() * 100),
@@ -101,7 +127,12 @@ const AttendanceComparison: React.FC = () => {
  <YAxis type="category" dataKey="name" />
  <Tooltip formatter={(value: number) => `${value}`} />
  <Legend />
- <Bar dataKey="Attendance" fill={theme.palette.primary.main} barSize={35} radius={2}>
+ <Bar
+ dataKey="Attendance"
+ fill={theme.palette.primary.main}
+ barSize={35}
+ radius={2}
+ >
  <LabelList dataKey="Attendance" content={renderCustomLabel} />
  </Bar>
  </BarChart>

src/components/CohortSelectionSection.tsx

@@ -19,7 +19,6 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import useStore from '@/store/store';
 
-
 interface CohortSelectionSectionProps {
  classId: string;
  setClassId: React.Dispatch<React.SetStateAction<string>>;
@@ -52,11 +51,11 @@ interface ChildData {
  childData: ChildData[];
 }
 interface NameTypePair {
+ cohortId: string;
  name: string;
  cohortType: string;
 }
 
-
 const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  classId,
  setClassId,
@@ -81,7 +80,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  const theme = useTheme<any>();
  const pathname = usePathname(); // Get the current pathname
  const { t } = useTranslation();
- const setPairs = useStore((state) => state.setPairs);
+ const setCohorts = useStore((state) => state.setCohorts);
 
  useEffect(() => {
  if (typeof window !== 'undefined' && window.localStorage) {
@@ -107,15 +106,23 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  });
  console.log('Response:', response);
  if (response && response?.length > 0) {
-
- const extractNamesAndCohortTypes = (data: ChildData[]): NameTypePair[] => {
+ const extractNamesAndCohortTypes = (
+ data: ChildData[]
+ ): NameTypePair[] => {
  let nameTypePairs: NameTypePair[] = [];
- 
+
  const recursiveExtract = (items: ChildData[]) => {
- items.forEach(item => {
- const cohortType = item?.customField?.find(field => field.label === "Type of Cohort")?.value || "Unknown";
- if (item && item?.name) {
- nameTypePairs.push({ name: item?.name, cohortType });
+ items.forEach((item) => {
+ const cohortType =
+ item?.customField?.find(
+ (field) => field.label === 'Type of Cohort'
+ )?.value || 'Unknown';
+ if (item?.cohortId && item && item?.name) {
+ nameTypePairs.push({
+ cohortId: item?.cohortId,
+ name: item?.name,
+ cohortType,
+ });
  }
  if (item?.childData && item?.childData?.length > 0) {
  recursiveExtract(item?.childData);
@@ -125,23 +132,21 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  recursiveExtract(data);
  return nameTypePairs;
  };
- 
+
  if (response && response?.length > 0) {
  const nameTypePairs = extractNamesAndCohortTypes(response);
- setPairs(nameTypePairs); 
- console.log("HELLO", nameTypePairs);
+ setCohorts(nameTypePairs);
  }
  }
  if (response && response.length > 0) {
  if (response[0].type === cohortHierarchy.COHORT) {
-
  const filteredData = response
  ?.map((item: any) => ({
  cohortId: item?.cohortId,
  parentId: item?.parentId,
  name: item?.cohortName || item?.name,
  }))
- ?.filter(Boolean); 
+ ?.filter(Boolean);
  setCohortsData(filteredData);
  if (filteredData.length > 0) {
  if (typeof window !== 'undefined' && window.localStorage) {

src/services/AttendanceService.ts

@@ -7,6 +7,7 @@ import {
  LearnerAttendanceProps,
  MarkAttendanceParams,
  allCenterAttendancePercentParam,
+ OverallAttendancePercentageProps,
 } from '../utils/Interfaces';
 
 export const bulkAttendance = async ({
@@ -89,6 +90,20 @@ export const attendanceInPercentageStatusList = async ({
  });
 };
 
+export const overallAttendanceInPercentageStatusList = async ({
+ limit,
+ page,
+ filters: { contextId, scope },
+ facets,
+}: OverallAttendancePercentageProps): Promise<any> => {
+ return postAttendanceList({
+ limit,
+ page,
+ filters: { contextId, scope },
+ facets,
+ });
+};
+
 export const getLearnerAttendanceStatus = async ({
  limit,
  page,

src/store/store.js

@@ -6,10 +6,10 @@ const useStore = create(
  (set) => ({
  value: '',
  role: '',
- pairs: [],
+ cohorts: [],
  setValue: (newValue) => set((state) => ({ value: newValue })),
  setUserRole: (newRole) => set((state) => ({ userRole: newRole })),
- setPairs: (newPairs) => set(() => ({ pairs: newPairs })),
+ setCohorts: (newCohorts) => set(() => ({ cohorts: newCohorts })),
  }),
  {
  name: 'teacherApp',

src/utils/Interfaces.ts

@@ -159,6 +159,18 @@ export interface AttendancePercentageProps {
  facets: Array<string>;
 }
 
+
+export interface OverallAttendancePercentageProps {
+ limit: number;
+ page: number;
+ filters: {
+ contextId: string;
+ scope: string;
+ };
+ facets: Array<string>;
+}
+
+
 export interface LearnerAttendanceProps {
  limit: number;
  page: number;

src/utils/app.constant.ts

@@ -32,3 +32,8 @@ export enum sessionModeConstant {
  ONLINE = 'online',
  OFFLINE = 'offline',
 }
+
+export enum cohortPrivileges {
+ STUDENT = 'student',
+
+}