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

2024-07-05 12:12:13 +05:30
parent 32af3ba451 0b66d93d0f
commit 00cd046f67
10 changed files with 856 additions and 332 deletions
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -38,16 +38,21 @@ const FormField = ({
  selectedImageData,
  setSelectedImageData,
  removeImage,
-  imageData ,
+  imageData,
+  width,
  ...props
 }) => (
  <FormControl
-    w={"49%"}
+    w={width ? width : "49%"}
    isInvalid={errors[name]}
    isRequired={isRequired}
    className="mb-3"
  >
-    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"} fontWeight={'400'}>
+    <FormLabel
+      textAlign={arabic ? "right" : "left"}
+      fontSize={"sm"}
+      fontWeight={"400"}
+    >
      {label}
    </FormLabel>
    <Controller
@@ -66,8 +71,8 @@ const FormField = ({
              cursor={"pointer"}
              placeholder={placeHolder ? placeHolder : label}
              textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
-              borderRadius={'4px'}
+              _placeholder={{ fontSize: "xs" }}
+              borderRadius={"4px"}
            >
              {options.map((option, index) => (
                <option key={index} value={option.value}>
@@ -85,9 +90,9 @@ const FormField = ({
              {...props}
              placeholder={placeHolder ? placeHolder : label}
              textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
-              borderRadius={'4px'}
-              resize={'none'}
+              _placeholder={{ fontSize: "xs" }}
+              borderRadius={"4px"}
+              resize={"none"}
            />
          );
        } else if (type === "checkbox") {
@@ -201,7 +206,7 @@ const FormField = ({
          return (
            <>
              <Input
-              id={id}
+                id={id}
                {...field}
                {...props}
                multiple={multiple} // Support for multiple file uploads
@@ -225,110 +230,122 @@ const FormField = ({
                  </span>
                </FormHelperText>
              )}
-              {selectedImageData &&  (
-                multiple ? 
-                selectedImageData?.length > 0 && (
-                  <Box mt={4} width={"100%"} display="flex" flexWrap="wrap" gap={4}>
-                    {selectedImageData?.map((imageDataLink, index) => (
-                      <Box key={index} width={"100px"}>
-                        <Image
-                          rounded={"md"}
-                          objectFit={"cover"}
-                          src={imageDataLink}
-                          alt={`profile-${index}`}
-                          width={100}
-                          height={100}
-                        />
-                        <Box
-                          display={"flex"}
-                          flexDirection={"column"}
-                          position={"relative"}
-                        >
-                          <CloseIcon
-                            onClick={() => removeImage(index)}
-                            bg={"#fff"}
-                            className="link pointer"
-                            p={1}
-                            fontSize={"lg"}
-                            color={"red"}
-                            fontWeight={"500"}
-                            rounded={"md"}
-                            position={"absolute"}
-                            bottom={0}
-                            right={0}
-                          />
-                          <Text
-                            as={"span"}
-                            fontSize={"sm"}
-                            fontWeight={"500"}
-                            mt={1}
-                            isTruncated={true}
-                          >
-                            {imageData[index]?.name}
-                          </Text>
-                          <Text as={"span"} fontSize={"sm"} fontStyle={"italic"}>
-                            {(imageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
-                            mb
-                          </Text>
-                        </Box>
-                      </Box>
-                    ))}
-                    <AddIcon
-                      onClick={() =>
-                        document.getElementById(id).click()
-                      }
-                      rounded={"md"}
-                      width={50}
-                      height={50}
-                      mt={26}
-                      p={4}
-                      cursor={"pointer"}
-                      className="link"
-                    />
-                  </Box>)
-                :<Box mt={5} width={"49%"}>
-                  <Image
-                    rounded={"md"}
-                    objectFit={"cover"}
-                    src={selectedImageData}
-                    alt="profile"
-                    width={100}
-                    height={100}
-                  />
-                  <Box
-                    w={"30%"}
-                    display={"flex"}
-                    flexDirection={"column"}
-                    position={"relative"}
-                  >
-                    <CloseIcon
-                      onClick={() => setSelectedImageData(null)}
-                      className="link pointer"
-                      p={1}
-                      fontSize={"lg"}
-                      color={"red"}
-                      fontWeight={"500"}
-                      rounded={"md"}
-                      position={"absolute"}
-                      top={1}
-                      right={0}
-                    />
-                    <Text
-                      as={"span"}
-                      fontSize={"xs"}
-                      w={"70%"}
-                      fontWeight={"500"}
-                      mt={1}
-                      isTruncated={true}
+              {selectedImageData &&
+                (multiple ? (
+                  selectedImageData?.length > 0 && (
+                    <Box
+                      mt={4}
+                      width={"100%"}
+                      display="flex"
+                      flexWrap="wrap"
+                      gap={4}
                    >
-                      {imageData?.name}
-                    </Text>
-                    <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
-                      {(imageData?.size / (1024 * 1024)).toFixed(2)} mb
-                    </Text>
+                      {selectedImageData?.map((imageDataLink, index) => (
+                        <Box key={index} width={"100px"}>
+                          <Image
+                            rounded={"md"}
+                            objectFit={"cover"}
+                            src={imageDataLink}
+                            alt={`profile-${index}`}
+                            width={100}
+                            height={100}
+                          />
+                          <Box
+                            display={"flex"}
+                            flexDirection={"column"}
+                            position={"relative"}
+                          >
+                            <CloseIcon
+                              onClick={() => removeImage(index)}
+                              bg={"#fff"}
+                              className="link pointer"
+                              p={1}
+                              fontSize={"lg"}
+                              color={"red"}
+                              fontWeight={"500"}
+                              rounded={"md"}
+                              position={"absolute"}
+                              bottom={0}
+                              right={0}
+                            />
+                            <Text
+                              as={"span"}
+                              fontSize={"sm"}
+                              fontWeight={"500"}
+                              mt={1}
+                              isTruncated={true}
+                            >
+                              {imageData[index]?.name}
+                            </Text>
+                            <Text
+                              as={"span"}
+                              fontSize={"sm"}
+                              fontStyle={"italic"}
+                            >
+                              {(imageData[index]?.size / (1024 * 1024)).toFixed(
+                                2
+                              )}{" "}
+                              mb
+                            </Text>
+                          </Box>
+                        </Box>
+                      ))}
+                      <AddIcon
+                        onClick={() => document.getElementById(id).click()}
+                        rounded={"md"}
+                        width={50}
+                        height={50}
+                        mt={26}
+                        p={4}
+                        cursor={"pointer"}
+                        className="link"
+                      />
+                    </Box>
+                  )
+                ) : (
+                  <Box mt={5} width={"49%"}>
+                    <Image
+                      rounded={"md"}
+                      objectFit={"cover"}
+                      src={selectedImageData}
+                      alt="profile"
+                      width={100}
+                      height={100}
+                    />
+                    <Box
+                      w={"30%"}
+                      display={"flex"}
+                      flexDirection={"column"}
+                      position={"relative"}
+                    >
+                      <CloseIcon
+                        onClick={() => setSelectedImageData(null)}
+                        className="link pointer"
+                        p={1}
+                        fontSize={"lg"}
+                        color={"red"}
+                        fontWeight={"500"}
+                        rounded={"md"}
+                        position={"absolute"}
+                        top={1}
+                        right={0}
+                      />
+                      <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                        w={"70%"}
+                        fontWeight={"500"}
+                        mt={1}
+                        isTruncated={true}
+                      >
+                        {imageData?.name}
+                      </Text>
+                      <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                        {(imageData?.size / (1024 * 1024)).toFixed(2)} mb
+                      </Text>
+                    </Box>
                  </Box>
-                </Box>
-              )}
+                ))}
            </>
          );
        } else {
@@ -336,14 +353,14 @@ const FormField = ({
            <Input
              focusBorderColor="forestGreen.300"
              size={"sm"}
-              fontSize={'sm'}
+              fontSize={"sm"}
              type={type}
              {...field}
              {...props}
              placeholder={placeHolder ? placeHolder : label}
-              borderRadius={'4px'}
+              borderRadius={"4px"}
              textAlign={arabic ? "right" : "left"}
-              _placeholder={{fontSize:'xs'}}
+              _placeholder={{ fontSize: "xs" }}
            />
          );
        }
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -14,7 +14,7 @@ const FormInputMain = ({
  return (
    <form onSubmit={onSubmit}>
      {Object.entries(groupedFields).map(([section, fields], index) => (
-        <Box key={section} mt={4}>
+        <Box key={section} mt={4} >
          <Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
            {/* <ArrowBackIcon fontSize={'lg'} />  */}
            {section}
@@ -45,6 +45,7 @@ const FormInputMain = ({
                    options,
                    helperText,
                    multiple,
+                    width
                  },
                  key
                ) => (
@@ -67,6 +68,7 @@ const FormInputMain = ({
                    imageData={imageData}
                    handleImageChange={handleImageChange}
                    removeImage={removeImage}
+                    width={width}
                  />
                )
              )}
--- a/src/Components/FormInputView.jsx
+++ b/src/Components/FormInputView.jsx
@@ -1,13 +1,13 @@
 import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
 import React from "react";

-const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
+const FormInputView = ({ groupedFields, name,groupedFieldsTwo, errors, onSubmit, children }) => {
 
  console.log(groupedFields);

  return (
    <form>
-      {Object.entries(groupedFields).map(([section, fields], index) => (
+      {Object?.entries(groupedFields,groupedFieldsTwo).map(([section, fields], index) => (
        <Box key={section}>
          <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
            {section}
@@ -30,7 +30,7 @@ const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
              ))}
            </Box>
          </Box>
-          {index < Object.entries(groupedFields).length - 1 && <Divider />}
+          {index < Object.entries(groupedFields,groupedFieldsTwo).length - 1 && <Divider />}
        </Box>
      ))}
      {children}
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -21,6 +21,7 @@ const GlobalStateProvider = ({ children }) => {
  const [slideFromRight, setSlideFormRight] = useState(false);

  const { colorMode, toggleColorMode } = useColorMode();
+
  const [sponser, setSponser] = useState([
    {
      id: 1,
@@ -276,6 +277,51 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

+  const [create, setCreate] = useState([
+    {
+      id: 1,
+      sponserName: "John Doe",
+      sponserNameArabic:"الرجاء إدخال القيمة",
+      mobileNo: "1234567890",
+      sponserAddress: "123 Main St, Springfield, USA",
+      accountHolderName: "John Doe",
+      bankName: "Example Bank",
+      accountNumber: "1234567890",
+      bankBranch: "Main Branch",
+      branchAddress: "456 Elm St, Springfield, USA",
+      ifscCode: "IFSC12345",
+      swiftCode: "SWIFT56789",
+      routingNumber: "987654321",
+      iban: "IBAN987654321",
+      accountType: "savings",
+      bankPhoneNumber: "9876543210",
+      bankEmail: "john.doe@example.com",
+      status: true,
+      createdAt: "45",
+    },
+    {
+      id: 2,
+      sponserName: "Jane Smith",
+      sponserNameArabic:"الرجاء إدخال القيمة",
+      mobileNo: "9876543210",
+      sponserAddress: "456 Oak St, Metropolis, USA",
+      accountHolderName: "Jane Smith",
+      bankName: "Another Bank",
+      accountNumber: "0987654321",
+      bankBranch: "Downtown Branch",
+      branchAddress: "789 Pine St, Metropolis, USA",
+      ifscCode: "IFSC54321",
+      swiftCode: "SWIFT98765",
+      routingNumber: "123456789",
+      iban: "IBAN123456789",
+      accountType: "checking",
+      bankPhoneNumber: "1234567890",
+      bankEmail: "jane.smith@example.com",
+      status: false,
+      createdAt: "45",
+    },
+  ]);
+  
  const [investmentType, setInvestmentType] = useState([
    // {
    //   id: 1,
@@ -1281,6 +1327,8 @@ const GlobalStateProvider = ({ children }) => {
        setDeleteRequest,
        viewIO,
        setViewIO,
+        create,
+        setCreate,
      }}
    >
      {children}
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -12,11 +12,26 @@ import {
  Button,
  Text,
  Image,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+  TabPanels,
+  Tooltip,
+  Switch,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
+import {
+  AddIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditIcon,
+  ViewIcon,
+  WarningTwoIcon,
+} from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +39,11 @@ import FormField from "../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
 import AddIOCharges from "./AddIOCharges";
 import FormInputMain from "../../Components/FormInputMain";
+import DataTable from "../../Components/DataTable/DataTable";
+import { debounce } from "../Master/Sponser/AddSponser";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import InvestmentDocuments from "./InvestmentDocuments";

 const schema = yup.object().shape({
  ioName: yup.string().required("Arabic name is required"),
@@ -37,7 +57,6 @@ const schema = yup.object().shape({
    .string()
    .required("Investment Object name is required"),
  holdingPeriod: yup.string().required("Sponser name is required"),
-  holdingPeriodArabic: yup.string().required("Arabic name is required"),
  ioStartus: yup.string().required("Investment Object name is required"),
  ioStartusArabic: yup.string().required("Sponser name is required"),
  goalAmount: yup.string().required("Arabic name is required"),
@@ -75,11 +94,11 @@ const schema = yup.object().shape({
    .number()
    .required("Annual Yield is required")
    .positive("Must be a positive number"),
-    iconUpload: yup.mixed().required("Profile image is required"),
-    bannerImages: yup.mixed().required("Profile image is required"),
-    otherImage: yup.mixed().required("Profile image is required"),
-    docAttach: yup.mixed().required("Profile image is required"),
-    videos: yup.mixed().required("Profile image is required"),
+  iconUpload: yup.mixed().required("Profile image is required"),
+  bannerImages: yup.mixed().required("Profile image is required"),
+  otherImage: yup.mixed().required("Profile image is required"),
+  docAttach: yup.mixed().required("Profile image is required"),
+  videos: yup.mixed().required("Profile image is required"),
 });

 const startYear = 2024;
@@ -91,7 +110,7 @@ const years = Array.from(

 const CreateIO = () => {
  const navigate = useNavigate();
-  const { sponser, setSponser, investment, setInvestment } =
+  const { create, setCreate, sponser, setSponser, investment, setInvestment } =
    useContext(GlobalStateContext);
  const [bannerImageData, setBannerImageData] = useState(null);
  const [otherImageData, setOtherImageData] = useState(null);
@@ -101,6 +120,13 @@ const CreateIO = () => {
  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,
@@ -114,6 +140,95 @@ const CreateIO = () => {

  console.log(errors);

+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const tableHeadRow = [
+    "Sponser name",
+    "Address",
+    "Mobile no",
+    "Created At",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setCreate((prevCreate) =>
+      prevCreate.map((create) =>
+        create.id === id ? { ...create, status: !create.status } : create
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  const filteredData = create?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.sponserName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  const handleDelete = () => {
+    const updatedCreate = create.filter((create) => create.id !== actionId);
+
+    setTimeout(() => {
+      setSponser(updatedCreate);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const extractedArray = filteredData?.map((item) => ({
+    id: item?.id,
+    "Sponser name": (
+      <Text
+        justifyContent={"left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        "{item.sponserName}"
+      </Text>
+    ),
+    Address: (
+      <Box w={350} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          " {item.sponserAddress}"
+        </Text>
+      </Box>
+    ),
+    "Mobile no": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          "{item.mobileNo}"
+        </Text>
+      </Box>
+    ),
+
+    "Created At": (
+      <span className="d-flex justify-content-between align-items-center">
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          {formatDate(item.createdAt)}
+        </Text>
+      </span>
+    ),
+    Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
+  }));
+
+  console.log(extractedArray);
+
  const destributedAmount = Number(watch().destributedAmount) || 0;

  useEffect(() => {
@@ -148,7 +263,7 @@ const CreateIO = () => {
  };

  // Extract options for the select input
-  const sponserOptions = sponser.map((item) => ({
+  const createOptions = create.map((item) => ({
    value: item.sponserName,
    label: item.sponserName,
  }));
@@ -165,6 +280,9 @@ const CreateIO = () => {
    }
  };

+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = React.useRef();
+
  // Handler for file input
  const handleOtherImageChange = (e) => {
    const files = Array.from(e.target.files);
@@ -212,7 +330,8 @@ const CreateIO = () => {
      name: "ioName",
      type: "text",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
    },
    {
      label: "IO Name (Arabic)",
@@ -220,31 +339,35 @@ const CreateIO = () => {
      name: "ioNameArabic",
      type: "text",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
    },
    {
      label: "Description (English)",
      placeHolder: " ",
      name: "discription",
-      type: "text",
+      type: "textarea",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
    },
    {
      label: "Description (Arabic)",
      placeHolder: " ",
      name: "discriptionArabic",
-      type: "text",
+      type: "textarea",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
    },
    {
-      label: "Investment Type Name (English)",
+      label: "Investment Type (English)",
      placeHolder: " ",
      name: "typeName",
      type: "select",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
      options: [
        {
          label: "option 1",
@@ -265,12 +388,13 @@ const CreateIO = () => {
      ],
    },
    {
-      label: "Investment Type Name (Arabic)",
+      label: "Investment Type (Arabic)",
      placeHolder: " ",
      name: "typeNameArabic",
      type: "select",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
      options: [
        {
          label: "option 1",
@@ -296,99 +420,17 @@ const CreateIO = () => {
      name: "sponserName",
      type: "text",
      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Sponser Name (Arabic)",
-      placeHolder: " ",
-      name: "sponserNameArabic",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Holding Period (English)",
-      placeHolder: " ",
-      name: "holdingPeriod",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Holding Period (English)",
-      placeHolder: " ",
-      name: "holdingPeriodArabic",
-      type: "text",
-      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "IO Status (English)",
-      placeHolder: " ",
-      name: "ioStartus",
-      type: "select",
-      isRequired: true,
-      section: "create IO",
-      options: [
-        {
-          label: "option 1",
-          value: "option 1",
-        },
-        {
-          label: "option 2",
-          value: "option 2",
-        },
-        {
-          label: "option 3",
-          value: "option 3",
-        },
-        {
-          label: "option 4",
-          value: "option 4",
-        },
-      ],
-    },
-    {
-      label: "IO Status (Arabic)",
-      placeHolder: " ",
-      name: "ioStartusArabic",
-      type: "select",
-      isRequired: true,
-      section: "create IO",
-      options: [
-        {
-          label: "option 1",
-          value: "option 1",
-        },
-        {
-          label: "option 2",
-          value: "option 2",
-        },
-        {
-          label: "option 3",
-          value: "option 3",
-        },
-        {
-          label: "option 4",
-          value: "option 4",
-        },
-      ],
+      section: " ",
+      width: "49%",
    },
    {
      label: "Goal Amount (English)",
      placeHolder: " ",
      name: "goalAmount",
-      type: "number",
+      type: "Number",
      isRequired: true,
-      section: "create IO",
-    },
-    {
-      label: "Closing Date (English)",
-      placeHolder: " ",
-      name: "closingDate",
-      type: "date",
-      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "49%",
    },
    {
      label: "Minimum Investment Amount (English)",
@@ -396,7 +438,8 @@ const CreateIO = () => {
      name: "minInvestment",
      type: "number",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
    },
    {
      label: "Maximum Investment Amount (English)",
@@ -404,7 +447,17 @@ const CreateIO = () => {
      name: "maxInvestment",
      type: "number",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "number",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
    },
    {
      label: "Expected Return Estimated (English)",
@@ -412,24 +465,38 @@ const CreateIO = () => {
      name: "expectedReturn",
      type: "number",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
    },
    {
-      label: "Original Valuation (English)",
+      label: "Closing Date (English)",
      placeHolder: " ",
-      name: "originalValue",
-      type: "number",
+      name: "closingDate",
+      type: "date",
      isRequired: true,
-      section: "create IO",
+      section: " ",
+      width: "32.3%",
    },
+    {
+      label: "IO Status (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "text",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];

+  const keyMerits = [
    {
      label: "Name (English)",
      placeHolder: " ",
      name: "keyname",
      type: "text",
      isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
    },
    {
      label: "Name (Arabic)",
@@ -437,23 +504,8 @@ const CreateIO = () => {
      name: "keyNameArabic",
      type: "text",
      isRequired: true,
-      section: "Key Merits",
-    },
-    {
-      label: "Description (English)",
-      placeHolder: " ",
-      name: "keyDescription",
-      type: "textarea",
-      isRequired: true,
-      section: "Key Merits",
-    },
-    {
-      label: "Description (Arabic)",
-      placeHolder: " ",
-      name: "keyDescriptionArabic",
-      type: "textarea",
-      isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
    },
    {
      label: "Icon",
@@ -461,34 +513,60 @@ const CreateIO = () => {
      name: "iconUpload",
      type: "fileNormal",
      isRequired: true,
-      section: "Key Merits",
+      section: " ",
+      width: "32.3%",
    },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "keyDescription",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "keyDescriptionArabic",
+      type: "textarea",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];

+  const images = [
    {
      label: "Banner Images ",
      placeHolder: " ",
      name: "bannerImages",
      type: "fileNormal",
      isRequired: true,
-      section: "Images",
+      section: " ",
+      width: "32.3%",
    },

    {
-        label: "Other Images",
-        placeHolder: " ",
-        name: "otherImage",
-        type: "fileNormal",
-        isRequired: true,
-        section: "Images",
-      },
-  
+      label: "Other Images",
+      placeHolder: " ",
+      name: "otherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: " ",
+      width: "32.3%",
+    },
+  ];
+
+  const documents = [
    {
      label: "Type",
      placeHolder: " ",
      name: "docType",
      type: "text",
      isRequired: true,
-      section: "Documents",
+      section: " ",
+      width: "32.3%",
    },
    {
      label: "Attachment",
@@ -496,15 +574,20 @@ const CreateIO = () => {
      name: "type",
      type: "docAttach",
      isRequired: true,
-      section: "Documents",
+      section: " ",
+      width: "32.3%",
    },
+  ];
+
+  const Videos = [
    {
      label: "Videos",
      placeHolder: " ",
      name: "videos",
      type: "fileNormal",
      isRequired: true,
-      section: "Videos",
+      section: " ",
+      width: "32.3%",
    },
  ];

@@ -517,14 +600,178 @@ const CreateIO = () => {
    return groups;
  }, {});

+  const groupedFieldsTwo = keyMerits.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsThree = images.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsFour = documents.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const groupedFieldsFive = Videos.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <FormInputMain
-        groupedFields={groupedFields}
-        control={control}
-        errors={errors}
-        onSubmit={handleSubmit(onSubmit)}
-      ></FormInputMain>
+      <Tabs mt={4}>
+        <TabList>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Details
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investment Documents
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Key Merits
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO artifacts
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investors
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Cash detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO NAV detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Distribution
+          </Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFields}
+              control={control}
+              errors={errors}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <Box display={'flex'} justifyContent={'space-between'} mb={4}>
+              <Input
+                type="search"
+                width={300}
+                placeholder="Search..."
+                size="sm"
+                rounded="sm"
+                focusBorderColor="green.500"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              <Button leftIcon={<AddIcon />} onClick={onOpen}
+                size={"sm"}
+                // width={"44.5%"}
+                fontSize={'xs'}
+                rounded={"sm"}
+                colorScheme='green'
+              >
+                 Add
+              </Button>
+              <InvestmentDocuments isOpen={isOpen} onClose={onClose} firstField={firstField} />
+            </Box>
+            <DataTable
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              isLoading={isLoading}
+              viewActionId={actionId}
+              setViewActionId={setActionId}
+              // totalPages={10}
+
+              setMouseEnteredId={setMouseEnteredId}
+              setMouseEntered={setMouseEntered}
+            />
+            <CustomAlertDialog
+              onClose={() => setDeleteAlert(false)}
+              isOpen={deleteAlert}
+              message={"Are you sure you want to delete sponers?"}
+              alertHandler={handleDelete}
+              isLoading={isLoading}
+            />
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsThree}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsFour}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel>
+            <FormInputMain
+              width={"23.8%"}
+              groupedFields={groupedFieldsFive}
+              control={control}
+              errors={errors}
+              onSubmit={handleSubmit(onSubmit)}
+            ></FormInputMain>
+          </TabPanel>
+          <TabPanel></TabPanel>
+        </TabPanels>
+      </Tabs>
    </Box>
  );
 };
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -0,0 +1,122 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  Stack,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import FormInputMain from "../../Components/FormInputMain";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+export const investmentDoct = yup.object().shape({
+  type: yup.string().required("Sponser name is required"),
+  document: yup.string().required("Sponser name is required"),
+  fileName: yup.string().required("Mobile no is required"),
+});
+
+const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
+
+  const {
+    control,
+
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(investmentDoct),
+  });
+
+  const formFields = [
+    {
+      label: "Type",
+      placeHolder: " ",
+      name: "type",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+    {
+      label: "File Name",
+      name: "fileName",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+    {
+      label: "Document",
+      name: "document",
+      placeHolder: " ",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Add Details",
+      width: "100%",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const onSubmit = (data) => {
+    console.log(data);
+    setSponser([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...investmentDoct,
+    ]);
+  };
+
+  return (
+    <>
+      <Drawer 
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={onClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>Investment Documents</DrawerHeader>
+
+          <DrawerBody padding={0}>
+            <Stack>
+              <FormInputMain
+                width={"100%"}
+                groupedFields={groupedFields}
+                control={control}
+                errors={errors}
+                onSubmit={handleSubmit(onSubmit)}
+              />
+            </Stack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default InvestmentDocuments;
--- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
@@ -148,7 +148,7 @@ const ExchangeRate = () => {
    Rate: (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
+        as={"span"} 
        color={"gray.600"}
        fontWeight={"600"}
        className="d-flex align-items-center  web-text-small"
--- a/src/Pages/Master/Sponser/EditSponser.jsx
+++ b/src/Pages/Master/Sponser/EditSponser.jsx
@@ -54,73 +54,122 @@ const EditSponser = () => {
    return <Box>Loading...</Box>; // or any loading indicator
  }

+
  const formFields = [
    {
-      label: "Sponser name",
+      label: "Sponser name (English)",
+      placeHolder:" ",
      name: "sponserName",
      type: "text",
      isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
      label: "Sponser Name (Arabic)",
      name: "sponserNameArabic",
+      placeHolder:" ",
      type: "text",
      isRequired: true,
      arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
-      label: "Mobile no",
+      label: "Description (English)",
+      name: "description",
+      placeHolder:" ",
+      type: "textarea",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Description (Arabic)",
+      name: "descriptionArabic",
+      placeHolder:" ",
+      type: "textarea",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (English)",
+      name: "sponserAddress", 
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (Arabic)",
+      name: "sponserAddressArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (English)",
+      name: "bankName",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (Arabic)",
+      name: "bankNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (English)",
+      name: "accountHolderName",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (Arabic)",
+      name: "accountHolderNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Mobile Number (English)",
      name: "mobileNo",
+      placeHolder:" ",
      type: "number",
      isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
-      label: "Sponser address",
-      name: "sponserAddress",
-      type: "text",
-      isRequired: true,
-      section: "Personal Details",
-    },
-    {
-      label: "Bank name",
-      name: "bankName",
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Name",
+      label: "Account Number (English)",
      name: "accountNumber",
+      placeHolder:" ",
      type: "text",
      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
    },
    {
-      label: "SWIFT/BIC Code",
+      label: "IFSC Code (English)",
+      placeHolder:" ",
      name: "swiftCode",
      type: "text",
      isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Email",
-      name: "bankEmail",
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Email",
-      name: "bankEmail",
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
    },
  ];

+
+ 
+
  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -21,7 +21,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import DataTable from "../../../Components/DataTable/DataTable";
 import { HiDotsVertical } from "react-icons/hi";
-import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import { Link, Link as RouterLink } from "react-router-dom";
 import {
  AddIcon,
  CheckIcon,
@@ -40,7 +40,6 @@ import { debounce } from "./AddSponser";
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

 const Sponser = () => {
-  const navigate = useNavigate()
  const toast = useToast();
  const { sponser, setSponser, slideFromRight } =
    useContext(GlobalStateContext);
@@ -192,7 +191,6 @@ const Sponser = () => {
          <Button
            _hover={{ color: "green.500" }}
            // transition={"0.5s all"}
-          onClick={()=>{ navigate(`view-sponser/${item?.id}`)}}
            color="green.300"
            rounded={"sm"}
            size={"xs"}
@@ -211,7 +209,6 @@ const Sponser = () => {
          placement="top"
        >
          <Button
-          onClick={()=>{ navigate(`edit-sponser/${item?.id}`)}}
            _hover={{ color: "blue.500" }}
            // transition={"0.5s all"}
            color="blue.400"
@@ -335,6 +332,8 @@ const Sponser = () => {
        isLoading={isLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
+        // totalPages={10}
+
        setMouseEnteredId={setMouseEnteredId}
        setMouseEntered={setMouseEntered}
      />
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -22,11 +22,11 @@ const ViewSponser = () => {

  const formFields = [
    {
-      label: "Sponser name",
+      label: "Sponser name (English)",
      value: foundObject.sponserName,
      type: "text",
      isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
      label: "Sponser Name (Arabic)",
@@ -34,52 +34,92 @@ const ViewSponser = () => {
      type: "text",
      isRequired: true,
      arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
-      label: "Mobile no",
-      value: foundObject.mobileNo,
-      type: "number",
+      label: "Description (English)",
+      value: foundObject.description,
+      type: "textarea",
      isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
-      label: "Sponser address",
+      label: "Description (Arabic)",
+      value: foundObject.descriptionArabic,
+      type: "textarea",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (English)",
      value: foundObject.sponserAddress,
      type: "text",
      isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
    },
    {
-      label: "Bank name",
+      label: "Address (Arabic)",
+      value: foundObject.sponserAddressArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (English)",
      value: foundObject.bankName,
      type: "text",
      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
    },
    {
-      label: "Account Name",
+      label: "Bank Name (Arabic)",
+      value: foundObject.bankNameArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (English)",
      value: foundObject.accountNumber,
      type: "text",
      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
    },
    {
-      label: "SWIFT/BIC Code",
+      label: "Account Name (Arabic)",
+      value: foundObject.accountNumberArabic,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Mobile Number (English)",
+      value: foundObject.mobileNo,
+      type: "number",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Number (English)",
+      value: foundObject.accountNumber,
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "IFSC Code (English)",
      value: foundObject.swiftCode,
      type: "text",
      isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Email",
-      value: foundObject.bankEmail,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
    },
  ];

+
  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {