update subadmin

src/Components/HeaderMain.jsx

@@ -13,8 +13,9 @@ import {
   Portal,
   Text,
   useColorMode,
+  useDisclosure,
 } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
@@ -23,6 +24,7 @@ import GlobalStateContext from "../Contexts/GlobalStateContext";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
 import logoMini from "../assets/propic.png";
 import { BsBack } from "react-icons/bs";
+import ChangePassword from "../Pages/ChangePassword";
 
 const HeaderMain = ({
   link,
@@ -35,6 +37,8 @@ const HeaderMain = ({
 }) => {
   const navigate = useNavigate();
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
 
   return (
     <Box
@@ -66,11 +70,11 @@ const HeaderMain = ({
               <PopoverBody onClick={()=> navigate('/profile')} className="web-text-medium pointer link">
                 Profile
               </PopoverBody>
-              <Link to={"/help-and-support"}>
+              <Box onClick={onOpen}>
                 <PopoverBody className="web-text-medium pointer ">
-                  Help & Support
+                  Change Password
                 </PopoverBody>
-              </Link>
+              </Box>
               <PopoverFooter
                 onClick={logOutHandler}
                 className="web-text-medium pointer link"
@@ -112,6 +116,11 @@ const HeaderMain = ({
         {/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
           {colorMode === "light"?  <MdOutlineDarkMode /> :<MdOutlineLightMode />}
         </Box> */}
+        <ChangePassword
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
       </Box>
     </Box>
   );

src/Components/RoleSwitchButton.jsx

@@ -0,0 +1,66 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  // const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+//   const audio = useRef();
+
+  const switchOnChangeHandle = () => {
+    setIsSwitchOn(!isSwitchOn);
+    // if (audio.current) {
+    //   audio.current.play();
+    // }
+  };
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Box
+        as="button"
+        display="flex"
+        justifyContent="normal"
+        alignItems="center"
+        // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
+        width="85px"
+        height="24px"
+        borderRadius="20px"
+        backgroundColor={isSwitchOn ? "#00ffcc" : "#b3ff99"}
+        onClick={switchOnChangeHandle}
+        position="relative"
+        fontSize="12px"
+        fontWeight="100"
+        transition="background-color 0.2s"
+        _before={{
+          content: '""',
+          position: "absolute",
+          width: "20px",
+          height: "20px",
+          borderRadius: "50%",
+          backgroundColor: "#fff",
+          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+          transform: isSwitchOn ? "translateX(61px)" : "translateX(0)",
+          transition: "transform 0.2s",
+          left:'2px',
+          top:'2px'
+        }}
+      >
+        <Text
+          fontWeight="500"
+          zIndex={1}
+          position="absolute"
+          mb={0}
+          color={isSwitchOn ? "#000" : "#000"}
+          left={isSwitchOn ? "10px" : "auto"}
+          right={isSwitchOn ? "auto" : "10px"}
+        >
+          {isSwitchOn ? "Maker" : "Checker"}
+        </Text>
+      </Box>
+      {/* <audio ref={audio} src={audioClick} /> */}
+    </Box>
+  );
+};
+
+export default RoleSwitchButton;