Develop to PROD

public/locales/en/translation.json

@@ -7,16 +7,16 @@
   "LOGIN_FORGOT_PASSWORD": "FORGOT PASSWORD?",
   "LOGIN_YOUR_PASSWORD_IS_CREATED_IN_THE_FORMAT_AS_SHOWN_BELOW": "Your password is created in the format as shown below",
   "LOGIN_PASSWORD_EXAMPLE_EXPLANATION_KA": "If your name is Anish Kumar, and your date of birth is 30-12-1988, then your password will be ",
-  "LOGIN_USERNAME_EXAMPLE_EXPLANATION_KA" : "If your name is Anish Kumar, and your date of birth is 30-12-1988, then your password will be ",
+  "LOGIN_USERNAME_EXAMPLE_EXPLANATION_KA": "If your name is Anish Kumar, and your date of birth is 30-12-1988, then your password will be ",
   "LOGIN_ENTER_USER_NAME": "Enter Username",
   "LOGIN_FORGOT_USERNAME": "FORGOT USERNAME?",
   "LOGIN_YOUR_USERNAME_IS_CREATED_IN_THE_FORMAT_AS_SHOWN_BELOW": "Your username is created in the format as shown below",
   "LOGIN_USERNAME": "Username",
   "LOGIN_PASSWORD": "Password",
   "LOGIN": "LOGIN",
-  "LOGIN_INVALID_PASSWORD" : "Incorrect password",
-  "LOGIN_INVALID_USER_NAME" : "Incorrect username",
-  "LOGIN_REQUIRED_FIELD" : "This is Required Field",
+  "LOGIN_INVALID_PASSWORD": "Incorrect password",
+  "LOGIN_INVALID_USER_NAME": "Incorrect username",
+  "LOGIN_REQUIRED_FIELD": "This is Required Field",
 
   "POPUP_FIRST_TWO_LETTERS_OF_YOUR_FIRST_NAME": "First 2 letters of your first name",
   "POPUP_FIRST_TWO_LETTERS_OF_YOUR_LAST_NAME": "First 2 letters of your last name",
@@ -29,32 +29,46 @@
   "HOME_LEARN_SOMETHING_NOW": "Learn Something Now",
   "HOME_SEARCH": "Search...",
   "HOME_WATCH": "WATCH",
-  "POPUP_CONFIRM_LOGOUT" : "LOGGING OUT ?",
-  "POPUP_CONFIRM_MSG" : "Don’t worry, your progress will be saved the next time you log back in.",
-  "POPUP_LOGOUT" : "LOGOUT",
-  "HOME_NO_VIDEOS_AVAILABLE" : "No Videos Availabe to show",
-  "SEE_ALL_RESULTS" : "See all results",
-  "NO_PROGRAM_FOUND" : "No active program available at the moment. Please check back later or contact system administrator",
-  "NO_SCHOOL_FOUND" : "Your profile is not mapped to any school. Please contact system administrator.",
-  "NO_BOARD_FOUND" : "Your profile is not mapped to any board. Please contact system administrator.",
-  "NO_CLASS_FOUND" : "Your profile is not mapped to any class. Please contact system administrator.",
-  "LEADERBOARD" : "LEADERBOARD",
-  "LEADERBOARD_NAME" : "NAME",
+  "POPUP_CONFIRM_LOGOUT": "LOGGING OUT ?",
+  "POPUP_CONFIRM_MSG": "Don’t worry, your progress will be saved the next time you log back in.",
+  "POPUP_LOGOUT": "LOGOUT",
+  "HOME_NO_VIDEOS_AVAILABLE": "No Videos Availabe to show",
+  "SEE_ALL_RESULTS": "See all results",
+  "NO_PROGRAM_FOUND": "No active program available at the moment. Please check back later or contact system administrator",
+  "NO_SCHOOL_FOUND": "Your profile is not mapped to any school. Please contact system administrator.",
+  "NO_BOARD_FOUND": "Your profile is not mapped to any board. Please contact system administrator.",
+  "NO_CLASS_FOUND": "Your profile is not mapped to any class. Please contact system administrator.",
+  "LEADERBOARD": "LEADERBOARD",
+  "LEADERBOARD_NAME": "NAME",
+  "LEADERBOARD_NO_DATA": "No more data",
   "LEADERBOARD_RANK": "RANK",
