Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

src/App.css

@@ -336,3 +336,151 @@
     font-size: 22px !important;
   }
 }
+
+
+
+
+
+/* ========= [ switch BTN ============ */
+
+
+
+/* From Uiverse.io by Nawsome */ 
+.switch {
+  display: block;
+  background-color: black;
+  width: 85px;
+  height: 115px;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
+  border-radius: 5px;
+  padding: 20px;
+  perspective: 700px;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch input:checked + .button {
+  transform: translateZ(20px) rotateX(25deg);
+  box-shadow: 0 -10px 20px #ff1818;
+}
+
+.switch input:checked + .button .light {
+  animation: flicker 0.2s infinite 0.3s;
+}
+
+.switch input:checked + .button .shine {
+  opacity: 1;
+}
+
+.switch input:checked + .button .shadow {
+  opacity: 0;
+}
+
+.switch .button {
+  display: block;
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  transform-origin: center center -20px;
+  transform: translateZ(20px) rotateX(-25deg);
+  transform-style: preserve-3d;
+  background-color: #9b0621;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+  background-repeat: no-repeat;
+}
+
+.switch .button::before {
+  content: "";
+  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 50px;
+  transform-origin: top;
+  transform: rotateX(-90deg);
+  position: absolute;
+  top: 0;
+}
+
+.switch .button::after {
+  content: "";
+  background-image: linear-gradient(#650000, #320000);
+  width: 100%;
+  height: 58px;
+  transform-origin: top;
+  transform: translateY(50px) rotateX(-90deg);
+  position: absolute;
+  bottom: 0;
+  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
+}
+
+.switch .light {
+  opacity: 0;
+  animation: light-off 1s;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
+}
+
+.switch .dots {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
+  background-size: 10px 10px;
+}
+
+.switch .characters {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
+  background-repeat: no-repeat;
+}
+
+.switch .shine {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 0.3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
+  background-repeat: no-repeat;
+}
+
+.switch .shadow {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
+  background-repeat: no-repeat;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes light-off {
+  0% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0;
+  }
+}

src/Components/DummyComponent.jsx

@@ -0,0 +1,43 @@
+import { Box, Input } from "@chakra-ui/react";
+import React, { useRef, useState } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+const DummyComponent = () => {
+  // Define the state for the checkbox
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const audio = useRef();
+
+  // Function to toggle the switch
+  const handleToggle = () => {
+    setIsSwitchOn(!isSwitchOn);
+    if(audio.current){
+        console.log("hit");
+        audio.current.play();
+        console.log( audio.current);
+    }
+  };
+
+  return (
+    <Box display={"flex"} justifyContent={"right"} p={"2rem"}>
+      <label className="switch">
+        <Input
+          type="checkbox"
+          checked={isSwitchOn}
+          onChange={handleToggle} // Toggle the switch on change
+        />
+        <Box className="button">
+          <div className="light"></div>
+          <div className="dots"></div>
+          <div className="characters"></div>
+          <div className="shine"></div>
+          <div className="shadow"></div>
+        </Box>
+      </label>
+      
+      <audio ref={audio} src={audioClick} />
+    </Box>
+  );
+};
+
+export default DummyComponent;

src/Components/SwitchButton.jsx

@@ -1,9 +1,18 @@
-import { Box, Text } from '@chakra-ui/react';
-import React from 'react';
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
 
 const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  // const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const audio = useRef();
+
   const switch_onChange_handle = () => {
     setIsSwitchOn(!isSwitchOn);
+    if (audio.current) {
+      audio.current.play();
+    }
   };
 
   return (
@@ -15,7 +24,7 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
         alignItems="center"
         // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
         width="90px"
-        height="24px"
+        height="25px"
         borderRadius="20px"
         backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
         onClick={switch_onChange_handle}
@@ -24,16 +33,28 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
         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(65px)" : "translateX(0)",
+          // transition: "transform 0.2s",
+          // left:'2px'
+
           content: '""',
           position: "absolute",
-          width: "20px",
-          height: "20px",
+          height: "25px",
+          width: "25px",
+          left: "0px",
+          background:
+            "conic-gradient(rgb(104, 104, 104), white, rgb(104, 104, 104), white, rgb(104, 104, 104))",
           borderRadius: "50%",
-          backgroundColor: "#FFF",
-          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+          transitionDuration: ".3s",
+          boxShadow: " 5px 2px 7px rgba(8, 8, 8, 0.308)",
           transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
-          transition: "transform 0.2s",
-          left:'2px'
         }}
       >
         <Text
@@ -46,9 +67,10 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
           left={isSwitchOn ? "10px" : "auto"}
           right={isSwitchOn ? "auto" : "10px"}
         >
-          {isSwitchOn ? 'Active' : 'InActive'}
+          {isSwitchOn ? "Active" : "InActive"}
         </Text>
       </Box>
+      <audio ref={audio} src={audioClick} />
     </Box>
   );
 };

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -235,6 +235,9 @@ const DepositHistory = () => {
             </Box>
             <ExternalLinkIcon />
           </Link>
+          {/* <Link to="www.google.com" isExternal>
+              <Box as="span">View</Box> <ExternalLinkIcon />
+            </Link> */}
         </Badge>
         </Text>
       ),

