From e64342589b05292ada5c10c3f0613700cd9f045a Mon Sep 17 00:00:00 2001
From: siddheshmorewdi <siddhesh.more@wdimails.com>
Date: Fri, 5 Jul 2024 20:05:18 +0530
Subject: [PATCH] updated

---
 src/Pages/IO_Management/CreateIO/CreateIO.jsx | 156 ++++--------------
 1 file changed, 32 insertions(+), 124 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index 6bada19..a98f211 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -78,7 +78,6 @@ const schema = yup.object().shape({
   keyDescription: yup.string().required("Sponser name is required"),
   keyDescriptionArabic: yup.string().required("Sponser name is required"),
   docType: yup.string().required("Sponser name is required"),
-
   destributedAmount: yup
     .number()
     .required("Distributed Amount is required")
@@ -117,24 +116,6 @@ const years = Array.from(
 ).map((year) => ({ value: year, label: year }));
 
 const CreateIO = () => {
-  const navigate = useNavigate();
-  const { create, setCreate, sponser, setSponser, investment, setInvestment } =
-    useContext(GlobalStateContext);
-  const [bannerImageData, setBannerImageData] = useState(null);
-  const [otherImageData, setOtherImageData] = useState(null);
-  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
-  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
-  const [charges, setCharges] = useState([]);
-  const [totalCharge, setTotalCharge] = useState(0.0);
-  const [totalAmount, setTotalAmount] = useState(0.0);
-
-  const [searchTerm, setSearchTerm] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
-  const [deleteAlert, setDeleteAlert] = useState(false);
-  const [actionId, setActionId] = useState(false);
-  const [mouseEntered, setMouseEntered] = useState(false);
-  const [mouseEnteredId, setMouseEnteredId] = useState("");
-
   const {
     control,
     handleSubmit,
@@ -146,7 +127,7 @@ const CreateIO = () => {
     resolver: yupResolver(schema),
   });
 
-  const tabs = [
+  const initialTabsState = [
     {
       label: "IO Details",
       content: <IODetails control={control} errors={errors} />,
@@ -155,7 +136,7 @@ const CreateIO = () => {
     {
       label: "Investment documents",
       content: <InvestmentDocument control={control} errors={errors} />,
-      isDisabled: false,
+      isDisabled: true,
     },
     {
       label: "Key merits",
@@ -175,127 +156,49 @@ const CreateIO = () => {
     {
       label: "IO Cash Details",
       content: <IOCashDetails control={control} errors={errors} />,
-      isDisabled: true,
+      isDisabled: false,
     },
     {
       label: "IO NAV Details",
       content: <IONAVDetails control={control} errors={errors} />,
-      isDisabled: true,
-    },
-    {
-      label: "Distribution",
-      content: <Distribution control={control} errors={errors} />,
-      isDisabled: true,
+      isDisabled: false,
     },
   ];
 
+  const [tabs, setTabs] = useState(initialTabsState);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const enableNextTab = (index) => {
+    setTabs((prevTabs) => {
+      const newTabs = [...prevTabs];
+      if (index < newTabs.length - 1) {
+        newTabs[index + 1].isDisabled = false;
+        setActiveIndex(index + 1); // Switch to the next tab
+      }
+      return newTabs;
+    });
+  };
+
   useEffect(() => {
-    // Simulate loading
     const timer = setTimeout(() => {
       setIsLoading(false);
     }, 1500);
 
-    // Cleanup the timer on component unmount
     return () => clearTimeout(timer);
   }, []);
 
-  const destributedAmount = Number(watch().destributedAmount) || 0;
-
-  useEffect(() => {
-    const calculateTotalCharge = () => {
-      const totalChargeValue = charges.reduce(
-        (acc, { value }) => acc + Number(value),
-        0
-      );
-      setTotalCharge(totalChargeValue);
-    };
-
-    const calculateTotalAmount = () => {
-      const totalChargeValue = charges.reduce(
-        (acc, { value }) => acc + Number(value),
-        0
-      );
-      setTotalAmount(destributedAmount + totalChargeValue);
-    };
-
-    calculateTotalCharge();
-    calculateTotalAmount();
-  }, [charges, destributedAmount]);
-
   const onSubmit = (data) => {
-    // setValue("banner_image", selectedBannerImageData);
-    data.banner_image = selectedBannerImageData;
-    const updatedData = { ...data, status: "Available" };
-    console.log(selectedBannerImageData);
-    setInvestment([...investment, updatedData]);
-    navigate("/view-io");
-    reset();
-  };
-
-  // Extract options for the select input
-  const createOptions = create.map((item) => ({
-    value: item.sponserName,
-    label: item.sponserName,
-  }));
-
-  const handleBannerImageChange = (e) => {
-    const file = e.target.files[0];
-    setBannerImageData(file);
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setSelectedBannerImageData(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const firstField = React.useRef();
-
-  // Handler for file input
-  const handleOtherImageChange = (e) => {
-    const files = Array.from(e.target.files);
-    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
-
-    setOtherImageData(newImageData);
-
-    const readers = files.map((file) => {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          resolve(reader.result);
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-      });
-    });
-
-    Promise.all(readers)
-      .then((results) => {
-        setSelectedOtherImageData([
-          ...(selectedOtherImageData || []),
-          ...results,
-        ]); // Ensure selectedOtherImageData is an array
-      })
-      .catch((error) => {
-        console.error("Error reading files:", error);
-      });
-  };
-  // Function to remove a specific image
-  const removeOtherImage = (index) => {
-    const newImageData = otherImageData.filter((_, i) => i !== index);
-    const newSelectedImageData = selectedOtherImageData.filter(
-      (_, i) => i !== index
-    );
-
-    setOtherImageData(newImageData);
-    setSelectedOtherImageData(newSelectedImageData);
+    data.preventDefault();
+    enableNextTab(0);
   };
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
-      <Tabs mt={2}>
+      <Tabs
+        index={activeIndex }
+        onChange={(index) => setActiveIndex(index)}
+        mt={2}
+      >
         <TabList>
           {tabs.map(({ label, isDisabled }, index) => (
             <Tab
@@ -313,8 +216,13 @@ const CreateIO = () => {
         </TabList>
 
         <TabPanels>
-          {tabs.map(({ content }, index) => (
-            <TabPanel>{content}</TabPanel>
+          {tabs.map((tab, index) => (
+            <TabPanel key={index}>
+              <Button onClick={() => enableNextTab(activeIndex)} size={"xs"}>
+                Next
+              </Button>
+              {tab.content}
+            </TabPanel>
           ))}
         </TabPanels>
       </Tabs>