-  "LEADERBOARD_COINS" : "COINS",
-  "LEADERBOARD_YOUR_COINS" : "YOUR COINS",
-  "LEADERBOARD_YOUR_RANK" : "YOUR RANK",
-  "LEADERBOARD_VIEW_HISTORY" : "View History",
-  "LEADERBOARD_COINS_HISTORY" : "Coins History",
-  "LEADERBOARD_CLOSE" : "Close",
-  "LEADERBOARD_CONIS_FOR_QUIZ" : "coins for quiz",
-  "LEADERBOARD_VIEW" : "View",
+  "LEADERBOARD_COINS": "COINS",
+  "LEADERBOARD_YOUR_COINS": "YOUR COINS",
+  "LEADERBOARD_YOUR_RANK": "YOUR RANK",
+  "LEADERBOARD_VIEW_HISTORY": "View History",
+  "LEADERBOARD_COINS_HISTORY": "Coins History",
+  "LEADERBOARD_CLOSE": "Close",
+  "LEADERBOARD_QUIZ": "quiz",
+  "LEADERBOARD_CONTENT": "content",
+  "LEADERBOARD_CONIS": "coins for",
+  "LEADERBOARD_SUBJECT": "subject completion",
+  "LEADERBOARD_VIEW": "View",
   "LEADERBOARD_HOW_YOU_STAND_WITH_OTHER": "See how you stand with others",
-  "LEADERBOARD_SCHOOL" : "School",
-  "LEADERBOARD_CLASS" : "Class",
-  "LEADERBOARD_BOARD" : "Board",
-  "LEADERBOARD_DEFAULT" : "(default)",
-  "LEADERBOARD_APPLY" : "Apply",
-  "HOME_RECENTLY_SEARCHED" : "RECENTLY SEARCHED"
-
+  "LEADERBOARD_SCHOOL": "School",
+  "LEADERBOARD_CLASS": "Class",
+  "LEADERBOARD_BOARD": "Board",
+  "LEADERBOARD_DEFAULT": "(default)",
+  "LEADERBOARD_APPLY": "Apply",
+  "HOME_RECENTLY_SEARCHED": "RECENTLY SEARCHED",
+  "TEACHER_PAGE_VIEW_YOUR_IMPACT": "View your impact!",
+  "TEACHER_OVERALL_PROGRESS": "OVERALL PROGRESS",
+  "TEACHER_STUDENT_PROGRESS": "Student Progress",
+  "TEACHER_COMPLETION_RATE": "COMPLETION RATE",
+  "TEACHER_SEARCH_STUDENT": "Search student",
+  "TEACHER_SORT": "SORT",
+  "TEACHER_A_Z": "A-Z",
+  "TEACHER_Z_A": "Z-A",
+  "TEACHER_COMPLETIOIN_RATE_HIGH": "Completion Rate (High - Low)",
+  "TEACHER_COMPLETIOIN_RATE_LOW": "Completion Rate (Low - High)",
+  "TEACHER_APPLY": "APPLY"
 }

src/App.jsx

@@ -13,6 +13,8 @@ import Loading from "./components/common/Loading";
 import customTheme from "./utils/theme";
 import FingerprintJS from "@fingerprintjs/fingerprintjs";
 import { checkUserDetails } from "./services/auth/auth";
+import teacherAuthRoutes from "./routes/teacherAuth";
+import { jwtDecode } from "jwt-decode";
 
 const theme = extendTheme(customTheme);
 