src/Pages/Master/InvestmentType/AddInvestmentType.jsx

@@ -83,6 +83,7 @@ const AddInvestmentType = () => {
         note: investmentTypeByIdData?.data?.note,
         noteArabic: investmentTypeByIdData?.data?.noteArabic,
       });
+      setIsSwitchOn(investmentTypeByIdData?.data?.isActive)
     }
   }, [investmentTypeByIdData, reset]);
 

src/Pages/Master/Sponser/AddSponser.jsx

@@ -12,6 +12,7 @@ import ToastBox from "../../../Components/ToastBox";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import SwitchButton from "../../../Components/SwitchButton";
+import DummyComponent from "../../../Components/DummyComponent";
 
 // ======================= [validation] =========================
 
@@ -49,7 +50,7 @@ const AddSponser = () => {
   const [isLoadingBtn, setIsLoadingBtn] = useState(false);
   const [alert, setAlert] = useState(false);
   const [form, setForm] = useState();
-  const [isSwitchOn, setIsSwitchOn] = useState(true);
+  const [isSwitchOn, setIsSwitchOn] = useState();
 
   const [createSponser] = useCreateSponserMutation();
   const [updateSponser] = useUpdateSponserMutation();
@@ -57,6 +58,9 @@ const AddSponser = () => {
   // Fetch sponsor data only if id exists
   const {data: sponserByIdData,error,isLoading,} = useGetSponserByIdQuery(id, {skip: !id,});
 
+  console.log(sponserByIdData);
+  
+
   // ======================== [validators] ===========================
 
   const {
@@ -78,9 +82,15 @@ const AddSponser = () => {
         sponsorNameArabic: sponserByIdData?.data?.sponsorNameArabic,
         email: sponserByIdData?.data?.email,
       });
+      setIsSwitchOn(sponserByIdData?.data?.isActive)
+      console.log(sponserByIdData?.data?.isActive);
+      
     }
   }, [sponserByIdData, reset]);
 
+  // console.log(isSwitchOn);
+  
+
   if (false) {
     return <FullscreenLoaders />;
   }
@@ -262,9 +272,12 @@ const AddSponser = () => {
 
        {/* =====================  [Switch Button] ======================== */}
 
-       <Box mt={5} display={"flex"} justifyContent={"right"} mr={5}>
+      {/* <Box mt={5} display={"flex"} justifyContent={"right"} mr={5}>
         <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
-      </Box>
+      </Box> */}
+
+     <DummyComponent />
+
 
       {/* ====================== [Form Input] ====================== */}