From cd551a628f0a07862846fabae140bec3e9637fd4 Mon Sep 17 00:00:00 2001
From: vaishali_k <vaishali_k@techjoomla.com>
Date: Fri, 23 Feb 2024 11:25:23 +0530
Subject: [PATCH] Issue #000 UI fixes

---
 packages/cohort/src/pages/CohortDetails.js    | 27 ++++++++++++++--
 packages/cohort/src/pages/CohortMemberList.js | 32 +++++++++++++++----
 packages/teacher-app/src/pages/Generic.js     | 13 ++++++--
 packages/teacher-app/src/pages/MyClasses.js   | 13 ++++++--
 packages/teacher-app/src/pages/TeacherHome.js | 10 +++++-
 5 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/packages/cohort/src/pages/CohortDetails.js b/packages/cohort/src/pages/CohortDetails.js
index bf398267..619e8ef5 100644
--- a/packages/cohort/src/pages/CohortDetails.js
+++ b/packages/cohort/src/pages/CohortDetails.js
@@ -38,10 +38,11 @@ const CohortDetails = ({ footerLinks, setAlert, appName }) => {
   const [selfAttendance, setSelfAttendance] = React.useState({});
   const [showModal, setShowModal] = React.useState(false);
   const [cohortDetails, setCohortDetails] = React.useState({});
+  const [cohortParentDetails, setCohortParentDetails] = React.useState(true);
   const [toggleDetails, setToggleDetails] = React.useState(true);
   const [fields, setFields] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
-  let newAvatar = localStorage.getItem("firstName");
+  let newAvatar = localStorage.getItem("fullName");
   const [userId, setUserId] = React.useState();
   const { cohortId } = useParams();
   const [attendanceStatusData, setAttendanceStatusData] = React.useState();
@@ -138,6 +139,15 @@ const CohortDetails = ({ footerLinks, setAlert, appName }) => {
     // },
   ];
 
+  let getInitials = function (string) {
+    let names = string.split(' '), initials = names[0].substring(0, 1).toUpperCase();
+    
+    if (names.length > 1) {
+        initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+};
+
   const getFieldValues = (cohortsFields) => {
     let fieldVals = [];
     cohortsFields.map((item) => {
@@ -202,6 +212,17 @@ const CohortDetails = ({ footerLinks, setAlert, appName }) => {
           getFieldValues(result[0].fields);
           setSelfAttendance(result[0]);
         }
+        const parentResult = await cohortRegistryService.getCohortDetails(
+          {
+            cohortId: result[0].parentId,
+          },
+          {
+            tenantid: process.env.REACT_APP_TENANT_ID,
+          }
+        );
+        if (parentResult.length) {
+          setCohortParentDetails(parentResult[0]);
+        }
       }
       setLoading(false);
     };
@@ -225,7 +246,7 @@ const CohortDetails = ({ footerLinks, setAlert, appName }) => {
       >
         <Layout
           _header={{
-            title: cohortDetails?.name,
+            title: cohortParentDetails?.name + ", "  + " Level " + cohortDetails?.name,
             subHeading: moment().format("hh:mm A"),
             iconComponent: (
               <Pressable>
@@ -238,7 +259,7 @@ const CohortDetails = ({ footerLinks, setAlert, appName }) => {
                     size="50px"
                   />
                 ) : (
-                  <Avatar>{newAvatar?.toUpperCase().substr(0, 2)}</Avatar>
+                  <Avatar>{getInitials(newAvatar)}</Avatar>
                 )}
               </Pressable>
             ),
diff --git a/packages/cohort/src/pages/CohortMemberList.js b/packages/cohort/src/pages/CohortMemberList.js
index 54f690a9..1bc05a2f 100644
--- a/packages/cohort/src/pages/CohortMemberList.js
+++ b/packages/cohort/src/pages/CohortMemberList.js
@@ -41,6 +41,7 @@ export default function CohortMemberList({ footerLinks, appName }) {
   const [width, height] = useWindowSize();
   const [loading, setLoading] = React.useState(true);
   const [cohortDetails, setCohortDetails] = React.useState({});
+  const [cohortParentDetails, setCohortParentDetails] = React.useState(true);
   const [attendanceStatusData, setAttendanceStatusData] = React.useState();
   let newAvatar = localStorage.getItem("firstName");
 
@@ -55,6 +56,14 @@ export default function CohortMemberList({ footerLinks, appName }) {
         },
       }
     : {};
+  let getInitials = function (string) {
+    let names = string.split(' '), initials = names[0].substring(0, 1).toUpperCase();
+    
+    if (names.length > 1) {
+        initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+  };
   useEffect(() => {
     let ignore = false;
     const getData = async () => {
@@ -124,6 +133,17 @@ export default function CohortMemberList({ footerLinks, appName }) {
           setMembers(results[0]);
         }
         setCohortDetails(results[1][0]);
+        const parentResult = await cohortRegistryService.getCohortDetails(
+          {
+            cohortId: results[1][0].parentId,
+          },
+          {
+            tenantid: process.env.REACT_APP_TENANT_ID,
+          }
+        );
+        if (parentResult.length) {
+          setCohortParentDetails(parentResult[0]);
+        }
         setLoading(false);
       }
     };
@@ -144,7 +164,7 @@ export default function CohortMemberList({ footerLinks, appName }) {
     >
       <Layout
         _header={{
-          title: cohortDetails?.name,
+          title: loading ? "" : cohortParentDetails?.name + ", "  + " Level " + cohortDetails?.name,
           subHeading: moment().format("hh:mm A"),
           iconComponent: (
             <Pressable>
@@ -157,7 +177,7 @@ export default function CohortMemberList({ footerLinks, appName }) {
                   size="50px"
                 />
               ) : (
-                <Avatar>{newAvatar?.toUpperCase().substr(0, 2)}</Avatar>
+                <Avatar>{getInitials(newAvatar)}</Avatar>
               )}
             </Pressable>
           ),
@@ -191,10 +211,10 @@ export default function CohortMemberList({ footerLinks, appName }) {
                     rounded={"lg"}
                     key={index}
                     style={{
-                      background:
-                        index % 2 === 0
-                          ? "linear-gradient(281.03deg, #FC5858 -21.15%, #F8AF5A 100.04%)"
-                          : "linear-gradient(102.88deg, #D7BEE6 -5.88%, #B143F3 116.6%)",
+                      background: "linear-gradient(315deg, #f1f2f6 0%, #c9c6c6 74%)"
+                        // index % 2 === 0
+                        //   ? "linear-gradient(281.03deg, #FC5858 -21.15%, #F8AF5A 100.04%)"
+                        //   : "linear-gradient(102.88deg, #D7BEE6 -5.88%, #B143F3 116.6%)",
                     }}
                     _text={{
                       fontSize: "md",
diff --git a/packages/teacher-app/src/pages/Generic.js b/packages/teacher-app/src/pages/Generic.js
index d9e05362..4f625c8c 100644
--- a/packages/teacher-app/src/pages/Generic.js
+++ b/packages/teacher-app/src/pages/Generic.js
@@ -45,7 +45,14 @@ function Generic({ footerLinks, appName, setAlert }) {
         },
       }
     : {};
-
+  let getInitials = function (string) {
+    let names = string.split(' '), initials = names[0].substring(0, 1).toUpperCase();
+    
+    if (names.length > 1) {
+        initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+  };
   const widgetData = [
     // {
     //   title: t("QUICK_CHECK"),
@@ -193,7 +200,7 @@ function Generic({ footerLinks, appName, setAlert }) {
                   size="50px"
                 />
               ) : (
-                <Avatar>{newAvatar?.toUpperCase().substr(0, 2)}</Avatar>
+                <Avatar>{getInitials(fullName)}</Avatar>
               )}
               {selfAttendance?.attendance ? (
                 <IconByName
@@ -248,7 +255,7 @@ function Generic({ footerLinks, appName, setAlert }) {
               uri: "https://png.pngtree.com/png-clipart/20210915/ourlarge/pngtree-user-avatar-placeholder-png-image_3918418.jpg",
             }}
           >
-            {fullName?.toUpperCase().substr(0, 2)}
+            {getInitials(fullName)}          
           </Avatar>
           <Heading size="md" textAlign="center">
             {fullName}
diff --git a/packages/teacher-app/src/pages/MyClasses.js b/packages/teacher-app/src/pages/MyClasses.js
index c6984890..97399d7d 100644
--- a/packages/teacher-app/src/pages/MyClasses.js
+++ b/packages/teacher-app/src/pages/MyClasses.js
@@ -51,6 +51,15 @@ const MyClasses = ({ footerLinks, setAlert, appName }) => {
       }
     : {};
 
+  let getInitials = function (string) {
+    let names = string.split(' '), initials = names[0].substring(0, 1).toUpperCase();
+    
+    if (names.length > 1) {
+        initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+  };
+
   React.useEffect(() => {
     capture("PAGE");
   }, []);
@@ -80,8 +89,8 @@ const MyClasses = ({ footerLinks, setAlert, appName }) => {
                   size="50px"
                 />
               ) : (
-                <Avatar>{newAvatar?.toUpperCase().substr(0, 2)}</Avatar>
-              )}
+                <Avatar>{getInitials(newAvatar)}</Avatar>
+                )}
               {selfAttendance?.attendance ? (
                 <IconByName
                   name={
diff --git a/packages/teacher-app/src/pages/TeacherHome.js b/packages/teacher-app/src/pages/TeacherHome.js
index bce0bd82..a824ff3f 100644
--- a/packages/teacher-app/src/pages/TeacherHome.js
+++ b/packages/teacher-app/src/pages/TeacherHome.js
@@ -44,6 +44,14 @@ function Home({ footerLinks, appName, setAlert }) {
         },
       }
     : {};
+  let getInitials = function (string) {
+    let names = string.split(' '), initials = names[0].substring(0, 1).toUpperCase();
+    
+    if (names.length > 1) {
+        initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+  };
 
   const widgetData = [
     {
@@ -192,7 +200,7 @@ function Home({ footerLinks, appName, setAlert }) {
                   size="50px"
                 />
               ) : (
-                <Avatar>{newAvatar?.toUpperCase().substr(0, 2)}</Avatar>
+                <Avatar>{getInitials(newAvatar)}</Avatar>
               )}
               {selfAttendance?.attendance ? (
                 <IconByName