Merge pull request #110 from AkshataKatwal16/admin

Issue PS-122 bug: resolve bugs inactive flow,  state district block selection

public/locales/en/common.json

@@ -70,7 +70,12 @@
     "SELECT_DISTRICT": "Select District",
     "SOMETHING_WENT_WRONG": "Something went wrong",
     "BLOCK_NAME_REQUIRED": "Block Name is Required",
-    "BLOCK_CODE_REQUIRED": "Code is Required"
+    "BLOCK_CODE_REQUIRED": "Code is Required",
+    "ALL_BLOCKS":"All Blocks",
+    "ALL_DISTRICTS":"All Districts",
+    "ALL_STATES":"All States",
+    "LOGOUT":"Log out"
+
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

src/components/AddNewCenters.tsx

@@ -211,4 +211,4 @@ const AddNewCenters: React.FC<AddLearnerModalProps> = ({
   );
 };
 
-export default AddNewCenters;
+export default AddNewCenters;

src/components/AreaSelection.tsx

@@ -31,6 +31,7 @@ interface DropdownBoxProps {
   selectedDistrict: string[];
   selectedBlock: string[];
   selectedCenter?: any;
+  inModal?:boolean
   handleStateChangeWrapper: (
     selectedNames: string[],
     selectedCodes: string[],
@@ -68,6 +69,7 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
   isMobile,
   isMediumScreen,
   isCenterSelection = false,
+  inModal=false,
   handleCenterChangeWrapper = () => {},
 }) => {
   const { t } = useTranslation();
@@ -96,7 +98,9 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
             tagName={t("FACILITATORS.STATE")}
             selectedCategories={selectedState}
             onCategoryChange={handleStateChangeWrapper}
-            overall={isCenterSelection ? false : true}
+            overall={!inModal}
+            defaultValue={t("COMMON.ALL_STATES")}
+
           />
         </Grid>
         <Grid item xs={12} sm={isMediumScreen ? 12 : 3}>
@@ -106,8 +110,10 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
             tagName={t("FACILITATORS.DISTRICT")}
             selectedCategories={selectedDistrict}
             onCategoryChange={handleDistrictChangeWrapper}
-            disabled={selectedState.length === 0 || selectedState[0] === ""}
-            overall={isCenterSelection ? false : true}
+            disabled={selectedState?.length === 0 || (selectedState && selectedState[0] === "")}
+            overall={!inModal}
+            defaultValue={t("COMMON.ALL_DISTRICTS")}
+
           />
         </Grid>
         <Grid item xs={12} sm={isMediumScreen ? 12 : 3}>
@@ -118,9 +124,10 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
             selectedCategories={selectedBlock}
             onCategoryChange={handleBlockChangeWrapper}
             disabled={
-              selectedDistrict.length === 0 || selectedDistrict[0] === ""
+              selectedDistrict?.length === 0 || (selectedDistrict && selectedDistrict[0] === "")
             }
-            overall={isCenterSelection ? false : true}
+            overall={!inModal}
+            defaultValue={t("COMMON.ALL_BLOCKS")}
           />
         </Grid>
         {isCenterSelection && (
@@ -132,8 +139,8 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
               selectedCategories={selectedCenter}
               onCategoryChange={handleCenterChangeWrapper}
               disabled={selectedBlock.length === 0 || selectedCenter[0] === ""}
-              overall={isCenterSelection ? false : true}
-            />
+              overall={!inModal}
+              />
           </Grid>
         )}
       </Grid>

src/components/CommonUserModal.tsx

@@ -54,7 +54,7 @@ const CommonUserModal: React.FC<UserModalProps> = ({
   const [schema, setSchema] = React.useState<any>();
   const [uiSchema, setUiSchema] = React.useState<any>();
   const [submitButtonEnable, setSubmitButtonEnable] = React.useState<boolean>(false);
-
+   const roleType=userType;
   const { t } = useTranslation();
   const [formValue, setFormValue] = useState<any>();
   const setSubmittedButtonStatus = useSubmittedButtonStore((state:any) => state.setSubmittedButtonStatus);
@@ -96,7 +96,7 @@ const CommonUserModal: React.FC<UserModalProps> = ({
     distrctFieldId,
     stateFieldId,
     dynamicFormForBlock,
-  } = useLocationState(open, onClose);
+  } = useLocationState(open, onClose, roleType);
 
   useEffect(() => {
     const getAddUserFormData = async () => {
@@ -471,6 +471,7 @@ const CommonUserModal: React.FC<UserModalProps> = ({
               allCenters={allCenters}
               selectedCenter={selectedCenter}
               handleCenterChangeWrapper={handleCenterChangeWrapper}
+              inModal={true}
             />
           </Box>)
 }

src/components/FormControl.tsx

@@ -26,6 +26,7 @@ interface MultipleSelectCheckmarksProps {
   onCategoryChange: (selectedNames: string[], selectedCodes: string[]) => void;
   disabled?: boolean;
   overall?: boolean;
+  defaultValue?:string
 }
 
 const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({
@@ -36,11 +37,14 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({
   onCategoryChange,
   disabled = false,
   overall = true,
+  defaultValue
 }) => {
+  console.log(selectedCategories.length, selectedCategories[0])
   const { t } = useTranslation();
   const handleChange = (
     event: SelectChangeEvent<typeof selectedCategories>,
   ) => {
+   // console.log(value)
     const {
       target: { value },
     } = event;
@@ -58,8 +62,13 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({
         <Select
           labelId="multiple-checkbox-label"
           id="multiple-checkbox"
-          value={selectedCategories}
-          onChange={handleChange}
+          value={
+            selectedCategories?.length === 0 || selectedCategories[0] === ""
+              ? defaultValue
+                ? [defaultValue]
+                : ""
+              : selectedCategories
+          }          onChange={handleChange}
           input={<OutlinedInput label={tagName} />}
           renderValue={(selected) => selected.join(", ")}
           MenuProps={MenuProps}

src/components/GeneratedSchemas.ts

@@ -176,6 +176,7 @@ export const GenerateSchemaAndUiSchema = (
     }
     if (isMultiSelect && type === "checkbox") {
       fieldSchema.type = "array";
+      fieldSchema.isCheckbox = true;
       fieldSchema.items = {
         type: "string",
         oneOf: options?.map((opt: FieldOption) => ({

src/components/layouts/header/Profile.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
 import FeatherIcon from "feather-icons-react";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { useTranslation } from "next-i18next";
+
 import { useRouter } from "next/router";
 import {
   Box,
@@ -10,17 +12,34 @@ import {
   List,
   ListItemText,
   Button,
+  IconButton,
   Divider,
 } from "@mui/material";
 import { Storage } from "@/utils/app.constant";
+import EditIcon from '@mui/icons-material/Edit';
+import PhoneIcon from '@mui/icons-material/Phone';
+import MailIcon from '@mui/icons-material/Mail';
+import { getUserDetails } from "@/services/UserList";
 
 const Profile = () => {
   const [anchorEl4, setAnchorEl4] = React.useState<null | HTMLElement>(null);
+  const [profileClick, setProfileClick] = React.useState<boolean>(false);
+
   const [userName, setUserName] = React.useState<string | null>("");
+  const [role, setRole] = React.useState<string | null>("");
+
+  const [mobile, setMobile] = React.useState<string | null>("");
+  const [initials, setInitials] = React.useState<string | null>("");
+
+  const [email, setEmail] = React.useState<string | null>("");
+  const { t } = useTranslation();
+
+
   const router = useRouter();
 
   const handleClick4 = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl4(event.currentTarget);
+    setProfileClick(true)
   };
 
   const handleClose4 = () => {
@@ -43,7 +62,43 @@ const Profile = () => {
 
   useEffect(() => {
     getUserName();
-  }, []);
+
+console.log(profileClick)
+    const fetchUserDetail = async () => {
+     let userId;
+     try{
+      if (typeof window !== "undefined" && window.localStorage) {
+         userId = localStorage.getItem(Storage.USER_ID);
+      }  
+      console.log(profileClick   , userId)
+
+     if(userId && profileClick)   
+      {
+        console.log("true")
+        const response=await getUserDetails(userId)
+         console.log(response.userData)
+         setMobile(response?.userData?.mobile);
+         setEmail(response?.userData?.email);
+         setRole(response?.userData?.role);
+         const initialLetters = userName?.split(' ').map(word => word[0]) .join('');   
+         if(initialLetters)
+         setInitials(initialLetters)   
+      } 
+
+
+     }
+
+     catch(error)
+  {
+    console.log(error)
+
+  }
+  }
+  fetchUserDetail();
+
+
+
+  }, [profileClick]);
 
   return (
     <>
@@ -103,41 +158,63 @@ const Profile = () => {
           },
         }}
       >
-        <Box>
-          <Box p={2} pt={0}>
-            <List
-              component="nav"
-              aria-label="secondary mailbox folder"
-              onClick={handleClose4}
-            >
-              {/* <ListItemButton>
-                <ListItemText primary="Edit Profile" />
-              </ListItemButton>
-              <ListItemButton>
-                <ListItemText primary="Account" />
-              </ListItemButton>
-              <ListItemButton>
-                <ListItemText primary="Change Password" />
-              </ListItemButton> */}
-              <ListItemButton>
-                <ListItemText primary="My Settings" />
-              </ListItemButton>
-            </List>
-          </Box>
-          <Divider />
-          <Box p={2}>
-            <Button
+      <Box sx={{ 
+    //  backgroundColor: 'ivory', 
+      padding: '20px', 
+      borderRadius: '10px', 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center'
+    }}>
+      <Box sx={{ 
+        backgroundColor: '#FFC107', 
+        padding: '10px', 
+        borderRadius: '50%', 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        marginBottom: '20px' 
+      }}>
+        <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+          {initials}
+        </Typography>
+      </Box>
+      <Typography variant="h5" sx={{ marginBottom: '10px' }}>
+        {userName}
+      </Typography>
+      <Typography variant="subtitle1" sx={{ marginBottom: '20px' }}>
+        {role}
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+        <PhoneIcon sx={{ marginRight: '10px' }} />
+        <Typography variant="body1">
+          {mobile}
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
+        <MailIcon sx={{ marginRight: '10px' }} />
+        <Typography variant="body1">
+          {email}
+        </Typography>
+      </Box>
+      <Button
               fullWidth
               variant="contained"
               color="primary"
               onClick={handleLogout}
               sx={{ fontSize: "16px" }}
             >
-              Logout
+             {t("COMMON.LOGOUT")} 
             </Button>
-          </Box>
-        </Box>
+      {/* <IconButton sx={{ marginLeft: '10px' }}>
+          <EditIcon />
+        </IconButton> */}
+    </Box>
       </Menu>
+
+
+
+
     </>
   );
 };

src/components/layouts/sidebar/MenuItems.js

@@ -10,11 +10,11 @@ import coursePannerIcon  from '../../../../public/images/event_available.svg';
 
 
 const Menuitems = [
-  {
-    title: "SIDEBAR.DASHBOARD",
-    icon: dashboardIcon,
-    href: "/dashboard",
-  },
+  // {
+  //   title: "SIDEBAR.DASHBOARD",
+  //   icon: dashboardIcon,
+  //   href: "/dashboard",
+  // },
   {
     title: "SIDEBAR.MANAGE_USERS",
     icon: userIcon,