diff --git a/.eslintrc.json b/.eslintrc.json
index 97885eab..c7d4a5aa 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -19,6 +19,6 @@
       }
     ],
     "prefer-const": "error",
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "off"
   }
 }
diff --git a/README.md b/README.md
index 21761778..7aae359a 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ Shiksha is a next-generation scalable open-source learning solution for teachers
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## new changes
+
 ### Prerequisites
 
   <table>
diff --git a/app.config.ts b/app.config.ts
index 922fc96c..966a9e65 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -49,4 +49,4 @@ export const fullWidthPages = [
   '/500',
   '/offline',
   '/unauthorized',
-];
\ No newline at end of file
+];
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 3abe29f4..79c92d2e 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -201,7 +201,7 @@
     "MY_PROFILE": "My Profile",
     "VIEW_MORE": "View More",
     "VIEW_LESS": "View Less",
-    "DATA_RANAGE": "Data Range",
+    "DATA_RANGE": "Data Range",
     "LEARNER_DETAILS": "Learner Details",
     "VIEW_DAY_WISE": "View Day-Wise",
     "SUBMITTED_ON": "Submitted On",
@@ -266,8 +266,8 @@
     "STEP_2": "Use the calendar to view day-wise attendance of learners",
     "STEP_3": "Check daily attendance percentage for each Center",
     "STEP_4": "Mark each day’s attendance of learners",
-    "STEP_5": "Check Center attendance over the last 7 days",
-    "STEP_6": "View learners with low attendance in the past 7 days",
+    "STEP_5": "Check Center attendance over the last {{numberOfDays}} days",
+    "STEP_6": "View learners with low attendance in the past {{numberOfDays}} days",
     "PREVIOUS": "Previous",
     "NEXT": "Next",
     "SKIP": "Skip",
@@ -428,5 +428,10 @@
     "MIN_LENGTH_CHARACTERS_ERROR": "Minimum {{minLength}} characters required",
     "MAX_LENGTH_CHARACTERS_ERROR": "Maximum {{maxLength}} characters allowed",
     "NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED": "Numbers and special characters are not allowed"
+  },
+  "COURSE_PLANNER": {
+    "COURSE_PLANNER": "Course Plan",
+    "FOUNDATION_COURSE": "Foundation Course",
+    "MAIN_COURSE": "Main Course"
   }
 }
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index ba4b171c..9f0bbfd1 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -178,7 +178,7 @@
     "MY_PROFILE": "मेरी प्रोफ़ाइल",
     "VIEW_MORE": "अधिक देखें",
     "VIEW_LESS": "कम देखें",
-    "DATA_RANAGE": "डेटा रेंज़",
+    "DATA_RANGE": "डेटा रेंज़",
     "LEARNER_DETAILS": "विद्यार्थी विवरण",
     "VIEW_DAY_WISE": "दिन-वार देखें",
     "SUBMITTED_ON": "प्रस्तुत किया गया",
@@ -243,8 +243,8 @@
     "STEP_2": "शिक्षार्थियों की दिन-वार उपस्थिति देखने के लिए कैलेंडर का उपयोग करें",
     "STEP_3": "प्रत्येक केंद्र के लिए दैनिक उपस्थिति प्रतिशत की जाँच करें",
     "STEP_4": "शिक्षार्थियों की प्रत्येक दिन की उपस्थिति को चिह्नित करें",
-    "STEP_5": "पिछले 7 दिनों में केंद्र की उपस्थिति की जाँच करें",
-    "STEP_6": "पिछले 7 दिनों में कम उपस्थिति वाले शिक्षार्थियों को देखें",
+    "STEP_5": "पिछले {{numberOfDays}} दिनों में केंद्र की उपस्थिति की जाँच करें",
+    "STEP_6": "पिछले {{numberOfDays}} दिनों में कम उपस्थिति वाले शिक्षार्थियों को देखें",
     "PREVIOUS": "पिछला",
     "NEXT": "अगला",
     "SKIP": "छोड़ें",
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
index 92149696..c931b20d 100644
--- a/public/locales/mr/common.json
+++ b/public/locales/mr/common.json
@@ -179,7 +179,7 @@
     "MY_PROFILE": "माझी प्रोफाइल",
     "VIEW_MORE": "अधिक पाहा",
     "VIEW_LESS": "कमी करा",
-    "DATA_RANAGE": "डेटा श्रेणी",
+    "DATA_RANGE": "डेटा श्रेणी",
     "LEARNER_DETAILS": "विद्यार्थी तपशील",
     "VIEW_DAY_WISE": "दिवस-निहाय पहा",
     "SUBMITTED_ON": "सादर केले",
@@ -243,8 +243,8 @@
     "STEP_2": "शिक्षार्थ्यांची दिवसवार उपस्थिती पाहण्यासाठी कॅलेंडर वापरा",
     "STEP_3": "प्रत्येक केंद्रासाठी दैनंदिन उपस्थिती टक्केवारी तपासा",
     "STEP_4": "शिक्षार्थ्यांची प्रत्येक दिवसाची उपस्थिती चिन्हांकित करा",
-    "STEP_5": "शेवटच्या 7 दिवसांत केंद्राची उपस्थिती तपासा",
-    "STEP_6": "शेवटच्या 7 दिवसांत कमी उपस्थिती असलेले शिक्षार्थी पहा",
+    "STEP_5": "शेवटच्या {{numberOfDays}} दिवसांत केंद्राची उपस्थिती तपासा",
+    "STEP_6": "शेवटच्या {{numberOfDays}} दिवसांत कमी उपस्थिती असलेले शिक्षार्थी पहा",
     "PREVIOUS": "मागील",
     "NEXT": "पुढे",
     "SKIP": "वगळा",
diff --git a/public/locales/or/common.json b/public/locales/or/common.json
index eee54348..0078534b 100644
--- a/public/locales/or/common.json
+++ b/public/locales/or/common.json
@@ -103,7 +103,7 @@
     "AS_OF_TODAY_DATE": "ଆଜି ଅନୁସାରେ {{day_date}}",
     "LEARNER": "ଶିକ୍ଷାର୍ଥୀ",
     "ATTENDANCE_COMPARISON": "ଉପସ୍ଥିତି ତୁଳନ",
-    "CENTER_TYPE":"କେନ୍ଦ୍ର ପ୍ରକାର",
+    "CENTER_TYPE": "କେନ୍ଦ୍ର ପ୍ରକାର",
     "BLOCK_AVERAGE_ATTENDANCE": "ବ୍ଲକ ହାରାହାର ଉପସ୍ଥିତି"
   },
   "ATTENDANCE": {
@@ -151,7 +151,7 @@
     "MY_PROFILE": "ମୋ ପ୍ରୋଫାଇଲ",
     "VIEW_MORE": "ଅଧିକ ଦେଖନ୍ତୁ",
     "VIEW_LESS": "କମ୍ ଦେଖନ୍ତୁ",
-    "DATA_RANAGE": "ଡାଟା ରେଞ୍ଜ",
+    "DATA_RANGE": "ଡାଟା ରେଞ୍ଜ",
     "LEARNER_DETAILS": "ଶିକ୍ଷାର୍ଥୀ ବିବରଣୀ",
     "VIEW_DAY_WISE": "ଦିନ-ଅନୁସାରେ ବିବରଣୀ ଦେଖନ୍ତୁ",
     "SUBMITTED_ON": "ସବ୍ମିଟ୍/ଦାଖଲ କରାଯାଇଛି",
@@ -220,12 +220,10 @@
     "REQUEST_TO_DELETE": "ହଟାଇବାକୁ ଅନୁରୋଧ",
     "RENAME": "ପୁନ ame ନାମ କରନ୍ତୁ",
     "CENTER_RENAMED": "କେନ୍ଦ୍ରର ନାମ ସଫଳତାର ସହ ଚାଲିଛି!",
-    "SEND_REQUEST":"ଅନୁରୋଧ ପଠାନ୍ତୁ",
+    "SEND_REQUEST": "ଅନୁରୋଧ ପଠାନ୍ତୁ",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": "ହଟାଇବାକୁ ଅନୁରୋଧ ପଠାଯାଇଛି",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "ଆପଣ ଏହି କେନ୍ଦ୍ରଟିକୁ ବିଲୋପ କରିବା ପାଇଁ ରାଜ୍ୟ ପ୍ରଶାସନକୁ ଅନୁରୋଧ ପଠାଉଛନ୍ତି",
     "THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT": "ୟୁଜର ନିମ୍ନଲିଖିତ ସମୁହର ସଦସ୍ୟ: ",
     "PLEASE_REMOVE_THE_USER_FROM_COHORT": "ଦୟାକରି ହଟାଇବା ପୂର୍ବରୁ ୟୁଜରକୁ ଏହି ସମୁହଗୁଡିକରୁ କାଢ଼ି ଦିଅନ୍ତୁ।"
-
-    }
   }
-
+}
diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx
index d67fb6b6..16e57a82 100644
--- a/src/components/AddFacilitator.tsx
+++ b/src/components/AddFacilitator.tsx
@@ -1,23 +1,18 @@
-import { FormContext, FormContextType } from '@/utils/app.constant';
 import {
   GenerateSchemaAndUiSchema,
   customFields,
 } from '@/components/GeneratedSchemas';
+import { FormContext, FormContextType, RoleId } from '@/utils/app.constant';
 import React, { useEffect } from 'react';
 
-import { Box } from '@mui/material';
 import DynamicForm from '@/components/DynamicForm';
-import { Field } from '@/utils/Interfaces';
-import { FormData } from '@/utils/Interfaces';
-import { IChangeEvent } from '@rjsf/core';
-import ISubmitEvent from '@rjsf/core';
-import { RJSFSchema } from '@rjsf/utils';
 import SendCredentialModal from '@/components/SendCredentialModal';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { createUser, getFormRead } from '@/services/CreateUserService';
-import { RoleId } from '@/utils/app.constant';
 import SimpleModal from '@/components/SimpleModal';
+import { createUser, getFormRead } from '@/services/CreateUserService';
 import { generateUsernameAndPassword } from '@/utils/Helper';
+import { Field, FormData } from '@/utils/Interfaces';
+import { IChangeEvent } from '@rjsf/core';
+import { RJSFSchema } from '@rjsf/utils';
 import { useTranslation } from 'next-i18next';
 
 interface AddFacilitatorModalprops {
@@ -41,10 +36,11 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
           FormContextType.TEACHER
         );
         console.log('sortedFields', response);