@@ -24,7 +26,13 @@ function AppRouter() {
   const navigate = useNavigate();
   useEffect(() => {
     if (token && token !== "not-logged-in") {
-      setRoutes(authRoutes);
+      const tokenDecoded = jwtDecode(token);
+      const roles = tokenDecoded?.resource_access?.["hasura-app"]?.roles;
+      if (authUser && Array.isArray(roles) && roles.includes("teacher")) {
+        setRoutes(teacherAuthRoutes);
+      } else if (authRoutes) {
+        setRoutes(authRoutes);
+      }
     } else {
       setRoutes(guestRoutes);
     }

src/components/common/ActionSheet.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, memo } from "react";
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+} from "@chakra-ui/react";
+import useDeviceSize from "./layout/useDeviceSize";
+import IconByName from "./icons/Icon";
+
+type RectComponentProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  headerComponent?: ReactNode;
+  children?: ReactNode;
+  _props?: any;
+  _header?: any;
+};
+
+const ActionSheet: React.FC<RectComponentProps> = memo(
+  ({ isOpen, onClose, headerComponent, children, _props, _header }) => {
+    const { width } = useDeviceSize();
+
+    return (
+      <Drawer isOpen={isOpen} placement="bottom" onClose={onClose}>
+        <DrawerOverlay />
+        <DrawerContent
+          roundedTop="16px"
+          {..._props}
+          width={width}
+          justifySelf="center"
+        >
+          <IconByName
+            name="CloseIcon"
+            color="primary.500"
+            alt="close"
+            cursor="pointer"
+            width="14px"
+            height="14px"
+            position="absolute"
+            right="8px"
+            top="8px"
+            onClick={onClose}
+          />
+          {headerComponent && (
+            <DrawerHeader {..._header}>{headerComponent}</DrawerHeader>
+          )}
+          <DrawerBody p="0">{children}</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+);
+
+export default ActionSheet;

src/components/common/cards/ClassCard.tsx

@@ -0,0 +1,119 @@
+import React, { memo } from "react";
+import { Box, Progress, Text, HStack, VStack } from "@chakra-ui/react";
+import IconByName from "../icons/Icon";
+import { useTranslation } from "react-i18next";
+import SubjectGrid from "./SubjectGrid";
+import { use } from "i18next";
+
+interface ClassCardProps {
+  title: boolean;
+  selectedSubject?: string | null;
+  subjectClick?: (subject: string) => void;
+  data: any;
+  onClick?: () => void;
+}
+
+const ClassCard: React.FC<ClassCardProps> = memo(
+  ({ title, data, onClick, subjectClick, selectedSubject }) => {
+    const { t } = useTranslation();
+    const [selectedSubjectNew, setSelectedSubject] = React.useState<
+      string | undefined
+    >(undefined);
+
+    React.useEffect(() => {
+      setSelectedSubject(selectedSubject || "");
+    }, [selectedSubject]);
+
+    const onSelectSubject = (subject: string) => {
+      setSelectedSubject(subject);
+      subjectClick?.(subject);
+    };
+    return (
+      <Box
+        bg="backgroundGrey"
+        borderRadius="16px"
+        padding={4}
+        boxShadow="0px 2px 4px rgba(0, 0, 0, 0.25)"
+      >
+        <Box onClick={onClick}>
+          {/* Class Header */}
+          {title && (
+            <VStack align={"stretch"}>
+              <HStack justifyContent="space-between" alignItems="center" mb={4}>
+                <Text
+                  lineHeight="21px"
+                  fontFamily="Bebas Neue"
+                  fontWeight="400"
+                  fontSize="20px"
+                >
+                  {data?.title}
+                </Text>
+                <IconByName
+                  boxSize={"20px"}
+                  name={"ChevronRightIcon"}
+                  color={"primary.500"}
+                />
+              </HStack>
+
+              <Text
+                color="#10162E99"
+                lineHeight="12px"
+                fontFamily="Inter"
+                fontWeight="500"
+                fontSize="12px"
+                borderTop={title ? "1px solid #BDBDBD" : ""}
+                pt={5}
+              >
+                {t("TEACHER_OVERALL_PROGRESS")}
+              </Text>
+
+              {/* Overall Progress Bar with Percentage */}
+              <HStack justifyContent="space-between" alignItems="center" mb={4}>
+                <Progress
+                  w={"100%"}
+                  colorScheme="progressBarGreen"
+                  bg="progressLightBG"
+                  color={"white"}
+                  size="xs"
+                  rounded={"full"}
+                  value={data?.classCompletionPercentage}
+                  isAnimated
+                />
+
+                <HStack justifyContent="center" alignItems="center" gap={0}>
+                  <Text
+                    textAlign="center"
+                    lineHeight="20px"
+                    fontFamily="Inter"
+                    fontWeight="700"
+                    fontSize="20px"
+                  >
+                    {data?.classCompletionPercentage}
+                  </Text>
+                  <Text
+                    lineHeight="20px"
+                    fontFamily="Inter"
+                    fontWeight="700"
+                    fontSize="16px"
+                    textAlign="center"
+                  >
+                    %
+                  </Text>
+                </HStack>
+              </HStack>
+            </VStack>
+          )}
+        </Box>
+        <SubjectGrid
+          subjects={data?.subjects}
+          isClickable={subjectClick ? true : false}
+          isAllSubjectPersentage={!title ? data?.classCompletionPercentage : 0}
+          selectedSubject={selectedSubjectNew}
+          onSelectSubject={onSelectSubject}
+        />
+      </Box>
+    );
+  }
+);
+
+export default ClassCard;