Merge branch 'main' of https://github.com/tekdi/shiksha-admin into co…

…hort_list
tekdi · Jul 26, 2024 · 71e424b · 71e424b
2 parents 16f4ab2 + d513247
commit 71e424b
Show file tree

Hide file tree

Showing 15 changed files with 368 additions and 208 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "next": "14.2.4",
     "next-i18next": "^15.3.0",
     "react": "^18",
+    "react-circular-progressbar": "^2.1.0",
     "react-csv-reader": "^4.0.0",
     "react-dom": "^18",
     "react-ga4": "^2.1.0",

diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx
@@ -170,7 +170,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
         if (typeof window !== "undefined" && window.localStorage) {
           const CenterList = localStorage.getItem("CenterList");
           const centerOptions = CenterList ? JSON.parse(CenterList) : [];
-          var centerOptionsList = centerOptions.map(
+          var centerOptionsList = centerOptions?.map(
             (center: { cohortId: string; cohortName: string }) => ({
               value: center.cohortId,
               label: center.cohortName,

diff --git a/src/components/FilterSearchBar.tsx b/src/components/FilterSearchBar.tsx
@@ -54,8 +54,8 @@ const FilterSearchBar: React.FC<FilterSearchBarProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
 
   return (
     <>
@@ -64,7 +64,9 @@ const FilterSearchBar: React.FC<FilterSearchBarProps> = ({
           <Typography
             variant="h1"
             sx={{
-              fontSize: isSmallScreen ? '18px' : isMediumScreen ? '32px' : '24px',
+              fontSize: "24px",
+              fontWeight: "bold",
+              mb: 2,
             }}
           >
             {t("SIDEBAR.FOUNDATION_COURSE")}
@@ -142,7 +144,7 @@ const FilterSearchBar: React.FC<FilterSearchBarProps> = ({
           <Typography
             variant="h2"
             sx={{
-              fontSize: isSmallScreen ? '18px' : isMediumScreen ? '24px' : '28px',
+              fontSize: "24px",
             }}
           >
             {card.state}
@@ -157,7 +159,8 @@ const FilterSearchBar: React.FC<FilterSearchBarProps> = ({
           >
             <CustomStepper completedSteps={card.boardsUploaded} />
             <Typography sx={{ fontSize: "14px", color: "#7C766F" }}>
-              ({card.boardsUploaded}/{card.totalBoards} {t("COURSE_PLANNER.BOARDS_FULLY_UPLOADED")})
+              ({card.boardsUploaded}/{card.totalBoards}{" "}
+              {t("COURSE_PLANNER.BOARDS_FULLY_UPLOADED")})
             </Typography>
           </Box>
         </Box>

diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
@@ -51,7 +51,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: isSmallScreen ? '90%' : isLargeScreen ? '55%' : '85%',
+    width: isSmallScreen ? '90%' : isLargeScreen ? '65%' : '85%',
     maxHeight: '80vh',
     overflowY: 'auto',
     backgroundColor: '#fff',

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -18,7 +18,7 @@ import Loader from "../components/Loader";
 import { deleteUser } from "../services/DeleteUser";
 import { getCohortList } from "../services/GetCohortList";
 import { userList } from "../services/UserList";
-
+import PersonSearchIcon from '@mui/icons-material/PersonSearch';
 type UserDetails = {
   userId: any;
   username: any;
@@ -516,8 +516,9 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
       ) : (
         loading === false &&
         data.length === 0 && (
-          <Box display="flex">
-            <Image src={glass} alt="" />
+          <Box display="flex" marginLeft="40%" gap="20px">
+            {/* <Image src={glass} alt="" /> */}
+            <PersonSearchIcon fontSize="large" />
             <Typography marginTop="10px">
               {t("COMMON.NO_USER_FOUND")}
             </Typography>

diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
@@ -82,7 +82,7 @@ const Profile = () => {
                 whiteSpace: "nowrap",
               }}
             >
-              {userName ? userName : ""}
+              {userName ?  userName.charAt(0).toUpperCase() +userName.slice(1).toLowerCase() : ""}
             </Typography>
             <FeatherIcon icon="chevron-down" size="20" />
           </Box>
@@ -107,15 +107,15 @@ const Profile = () => {
               aria-label="secondary mailbox folder"
               onClick={handleClose4}
             >
-              <ListItemButton>
+              {/* <ListItemButton>
                 <ListItemText primary="Edit Profile" />
               </ListItemButton>
               <ListItemButton>
                 <ListItemText primary="Account" />
               </ListItemButton>
               <ListItemButton>
                 <ListItemText primary="Change Password" />
-              </ListItemButton>
+              </ListItemButton> */}
               <ListItemButton>
                 <ListItemText primary="My Settings" />
               </ListItemButton>

diff --git a/src/data/cardData.js b/src/data/cardData.js
@@ -22,7 +22,7 @@ const cardData = [
   {
     id: "3",
     state: "Karnataka",
-    boardsUploaded: 4,
+    boardsUploaded: 2,
     totalBoards: 3,
     details: "Karnataka is a state in the southwestern region of India.",
     boards: ["Karnataka Board", "ICSE", "NIOS"],
@@ -41,7 +41,7 @@ const cardData = [
     id: "5",
     state: "Kerala",
     boardsUploaded: 2,
-    totalBoards: 4,
+    totalBoards: 2,
     details: "Kerala is a state on the southwestern Malabar Coast of India.",
     boards: ["Kerala Board", "ICSE", "CBSE"],
     subjects: ["Malayalam", "Science", "Maths"],

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -14,6 +14,8 @@ import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/s
 import customTheme from "../styles/customTheme";
 import "./../styles/style.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "react-circular-progressbar/dist/styles.css";
+
 function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     telemetryFactory.init();

diff --git a/src/pages/course-planner/foundation.tsx b/src/pages/course-planner/foundation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Box,
   Card,
@@ -16,6 +16,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
 import ProtectedRoute from "../../components/ProtectedRoute";
 import cardData from "@/data/cardData";
+import Loader from "@/components/Loader";
 
 const Foundation = () => {
   const router = useRouter();
@@ -24,12 +25,23 @@ const Foundation = () => {
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const isMediumScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
 
+  // State management
   const [selectedCardId, setSelectedCardId] = useState(null);
   const [grade, setGrade] = useState("");
   const [medium, setMedium] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedOption, setSelectedOption] = useState("");
   const [selectFilter, setSelectFilter] = useState("");
+  const [loading, setLoading] = useState(true); 
+  useEffect(() => {
+    const fetchData = async () => {
+      setTimeout(() => {
+        setLoading(false);
+      }, 2000);
+    };
+
+    fetchData();
+  }, []);
 
   const handleCardClick = (id: any) => {
     router.push(`/stateDetails?cardId=${id}`);
@@ -84,81 +96,79 @@ const Foundation = () => {
           onBackClick={undefined}
         />
 
-        <Box>
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: isSmallScreen
-                ? "1fr"
-                : isMediumScreen
-                  ? "1fr 2fr 1fr"
-                  : "1fr 2fr 1fr",
-              gap: isSmallScreen ? "8px" : "16px",
-              mb: 2,
-            }}
-          >
-            <Typography>{t("MASTER.STATE")}</Typography>
-            <Typography>{t("COURSE_PLANNER.ACTIVITY")}</Typography>
-            <Typography>{t("COURSE_PLANNER.COPY_LINK")}</Typography>
-          </Box>
-          {!selectedCardId ? (
-            cardData.map((card) => (
-              <Card
-                key={card.id}
-                sx={{
-                  display: "grid",
-                  gridTemplateColumns: isSmallScreen ? "1fr" : "1fr 2fr 1fr",
-                  padding: "14px",
-                  cursor: "pointer",
-                  backgroundColor:
-                    selectedCardId === card.id ? "#e0f7fa" : "white",
-                  border: "1px solid #0000001A",
-                  boxShadow: "none",
-                  transition: "background-color 0.3s",
-                  "&:hover": {
-                    backgroundColor: "#EAF2FF",
-                  },
-                  marginTop: "10px",
-                }}
-                onClick={() => handleCardClick(card.id)}
-              >
-                <Box
-                  sx={{ display: "flex", alignItems: "center", gap: "18px" }}
+        {loading ? (
+          <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
+        ) : (
+          <Box>
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: "1fr 2fr 1fr",
+                gap: isSmallScreen ? "8px" : "16px",
+                mb: 2,
+              }}
+            >
+              <Typography>{t("MASTER.STATE")}</Typography>
+              <Typography>{t("COURSE_PLANNER.ACTIVITY")}</Typography>
+              <Typography>{t("COURSE_PLANNER.COPY_LINK")}</Typography>
+            </Box>
+            {!selectedCardId ? (
+              cardData.map((card) => (
+                <Card
+                  key={card.id}
+                  sx={{
+                    display: "grid",
+                    gridTemplateColumns: "1fr 2fr 1fr",
+                    padding: "14px",
+                    cursor: "pointer",
+                    border: "1px solid #0000001A",
+                    boxShadow: "none",
+                    transition: "background-color 0.3s",
+                    "&:hover": {
+                      backgroundColor: "#EAF2FF",
+                    },
+                    marginTop: "8px",
+                  }}
+                  onClick={() => handleCardClick(card.id)}
                 >
-                  <FolderOutlinedIcon />
-                  <Typography>{card.state}</Typography>
-                </Box>
-                <Box
-                  sx={{ display: "flex", flexDirection: "column", gap: "8px" }}
-                >
-                  <CustomStepper completedSteps={card.boardsUploaded} />
-                  <Typography
-                    sx={{
-                      fontSize: isSmallScreen ? "12px" : "14px",
-                      color: "#7C766F",
-                    }}
+                  <Box
+                    sx={{ display: "flex", alignItems: "center", gap: "18px" }}
                   >
-                    ({card.boardsUploaded}/{card.totalBoards}{" "}
-                    {t("COURSE_PLANNER.BOARDS_FULLY_UPLOADED")})
-                  </Typography>
-                </Box>
-                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  <Button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleCopyLink(card.state);
-                    }}
-                    sx={{ minWidth: "auto", padding: 0 }}
+                    <FolderOutlinedIcon />
+                    <Typography>{card.state}</Typography>
+                  </Box>
+                  <Box
+                    sx={{ display: "flex", flexDirection: "column", gap: "8px" }}
                   >
-                    <InsertLinkOutlinedIcon />
-                  </Button>
-                </Box>
-              </Card>
-            ))
-          ) : (
-            <Typography>{""}</Typography>
-          )}
-        </Box>
+                    <CustomStepper completedSteps={card.boardsUploaded} />
+                    <Typography
+                      sx={{
+                        fontSize: isSmallScreen ? "12px" : "14px",
+                        color: "#7C766F",
+                      }}
+                    >
+                      ({card.boardsUploaded}/{card.totalBoards}{" "}
+                      {t("COURSE_PLANNER.BOARDS_FULLY_UPLOADED")})
+                    </Typography>
+                  </Box>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleCopyLink(card.state);
+                      }}
+                      sx={{ minWidth: "auto", padding: 0 }}
+                    >
+                      <InsertLinkOutlinedIcon />
+                    </Button>
+                  </Box>
+                </Card>
+              ))
+            ) : (
+              <Typography>{""}</Typography>
+            )}
+          </Box>
+        )}
       </>
     </ProtectedRoute>
   );