+        let centerOptionsList;
         if (typeof window !== 'undefined' && window.localStorage) {
           const CenterList = localStorage.getItem('CenterList');
           const centerOptions = CenterList ? JSON.parse(CenterList) : [];
-          var centerOptionsList = centerOptions.map(
+          centerOptionsList = centerOptions.map(
             (center: { cohortId: string; cohortName: string }) => ({
               value: center.cohortId,
               label: center.cohortName,
@@ -114,7 +110,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
 
     const { username, password } = generateUsernameAndPassword('MH', 'F');
 
-    let apiBody: any = {
+    const apiBody: any = {
       username: username,
       password: password,
       tenantCohortRoleMapping: [
@@ -138,27 +134,25 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
         if (typeof fieldValue !== 'object') {
           apiBody[fieldKey] = fieldValue;
         }
+      } else if (
+        Object.hasOwn(fieldSchema, 'isDropdown') ||
+        Object.hasOwn(fieldSchema, 'isCheckbox')
+      ) {
+        apiBody.customFields.push({
+          fieldId: fieldId,
+          value: [String(fieldValue)],
+        });
       } else {
-        if (
-          fieldSchema?.hasOwnProperty('isDropdown') ||
-          fieldSchema.hasOwnProperty('isCheckbox')
-        ) {
-          apiBody.customFields.push({
-            fieldId: fieldId,
-            value: [String(fieldValue)],
-          });
-        } else {
-          apiBody.customFields.push({
-            fieldId: fieldId,
-            value: String(fieldValue),
-          });
-        }
+        apiBody.customFields.push({
+          fieldId: fieldId,
+          value: String(fieldValue),
+        });
       }
     });
 
     if (typeof window !== 'undefined' && window.localStorage) {
-      var teamLeaderData = JSON.parse(
-        localStorage.getItem('teamLeadApp') || ''
+      const teamLeaderData = JSON.parse(
+        localStorage.getItem('teamLeadApp') ?? ''
       );
       console.log(teamLeaderData);
     }
diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
index 47538b15..4c76e208 100644
--- a/src/components/AddLeanerModal.tsx
+++ b/src/components/AddLeanerModal.tsx
@@ -1,22 +1,18 @@
 import DynamicForm from '@/components/DynamicForm';
-import React, { useEffect } from 'react';
 import {
   GenerateSchemaAndUiSchema,
   customFields,
 } from '@/components/GeneratedSchemas';
-import { IChangeEvent } from '@rjsf/core';
-import ISubmitEvent from '@rjsf/core';
-import { Box, Button, useTheme } from '@mui/material';
-import { RJSFSchema } from '@rjsf/utils';
-import SendCredentialModal from '@/components/SendCredentialModal';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import SimpleModal from '@/components/SimpleModal';
 import { createUser, getFormRead } from '@/services/CreateUserService';
+import { generateUsernameAndPassword } from '@/utils/Helper';
 import { FormData } from '@/utils/Interfaces';
-import { FormContext, FormContextType } from '@/utils/app.constant';
-import SimpleModal from '@/components/SimpleModal';
+import { FormContext, FormContextType, RoleId } from '@/utils/app.constant';
+import { Button, useTheme } from '@mui/material';
+import { IChangeEvent } from '@rjsf/core';
+import { RJSFSchema } from '@rjsf/utils';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generateUsernameAndPassword } from '@/utils/Helper';
-import { RoleId } from '@/utils/app.constant';
 import { showToastMessage } from './Toastify';
 
 interface AddLearnerModalProps {
@@ -85,18 +81,18 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
     const formData = data.formData;
     console.log('Form data submitted:', formData);
     const schemaProperties = schema.properties;
-    let cohortId;
+    let cohortId, teacherData;
     if (typeof window !== 'undefined' && window.localStorage) {
-      var teacherData = JSON.parse(localStorage.getItem('teacherApp') || '');
+      teacherData = JSON.parse(localStorage.getItem('teacherApp') ?? '');
       cohortId =
-        localStorage.getItem('cohortId') || localStorage.getItem('classId');
+        localStorage.getItem('cohortId') ?? localStorage.getItem('classId');
     }
     const { username, password } = generateUsernameAndPassword(
       teacherData?.state?.stateCode,
       ''
     );
 
-    let apiBody: any = {
+    const apiBody: any = {
       username: username,
       password: password,
       tenantCohortRoleMapping: [
@@ -120,21 +116,19 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
         if (typeof fieldValue !== 'object') {
           apiBody[fieldKey] = fieldValue;
         }
+      } else if (
+        Object.hasOwn(fieldSchema, 'isDropdown') ||
+        Object.hasOwn(fieldSchema, 'isCheckbox')
+      ) {
+        apiBody.customFields.push({
+          fieldId: fieldId,
+          value: [String(fieldValue)],
+        });
       } else {
-        if (
-          fieldSchema?.hasOwnProperty('isDropdown') ||
-          fieldSchema.hasOwnProperty('isCheckbox')
-        ) {
-          apiBody.customFields.push({
-            fieldId: fieldId,
-            value: [String(fieldValue)],
-          });
-        } else {
-          apiBody.customFields.push({
-            fieldId: fieldId,
-            value: String(fieldValue),
-          });
-        }
+        apiBody.customFields.push({
+          fieldId: fieldId,
+          value: String(fieldValue),
+        });
       }
     });
 
@@ -184,42 +178,40 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
         justifyContent: 'space-between',
       }}
     >
-      <>
-        <Button
-          variant="outlined"
-          color="primary"
-          sx={{
-            '&.Mui-disabled': {
-              backgroundColor: theme?.palette?.primary?.main,
-            },
-            minWidth: '84px',
-            height: '2.5rem',
-            padding: theme.spacing(1),
-            fontWeight: '500',
-            width: '48%',
-          }}
-          onClick={onClose}
-        >
-          {t('COMMON.BACK')}
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          sx={{
-            '&.Mui-disabled': {
-              backgroundColor: theme?.palette?.primary?.main,
-            },
-            minWidth: '84px',
-            height: '2.5rem',
-            padding: theme.spacing(1),
-            fontWeight: '500',
-            width: '48%',
-          }}
-          onClick={secondaryActionHandler}
-        >
-          {t('COMMON.SUBMIT')}
-        </Button>
-      </>
+      <Button
+        variant="outlined"
+        color="primary"
+        sx={{
+          '&.Mui-disabled': {
+            backgroundColor: theme?.palette?.primary?.main,
+          },
+          minWidth: '84px',
+          height: '2.5rem',
+          padding: theme.spacing(1),
+          fontWeight: '500',
+          width: '48%',
+        }}
+        onClick={onClose}
+      >
+        {t('COMMON.BACK')}
+      </Button>
+      <Button
+        variant="contained"
+        color="primary"
+        sx={{
+          '&.Mui-disabled': {
+            backgroundColor: theme?.palette?.primary?.main,
+          },
+          minWidth: '84px',
+          height: '2.5rem',
+          padding: theme.spacing(1),
+          fontWeight: '500',
+          width: '48%',
+        }}
+        onClick={secondaryActionHandler}
+      >
+        {t('COMMON.SUBMIT')}
+      </Button>
     </div>
   );
 
@@ -240,29 +232,27 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
   };
 
   return (
-    <>
-      <SimpleModal
-        open={open}
-        onClose={onClose}
-        showFooter={false}
-        modalTitle={t('COMMON.NEW_LEARNER')}
-      >
-        {schema && uiSchema && (
-          <DynamicForm
-            schema={schema}
-            uiSchema={uiSchema}
-            onSubmit={handleSubmit}
-            onChange={handleChange}
-            onError={handleError}
-            widgets={{}}
-            showErrorList={true}
-            customFields={customFields}
-          >
-            {/* <CustomSubmitButton onClose={primaryActionHandler} /> */}
-          </DynamicForm>
-        )}
-      </SimpleModal>
-    </>
+    <SimpleModal
+      open={open}
+      onClose={onClose}
+      showFooter={false}
+      modalTitle={t('COMMON.NEW_LEARNER')}
+    >
+      {schema && uiSchema && (
+        <DynamicForm
+          schema={schema}
+          uiSchema={uiSchema}
+          onSubmit={handleSubmit}
+          onChange={handleChange}
+          onError={handleError}
+          widgets={{}}
+          showErrorList={true}
+          customFields={customFields}
+        >
+          {/* <CustomSubmitButton onClose={primaryActionHandler} /> */}
+        </DynamicForm>
+      )}
+    </SimpleModal>
   );
 };
 
diff --git a/src/components/AttendanceStatusListView.tsx b/src/components/AttendanceStatusListView.tsx
index 6f4045e5..a7bf2ca0 100644
--- a/src/components/AttendanceStatusListView.tsx
+++ b/src/components/AttendanceStatusListView.tsx
@@ -1,25 +1,23 @@
+import { Box, Typography } from '@mui/material';
+import React, { useState } from 'react';
 import {
   AttendanceStatusListViewProps,
-  UserData,
-  updateCustomField,
+  UpdateCustomField,
 } from '../utils/Interfaces';
-import { Box, Typography } from '@mui/material';
-import React, { useState } from 'react';
 
-import { ATTENDANCE_ENUM } from '../utils/Helper';
-import { BorderBottom } from '@mui/icons-material';
+import { getUserDetails } from '@/services/ProfileService';
+import { Status, names } from '@/utils/app.constant';
 import CancelIcon from '@mui/icons-material/Cancel'; //absent
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //present
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import LearnerModal from './LearnerModal';
-import Link from 'next/link';
-import Loader from './Loader';
-import { getUserDetails } from '@/services/ProfileService';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { ATTENDANCE_ENUM } from '../utils/Helper';
 import DropoutLabel from './DropoutLabel';
-import { Status, names } from '@/utils/app.constant';
+import LearnerModal from './LearnerModal';
+import Loader from './Loader';
 
 const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
   isDisabled = false,
@@ -40,7 +38,7 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
     height: isBulkAction ? '56px' : '',
     // width: '100%',
     // borderBottom: `0.5px solid ${theme.palette.warning[400]}`,
-    padding: isBulkAction ? '0 8px' : '0 8px',
+    padding: '0 8px',
     alignItems: 'center',
     borderRadius: isBulkAction ? '8px' : 0,
     // marginBottom: '12px',
@@ -61,15 +59,13 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
   };
 
   // -----learner profile  details----
-  const [usersData, setUsersData] = React.useState<UserData | null>(null);
   const [customFieldsData, setCustomFieldsData] = React.useState<
-    updateCustomField[]
+    UpdateCustomField[]
   >([]);
   const [contactNumber, setContactNumber] = useState<any>('');
   const [userName, setUserName] = React.useState('');
   const [isModalOpenLearner, setIsModalOpenLearner] = useState(false);
   const [loading, setLoading] = useState(false);
-  // const userId = '12345'; // Replace with the actual user ID you want to pass
 
   const handleOpenModalLearner = (userId: string) => {
     if (!showLink) {
@@ -93,7 +89,6 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
           const data = response?.result;
           if (data) {
             const userData = data?.userData;
-            // setUsersData(userData);
             setUserName(userData?.name);
             setContactNumber(userData?.mobile);
             const customDataFields = userData?.customFields;
@@ -181,9 +176,7 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
                       <CheckCircleIcon
                         sx={{ cursor: isDisabled ? 'default' : 'pointer' }}
                         style={{
-                          fill: isDisabled
-                            ? theme.palette.success.main
-                            : theme.palette.success.main,
+                          fill: theme.palette.success.main,
                         }}
                       />
                     ) : (
@@ -263,9 +256,7 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
                 <CheckCircleIcon
                   sx={{ cursor: isDisabled ? 'default' : 'pointer' }}
                   style={{
-                    fill: isDisabled
-                      ? theme.palette.success.main
-                      : theme.palette.success.main,
+                    fill: theme.palette.success.main,
                   }}
                 />
               ) : (
diff --git a/src/components/BottomDrawer.tsx b/src/components/BottomDrawer.tsx
index a44e3210..cb344164 100644
--- a/src/components/BottomDrawer.tsx
+++ b/src/components/BottomDrawer.tsx
@@ -42,7 +42,6 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       sx={{
         width: 'auto',
       }}
-      role="presentation"
     >
       <Box
         sx={{
@@ -57,8 +56,8 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       {renderCustomContent?.()}
       {children}
       <List>
-        {optionList.map(({ label, icon, name }, index) => (
-          <ListItem disablePadding key={index}>
+        {optionList.map(({ label, icon, name }) => (
+          <ListItem disablePadding key={name}>
             <ListItemButton
               sx={{
                 borderBottom: '1px solid #D0C5B4',
diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
index 905ce26e..71e0f03a 100644
--- a/src/components/CohortSelectionSection.tsx
+++ b/src/components/CohortSelectionSection.tsx
@@ -6,18 +6,18 @@ import {
   SelectChangeEvent,
   Typography,
 } from '@mui/material';
-import React, { useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect } from 'react';
 
-import Loader from './Loader';
-import ReactGA from 'react-ga4';
+import { getCohortList } from '@/services/CohortServices';
+import useStore from '@/store/store';
 import { cohort } from '@/utils/Interfaces';
 import { cohortHierarchy } from '@/utils/app.constant';
-import { getCohortList } from '@/services/CohortServices';
-import { showToastMessage } from './Toastify';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import useStore from '@/store/store';
+import ReactGA from 'react-ga4';
+import Loader from './Loader';
+import { showToastMessage } from './Toastify';
 
 interface CohortSelectionSectionProps {
   classId: string;
@@ -109,15 +109,14 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
             const extractNamesAndCohortTypes = (
               data: ChildData[]
             ): NameTypePair[] => {
-              let nameTypePairs: NameTypePair[] = [];
-
+              const nameTypePairs: NameTypePair[] = [];
               const recursiveExtract = (items: ChildData[]) => {
                 items.forEach((item) => {
                   const cohortType =
                     item?.customField?.find(
                       (field) => field.label === 'TYPE_OF_COHORT'
                     )?.value || 'Unknown';
-                  if (item?.cohortId && item && item?.name) {
+                  if (item?.cohortId && item?.name) {
                     nameTypePairs.push({
                       cohortId: item?.cohortId,
                       name: item?.name,
@@ -133,7 +132,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
               return nameTypePairs;
             };
 
-            if (response && response?.length > 0) {
+            if (response?.length > 0) {
               const nameTypePairs = extractNamesAndCohortTypes(response);
               setCohorts(nameTypePairs);
             }
@@ -292,6 +291,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                                     fontWeight: '500',
                                     fontSize: '14px',
                                     color: '#4D4639',
+                                    textTransform: 'capitalize',
                                   }}
                                 >
                                   {cohort.name}
@@ -350,9 +350,10 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                                     fontWeight: '500',
                                     fontSize: '14px',
                                     color: '#4D4639',
+                                    textTransform: 'capitalize',
                                   }}
                                 >
-                                  {cohort.name}
+                                  {cohort?.name}
                                 </MenuItem>
                               ))
                             ) : (
diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
index 46c5d333..9ea6d4ce 100644
--- a/src/components/DateRangePopup.tsx
+++ b/src/components/DateRangePopup.tsx
@@ -1,3 +1,4 @@
+import { getDayAndMonthName, getTodayDate } from '@/utils/Helper';
 import {
   Box,
   Button,
@@ -8,23 +9,20 @@ import {
   MenuList,
   Modal,
   Select,
-  Typography,
-  useStepContext,
+  Typography
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { getDayAndMonthName, getTodayDate } from '@/utils/Helper';
 
+import useStore from '@/store/store';
 import CloseIcon from '@mui/icons-material/Close';
-import { Height } from '@mui/icons-material';
-import Image from 'next/image';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import MonthCalender from './MonthCalender';
-import ReactGA from 'react-ga4';
 import WestIcon from '@mui/icons-material/West';
-import checkMark from '../assets/images/checkMark.svg';
-import useStore from '@/store/store';
+import ListItemIcon from '@mui/material/ListItemIcon';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+import ReactGA from 'react-ga4';
+import checkMark from '../assets/images/checkMark.svg';
+import MonthCalender from './MonthCalender';
 
 const modalStyle = {
   position: 'absolute',
diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx
index fb33889f..1528afd4 100644
--- a/src/components/DeleteSession.tsx
+++ b/src/components/DeleteSession.tsx
@@ -1,10 +1,7 @@
 import {
   Box,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
   Radio,
-  RadioGroup,
+  RadioGroup
 } from '@mui/material';
 import React, { useState } from 'react';
 
@@ -21,7 +18,6 @@ const DeleteSession = () => {
   };
 
   return (
-    <>
       <Box sx={{ padding: '8px 16px' }}>
         <RadioGroup value={selectedValue} onChange={handleChange}>
           <Box
@@ -54,7 +50,6 @@ const DeleteSession = () => {
           </Box>
         </RadioGroup>
       </Box>
-    </>
   );
 };
 
diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts
index 3339c6c0..1435e3e7 100644
--- a/src/components/GeneratedSchemas.ts
+++ b/src/components/GeneratedSchemas.ts
@@ -1,7 +1,7 @@
+import { Field, FieldOption, FormData } from '@/utils/Interfaces';
 import { UiSchema } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
 import NumberInputField from './form/NumberInputField';
-import { FormData, Field, FieldOption } from '@/utils/Interfaces';
 
 export const customFields = {
   NumberInputField: NumberInputField,
@@ -134,7 +134,7 @@ export const GenerateSchemaAndUiSchema = (
     //   fieldUiSchema['ui:widget'] = 'select';
     // }
 
-    if (isMultiSelect && type === 'drop_down') {
+    if (isMultiSelect && type === 'drop_down' && maxSelections !== 1) {
       fieldSchema.type = 'array';
       fieldSchema.items = {
         type: 'string',
@@ -149,7 +149,24 @@ export const GenerateSchemaAndUiSchema = (
       if (maxSelections) {
         fieldSchema.maxItems = maxSelections;
       }
-      fieldUiSchema['ui:widget'] = 'MultiSelectDropdown';
+      if (maxSelections === 1) {
+        fieldUiSchema['ui:widget'] = 'select';
+      } else {
+        fieldUiSchema['ui:widget'] = 'MultiSelectDropdown';
+      }
+    }
+
+    if (isMultiSelect && maxSelections === 1 && type === 'drop_down') {
+      fieldSchema.type = 'string';
+      fieldSchema.isDropdown = true;
+      fieldSchema.oneOf = options.map((opt: FieldOption) => ({
+        const: opt.value,
+        title:
+          t(`FORM.${opt.label}`) === `FORM.${opt.label}`
+            ? opt.label
+            : t(`FORM.${opt.label}`),
+      }));
+      fieldUiSchema['ui:widget'] = 'select';
     }
 
     if (!isMultiSelect && type === 'drop_down') {
diff --git a/src/components/LearnerAttendanceStatsListView.tsx b/src/components/LearnerAttendanceStatsListView.tsx
index 3a4f1491..4ecf8e73 100644
--- a/src/components/LearnerAttendanceStatsListView.tsx
+++ b/src/components/LearnerAttendanceStatsListView.tsx
@@ -1,7 +1,7 @@
-import { Box, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
+import { Box, Grid, Stack, Typography } from '@mui/material';
 import React, { useState } from 'react';
 import { Status, names } from '@/utils/app.constant';
-import { UserData, updateCustomField } from '@/utils/Interfaces';
+import { UserData, UpdateCustomField } from '@/utils/Interfaces';
 
 import DropoutLabel from './DropoutLabel';
 import LearnerModal from './LearnerModal';
@@ -41,7 +41,7 @@ const StudentsStatsList: React.FC<StudentsStatsListProps> = ({
 
   const [userData, setUserData] = React.useState<UserData | null>(null);
   const [customFieldsData, setCustomFieldsData] = React.useState<
-    updateCustomField[]
+    UpdateCustomField[]
   >([]);
   const [contactNumber, setContactNumber] = useState<any>('');
   const [userName, setUserName] = React.useState('');
@@ -144,36 +144,34 @@ const StudentsStatsList: React.FC<StudentsStatsListProps> = ({
               </Link>
             </Grid>
             {memberStatus === Status.DROPOUT ? (
-              <>
-                <Grid item xs={6}>
-                  <Grid container>
-                    <Grid xs={6}>
-                      <Typography
-                        fontSize="1rem"
-                        fontWeight="bold"
-                        lineHeight="1.5rem"
-                        // color={theme.palette.text.primary}
-                        color={textColor}
-                        textAlign="center"
-                      >
-                        {presentPercent}%
-                      </Typography>
-                    </Grid>
-                    <Grid item xs={6}>
-                      <Typography
-                        fontSize="1rem"
-                        fontWeight="bold"
-                        lineHeight="1.5rem"
-                        color={theme.palette.text.primary}
-                        textAlign="center"
-                      >
-                        {classesMissed}
-                      </Typography>
-                    </Grid>
+              <Grid item xs={6}>
+                <Grid container>
+                  <Grid xs={6}>
+                    <Typography
+                      fontSize="1rem"
+                      fontWeight="bold"
+                      lineHeight="1.5rem"
+                      // color={theme.palette.text.primary}
+                      color={textColor}
+                      textAlign="center"
+                    >
+                      {presentPercent}%
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography
+                      fontSize="1rem"
+                      fontWeight="bold"
+                      lineHeight="1.5rem"
+                      color={theme.palette.text.primary}
+                      textAlign="center"
+                    >
+                      {classesMissed}
+                    </Typography>
                   </Grid>
-                  <DropoutLabel />
                 </Grid>
-              </>
+                <DropoutLabel />
+              </Grid>
             ) : (
               <>
                 <Grid item xs={3}>
diff --git a/src/components/LearnerModal.tsx b/src/components/LearnerModal.tsx
index 9e72debf..275793cc 100644
--- a/src/components/LearnerModal.tsx
+++ b/src/components/LearnerModal.tsx
@@ -170,7 +170,7 @@ const LearnerModal = ({
                               ? toPascalCase(item.displayValue.join(', '))
                               : item?.displayValue
                                 ? toPascalCase(item.displayValue)
-                                : "-"}
+                                : '-'}
                           </Typography>
                           {/* </Box> */}
                         </Grid>
@@ -198,7 +198,7 @@ const LearnerModal = ({
                             whiteSpace: 'normal',
                           }}
                         >
-                          {contactNumber ? contactNumber : "-"}
+                          {contactNumber ? contactNumber : '-'}
                         </Typography>
                       </Box>
                     </Grid>
diff --git a/src/components/LearnersListItem.tsx b/src/components/LearnersListItem.tsx
index a9642447..48aa2c1f 100644
--- a/src/components/LearnersListItem.tsx
+++ b/src/components/LearnersListItem.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from '@mui/material';
 import {
   LearnerListProps,
   UserData,
-  updateCustomField,
+  UpdateCustomField,
 } from '@/utils/Interfaces';
 import React, { useEffect } from 'react';
 import { Status, names, Role } from '@/utils/app.constant';
@@ -69,7 +69,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
     userData: null as UserData | null,
     userName: '',
     contactNumber: '',
-    customFieldsData: [] as updateCustomField[],
+    customFieldsData: [] as UpdateCustomField[],
   });
   const userStore = useStore();
   const theme = useTheme<any>();
@@ -78,7 +78,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
   const { t } = useTranslation();
   const [openCentersModal, setOpenCentersModal] = React.useState(false);
   const [openDeleteUserModal, setOpenDeleteUserModal] = React.useState(false);
-const [centers, setCenters] = React.useState();
+  const [centers, setCenters] = React.useState();
   const store = manageUserStore();
 
   const CustomLink = styled(Link)(({ theme }) => ({
@@ -95,10 +95,9 @@ const [centers, setCenters] = React.useState();
       setReloadState(false);
       // window.location.reload();
     }
-    const cohorts = userStore.cohorts
-      const centerList = cohorts.map((cohort: { name: string; }) => cohort.name);
-      setCenters(centerList);
-
+    const cohorts = userStore.cohorts;
+    const centerList = cohorts.map((cohort: { name: string }) => cohort.name);
+    setCenters(centerList);
   }, [reloadState, setReloadState]);
 
   const toggleDrawer =
@@ -141,7 +140,7 @@ const [centers, setCenters] = React.useState();
     setLearnerState((prevState) => ({ ...prevState, contactNumber: number }));
   };
 
-  const setCustomFieldsData = (fields: updateCustomField[]) => {
+  const setCustomFieldsData = (fields: UpdateCustomField[]) => {
     setLearnerState((prevState) => ({
       ...prevState,
       customFieldsData: fields,
@@ -300,7 +299,7 @@ const [centers, setCenters] = React.useState();
       acc.push(field);
     }
     return acc;
-  }, [] as updateCustomField[]);
+  }, [] as UpdateCustomField[]);
 
   const getTeamLeadersCenters = async () => {};
 
diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
index bc8cae9d..40fa092a 100644
--- a/src/components/ManageUser.tsx
+++ b/src/components/ManageUser.tsx
@@ -1,52 +1,37 @@
-import React, { useState } from 'react';
 import {
   Button,
-  FormControl,
   Grid,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
+  Typography
 } from '@mui/material';
+import React, { useState } from 'react';
 
-import Box from '@mui/material/Box';
-import Header from '@/components/Header';
-import InputAdornment from '@mui/material/InputAdornment';
+import BottomDrawer from '@/components/BottomDrawer';
+import ConfirmationModal from '@/components/ConfirmationModal';
 import ManageCentersModal from '@/components/ManageCentersModal';
 import ManageUsersModal from '@/components/ManageUsersModal';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import SearchIcon from '@mui/icons-material/Search';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useRouter } from 'next/router';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'next-i18next';
-import { useEffect } from 'react';
-import { assignCentersToFacilitator } from '@/services/ManageUser';
-import { cohortList, getCohortList } from '@/services/CohortServices';
 import { showToastMessage } from '@/components/Toastify';
-import BottomDrawer from '@/components/BottomDrawer';
-import ApartmentIcon from '@mui/icons-material/Apartment';
+import { cohortList, getCohortList } from '@/services/CohortServices';
+import { Role } from '@/utils/app.constant';
+import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
-import { editEditUser } from '@/services/ProfileService';
-import ConfirmationModal from '@/components/ConfirmationModal';
-import { Role, Status } from '@/utils/app.constant';
-import AddIcon from '@mui/icons-material/Add';
-import LearnersList from '@/components/LearnersListItem';
-import Link from 'next/link';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
 import { styled } from '@mui/system';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import manageUserStore from '../store/manageUserStore';
 
 import { getMyUserList } from '@/services/MyClassDetailsService';
-import DeleteUserModal from './DeleteUserModal';
 import Image from 'next/image';
 import profileALT from '../assets/images/Profile.png';
-import RemoveFacilitatorAlert from './SimpleModal';
-import SimpleModal from './SimpleModal';
 import AddFacilitatorModal from './AddFacilitator';
 import ReassignModal from './ReassignModal';
+import DeleteUserModal from './DeleteUserModal';
+import SimpleModal from './SimpleModal';
 
 interface Cohort {
   cohortId: string;
diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
index 51d44af7..6cf7c4df 100644
--- a/src/components/MenuDrawer.tsx
+++ b/src/components/MenuDrawer.tsx
@@ -20,6 +20,7 @@ import { Role } from '@/utils/app.constant';
 import useStore from '@/store/store';
 import { accessGranted } from '@/utils/Helper';
 import { accessControl } from '../../app.config';
+import EventAvailableOutlinedIcon from '@mui/icons-material/EventAvailableOutlined';
 interface DrawerProps {
   toggleDrawer: (open: boolean) => () => void;
   open: boolean;
@@ -76,6 +77,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
 
   const isDashboard = router.pathname === '/dashboard';
   const isTeacherCenter = router.pathname === '/centers';
+  const isCoursePlanner = router.pathname === '/course-planner';
   // const isManageUser = router.pathname === '/manageUser';
 
   return (
@@ -249,6 +251,41 @@ const MenuDrawer: React.FC<DrawerProps> = ({
             {t('COMMON.OBSERVATIONS_FORMS')}
           </Button>
         </Box>
+
+        <Box sx={{ marginTop: '12px' }}>
+          <Button
+            className="fs-14"
+            sx={{
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'flex-start',
+              background: isCoursePlanner
+                ? theme.palette.primary.main
+                : 'transparent',
+
+              padding: isCoursePlanner
+                ? '16px 18px !important'
+                : '0px 18px !important',
+              color: isCoursePlanner
+                ? theme.palette.action.focus
+                : theme.palette.warning.A200,
+              fontWeight: isCoursePlanner ? '600' : 500,
+              '&:hover': {
+                background: isCoursePlanner
+                  ? theme.palette.primary.main
+                  : 'transparent',
+              },
+              marginTop: '15px',
+            }}
+            startIcon={<EventAvailableOutlinedIcon />}
+            onClick={() => {
+              router.push(`/course-planner`); // Check route
+            }}
+          >
+            {t('COURSE_PLANNER.COURSE_PLANNER')}
+          </Button>
+        </Box>
+
         {/* <Box sx={{ marginTop: '12px' }}>
           <Button
             className="fs-14"
diff --git a/src/components/SendCredentialModal.tsx b/src/components/SendCredentialModal.tsx
index 5e3e6d95..346d45d2 100644
--- a/src/components/SendCredentialModal.tsx
+++ b/src/components/SendCredentialModal.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, Divider, Modal, Typography } from '@mui/material';
-import React, { useState } from 'react';
+import React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import CloseIcon from '@mui/icons-material/Close';
diff --git a/src/components/SessionMode.tsx b/src/components/SessionMode.tsx
index 8855e5ef..d910c172 100644
--- a/src/components/SessionMode.tsx
+++ b/src/components/SessionMode.tsx
@@ -6,18 +6,16 @@ import {
   RadioGroup,
 } from '@mui/material';
 
-import React from 'react';
-import { SessionModeProps } from '../utils/Interfaces';
-import { sessionMode } from '@/utils/app.constant';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import React from 'react';
+import { SessionModeProps } from '../utils/Interfaces';
 
 const SessionMode: React.FC<SessionModeProps> = ({
   handleSessionModeChange,
   mode,
   sessions,
 }) => {
-  const { t } = useTranslation();
   const theme = useTheme<any>();
 
   console.log('SessionMode Rendered with mode:', mode);
diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
index 35bad16b..a23b93a8 100644
--- a/src/components/SimpleModal.tsx
+++ b/src/components/SimpleModal.tsx
@@ -2,24 +2,13 @@ import {
   Box,
   Button,
   Divider,
-  FormControl,
-  FormControlLabel,
-  InputLabel,
   Modal,
-  Radio,
-  RadioGroup,
-  TextField,
-  Typography,
+  Typography
 } from '@mui/material';
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode } from 'react';
 
-import CloseIcon from '@mui/icons-material/Close';
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
-import { getCohortList } from '@/services/CohortServices';
-import manageUserStore from '@/store/manageUserStore';
-import { showToastMessage } from './Toastify';
 import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'next-i18next';
 
 interface SimpleModalProps {
   secondaryActionHandler?: () => void;
@@ -43,8 +32,6 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
   children,
   modalTitle,
 }) => {
-  const { t } = useTranslation();
-  const store = manageUserStore();
   const theme = useTheme<any>();
 
   const modalStyle = {
diff --git a/src/components/SortingModal.tsx b/src/components/SortingModal.tsx
index 9176eeb6..08dbb54e 100644
--- a/src/components/SortingModal.tsx
+++ b/src/components/SortingModal.tsx
@@ -11,10 +11,9 @@ import {
 } from '@mui/material';
 
 import Divider from '@mui/material/Divider';
-import ModalComponent from './Modal';
-import { Padding } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import ModalComponent from './Modal';
 
 interface sortCardProps {
   handleSorting: (
diff --git a/src/components/StudentStatsCard.tsx b/src/components/StudentStatsCard.tsx
index 6519e251..754e0b58 100644
--- a/src/components/StudentStatsCard.tsx
+++ b/src/components/StudentStatsCard.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
-interface StudentStatsCard {
+interface IStudentStatsCard {
   label1: string;
   value1: string;
   label2: boolean;
   value2: string;
 }
 
-const StudentStatsCard: React.FC<StudentStatsCard> = ({
+const StudentStatsCard: React.FC<IStudentStatsCard> = ({
   label1,
   value1,
   label2,
diff --git a/src/components/UpDownButton.tsx b/src/components/UpDownButton.tsx
index f3f1137a..23016b83 100644
--- a/src/components/UpDownButton.tsx
+++ b/src/components/UpDownButton.tsx
@@ -15,7 +15,6 @@ const UpDownButton = () => {
 
   const trackScroll = () => {
     const scrolled = window.pageYOffset;
-    const viewportHeight = document.documentElement.clientHeight;
 
     const atBottom =
       pathname === '/attendance-overview' ? scrolled >= 320 : scrolled >= 720;
diff --git a/src/components/WeekCalender.tsx b/src/components/WeekCalender.tsx
index 00be3079..3cf0c085 100644
--- a/src/components/WeekCalender.tsx
+++ b/src/components/WeekCalender.tsx
@@ -1,21 +1,16 @@
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import {
   addDays,
-  addWeeks,
   format,
   getWeek,
   isSameDay,
-  lastDayOfWeek,
-  startOfWeek,
-  subDays,
-  subWeeks,
+  subDays
 } from 'date-fns';
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 
-import ArrowDropDownCircleOutlinedIcon from '@mui/icons-material/ArrowDropDownCircleOutlined';
 import { Box } from '@mui/material';
-import useDeterminePathColor from '../hooks/useDeterminePathColor';
 import { useEffect, useRef, useState } from 'react';
 import { dashboardDaysLimit } from '../../app.config';
+import useDeterminePathColor from '../hooks/useDeterminePathColor';
 
 const Calendar: React.FC<any> = ({
   showDetailsHandle,
diff --git a/src/components/blocks/CreateBlockModal.tsx b/src/components/blocks/CreateBlockModal.tsx
index f534d729..f63b1c8e 100644
--- a/src/components/blocks/CreateBlockModal.tsx
+++ b/src/components/blocks/CreateBlockModal.tsx
@@ -1,18 +1,17 @@
-import React, { useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Box,
-  Typography,
-  TextField,
   Button,
-  Modal,
-  Fade,
   Divider,
+  Fade,
   IconButton,
+  Modal,
+  TextField,
+  Typography,
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import React, { useState } from 'react';
 
 interface CreateBlockModalProps {
   open: boolean;
diff --git a/src/components/blocks/FilterBlockModal.tsx b/src/components/blocks/FilterBlockModal.tsx
index c9fe130e..26501b58 100644
--- a/src/components/blocks/FilterBlockModal.tsx
+++ b/src/components/blocks/FilterBlockModal.tsx
@@ -1,23 +1,19 @@
-import React, { useState } from 'react';
+import { Close } from '@mui/icons-material';
 import {
   Box,
-  Typography,
-  TextField,
+  Button,
+  Divider,
+  Fade,
+  FormControlLabel,
   IconButton,
+  Modal,
   Radio,
   RadioGroup,
-  FormControlLabel,
-  Checkbox,
-  Button,
-  Modal,
-  Fade,
-  Backdrop,
-  Divider,
-  InputAdornment,
+  Typography
 } from '@mui/material';
-import { Search, Close } from '@mui/icons-material';
-import { useTranslation } from 'next-i18next';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
 
 interface FilterModalProps {
   open: boolean;
diff --git a/src/components/center/CreateCenterModal.tsx b/src/components/center/CreateCenterModal.tsx
index 2f39a88d..8ae31da6 100644
--- a/src/components/center/CreateCenterModal.tsx
+++ b/src/components/center/CreateCenterModal.tsx
@@ -1,29 +1,22 @@
-import React, { useEffect, useState } from 'react';
+import { createCohort, getFormRead } from '@/services/CreateUserService';
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Box,
-  Typography,
-  TextField,
-  Button,
-  Modal,
-  Fade,
   Divider,
+  Fade,
   IconButton,
+  Modal,
   Radio,
-  RadioGroup,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
+  Typography
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useTheme, styled } from '@mui/material/styles';
-import { showToastMessage } from '../Toastify';
-import { createCohort, getFormRead } from '@/services/CreateUserService';
-import { GenerateSchemaAndUiSchema } from '../GeneratedSchemas';
-import DynamicForm from '../DynamicForm';
+import { styled, useTheme } from '@mui/material/styles';
 import { IChangeEvent } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
+import { useTranslation } from 'next-i18next';
+import React, { useEffect, useState } from 'react';
+import DynamicForm from '../DynamicForm';
+import { GenerateSchemaAndUiSchema } from '../GeneratedSchemas';
+import { showToastMessage } from '../Toastify';
 
 interface CreateBlockModalProps {
   open: boolean;
diff --git a/src/components/center/DeleteCenterModal.tsx b/src/components/center/DeleteCenterModal.tsx
index 75d934c4..a90ae39c 100644
--- a/src/components/center/DeleteCenterModal.tsx
+++ b/src/components/center/DeleteCenterModal.tsx
@@ -1,23 +1,15 @@
-import React, { useState } from 'react';
 import {
   Box,
-  Typography,
-  TextField,
   Button,
-  Modal,
-  Fade,
   Divider,
-  IconButton,
+  Fade,
+  Modal,
   Radio,
-  RadioGroup,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
+  Typography
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { styled, useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useTheme, styled } from '@mui/material/styles';
+import React from 'react';
 import { showToastMessage } from '../Toastify';
 
 interface CreateBlockModalProps {
@@ -39,8 +31,6 @@ const DeleteCenterModal: React.FC<CreateBlockModalProps> = ({
   const { t } = useTranslation();
   const theme = useTheme<any>();
 
-
-
   const handleDeleteButtonClick = () => {
     console.log('Delete request sent');
     showToastMessage(t('CENTERS.REQUEST_TO_DELETE_HAS_BEEN_SENT'), 'success');
@@ -66,9 +56,12 @@ const DeleteCenterModal: React.FC<CreateBlockModalProps> = ({
             transform: 'translate(-50%, -50%)',
           }}
         >
-          <Typography variant="body2" color="textSecondary" sx={{ mb: 2, mt: 2 }}>
-          
-          {t('CENTERS.YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN')}
+          <Typography
+            variant="body2"
+            color="textSecondary"
+            sx={{ mb: 2, mt: 2 }}
+          >
+            {t('CENTERS.YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN')}
           </Typography>
           <Divider sx={{ mb: 2, mx: -2 }} />
           <Box
@@ -76,37 +69,35 @@ const DeleteCenterModal: React.FC<CreateBlockModalProps> = ({
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-            
+
               pl: 1,
               pr: 2,
             }}
           >
-          <Button
-            variant="outlined"
-            onClick={handleClose}
-            sx={{
-              width: '60%',
-              border: 'none',
-              color: theme?.palette?.secondary?.main,
-              mb: 2,
-            }}
-          >
-            
-            {t('COMMON.CANCEL')}
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={handleDeleteButtonClick}
-            sx={{
-              width: '100%',
-              border: 'none',
-              backgroundColor: theme?.palette?.primary?.main,
-              mb: 2,
-            }}
-          >
-            
-            {t('CENTERS.SEND_REQUEST')}
-          </Button>
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              sx={{
+                width: '60%',
+                border: 'none',
+                color: theme?.palette?.secondary?.main,
+                mb: 2,
+              }}
+            >
+              {t('COMMON.CANCEL')}
+            </Button>
+            <Button
+              variant="outlined"
+              onClick={handleDeleteButtonClick}
+              sx={{
+                width: '100%',
+                border: 'none',
+                backgroundColor: theme?.palette?.primary?.main,
+                mb: 2,
+              }}
+            >
+              {t('CENTERS.SEND_REQUEST')}
+            </Button>
           </Box>
         </Box>
       </Fade>
diff --git a/src/components/center/RenameCenterModal.tsx b/src/components/center/RenameCenterModal.tsx
index 7204a65a..fcf2c14f 100644
--- a/src/components/center/RenameCenterModal.tsx
+++ b/src/components/center/RenameCenterModal.tsx
@@ -1,26 +1,21 @@
-import React, { useState } from 'react';
+import { renameFacilitator } from '@/services/ManageUser';
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Box,
-  Typography,
-  TextField,
   Button,
-  Modal,
-  Fade,
   Divider,
+  Fade,
   IconButton,
+  Modal,
   Radio,
-  RadioGroup,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
+  TextField,
+  Typography
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { styled, useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useTheme, styled } from '@mui/material/styles';
-import { showToastMessage } from '../Toastify';
-import { renameFacilitator } from '@/services/ManageUser';
 import { useRouter } from 'next/router';
+import React, { useState } from 'react';
+import { showToastMessage } from '../Toastify';
 
 interface CreateBlockModalProps {
   open: boolean;
diff --git a/src/components/form/NumberInputField.tsx b/src/components/form/NumberInputField.tsx
index 59467dc0..412f66c2 100644
--- a/src/components/form/NumberInputField.tsx
+++ b/src/components/form/NumberInputField.tsx
@@ -1,23 +1,23 @@
 import { TextField, useTheme } from '@mui/material';
-import React, { useState } from 'react';
-
+import { useState } from 'react';
 
 const NumberInputField = (props: any) => {
-  const theme = useTheme<any>();
   const { onChange, ...rest } = props;
-
-  const [error, setError] = useState("");
+  const [error, setError] = useState('');
 
   console.log('NumberInputField', props);
   const handleChange = (event: any) => {
     const value = event.target.value;
 
-    const regex = props?.schema?.maxLength ? new RegExp(`^\\d{0,${props.schema.maxLength}}$`) : /^\d*$/;
+    const regex = props?.schema?.maxLength
+      ? new RegExp(`^\\d{0,${props.schema.maxLength}}$`)
+      : /^\d*$/;
 
-    if (regex.test(value)) { // Allow only up to 10 digits
-      if (props?.schema?.maxLength ) {
+    if (regex.test(value)) {
+      // Allow only up to 10 digits
+      if (props?.schema?.maxLength) {
         if (value.length === props.schema.maxLength) {
-          setError(""); // Clear any existing error
+          setError(''); // Clear any existing error
           onChange(Number(value));
         } else {
           setError(`Must be exactly ${props.schema.maxLength} digits`);
@@ -34,18 +34,18 @@ const NumberInputField = (props: any) => {
     //   onChange={handleChange}
     // />
     <>
-    <TextField
-      {...rest}
-      id={props.schema.name}
-      label={props.schema.title}
-      type="number"
-      InputLabelProps={{
-        shrink: true,
-      }}
-      onChange={handleChange}
+      <TextField
+        {...rest}
+        id={props.schema.name}
+        label={props.schema.title}
+        type="number"
+        InputLabelProps={{
+          shrink: true,
+        }}
+        onChange={handleChange}
       />
-    <p color={'red'}>{error}</p>
-      </>
+      <p color={'red'}>{error}</p>
+    </>
   );
 };
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index c4712022..137c1c15 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import * as React from 'react';
 
-import { Button, Container } from '@mui/material';
+import { Button } from '@mui/material';
 import {
   Experimental_CssVarsProvider as CssVarsProvider,
   useColorScheme,
@@ -14,21 +14,21 @@ import {
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initGA, logPageView } from '../utils/googleAnalytics';
 
-import type { AppProps } from 'next/app';
-import Box from '@mui/material/Box';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
-import Head from 'next/head';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import { Poppins } from 'next/font/google';
-import { ToastContainer } from 'react-toastify';
 import { UserConfig, appWithTranslation } from 'next-i18next';
-import customTheme from '../styles/customTheme';
-import { telemetryFactory } from '../utils/telemetry';
-import { useEffect } from 'react';
+import type { AppProps } from 'next/app';
+import { Poppins } from 'next/font/google';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { ToastContainer } from 'react-toastify';
 import { fullWidthPages } from '../../app.config';
 import nextI18NextConfig from '../../next-i18next.config.js';
+import customTheme from '../styles/customTheme';
+import { telemetryFactory } from '../utils/telemetry';
 
 const queryClient = new QueryClient();
 const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
@@ -70,7 +70,7 @@ export function DarkTheme() {
 
 function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  const isFullWidthPage =  fullWidthPages.includes(router.pathname);
+  const isFullWidthPage = fullWidthPages.includes(router.pathname);
   useEffect(() => {
     telemetryFactory.init();
   }, []);
@@ -148,7 +148,7 @@ function App({ Component, pageProps }: AppProps) {
               width: !isFullWidthPage ? 'calc(100% - 22rem)' : '100%',
               marginLeft: !isFullWidthPage ? '351px' : '0',
             },
-            '@media (min-width: 1600px)': {
+            '@media (min-width: 2000px)': {
               width: '100%',
               marginLeft: !isFullWidthPage ? '351px' : '0',
             },
diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
index 92eb1bc3..93d2c4f4 100644
--- a/src/pages/attendance-history.tsx
+++ b/src/pages/attendance-history.tsx
@@ -1,9 +1,10 @@
 import {
-  AttendanceParams,
-  AttendancePercentageProps,
-  AttendanceStatusListProps,
-  cohort,
-} from '../utils/Interfaces';
+  debounce,
+  getTodayDate,
+  handleKeyDown,
+  shortDateFormat,
+  toPascalCase,
+} from '@/utils/Helper';
 import {
   Box,
   Button,
@@ -16,41 +17,40 @@ import {
 } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  debounce,
-  getTodayDate,
-  handleKeyDown,
-  shortDateFormat,
-  toPascalCase,
-} from '@/utils/Helper';
+  AttendanceParams,
+  AttendancePercentageProps,
+  AttendanceStatusListProps,
+  cohort,
+  cohortMemberList
+} from '../utils/Interfaces';
 
-import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
 import AttendanceStatus from '@/components/AttendanceStatus';
 import AttendanceStatusListView from '@/components/AttendanceStatusListView';
-import ClearIcon from '@mui/icons-material/Clear';
 import CohortSelectionSection from '@/components/CohortSelectionSection';
-import Header from '../components/Header';
-import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import Loader from '../components/Loader';
 import MarkBulkAttendance from '@/components/MarkBulkAttendance';
 import MonthCalender from '@/components/MonthCalender';
-import ReactGA from 'react-ga4';
-import SearchIcon from '@mui/icons-material/Search';
-import SortingModal from '../components/SortingModal';
-import { Status } from '@/utils/app.constant';
+import { showToastMessage } from '@/components/Toastify';
 import UpDownButton from '@/components/UpDownButton';
-import { accessControl } from '../../app.config';
-import { attendanceStatusList } from '../services/AttendanceService';
-import { calculatePercentage } from '@/utils/attendanceStats';
-import { cohortMemberList } from '../utils/Interfaces';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import { Status } from '@/utils/app.constant';
+import { calculatePercentage } from '@/utils/attendanceStats';
 import { logEvent } from '@/utils/googleAnalytics';
+import withAccessControl from '@/utils/hoc/withAccessControl';
+import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
+import ClearIcon from '@mui/icons-material/Clear';
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import SearchIcon from '@mui/icons-material/Search';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { showToastMessage } from '@/components/Toastify';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'next-i18next';
-import withAccessControl from '@/utils/hoc/withAccessControl';
+import ReactGA from 'react-ga4';
+import { accessControl } from '../../app.config';
+import Header from '../components/Header';
+import Loader from '../components/Loader';
+import SortingModal from '../components/SortingModal';
+import { attendanceStatusList } from '../services/AttendanceService';
 
 interface user {
   memberStatus: string;
@@ -79,7 +79,6 @@ const UserAttendanceHistory = () => {
   const [modalOpen, setModalOpen] = React.useState(false);
   const [bulkAttendanceStatus, setBulkAttendanceStatus] = React.useState('');
   const [status, setStatus] = useState('');
-  const [center, setCenter] = useState('');
   const [openMarkAttendance, setOpenMarkAttendance] = useState(false);
   const handleMarkAttendanceModal = () =>
     setOpenMarkAttendance(!openMarkAttendance);
@@ -94,7 +93,6 @@ const UserAttendanceHistory = () => {
   const searchRef = useRef<HTMLDivElement>(null);
 
   const pathname = usePathname();
-  // let userId: string;
   const currentDate = getTodayDate();
 
   const handleOpen = () => {
@@ -108,8 +106,8 @@ const UserAttendanceHistory = () => {
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const token = localStorage.getItem('token');
-      setClassId(localStorage.getItem('classId') || '');
-      const classId = localStorage.getItem('classId') || '';
+      setClassId(localStorage.getItem('classId') ?? '');
+      const classId = localStorage.getItem('classId') ?? '';
       localStorage.setItem('cohortId', classId);
       setLoading(false);
       if (token) {
@@ -202,7 +200,7 @@ const UserAttendanceHistory = () => {
               };
               const res = await attendanceStatusList(attendanceStatusData);
               const response = res?.data?.attendanceList;
-              if (nameUserIdArray && response) {
+              if (response) {
                 const getUserAttendanceStatus = (
                   nameUserIdArray: any[],
                   response: any[]
@@ -231,7 +229,7 @@ const UserAttendanceHistory = () => {
                   response
                 );
 
-                if (nameUserIdArray && userAttendanceArray) {
+                if (userAttendanceArray) {
                   const mergeArrays = (
                     nameUserIdArray: {
                       userId: string;
@@ -305,10 +303,6 @@ const UserAttendanceHistory = () => {
     console.log(status);
   }, [status]);
 
-  // useEffect(() => {
-  //   localStorage.setItem('activeStartDate', activeStartDate.toISOString());
-  // }, [activeStartDate]);
-
   useEffect(() => {
     handleSelectedDateChange(selectedDate);
   }, []);
@@ -317,15 +311,6 @@ const UserAttendanceHistory = () => {
     setSelectedDate(date);
   };
 
-  const formatDate = (date: Date | null | undefined) => {
-    if (!date) {
-      return '';
-    }
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
 
   const getAllDatesInRange = (startDate: string, endDate: string): string[] => {
     const datesArray: string[] = [];
@@ -388,13 +373,6 @@ const UserAttendanceHistory = () => {
     }
   };
 
-  const handleSearchFocus = () => {
-    const scrollSearchBox = searchRef.current;
-    if (scrollSearchBox) {
-      scrollSearchBox.scrollIntoView({ block: 'start', behavior: 'smooth' });
-    }
-  };
-
   const handleSearchSubmit = () => {
     const filteredList = cohortMemberList?.filter((user: any) =>
       user.name.toLowerCase().includes(searchWord.toLowerCase())
@@ -490,8 +468,6 @@ const UserAttendanceHistory = () => {
     setDisplayStudentList(updatedAttendanceList);
   };
 
-  const hadleScroolDown = () => {};
-
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const handleScrollDown = () => {
@@ -651,7 +627,6 @@ const UserAttendanceHistory = () => {
                         background: theme.palette.warning.A700,
                         boxShadow: 'none',
                       }}
-                      onFocus={hadleScroolDown}
                     >
                       <InputBase
                         ref={inputRef}
diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx
index e88169b6..b003359c 100644
--- a/src/pages/attendance-overview.tsx
+++ b/src/pages/attendance-overview.tsx
@@ -1,23 +1,10 @@
 'use client';
 
-import {
-  Box,
-  Button,
-  Grid,
-  IconButton,
-  InputBase,
-  Paper,
-  Stack,
-  Typography,
-} from '@mui/material';
-import React, { useEffect, useRef, useState } from 'react';
-import { accessControl, lowLearnerAttendanceLimit } from './../../app.config';
 import {
   classesMissedAttendancePercentList,
   getAllCenterAttendance,
   getCohortAttendance,
 } from '@/services/AttendanceService';
-import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces';
 import {
   debounce,
   formatSelectedDate,
@@ -27,38 +14,50 @@ import {
   sortClassesMissed,
   toPascalCase,
 } from '@/utils/Helper';
+import { CohortAttendancePercentParam, cohort } from '@/utils/Interfaces';
+import {
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  InputBase,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { accessControl, lowLearnerAttendanceLimit } from './../../app.config';
 
-import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
-import ClearIcon from '@mui/icons-material/Clear';
 import CohortAttendanceListView from '@/components/CohortAttendanceListView';
 import CohortSelectionSection from '@/components/CohortSelectionSection';
 import DateRangePopup from '@/components/DateRangePopup';
 import Header from '@/components/Header';
-import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import StudentsStatsList from '@/components/LearnerAttendanceStatsListView';
 import LearnerListHeader from '@/components/LearnerListHeader';
 import Loader from '@/components/Loader';
 import OverviewCard from '@/components/OverviewCard';
-import ReactGA from 'react-ga4';
-import SearchIcon from '@mui/icons-material/Search';
 import SortingModal from '@/components/SortingModal';
-import StudentsStatsList from '@/components/LearnerAttendanceStatsListView';
+import { showToastMessage } from '@/components/Toastify';
 import UpDownButton from '@/components/UpDownButton';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
 import { logEvent } from '@/utils/googleAnalytics';
+import withAccessControl from '@/utils/hoc/withAccessControl';
+import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
+import ClearIcon from '@mui/icons-material/Clear';
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import SearchIcon from '@mui/icons-material/Search';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { showToastMessage } from '@/components/Toastify';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'next-i18next';
-import withAccessControl from '@/utils/hoc/withAccessControl';
+import ReactGA from 'react-ga4';
 
 interface AttendanceOverviewProps {
   //   buttonText: string;
 }
 
 const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
-  const router = useRouter();
   const { t } = useTranslation();
   const { push } = useRouter();
   const today = new Date();
@@ -116,8 +115,8 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const token = localStorage.getItem('token');
-      setClassId(localStorage.getItem('classId') || '');
-      const class_Id = localStorage.getItem('classId') || '';
+      setClassId(localStorage.getItem('classId') ?? '');
+      const class_Id = localStorage.getItem('classId') ?? '';
       localStorage.setItem('cohortId', class_Id);
 
       setLoading(false);
@@ -131,7 +130,6 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
 
   useEffect(() => {
     const getAttendanceMarkedDays = async () => {
-      // const today = new Date();
       const todayFormattedDate = formatSelectedDate(new Date());
       const lastSeventhDayDate = new Date(
         today.getTime() - 6 * 24 * 60 * 60 * 1000
@@ -152,7 +150,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
       } else {
         setDateRange(`(${startDay} ${startDayMonth}-${endDay} ${endDayMonth})`);
       }
-      const cohortAttendanceData: cohortAttendancePercentParam = {
+      const cohortAttendanceData: CohortAttendancePercentParam = {
         limit: 0,
         page: 0,
         filters: {
@@ -234,7 +232,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
                 present_percent: resp[userId]?.present_percentage || '0',
                 absent_percent: resp[userId]?.absent_percentage || '0',
               }));
-              if (nameUserIdArray && filteredData) {
+              if (filteredData) {
                 let mergedArray = filteredData.map((attendance) => {
                   const user = nameUserIdArray.find(
                     (user: { userId: string }) =>
@@ -272,7 +270,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
         }
         if (classId) {
           const cohortAttendancePercent = async () => {
-            const cohortAttendanceData: cohortAttendancePercentParam = {
+            const cohortAttendanceData: CohortAttendancePercentParam = {
               limit: 0,
               page: 0,
               filters: {
@@ -286,8 +284,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
             };
             const res = await getCohortAttendance(cohortAttendanceData);
             const response = res?.data?.result;
-            const contextData =
-              response?.contextId && response?.contextId[classId];
+            const contextData = response?.contextId?.[classId];
             if (contextData?.present_percentage) {
               const presentPercentage = contextData?.present_percentage;
               setPresentPercentage(presentPercentage);
@@ -340,7 +337,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
             const nameIDAttendanceArray = results
               .filter(
                 (result) =>
-                  !result.error && result.data && result.data.contextId
+                  !result.error && result?.data?.contextId
               )
               .map((result) => {
                 const cohortId = result.cohortId;
@@ -483,10 +480,6 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
       label: 'Back Button Clicked',
     });
   };
-  const truncate = (str: string, length: number) => {
-    if (str.length <= length) return str;
-    return str.slice(0, length) + '...';
-  };
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
diff --git a/src/pages/center-session.tsx b/src/pages/center-session.tsx
index d5d91afe..8e896bb4 100644
--- a/src/pages/center-session.tsx
+++ b/src/pages/center-session.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 
 import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import Loader from '../components/Loader';
 import { Session } from '../utils/Interfaces';
 import SessionCardFooter from '@/components/SessionCardFooter';
 import SessionsCard from '@/components/SessionCard';
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
index 017c1568..0ebce89b 100644
--- a/src/pages/centers/[cohortId].tsx
+++ b/src/pages/centers/[cohortId].tsx
@@ -1,3 +1,4 @@
+import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper';
 import {
   Button,
   IconButton,
@@ -7,42 +8,41 @@ import {
   Typography,
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper';
 
-import AddIcon from '@mui/icons-material/Add';
 import AddLearnerModal from '@/components/AddLeanerModal';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import Box from '@mui/material/Box';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CenterSessionModal from '@/components/CenterSessionModal';
 import CohortFacilitatorList from '@/components/CohortFacilitatorList';
 import CohortLearnerList from '@/components/CohortLearnerList';
-import { CustomField } from '@/utils/Interfaces';
-import DeleteCenterModal from '@/components/center/DeleteCenterModal';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import DeleteSession from '@/components/DeleteSession';
-import { GetStaticPaths } from 'next';
 import Header from '@/components/Header';
-import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PlannedSession from '@/components/PlannedSession';
-import ReactGA from 'react-ga4';
-import RenameCenterModal from '@/components/center/RenameCenterModal';
-import Schedule from './../../components/Schedule';
-import { Session } from '../../utils/Interfaces';
 import SessionCard from '@/components/SessionCard';
 import SessionCardFooter from '@/components/SessionCardFooter';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
 import WeekCalender from '@/components/WeekCalender';
+import DeleteCenterModal from '@/components/center/DeleteCenterModal';
+import RenameCenterModal from '@/components/center/RenameCenterModal';
 import { getCohortDetails } from '@/services/CohortServices';
 import { getSessions } from '@/services/Sessionservice';
 import manageUserStore from '@/store/manageUserStore';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useRouter } from 'next/router';
+import { CustomField } from '@/utils/Interfaces';
+import AddIcon from '@mui/icons-material/Add';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import { useTheme } from '@mui/material/styles';
+import { GetStaticPaths } from 'next';
 import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
+import ReactGA from 'react-ga4';
+import { Session } from '../../utils/Interfaces';
+import Schedule from './../../components/Schedule';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx
index a5f85eaf..cd1c8fff 100644
--- a/src/pages/centers/index.tsx
+++ b/src/pages/centers/index.tsx
@@ -1,43 +1,39 @@
+import { getCohortList } from '@/services/CohortServices';
+import { accessGranted, toPascalCase } from '@/utils/Helper';
+import { cohort } from '@/utils/Interfaces';
 import {
   Box,
   Button,
   FormControl,
   Grid,
   InputAdornment,
-  MenuItem,
-  Select,
   Tab,
   Tabs,
   TextField,
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import FilterModalCenter from '../blocks/components/FilterModalCenter';
-import { accessGranted, toPascalCase } from '@/utils/Helper';
-import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces';
-import { cohortList, getCohortList } from '@/services/CohortServices';
 
-import AddIcon from '@mui/icons-material/Add';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import CreateCenterModal from '@/components/center/CreateCenterModal';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Header from '@/components/Header';
-import Image from 'next/image';
 import Loader from '@/components/Loader';
 import ManageUser from '@/components/ManageUser';
-import { Role } from '@/utils/app.constant';
-import SearchIcon from '@mui/icons-material/Search';
-import SmartDisplayOutlinedIcon from '@mui/icons-material/SmartDisplayOutlined';
-import { accessControl } from '../../../app.config';
-import building from '../../assets/images/apartment.png';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { setTimeout } from 'timers';
 import { showToastMessage } from '@/components/Toastify';
-import { useRouter } from 'next/router';
+import CreateCenterModal from '@/components/center/CreateCenterModal';
+import teamLeadStore from '@/store/mangageTLStore';
 import useStore from '@/store/store';
+import { Role } from '@/utils/app.constant';
+import { ArrowDropDown, Search } from '@mui/icons-material';
+import AddIcon from '@mui/icons-material/Add';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import SmartDisplayOutlinedIcon from '@mui/icons-material/SmartDisplayOutlined';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { ArrowDropDown, Search } from '@mui/icons-material';
-import teamLeadStore from '@/store/mangageTLStore';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { setTimeout } from 'timers';
+import { accessControl } from '../../../app.config';
+import building from '../../assets/images/apartment.png';
 
 const TeachingCenters = () => {
   const [loading, setLoading] = useState(false);
@@ -154,7 +150,7 @@ const TeachingCenters = () => {
             console.log(blockData);
             setBlockData(blockData);
 
-            const cohortData = response.map((res: any) => {
+            response.map((res: any) => {
               const centerData = res?.childData.map((child: any) => {
                 const cohortName = child.name;
                 const cohortId = child.cohortId;
@@ -248,7 +244,8 @@ const TeachingCenters = () => {
                   {block.blockName}
                   {block?.district && (
                     <Box textAlign={'left'} fontSize={'16px'}>
-                      {block.district}, {toPascalCase(block.state)}
+                      {toPascalCase(block?.district)},{' '}
+                      {toPascalCase(block?.state)}
                     </Box>
                   )}
                 </Box>
@@ -402,8 +399,11 @@ const TeachingCenters = () => {
                 onCenterAdded={handleCenterAdded}
               />
               <Box
-                className="linerGradient"
-                sx={{ borderRadius: '16px', mt: 2 }}
+                sx={{
+                  borderRadius: '16px',
+                  mt: 2,
+                  background: theme.palette.action.selected,
+                }}
                 padding={'10px 16px 2px'}
               >
                 {accessGranted(
@@ -594,7 +594,6 @@ const TeachingCenters = () => {
                   accessControl,
                   userRole
                 ) &&
-                  cohortsData &&
                   cohortsData?.map((cohort: any) => {
                     return (
                       <React.Fragment key={cohort?.cohortId}>
diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
new file mode 100644
index 00000000..a1b4e1e8
--- /dev/null
+++ b/src/pages/course-planner.tsx
@@ -0,0 +1,223 @@
+import Header from '@/components/Header';
+import {
+  Box,
+  FormControl,
+  Grid,
+  IconButton,
+  InputBase,
+  MenuItem,
+  Paper,
+  Select,
+  Tab,
+  Tabs,
+  Typography,
+} from '@mui/material';
+import React from 'react';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import SearchIcon from '@mui/icons-material/Search';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+
+const CoursePlanner = () => {
+  const [value, setValue] = React.useState(1);
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleScrollDown = () => {
+    if (inputRef.current) {
+      const inputRect = inputRef.current.getBoundingClientRect();
+      const scrollMargin = 20;
+      const scrollY = window.scrollY;
+      const targetY = inputRect.top + scrollY - scrollMargin;
+      window.scrollTo({ top: targetY - 70, behavior: 'smooth' });
+    }
+  };
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box minHeight={'100vh'}>
+      <Box>
+        <Header />
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'left',
+          alignItems: 'center',
+          color: '#4D4639',
+          padding: '20px 20px 5px',
+        }}
+        width={'100%'}
+      >
+        <Typography textAlign={'left'} fontSize={'22px'}>
+          {t('COURSE_PLANNER.COURSE_PLANNER')}
+        </Typography>
+      </Box>
+
+      <Grid sx={{ display: 'flex', alignItems: 'center' }} container>
+        <Grid item md={6} xs={12}>
+          <Box sx={{ mt: 2, px: '20px' }}>
+            <Box sx={{ flexBasis: '70%' }}>
+              <FormControl className="drawer-select" sx={{ width: '100%' }}>
+                <Select
+                  className="SelectLanguages"
+                  displayEmpty
+                  style={{
+                    borderRadius: '0.5rem',
+                    color: theme.palette.warning['200'],
+                    width: '100%',
+                    marginBottom: '0rem',
+                  }}
+                >
+                  <MenuItem className="text-truncate">
+                    Khapari Dharmu (Chimur, Chandrap {/* will come from API */}
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </Box>
+          </Box>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <Box sx={{ mt: 2, px: '20px' }}>
+            <Paper
+              component="form"
+              className="100"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                borderRadius: '100px',
+                background: theme.palette.warning.A700,
+                boxShadow: 'none',
+              }}
+            >
+              <InputBase
+                ref={inputRef}
+                sx={{ ml: 3, flex: 1, mb: '0', fontSize: '14px' }}
+                placeholder={t('COMMON.SEARCH_STUDENT') + '..'}
+                inputProps={{ 'aria-label': 'search student' }}
+                onClick={handleScrollDown}
+              />
+              <IconButton type="button" sx={{ p: '10px' }} aria-label="search">
+                <SearchIcon />
+              </IconButton>
+            </Paper>
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Box sx={{ mt: 2 }}>
+        <Box sx={{ width: '100%' }}>
+          <Tabs
+            value={value}
+            onChange={handleChange}
+            textColor="inherit"
+            aria-label="secondary tabs example"
+            sx={{
+              fontSize: '14px',
+              borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
+
+              '& .MuiTab-root': {
+                color: '#4D4639',
+                padding: '0 20px',
+              },
+              '& .Mui-selected': {
+                color: '#4D4639',
+              },
+              '& .MuiTabs-indicator': {
+                display: 'flex',
+                justifyContent: 'center',
+                backgroundColor: theme.palette.primary.main,
+                borderRadius: '100px',
+                height: '3px',
+              },
+              '& .MuiTabs-scroller': {
+                overflowX: 'unset !important',
+              },
+            }}
+          >
+            <Tab value={1} label={t('COURSE_PLANNER.FOUNDATION_COURSE')} />
+            <Tab value={2} label={t('COURSE_PLANNER.MAIN_COURSE')} />
+          </Tabs>
+        </Box>
+        {value === 1 && (
+          <Box sx={{ px: '16px', mt: 2 }}>
+            <Box
+              sx={{
+                background: theme.palette.action.selected,
+                padding: '14px',
+                borderRadius: '8px',
+              }}
+            >
+              <Box
+                sx={{
+                  border: `1px solid ${theme.palette.warning.A100}`,
+                  borderRadius: '8px',
+                  padding: '12px',
+                  cursor: 'pointer',
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Box>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        gap: '15px',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <Box sx={{ width: '40px', height: '40px' }}>
+                        {/* <CircularProgressbar
+                          value={50}
+                          strokeWidth={12}
+                          styles={buildStyles({
+                            pathColor: '#06A816',
+                            trailColor: '#E2D9CC',
+                            strokeLinecap: 'round',
+                            textColor: theme.palette.warning['300'],
+                          })}
+                        /> */}
+                      </Box>
+                      <Box
+                        sx={{
+                          fontSize: '16px',
+                          color: theme.palette.warning['300'],
+                        }}
+                      >
+                        Mathematics {/*  will come form API */}
+                      </Box>
+                    </Box>
+                  </Box>
+                  <Box>
+                    <KeyboardArrowRightIcon
+                      sx={{ color: theme.palette.warning['300'] }}
+                    />
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  };
+}
+export default CoursePlanner;
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index b461ac24..1068eaaa 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -1,66 +1,55 @@
 'use client';
 
-import {
-  AttendancePercentageProps,
-  cohort,
-  cohortAttendancePercentParam,
-  cohortMemberList,
-} from '../utils/Interfaces';
 import { Box, Button, Grid, Stack, Typography } from '@mui/material';
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import { format, isAfter, isValid, parse, startOfDay } from 'date-fns';
 import React, { useEffect } from 'react';
-import { accessControl, lowLearnerAttendanceLimit } from './../../app.config';
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import {
   classesMissedAttendancePercentList,
   getAllCenterAttendance,
   getCohortAttendance,
 } from '../services/AttendanceService';
-import { format, isAfter, isValid, parse, startOfDay } from 'date-fns';
 import {
   formatSelectedDate,
   getTodayDate,
   shortDateFormat,
   toPascalCase,
 } from '../utils/Helper';
+import {
+  AttendancePercentageProps,
+  CohortAttendancePercentParam,
+  cohort,
+  cohortMemberList,
+} from '../utils/Interfaces';
+import { accessControl, lowLearnerAttendanceLimit } from './../../app.config';
 
-
-import ArrowForwardSharpIcon from '@mui/icons-material/ArrowForwardSharp';
+import AttendanceComparison from '@/components/AttendanceComparison';
 import CohortSelectionSection from '@/components/CohortSelectionSection';
-import Divider from '@mui/material/Divider';
 import GuideTour from '@/components/GuideTour';
-import Header from '../components/Header';
-import Image from 'next/image';
-import Link from 'next/link';
-import Loader from '../components/Loader';
 import MarkBulkAttendance from '@/components/MarkBulkAttendance';
 import OverviewCard from '@/components/OverviewCard';
-import ReactGA from 'react-ga4';
+import { showToastMessage } from '@/components/Toastify';
 import WeekCalender from '@/components/WeekCalender';
-import { calculatePercentage } from '@/utils/attendanceStats';
-import calendar from '../assets/images/calendar.svg';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import { calculatePercentage } from '@/utils/attendanceStats';
 import { logEvent } from '@/utils/googleAnalytics';
-import { modifyAttendanceLimit } from '../../app.config';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { showToastMessage } from '@/components/Toastify';
-import { useCohortList } from '@/services/queries';
-import useDeterminePathColor from '../hooks/useDeterminePathColor';
-import { useRouter } from 'next/navigation';
+import withAccessControl from '@/utils/hoc/withAccessControl';
+import ArrowForwardSharpIcon from '@mui/icons-material/ArrowForwardSharp';
+import Divider from '@mui/material/Divider';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import withAccessControl from '@/utils/hoc/withAccessControl';
-import AttendanceComparison from '@/components/AttendanceComparison';
-
-// import { Role } from '@/utils/app.constant';
-// import { accessControl } from '../../app.config';
-
-// import useStore from '@/store/store';
-// const store = useStore();
-// const userRole: string = store.userRole;
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import ReactGA from 'react-ga4';
+import { modifyAttendanceLimit } from '../../app.config';
+import calendar from '../assets/images/calendar.svg';
+import Header from '../components/Header';
+import Loader from '../components/Loader';
+import useDeterminePathColor from '../hooks/useDeterminePathColor';
 
-interface DashboardProps {
-  //   buttonText: string;
-}
+interface DashboardProps {}
 
 const Dashboard: React.FC<DashboardProps> = () => {
   const { t } = useTranslation();
@@ -97,7 +86,6 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const formattedSevenDaysAgo = shortDateFormat(sevenDaysAgo);
   const [userId, setUserId] = React.useState<string | null>(null);
   const [blockName, setBlockName] = React.useState<string>('');
-  
 
   useEffect(() => {
     setIsClient(true);
@@ -132,7 +120,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const token = localStorage.getItem('token');
       const storedUserId = localStorage.getItem('userId');
-      setClassId(localStorage.getItem('classId') || '');
+      setClassId(localStorage.getItem('classId') ?? '');
       if (token) {
         setIsAuthenticated(true);
       } else {
@@ -142,10 +130,6 @@ const Dashboard: React.FC<DashboardProps> = () => {
     }
   }, []);
 
-  const limit = 0;
-  const page = 0;
-  const filters = { userId: userId || '' };
-
   //API for getting student list
   useEffect(() => {
     const getCohortMemberList = async () => {
@@ -188,7 +172,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                   absent: resp[userId].absent,
                   present_percent: resp[userId].present_percentage,
                 }));
-                if (nameUserIdArray && filteredData) {
+                if (filteredData) {
                   let mergedArray = filteredData.map((attendance) => {
                     const user = nameUserIdArray.find(
                       (user: { userId: string }) =>
@@ -224,7 +208,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
           }
           if (classId) {
             const cohortAttendancePercent = async () => {
-              const cohortAttendanceData: cohortAttendancePercentParam = {
+              const cohortAttendanceData: CohortAttendancePercentParam = {
                 limit: 0,
                 page: 0,
                 filters: {
@@ -238,8 +222,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
               };
               const res = await getCohortAttendance(cohortAttendanceData);
               const response = res?.data?.result;
-              const contextData =
-                response?.contextId && response?.contextId[classId];
+              const contextData = response?.contextId?.[classId];
               if (contextData?.present_percentage) {
                 const presentPercent = contextData?.present_percentage;
                 setCohortPresentPercentage(presentPercent);
@@ -290,10 +273,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
               console.log('Fetched data:', results);
 
               const nameIDAttendanceArray = results
-                .filter(
-                  (result) =>
-                    !result?.error && result?.data && result?.data?.contextId
-                )
+                .filter((result) => !result?.error && result?.data?.contextId)
                 .map((result) => {
                   const cohortId = result?.cohortId;
                   const contextData = result?.data?.contextId[cohortId] || {};
@@ -572,7 +552,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                           <WeekCalender
                             showDetailsHandle={showDetailsHandle}
                             data={percentageAttendanceData}
-                            disableDays={classId === 'all' ? true : false}
+                            disableDays={classId === 'all'}
                             classId={classId}
                           />
                         </Box>
@@ -893,9 +873,9 @@ const Dashboard: React.FC<DashboardProps> = () => {
                     </Box>
                   </Box>
                 </Box>
-                <Box  p={2}>
-                      <AttendanceComparison />
-                    </Box>
+                <Box p={2}>
+                  <AttendanceComparison />
+                </Box>
                 {/* <Box sx={{ background: '#fff' }}>
             <Typography
               textAlign={'left'}
diff --git a/src/pages/learner-attendance-history.tsx b/src/pages/learner-attendance-history.tsx
index 7a418ee8..a204ca49 100644
--- a/src/pages/learner-attendance-history.tsx
+++ b/src/pages/learner-attendance-history.tsx
@@ -3,21 +3,21 @@ import React, { useEffect, useState } from 'react';
 
 import AttendanceStatus from '@/components/AttendanceStatus';
 import Header from '@/components/Header';
-import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import { LearnerAttendanceProps } from '@/utils/Interfaces';
 import Loader from '@/components/Loader';
 import MarkAttendance from '@/components/MarkAttendance';
 import MonthCalender from '@/components/MonthCalender';
-import { accessControl } from '../../app.config';
+import { showToastMessage } from '@/components/Toastify';
 import { getLearnerAttendanceStatus } from '@/services/AttendanceService';
-import { logEvent } from '@/utils/googleAnalytics';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { shortDateFormat } from '@/utils/Helper';
-import { showToastMessage } from '@/components/Toastify';
-import { useRouter } from 'next/router';
+import { LearnerAttendanceProps } from '@/utils/Interfaces';
+import { logEvent } from '@/utils/googleAnalytics';
+import withAccessControl from '@/utils/hoc/withAccessControl';
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import withAccessControl from '@/utils/hoc/withAccessControl';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
+import { accessControl } from '../../app.config';
 
 type LearnerAttendanceData = {
   [date: string]: {
@@ -37,7 +37,6 @@ const LearnerAttendanceHistory = () => {
 
   const [loading, setLoading] = React.useState(false);
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
   const [open, setOpen] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [attendanceUpdated, setAttendanceUpdated] = useState(false);
@@ -95,8 +94,8 @@ const LearnerAttendanceHistory = () => {
     const getAttendanceStatus = async () => {
       setLoading(true);
       try {
-        const classId = localStorage.getItem('classId') || '';
-        const userId = localStorage.getItem('learnerId') || '';
+        const classId = localStorage.getItem('classId') ?? '';
+        const userId = localStorage.getItem('learnerId') ?? '';
         if (
           classId !== '' &&
           classId !== undefined &&
@@ -235,7 +234,7 @@ const LearnerAttendanceHistory = () => {
         isSelfAttendance={false}
         currentStatus={
           learnerAttendance?.[shortDateFormat(selectedDate)]
-            ?.attendanceStatus || ''
+            ?.attendanceStatus ?? ''
         }
         handleClose={handleModalClose}
         onAttendanceUpdate={() => setAttendanceUpdated(!attendanceUpdated)}
diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx
index 94ab3e5f..0ca959de 100644
--- a/src/pages/learner/[userId].tsx
+++ b/src/pages/learner/[userId].tsx
@@ -33,8 +33,8 @@ import {
 import {
   LearnerData,
   UserData,
-  cohortAttendancePercentParam,
-  updateCustomField,
+  CohortAttendancePercentParam,
+  UpdateCustomField,
 } from '@/utils/Interfaces';
 import Menu, { MenuProps } from '@mui/material/Menu';
 import React, { useEffect, useState } from 'react';
@@ -68,7 +68,7 @@ import { useTranslation } from 'next-i18next';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 import { accessControl } from '../../../app.config';
 
-// import { UserData, updateCustomField } from '../utils/Interfaces';
+// import { UserData, UpdateCustomField } from '../utils/Interfaces';
 
 interface QuestionValue {
   question: string;
@@ -107,7 +107,7 @@ const LearnerProfile: React.FC = () => {
   const [test, setTest] = React.useState('Pre Test');
   const [subject, setSubject] = React.useState('English');
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [customFieldsData, setCustomFieldsData] = useState<updateCustomField[]>(
+  const [customFieldsData, setCustomFieldsData] = useState<UpdateCustomField[]>(
     []
   );
   interface OverallAttendance {
@@ -320,14 +320,12 @@ const LearnerProfile: React.FC = () => {
             ? selectedOption.label
             : field.value
               ? toPascalCase(field.value)
-              : "-",
+              : '-',
         };
       }
       return {
         ...field,
-        displayValue: field.value
-          ? toPascalCase(field.value)
-          : "-",
+        displayValue: field.value ? toPascalCase(field.value) : '-',
       };
     });
 
@@ -753,7 +751,7 @@ const LearnerProfile: React.FC = () => {
         setDateRange(`(${startDay} ${startDayMonth}-${endDay} ${endDayMonth})`);
       }
 
-      const cohortAttendanceData: cohortAttendancePercentParam = {
+      const cohortAttendanceData: CohortAttendancePercentParam = {
         limit: 0,
         page: 0,
         filters: {
@@ -1530,10 +1528,7 @@ const LearnerProfile: React.FC = () => {
                       <FormControl fullWidth>
                         <InputLabel id={`select-label-${field.fieldId}`}>
                           {field?.label &&
-                            t(
-                              `FORM.${field.label.toUpperCase()}`,
-                              field.label
-                            )}
+                            t(`FORM.${field.label.toUpperCase()}`, field.label)}
                         </InputLabel>
                         <Select
                           error={isError}
@@ -1542,10 +1537,7 @@ const LearnerProfile: React.FC = () => {
                           value={fieldValue}
                           label={
                             field?.label &&
-                            t(
-                              `FORM.${field.label.toUpperCase()}`,
-                              field.label
-                            )
+                            t(`FORM.${field.label.toUpperCase()}`, field.label)
                           }
                           onChange={(e) =>
                             handleDropdownChange(field.fieldId, e.target.value)
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 664aa132..c1f84683 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,3 +1,4 @@
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -6,32 +7,30 @@ import {
   InputAdornment,
   TextField,
 } from '@mui/material';
-import React, { useEffect, useRef, useState } from 'react';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactGA from 'react-ga4';
 
+import { showToastMessage } from '@/components/Toastify';
+import useStore from '@/store/store';
+import { logEvent } from '@/utils/googleAnalytics';
+import { telemetryFactory } from '@/utils/telemetry';
 import Checkbox from '@mui/material/Checkbox';
-import Image from 'next/image';
-import Loader from '../components/Loader';
+import Link from '@mui/material/Link';
 import MenuItem from '@mui/material/MenuItem';
-import appLogo from '../../public/images/appLogo.png';
-import config from '../../config.json';
-import { getUserId } from '../services/ProfileService';
-import { login } from '../services/LoginService';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { telemetryFactory } from '@/utils/telemetry';
-import { logEvent } from '@/utils/googleAnalytics';
-import { showToastMessage } from '@/components/Toastify';
-import Link from '@mui/material/Link';
-import useStore from '@/store/store';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import config from '../../config.json';
+import appLogo from '../../public/images/appLogo.png';
+import Loader from '../components/Loader';
+import { login } from '../services/LoginService';
+import { getUserId } from '../services/ProfileService';
 
 const LoginPage = () => {
   const { t } = useTranslation();
-  const store = useStore();
   const setUserRole = useStore(
     (state: { setUserRole: any }) => state.setUserRole
   );
@@ -140,7 +139,7 @@ const LoginPage = () => {
             type: 'CLICK',
             subtype: '',
             pageid: 'sign-in',
-            uid: localStorage.getItem('userId') || 'Anonymous',
+            uid: localStorage.getItem('userId') ?? 'Anonymous',
           },
         };
         telemetryFactory.interact(telemetryInteract);
diff --git a/src/pages/unauthorized.tsx b/src/pages/unauthorized.tsx
index 6d127c3e..d4edf53b 100644
--- a/src/pages/unauthorized.tsx
+++ b/src/pages/unauthorized.tsx
@@ -40,7 +40,6 @@ const Unauthorized = () => {
       >
         {t('COMMON.YOU_DONT_HAVE_PERMISSION_TO_ACCESS_THIS_PAGE')}
       </Typography>
-
     </Box>
   );
 };
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
index a2397559..2772d652 100644
--- a/src/pages/user-profile/[userId].tsx
+++ b/src/pages/user-profile/[userId].tsx
@@ -18,7 +18,7 @@ import {
   Typography,
   useMediaQuery,
 } from '@mui/material';
-import { CustomField, UserDatas, updateCustomField } from '@/utils/Interfaces';
+import { CustomField, UserDatas, UpdateCustomField } from '@/utils/Interfaces';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { editEditUser, getUserDetails } from '@/services/ProfileService';
 import { useTheme, withStyles } from '@mui/material/styles';
@@ -660,8 +660,7 @@ const TeacherProfile = () => {
                             sx={{ wordBreak: 'break-word' }}
                             color={theme.palette.warning['500']}
                           >
-                            {item?.label &&
-                              t(`FORM.${item.label}`, item.label)}
+                            {item?.label && t(`FORM.${item.label}`, item.label)}
                           </Typography>
                           <Box
                             mt={2}
@@ -714,16 +713,16 @@ const TeacherProfile = () => {
                             letterSpacing={'0.5px'}
                             color={theme.palette.warning['500']}
                           >
-                            {item?.label &&
-                              t(`FORM.${item.label}`, item.label)}
-                          </Typography>  {/* No of cluster */}
+                            {item?.label && t(`FORM.${item.label}`, item.label)}
+                          </Typography>{' '}
+                          {/* No of cluster */}
                           <Typography
                             variant="h4"
                             margin={0}
                             color={theme.palette.warning.A200}
                             sx={{ wordBreak: 'break-word' }}
                           >
-                            {item.value ? toPascalCase(item.value): "-"}
+                            {item.value ? toPascalCase(item.value) : '-'}
                           </Typography>
                         </Grid>
                       );
@@ -747,7 +746,9 @@ const TeacherProfile = () => {
                             color={theme.palette.warning.A200}
                             sx={{ wordBreak: 'break-word' }}
                           >
-                            {item.value? toPascalCase(getLabelForValue(item, item.value)): "-"}{' '}
+                            {item.value
+                              ? toPascalCase(getLabelForValue(item, item.value))
+                              : '-'}{' '}
                             {/* apply elipses/ truncating here */}
                           </Typography>
                         </Grid>
diff --git a/src/services/AssesmentService.ts b/src/services/AssesmentService.ts
index ed415ee1..a50a8b1b 100644
--- a/src/services/AssesmentService.ts
+++ b/src/services/AssesmentService.ts
@@ -1,5 +1,5 @@
 import {
-  assesmentListServiceParam,
+  AssessmentListServiceParam,
   gerDoIdServiceParam,
 } from '@/utils/Interfaces';
 import { post } from './RestClient';
@@ -8,7 +8,7 @@ export const AssesmentListService = async ({
   sort,
   pagination,
   filters,
-}: assesmentListServiceParam): Promise<any> => {
+}: AssessmentListServiceParam): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_TRACKING_API_URL}/tracking-assessment/v1/list`;
   try {
     const response = await post(apiUrl, { pagination, filters, sort });
diff --git a/src/services/AttendanceService.ts b/src/services/AttendanceService.ts
index c3dc0d4d..3007cb21 100644
--- a/src/services/AttendanceService.ts
+++ b/src/services/AttendanceService.ts
@@ -3,10 +3,10 @@ import {
   BulkAttendanceParams,
   AttendanceStatusListProps,
   AttendancePercentageProps,
-  cohortAttendancePercentParam,
+  CohortAttendancePercentParam,
   LearnerAttendanceProps,
   MarkAttendanceParams,
-  allCenterAttendancePercentParam,
+  AllCenterAttendancePercentParam,
   OverallAttendancePercentageProps,
 } from '../utils/Interfaces';
 
@@ -122,7 +122,7 @@ export const getCohortAttendance = async ({
   filters: { scope, fromDate, toDate, contextId },
   facets,
   sort,
-}: cohortAttendancePercentParam): Promise<any> => {
+}: CohortAttendancePercentParam): Promise<any> => {
   return postAttendanceList({
     limit,
     page,
@@ -137,7 +137,7 @@ export const getAllCenterAttendance = async ({
   page,
   filters: { scope, fromDate, toDate, contextId },
   facets,
-}: allCenterAttendancePercentParam): Promise<any> => {
+}: AllCenterAttendancePercentParam): Promise<any> => {
   return postAttendanceList({
     limit,
     page,
diff --git a/src/services/CohortServices.ts b/src/services/CohortServices.ts
index f8e2b10d..aa9f65d3 100644
--- a/src/services/CohortServices.ts
+++ b/src/services/CohortServices.ts
@@ -1,11 +1,11 @@
-import { cohortListParam } from '@/utils/Interfaces';
+import { CohortListParam } from '@/utils/Interfaces';
 import { get, post } from './RestClient';
 
 export const cohortList = async ({
   limit,
   page,
   filters,
-}: cohortListParam): Promise<any> => {
+}: CohortListParam): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohort/search`;
   try {
     const response = await post(apiUrl, { limit, page, filters });
diff --git a/src/services/CreateUserService.ts b/src/services/CreateUserService.ts
index 8abf6b65..d116cc62 100644
--- a/src/services/CreateUserService.ts
+++ b/src/services/CreateUserService.ts
@@ -1,5 +1,5 @@
 import { get, post } from './RestClient';
-import { createUserParam } from '../utils/Interfaces';
+import { CreateUserParam } from '../utils/Interfaces';
 
 export const getFormRead = async (
   context: string,
@@ -7,7 +7,7 @@ export const getFormRead = async (
 ): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/form/read?context=${context}&contextType=${contextType}`;
   try {
-    let response = await get(apiUrl);
+    const response = await get(apiUrl);
 
     const sortedFields = response?.data?.result.fields?.sort(
       (a: { order: string }, b: { order: string }) =>
diff --git a/src/services/ManageUser.ts b/src/services/ManageUser.ts
index d5ffd243..ace30236 100644
--- a/src/services/ManageUser.ts
+++ b/src/services/ManageUser.ts
@@ -2,7 +2,6 @@ import {
   AssignCentersToFacilitatorListParam,
   FacilitatorDeleteUserData,
   FacilitatorListParam,
-  UserData,
 } from '@/utils/Interfaces';
 import { patch, post, put } from './RestClient';
 
@@ -37,13 +36,11 @@ export const assignCentersToFacilitator = async ({
 
 export const updateFacilitator = async (
   userId: string,
-  userData: FacilitatorDeleteUserData,
+  userData: FacilitatorDeleteUserData
 ): Promise<any> => {
   const apiUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/update/${userId}`;
   try {
-    const response = await patch(
-      apiUrl,{ userData }
-    );
+    const response = await patch(apiUrl, { userData });
     return response.data.result;
   } catch (error) {
     console.error('Error in updating Facilitator', error);
@@ -53,17 +50,14 @@ export const updateFacilitator = async (
 
 export const renameFacilitator = async (
   userId: string,
-  name: string,
+  name: string
 ): Promise<any> => {
   const apiUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/cohort/update/${userId}`;
   try {
-    const response = await put(
-      apiUrl,{ name }
-    );
+    const response = await put(apiUrl, { name });
     return response.data.result;
   } catch (error) {
     console.error('Error in updating Facilitator', error);
     throw error;
   }
 };
-
diff --git a/src/services/MyClassDetailsService.ts b/src/services/MyClassDetailsService.ts
index 3f71f3ed..92c4b436 100644
--- a/src/services/MyClassDetailsService.ts
+++ b/src/services/MyClassDetailsService.ts
@@ -1,8 +1,8 @@
 import { Role, Status } from '@/utils/app.constant';
 import {
   cohortMemberList,
-  updateCohortMemberStatusParams,
-  userList,
+  UpdateCohortMemberStatusParams,
+  UserList,
 } from '../utils/Interfaces';
 import { post, put } from './RestClient';
 
@@ -31,7 +31,7 @@ export const getMyUserList = async ({
   page,
   filters,
   fields,
-}: userList): Promise<any> => {
+}: UserList): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/list`;
   try {
     const response = await post(apiUrl, {
@@ -61,7 +61,6 @@ export const getMyCohortMemberList = async ({
   return fetchCohortMemberList({ limit, page, filters: studentFilters });
 };
 
-
 export const getMyCohortFacilitatorList = async ({
   limit,
   page,
@@ -87,7 +86,7 @@ export const updateCohortMemberStatus = async ({
   memberStatus,
   statusReason,
   membershipId,
-}: updateCohortMemberStatusParams): Promise<any> => {
+}: UpdateCohortMemberStatusParams): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/update/${membershipId}`;
   try {
     const response = await put(apiUrl, {
diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx
index 6958039d..33a5e530 100644
--- a/src/styles/customTheme.tsx
+++ b/src/styles/customTheme.tsx
@@ -51,6 +51,7 @@ const customTheme = extendTheme({
           active: '#E2D9CC',
           selected: '#FBF4E4',
         },
+
         Skeleton: {
           bg: '#FFDCC2',
         },
@@ -102,6 +103,7 @@ const customTheme = extendTheme({
         action: {
           activeChannel: '#987100',
           selectedChannel: '#dba403',
+          focus: '#2E1500',
         },
       },
     },
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a8a40c88..4e04ae0d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -948,29 +948,38 @@ main {
 }
 
 .facilitator-bg {
-  background-image: url('./../assets/images/decorationBg.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+
   /* width: 140px; */
   height: 180px;
+  padding: 15px;
+  object-fit: cover;
+  background-image: url('./../assets/images/decorationBg.png');
+  background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  background-repeat: no-repeat;
-  object-fit: cover;
   border-radius: 28px;
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  padding: 15px;
 }
 
 /* To Hide the caret icon on input type number */
 input[type='number'] {
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   margin: 0;
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /* To hide the input type number arrows */
+
+.text-truncate {
+  width: 100%;
+  padding-right: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts
index 8538bddb..db02ec6c 100644
--- a/src/utils/Helper.ts
+++ b/src/utils/Helper.ts
@@ -1,7 +1,6 @@
 import { Role, Status } from './app.constant';
 
 import FingerprintJS from 'fingerprintjs2';
-import { i18n } from 'next-i18next';
 
 export const ATTENDANCE_ENUM = {
   PRESENT: 'present',
@@ -156,14 +155,14 @@ export const generateRandomString = (length: number): string => {
 };
 
 export const generateUUID = () => {
-  var d = new Date().getTime();
-  var d2 =
+  let d = new Date().getTime();
+  let d2 =
     (typeof performance !== 'undefined' &&
       performance.now &&
       performance.now() * 1000) ||
     0;
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = Math.random() * 16;
+    let r = Math.random() * 16;
     if (d > 0) {
       r = (d + r) % 16 | 0;
       d = Math.floor(d / 16);
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
index f8a06375..26bd59fa 100644
--- a/src/utils/Interfaces.ts
+++ b/src/utils/Interfaces.ts
@@ -68,7 +68,7 @@ export interface ParentIdFilter {
 
 // Define a union type for the filters
 export type Filters = UserIdFilter | ParentIdFilter;
-export interface cohortListParam {
+export interface CohortListParam {
   limit: number;
   page: number;
   filters: Filters;
@@ -84,7 +84,7 @@ export interface cohortMemberList {
   };
 }
 
-export interface userList {
+export interface UserList {
   limit: number;
   page: number;
   filters: {
@@ -143,7 +143,7 @@ export interface SessionsModalProps {
 
 export interface PlannedModalProps {
   removeModal?: () => void;
-  clickedBox?: String | null;
+  clickedBox?: string | null;
 }
 
 export interface ScheduleModalProps {
@@ -204,7 +204,7 @@ export interface LearnerAttendanceProps {
   };
 }
 
-export interface updateCustomField {
+export interface UpdateCustomField {
   options: any;
   fieldId: string;
   value: string;
@@ -233,7 +233,7 @@ export interface MarksObtainedCardProps {
   data: { question: string; mark_obtained: number; totalMarks: number }[];
 }
 
-export interface assesmentListServiceParam {
+export interface AssessmentListServiceParam {
   filters: {
     userId: string;
   };
@@ -243,11 +243,11 @@ export interface assesmentListServiceParam {
   };
   sort: {
     field: string;
-    order: String;
+    order: string;
   };
 }
 
-export interface cohortAttendancePercentParam {
+export interface CohortAttendancePercentParam {
   limit: number;
   page: number;
   filters: {
@@ -284,7 +284,7 @@ export interface CohortAttendanceListViewProps {
   attendancePercent: number;
 }
 
-export interface allCenterAttendancePercentParam {
+export interface AllCenterAttendancePercentParam {
   limit: number;
   page: number;
   filters: {
@@ -296,7 +296,7 @@ export interface allCenterAttendancePercentParam {
   facets: Array<string>;
 }
 
-export interface updateCohortMemberStatusParams {
+export interface UpdateCohortMemberStatusParams {
   memberStatus: string;
   statusReason?: string;
   membershipId: string | number;
@@ -395,12 +395,7 @@ export interface TenantCohortRoleMapping {
   roleId: string;
 }
 
-export interface CustomField {
-  fieldId: string;
-  value: string;
-}
-
-export interface createUserParam {
+export interface CreateUserParam {
   username: string;
   name: string;
   email: string;
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
index 44d6d5a3..77adc858 100644
--- a/src/utils/app.constant.ts
+++ b/src/utils/app.constant.ts
@@ -1,6 +1,7 @@
+/* eslint-disable no-unused-vars */
 export const limit: number = 300;
-export const refetchInterval: number = 5 * 60 * 1000;
-export const gcTime: number = 10 * 60 * 1000;
+export const refetchInterval: number = 5 * 60 * 1000; // 5 min
+export const gcTime: number = 10 * 60 * 1000; // 10 Min
 export const names = [
   'name',
   'age',
@@ -51,6 +52,11 @@ export enum FormContextType {
   TEAM_LEADER = 'TEAMLEADER',
 }
 
+export enum CenterType {
+  REGULAR = 'REGULAR',
+  REMOTE = 'REMOTE',
+}
+
 export enum RoleId {
   STUDENT = '493c04e2-a9db-47f2-b304-503da358d5f4',
   TEACHER = '3bde0028-6900-4900-9d05-eeb608843718',
diff --git a/src/utils/hoc/withAccessControl.tsx b/src/utils/hoc/withAccessControl.tsx
index f1c8d807..d822086b 100644
--- a/src/utils/hoc/withAccessControl.tsx
+++ b/src/utils/hoc/withAccessControl.tsx
@@ -12,7 +12,7 @@ const withAccessControl =
       const router = useRouter();
 
       useEffect(() => {
-        console.log("userRole", userRole);
+        console.log('userRole', userRole);
         if (userRole === '') {
           router.replace('/logout');
           return;
diff --git a/src/utils/schema.js b/src/utils/schema.js
index f7e3c5d2..70b0ae65 100644
--- a/src/utils/schema.js
+++ b/src/utils/schema.js
@@ -215,113 +215,108 @@ const formReadResponse = {
   ],
 };
 
-
 export const apiResponse = {
-  "formid": "a1af6b98-73d4-439f-8537-6f3a901ad462",
-  "title": "CREATE LEARNER",
-  "fields": [
+  formid: 'a1af6b98-73d4-439f-8537-6f3a901ad462',
+  title: 'CREATE LEARNER',
+  fields: [
     {
-      "hint": null,
-      "name": "name",
-      "type": "text",
-      "label": "FULL_NAME",
-      "order": "0",  // change it to number
-      "fieldId": "null",
-      "options": [],
-      "coreField": 1,
-      "dependsOn": null,
-      "maxLength": null, // need to add
-      "minLength": null,
-      "isEditable": true,
-      "isPIIField": null,
-      "validation": [
-        "characters-with-space"
-      ],
-      "placeholder": "ENTER_FULL_NAME",
-      "isMultiSelect": true, //false
-      "maxSelections": 1, //0
-      "sourceDetails": {},
-      "required": true,
-      "pattern": "^[a-z A-Z]+$"
+      hint: null,
+      name: 'name',
+      type: 'text',
+      label: 'FULL_NAME',
+      order: '0', // change it to number
+      fieldId: 'null',
+      options: [],
+      coreField: 1,
+      dependsOn: null,
+      maxLength: null, // need to add
+      minLength: null,
+      isEditable: true,
+      isPIIField: null,
+      validation: ['characters-with-space'],
+      placeholder: 'ENTER_FULL_NAME',
+      isMultiSelect: true, //false
+      maxSelections: 1, //0
+      sourceDetails: {},
+      required: true,
+      pattern: '^[a-z A-Z]+$',
     },
     {
-      "hint": null,
-      "name": "mobile",
-      "type": "text", // text
-      "label": "CONTACT_NUMBER",
-      "order": "1",
-      "fieldId": "null",
-      "options": [],
-      "coreField": 1,
-      "dependsOn": null,
-      "maxLength": 10,
-      "minLength": 10,
-      "isEditable": true,
-      "isPIIField": true,
-      "validation": [
-        "numeric"
-      ],
-      "placeholder": "ENTER_CONTACT_NUMBER",
-      "isMultiSelect": false,
-      "maxSelections": 0,
-      "sourceDetails": {},
-      "pattern": "^\\d*$",
-      "required": true
+      hint: null,
+      name: 'mobile',
+      type: 'text', // text
+      label: 'CONTACT_NUMBER',
+      order: '1',
+      fieldId: 'null',
+      options: [],
+      coreField: 1,
+      dependsOn: null,
+      maxLength: 10,
+      minLength: 10,
+      isEditable: true,
+      isPIIField: true,
+      validation: ['numeric'],
+      placeholder: 'ENTER_CONTACT_NUMBER',
+      isMultiSelect: false,
+      maxSelections: 0,
+      sourceDetails: {},
+      pattern: '^\\d*$',
+      required: true,
     },
     {
-      "label": "HOW_WAS_LEARNER_MOBILISED", //HOW_WAS_LEARNER_MOBILISED
-      "name": "mobilisation_method",
-      "type": "drop_down",
-      "coreField": 0,
-      "isEditable": true,
-      "isPIIField": null,
-      "placeholder": "",
-      "validation": [],
-      "options": [
+      label: 'HOW_WAS_LEARNER_MOBILISED', //HOW_WAS_LEARNER_MOBILISED
+      name: 'mobilisation_method',
+      type: 'drop_down',
+      coreField: 0,
+      isEditable: true,
+      isPIIField: null,
+      placeholder: '',
+      validation: [],
+      options: [
         {
-          "label": "Second Chance Alumni", //SECOND_CHANCE_ALUMNI
-          "value": "second_chance_alumni"
+          label: 'Second Chance Alumni', //SECOND_CHANCE_ALUMNI
+          value: 'second_chance_alumni',
         },
         {
-          "label": "Pratham Team Member", //PRATHAM_TEAM_MEMBER
-          "value": "pratham_team_member"
+          label: 'Pratham Team Member', //PRATHAM_TEAM_MEMBER
+          value: 'pratham_team_member',
         },
         {
-          "label": "Other",//OTHER
-          "value": "other"
-        }
+          label: 'Other', //OTHER
+          value: 'other',
+        },
       ],
-      "isMultiSelect": false, // false
-      "maxSelections": 1,
-      "hint": null,
-      "pattern": null,
-      "maxLength": null,
-      "minLength": null,
-      "fieldId": "7adad9b7-0cf2-4a48-bc60-56a80dc02107",
-      "dependsOn": false,
-      "order": "2",
-      "required": true
+      isMultiSelect: false, // false
+      maxSelections: 1,
+      hint: null,
+      pattern: null,
+      maxLength: null,
+      minLength: null,
+      fieldId: '7adad9b7-0cf2-4a48-bc60-56a80dc02107',
+      dependsOn: false,
+      order: '2',
+      required: true,
     },
     {
-      "label": "AGE", //AGE
-      "name": "age",
-      "type": "numeric", //TEXT
-      "coreField": 0,
-      "isEditable": true,
-      "isPIIField": null,
-      "placeholder": "",
-      "validation": [], //NUMERIC
-      "options": [],
-      "isMultiSelect": false,
-      "maxSelections": null,
-      "hint": null,
-      "pattern": null,
-      "maxLength": 100,
-      "minLength": 0,
-      "fieldId": "2f07caa6-61b8-4a6a-92f4-94b5596a4864",
-      "dependsOn": false,
-      "order": "3",
-      "required": true
+      label: 'AGE', //AGE
+      name: 'age',
+      type: 'numeric', //TEXT
+      coreField: 0,
+      isEditable: true,
+      isPIIField: null,
+      placeholder: '',
+      validation: [], //NUMERIC
+      options: [],
+      isMultiSelect: false,
+      maxSelections: null,
+      hint: null,
+      pattern: null,
+      maxLength: 100,
+      minLength: 0,
+      fieldId: '2f07caa6-61b8-4a6a-92f4-94b5596a4864',
+      dependsOn: false,
+      order: '3',
+      required: true,
     },
     // {
     //     "label": "Gender", //GENDER
@@ -652,8 +647,8 @@ export const apiResponse = {
     //     "dependsOn": false,
     //     "order": "11"
     // }
-  ]
-}
+  ],
+};
 
 // export const apiResponse = {
 //   result: [
diff --git a/src/utils/telemetry.js b/src/utils/telemetry.js
index a0d561eb..811648fd 100644
--- a/src/utils/telemetry.js
+++ b/src/utils/telemetry.js
@@ -1,5 +1,4 @@
 import { generateUUID, getDeviceId } from './Helper';
-import FingerprintJS from 'fingerprintjs2';
 
 const hostURL = process.env.NEXT_PUBLIC_TELEMETRY_URL;
 let CsTelemetryModule;
@@ -130,7 +129,7 @@ export const telemetryFactory = {
           type: 'Teacher',
         },
         context: {
-          type: appName ? appName : 'Standalone',
+          type: appName ?? 'Standalone',
         },
         edata,
       };
@@ -148,7 +147,7 @@ export const telemetryFactory = {
           type: 'Teacher',
         },
         context: {
-          type: appName ? appName : 'Standalone',
+          type: appName ?? 'Standalone',
         },
         edata,
       };
diff --git a/src/utils/tourGuideSteps.ts b/src/utils/tourGuideSteps.ts
index 84183ed8..ee1d6df1 100644
--- a/src/utils/tourGuideSteps.ts
+++ b/src/utils/tourGuideSteps.ts
@@ -1,4 +1,5 @@
 import { TFunction } from 'next-i18next';
+import { modifyAttendanceLimit } from '../../app.config';
 export const getSteps = (t: TFunction) => [
   {
     target: 'joyride-step-0',
@@ -22,10 +23,14 @@ export const getSteps = (t: TFunction) => [
   },
   {
     target: '.joyride-step-5',
-    content: t('GUIDE_TOUR.STEP_5'),
+    content: t('GUIDE_TOUR.STEP_5', {
+      numberOfDays: modifyAttendanceLimit + 1,
+    }),
   },
   {
     target: '.joyride-step-6',
-    content: t('GUIDE_TOUR.STEP_6'),
+    content: t('GUIDE_TOUR.STEP_6', {
+      numberOfDays: modifyAttendanceLimit + 1,
+    }),
   },
 ];