Merge pull request 'dev' (#31) from dev into main

Reviewed-on: #31
2025-01-10 13:34:54 +00:00
parent 6c2a38becb 651c775c2a
commit 35d3e07224
25 changed files with 769 additions and 412 deletions
--- a/src/Components/Banner/AddBanner.jsx
+++ b/src/Components/Banner/AddBanner.jsx
@@ -31,6 +31,7 @@ import Header from "../Header";
 import ToastBox from "../ToastBox";
 import BannerMainCard from "./BannerMainCard";

+
 const AddBanner = ({ createApi, navigateLink, title, center }) => {
  const toast = useToast();
  const navigate = useNavigate();
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -520,7 +520,7 @@ const FormField = ({
                 ps={1}
                {...field}
                {...props} size='md' colorScheme='forestGreen'>
-                  <Text as={"span"} fontSize={"sm"}>Is This Sharia Compliant</Text>
+                  <Text as={"span"} fontSize={"sm"}>Is This Shariah Compliant</Text>
                </Checkbox>
              </HStack>
            );} else{
--- a/src/Components/Pagination.jsx
+++ b/src/Components/Pagination.jsx
@@ -49,7 +49,7 @@ const Pagination = ({
          value={pageSize}
          onChange={handlePageSizeChange}
        >
-          {[15, 20, 30]?.map((size) => (
+          {[15, 20, 30, 500]?.map((size) => (
            <option key={size} value={size}>
              {size}
            </option>
--- a/src/Constants/Paginations.js
+++ b/src/Constants/Paginations.js
@@ -1,2 +1,3 @@
 export const TABLE_PAGINATION = { page: 1, size: 20 }
 export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
+export const INVESTOR_TABLE_PAGINATION = { page: 1, size: 500 }
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -148,7 +148,7 @@ const DashboardLayout = ({ isOnline }) => {
      case path.startsWith("/email"):
        return (
          <span className="d-flex align-items-end gap-2">
-            <AtSignIcon className="h4 m-0" /> Email Notifiation
+            <AtSignIcon className="h4 m-0" /> Email Notification
          </span>
        );
      case path.startsWith("/investment-type"):
@@ -167,7 +167,7 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Echange rate
+            Exchange rate
          </span>
        );
      case path.startsWith("/create-io"):
@@ -297,7 +297,7 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <MdNotificationsNone className="h4 m-0 fw-normal" />
-            Notification
+            Push Notification 
          </span>
        );
      case path.startsWith("/contact"):
--- a/src/Pages/Admin/Notification.jsx
+++ b/src/Pages/Admin/Notification.jsx
@@ -3,11 +3,14 @@ import {
  Badge,
  Box,
  Button,
+  HStack,
+  Input,
+  Select,
  Text,
  Tooltip,
  useToast,
 } from "@chakra-ui/react";
-import { useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { useNavigate } from "react-router-dom";
@@ -23,15 +26,13 @@ import ToastBox from "../../Components/ToastBox";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { useGetInvestorsQuery } from "../../Services/investor.details.service";
-import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { INVESTOR_TABLE_PAGINATION, TABLE_PAGINATION } from "../../Constants/Paginations";
 import { formatDate, generateSerialNumber } from "../../Constants/Constants";
 import { ViewIcon } from "@chakra-ui/icons";
 import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";

 export const notification = yup.object().shape({
-  title: yup
-    .string()
-    .required("Investment Name is required"),
+  title: yup.string().required("Notification Header is required"),
  ManualDate: yup
    .date()
    .required("Manual Date is required")
@@ -43,33 +44,26 @@ export const notification = yup.object().shape({
      /^([01]\d|2[0-3]):?([0-5]\d)$/,
      "Invalid time format, must be in HH:mm"
    ),
-  expectedReturn: yup
-    .string()
-    .required("Expected Return is required"),
+  expectedReturn: yup.string().required("Expected Return is required"),
 });

 export const notificationNew = yup.object().shape({
-  title: yup
-    .string()
-    .required("Investment Name is required"),
-    message: yup
-      .string()
-      .required("Message is required"),
-    
+  title: yup.string().required("Notification Header is required"),
+  message: yup.string().required("Message is required"),
 });

-
-
 const Notification = () => {
  const toast = useToast();
  const navigate = useNavigate();
  const [form, setForm] = useState({});
  const [isLoading, setIsLoading] = useState(false);
-  const [ selectedRadio, setSelectedRadio] = useState([])
-  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const [pageSize, setPageSize] = useState(INVESTOR_TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(INVESTOR_TABLE_PAGINATION?.page);
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [country, setCountry] = useState("");
+  const [kyc, setKyc] = useState("");

  const {
    control,
@@ -81,8 +75,8 @@ const Notification = () => {
    resolver: yupResolver(notificationNew),

    defaultValues: {
-    title: '',
-    message: '',
+      title: "",
+      message: "",
    },
  });

@@ -94,7 +88,6 @@ const Notification = () => {
    error,
  } = useGetContactQuery();

-
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString("en-GB", {
      day: "2-digit",
@@ -109,28 +102,42 @@ const Notification = () => {
  //   // error,
  // } = useGetInvestorsQuery({ page: currentPage, size: pageSize });

+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm.trim()); // Trim to remove leading/trailing spaces
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [searchTerm]);
  
-  const {
-    data : investorDetails,
-    isLoading: investorDetailsLoading,
-    refetch,
-  } = useGetUnbanInvestorQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
+
+  const { data: investorDetails, isLoading: investorDetailsLoading, refetch } =
+  useGetUnbanInvestorQuery(
+    {
+      page: 1, // Omit pagination for search
+      size: 10000, // Omit pagination for search
+      // page: debouncedSearchTerm ? undefined : currentPage, // Disable pagination for search
+      // size: debouncedSearchTerm ? undefined : 10000 || pageSize || 500,    // Disable pagination for search
+      search: debouncedSearchTerm,                        // Pass search term
+      country_xid: country,
+      KYCStatus: kyc,
    },
    {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  });;
+      skip: searchTerm !== "" && debouncedSearchTerm === "", // Skip if search not debounced yet
+    }
+  );
+
+  // useEffect(() => {
+  //   console.log("Search Term:", searchTerm);
+  //   console.log("Debounced Search Term:", debouncedSearchTerm);
+  //   console.log("Investor Details:", investorDetails);
+  // }, [searchTerm, debouncedSearchTerm, investorDetails]);
  


  console.log(investorDetails);

-
  const [sendNotification] = useSendNotificationMutation();

-  
  if (contactLoading) {
    return <FullscreenLoaders />;
  }
@@ -141,9 +148,11 @@ const Notification = () => {
      placeHolder: " ",
      name: "title",
      type: "text",
-      width:"100%",
-      maxLength:100,
-      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.title?.length || 0} characters.`,
+      width: "100%",
+      maxLength: 100,
+      helperText: `Maximum length should be 100 characters. You have entered ${
+        watch()?.title?.length || 0
+      } characters.`,
      isRequired: true,
      section: "Send Custom Push Notification",
      // value: contact?.phoneNumber || "",
@@ -152,15 +161,16 @@ const Notification = () => {
      label: "Notification Message",
      placeHolder: " ",
      name: "message",
-      width:"100%",
+      width: "100%",
      type: "textarea",
      isRequired: true,
-      maxLength:200,
-      helperText:`Maximum length should be 200 characters. You have entered ${watch()?.message?.length || 0} characters.`,
+      maxLength: 200,
+      helperText: `Maximum length should be 200 characters. You have entered ${
+        watch()?.message?.length || 0
+      } characters.`,
      section: "Send Custom Push Notification",
      // value: contact?.phoneNumber || "",
    },
-    
  ];

  const groupedFields = formFields.reduce((groups, field) => {
@@ -173,11 +183,10 @@ const Notification = () => {
  }, {});

  const onSubmit = async (data) => {
-
    const dataToPass = {
      ...data,
-      principal_xid:selectedRadio
-    }
+      principal_xid: selectedRadio,
+    };
    setIsLoading(true);
    try {
      const res = await sendNotification(dataToPass);
@@ -189,39 +198,32 @@ const Notification = () => {
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
-        setIsLoading(false)
-      }else if(res?.data){
+        setIsLoading(false);
+      } else if (res?.data) {
        toast({
-          render: () => (
-            <ToastBox message={res?.data?.message} />
-          ),
+          render: () => <ToastBox message={res?.data?.message} />,
        });
-        setIsLoading(false)
-        setSelectedRadio([])
+        setIsLoading(false);
+        setSelectedRadio([]);
        reset({
-          title: '', // Resetting specific fields
-          message: '', 
+          title: "", // Resetting specific fields
+          message: "",
        }); // Clears the form fields
-      }else{
+      } else {
        toast({
          render: () => (
-            <ToastBox status={'error'} message={"Something went wrong"} />
+            <ToastBox status={"error"} message={"Something went wrong"} />
          ),
        });
-        setIsLoading(false)
+        setIsLoading(false);
      }
    } catch (error) {
      console.log(error);

      setIsLoading(false);
    }
-
-    
  };

-
-
-
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr N/O",
@@ -235,7 +237,6 @@ const Notification = () => {
    "KYC Status",
  ];

-
  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
    "Sr N/O": (
@@ -245,7 +246,7 @@ const Notification = () => {
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
-       {generateSerialNumber(idx,currentPage, pageSize )}
+        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    Date: (
@@ -305,14 +306,15 @@ const Notification = () => {
          color={item?.KYCStatus === false ? "red" : "blue"}
          px={2}
          py={0.5}
-          variant={'ghost'}
+          variant={"ghost"}
        >
-          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Badge>
      </Box>
    ),
  }));
  
+
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
      <FormInputMain
@@ -322,13 +324,72 @@ const Notification = () => {
        onSubmit={handleSubmit(onSubmit)}
        btnLoading={isLoading}
      >
-        <Box overflow={'scroll'} h={'58vh'}>
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <HStack className="col" justifyContent={"end"}>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setCountry(e.target.value)}
+              value={country}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Country
+              </option>
+              <option value="">All</option>
+              <option value="1">Bahrain</option>
+              <option value="2">Kuwait</option>
+              <option value="3">Oman</option>
+              <option value="4">Qatar</option>
+              <option value="5">Saudi arabia</option>
+              <option value="6">United arab emirates</option>
+            </Select>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setKyc(e.target.value)}
+              value={kyc}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                KYC Status
+              </option>
+              <option value="">KYC Status</option>
+              <option value="0">Not Completed</option>
+              <option value="1">Completed</option>
+            </Select>
+          </HStack>
+        </HStack>
+        <Box overflow={"scroll"} h={"58vh"}>
          <NormalTable
            centered={true}
            emptyMessage={`We don't have any Sponers `}
            tableHeadRow={tableHeadRow}
            data={extractedArray}
-        // isLoading={isLoading}
+            isLoading={investorDetailsLoading}
            setSelectedRadio={setSelectedRadio}
            selectedRadio={selectedRadio}
            showRadioButton={true}
--- a/src/Pages/EmailNotification/EmailNotification.jsx
+++ b/src/Pages/EmailNotification/EmailNotification.jsx
@@ -7,10 +7,11 @@ import {
  FormLabel,
  HStack,
  Input,
+  Select,
  Text,
  useToast,
 } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";
@@ -28,8 +29,11 @@ const EmailNotification = () => {
  const [subject, setSubject] = useState("");
  const [value, setValue] = useState(""); // Quill content (body)
  const toast = useToast();
-
  const [sendCustomNotification] = useSendCustomEmailMutation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [country, setCountry] = useState("");
+  const [kyc, setKyc] = useState("");

  // ===========================[Table Setup]==============================
  const tableHeadRow = [
@@ -47,14 +51,40 @@ const EmailNotification = () => {
  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);

+  // const {
+  //   data: investorDetails,
+  //   isLoading: investorDetailsLoading,
+  //   refetch,
+  // } = useGetUnbanInvestorQuery({
+  //   page: currentPage, // Omit pagination for search
+  //   size: 10000, // Omit pagination for search
+  // });
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm.trim()); // Trim to remove leading/trailing spaces
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [searchTerm]);
+
  const {
    data: investorDetails,
    isLoading: investorDetailsLoading,
    refetch,
-  } = useGetUnbanInvestorQuery({
-    page: currentPage, // Omit pagination for search
+  } = useGetUnbanInvestorQuery(
+    {
+      page: 1, // Omit pagination for search
      size: 10000, // Omit pagination for search
-  });
+      // page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      // size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+      country_xid: country,
+      KYCStatus: kyc,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );

  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
@@ -127,7 +157,7 @@ const EmailNotification = () => {
          py={0.5}
          variant={"ghost"}
        >
-          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Badge>
      </Box>
    ),
@@ -152,7 +182,10 @@ const EmailNotification = () => {
    if (!subject || !value) {
      toast({
        render: () => (
-          <ToastBox status={"error"} message={"Subject or email body cannot be empty"} />
+          <ToastBox
+            status={"error"}
+            message={"Subject or email body cannot be empty"}
+          />
        ),
      });
      return;
@@ -161,7 +194,10 @@ const EmailNotification = () => {
    if (selectedRadio.length === 0) {
      toast({
        render: () => (
-          <ToastBox status={"error"} message={"Please select at least one recipient"} />
+          <ToastBox
+            status={"error"}
+            message={"Please select at least one recipient"}
+          />
        ),
      });
      return;
@@ -175,9 +211,8 @@ const EmailNotification = () => {
      principal_xid: selectedRadio,
    };

-
    try {
-      const res = await sendCustomNotification(emailPayload)
+      const res = await sendCustomNotification(emailPayload);
      console.log(res);
      if (res?.error) {
        toast({
@@ -185,31 +220,24 @@ const EmailNotification = () => {
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
-        setIsLoading(false)
-      }else if(res?.data){
+        setIsLoading(false);
+      } else if (res?.data) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false);
+        setSubject("");
+        setValue("");
+        setSelectedRadio([]);
+      } else {
        toast({
          render: () => (
-            <ToastBox message={res?.data?.message} />
+            <ToastBox status={"error"} message={"Something went wrong"} />
          ),
        });
-        setIsLoading(false)
-        setSubject("")
-        setValue("")
-        setSelectedRadio([])
-
-      }else{
-        toast({
-          render: () => (
-            <ToastBox status={'error'} message={"Something went wrong"} />
-          ),
-        });
-        setIsLoading(false)
+        setIsLoading(false);
      }
-      
-    } catch (error) {
-      
-    }
-
+    } catch (error) {}
  };

  return (
@@ -247,31 +275,83 @@ const EmailNotification = () => {
          {/* <FormHelperText>Entered subject will be reflected on emails subject body.</FormHelperText> */}
        </FormControl>

-
        <FormControl minH={400} isRequired mb={3} p={1}>
          <FormLabel fontSize={"sm"}>Create Custom body</FormLabel>
          <ReactQuill
            theme="snow"
            style={{
-            height:300
+              height: 300,
            }}
            value={value}
            onChange={setValue}
            modules={modules}
            placeholder="Start typing here..."
-
          />
        </FormControl>
        {/* <FormHelperText fontSize={"xs"}>
          We'll never share your email.
        </FormHelperText> */}
-
-
-
-
      </FormControl>
-
-      <Box overflow={'scroll'} h={'58vh'}>
+      <HStack
+        display={"flex"}
+        justifyContent={"space-between"}
+        ps={1}
+        pe={1}
+        pb={4}
+        pt={4}
+        spacing="24px"
+      >
+        <Input
+          mt={1}
+          type="search"
+          width={300}
+          placeholder="Search..."
+          size="sm"
+          rounded="sm"
+          focusBorderColor="green.500"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <HStack className="col" justifyContent={"end"}>
+          <Select
+            w={250}
+            focusBorderColor="green.500"
+            size={"sm"}
+            fontSize={"xs"}
+            cursor={"pointer"}
+            onChange={(e) => setCountry(e.target.value)}
+            value={country}
+          >
+            <option value="" defaultValue={""} disabled hidden>
+              Country
+            </option>
+            <option value="">All</option>
+            <option value="1">Bahrain</option>
+            <option value="2">Kuwait</option>
+            <option value="3">Oman</option>
+            <option value="4">Qatar</option>
+            <option value="5">Saudi arabia</option>
+            <option value="6">United arab emirates</option>
+          </Select>
+          <Select
+            w={250}
+            focusBorderColor="green.500"
+            size={"sm"}
+            fontSize={"xs"}
+            cursor={"pointer"}
+            onChange={(e) => setKyc(e.target.value)}
+            value={kyc}
+          >
+            <option value="" defaultValue={""} disabled hidden>
+              KYC Status
+            </option>
+            <option value="">KYC Status</option>
+            <option value="0">Not Completed</option>
+            <option value="1">Completed</option>
+          </Select>
+        </HStack>
+      </HStack>
+      <Box overflow={"scroll"} h={"58vh"}>
        <NormalTable
          centered={true}
          emptyMessage={`We don't have any Sponsors`}
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -217,7 +217,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
        isOpen={alert}
        onClose={() => setAlert(false)}
        alertHandler={handleSave}
-        message={"Are you sure you want to update this artifact?"}
+        message={"Are you sure you want to add this artifact?"}
        isLoading={isLoading}
      />
    </>
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -107,7 +107,8 @@ const IOCashDetails = () => {
            </Tab>
          </TabList>
          {IODetails?.isInvestedAmount
-            ? isMaker() && (
+            ? isMaker() && 
+              IODetails?.ioSatatus !== "Exited" && (
                <Button
                  onClick={handleAdd}
                  leftIcon={<AddIcon />}
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -119,7 +119,7 @@ import AddCaseDetails from "./AddCaseDetails";
          <Badge ms={1} colorScheme="green" me={1}>
                $
              </Badge>
-              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+              {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -12,11 +12,12 @@ import {
  useUpdateIOMutation,
 } from "../../../Services/io.service";
 import ToastBox from "../../../Components/ToastBox";
-import {
-  useToast,
-} from "@chakra-ui/react";
+import { useToast } from "@chakra-ui/react";
 import { formatDatee } from "../../../Components/FormField";
-import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants";
+import {
+  formatDateToYYYYMMDD,
+  removeTrailingZeros,
+} from "../../../Constants/Constants";

 const schema = yup.object().shape({
  investmentNameEnglish: yup
@@ -49,8 +50,8 @@ const schema = yup.object().shape({
  goalAmount: yup
    .number()
    .typeError("Goal Amount is must be number")
-      .required('Goal amount is required')
-      .positive('Goal amount must be a positive number'),
+    .required("Goal amount is required")
+    .positive("Goal amount must be a positive number"),
  closingDate: yup
    .date()
    .notRequired("Closing date is required")
@@ -69,24 +70,21 @@ const schema = yup.object().shape({

  InvestmentDetails: yup.string().notRequired(),

-  comment: yup.string().notRequired()
+  comment: yup
+    .string()
+    .notRequired()
    // .min(10, "Comment must be at least 10 characters long")
    .max(100, "Comment must be at most 100 characters long"),

-  expectedReturn: yup
-    .string()
-    .required("Expected return is required"),
+  expectedReturn: yup.string().required("Expected return is required"),
 });

 const IODetails = ({ enableNextTab, index, data }) => {
-
  const params = useParams();
  const navigate = useNavigate();
  const toast = useToast();

-
  const handleInputChangeCreate = (index, newValue) => {
-    
    const updatedValues = [...values];
    updatedValues[index].value = newValue;
    setValues(updatedValues);
@@ -143,9 +141,12 @@ const IODetails = ({ enableNextTab, index, data }) => {
  });

  const miniValue = data?.country?.map(
-    ({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => {
+    (
+      { countryName, flagIcon, minInvestmentAmt, countryCode, id, currency },
+      index
+    ) => {
      return {
-        id:id,
+        id: id,
        country: countryName,
        value: minInvestmentAmt,
        logo: flagIcon,
@@ -154,18 +155,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
    }
  );

-  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode,  country_xid,id })=>{
+  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(
+    ({ minInvestmentAmt, country, currencyCode, country_xid, id }) => {
      console.log(currencyCode);
-    return{
-      _id:id,
-      id:country_xid,
+      return {
+        _id: id,
+        id: country_xid,
        country: country?.countryName,
        value: removeTrailingZeros(minInvestmentAmt),
        logo: country?.flagIcon,
        curr: currencyCode,
+      };
    }
-  })
-
+  );

  const schemaEdit = yup.object().shape({
    investmentNameEnglish: yup
@@ -198,19 +200,18 @@ const IODetails = ({ enableNextTab, index, data }) => {
    goalAmount: yup
      .number()
      .typeError("Goal Amount is must be number")
-        .required('Goal amount is required')
-        .positive('Goal amount must be a positive number')
-        .min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
-    closingDate: yup
-      .date()
-      .notRequired("Closing date is required")
-      .min(new Date(), "Closing date cannot be in the past"),
+      .required("Goal amount is required")
+      .positive("Goal amount must be a positive number")
+      .min(
+        IObyID?.data?.totalAmtInvestmentInUSD,
+        `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`
+      ),
+    closingDate: yup.date().notRequired("Closing date is required"),

    holdingPeriod: yup.string().required("Holding period is required"),
    holdingPeriodArabic: yup.string().required("Holding period is required"),
    isShariah: yup.string().required("CheckBox is required"),

-  
    // minInvestmentAmount: yup
    //   .number()
    //   .required("Minimum investment is required")
@@ -221,25 +222,20 @@ const IODetails = ({ enableNextTab, index, data }) => {

    InvestmentDetails: yup.string().notRequired(),

-    comment: yup.string().notRequired()
+    comment: yup
+      .string()
+      .notRequired()
      .min(10, "Comment must be at least 10 characters long")
      .max(100, "Comment must be at most 100 characters long"),

-    expectedReturn: yup
-      .string()
-      .required("Expected return is required"),
+    expectedReturn: yup.string().required("Expected return is required"),
  });

-  
-
-  
-  const [values, setValues] = useState(id?minInvestmentById:miniValue);
-
+  const [values, setValues] = useState(id ? minInvestmentById : miniValue);

  const formatNumber = (num) => {
    // Remove non-numeric characters and format with commas
-    return num.replace(/\D/g, '')
-              .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return num.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };
  // console.log(values);

@@ -253,10 +249,11 @@ const IODetails = ({ enableNextTab, index, data }) => {
    formState: { errors },
  } = useForm({
    resolver: yupResolver(id ? schemaEdit : schema),
+    mode: "all",
  });

  useEffect(() => {
-    setIOloading(IObyIDisLoading)
+    setIOloading(IObyIDisLoading);
    setIODetails({
      ...IObyID?.data,
    });
@@ -277,10 +274,9 @@ const IODetails = ({ enableNextTab, index, data }) => {
        minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
        holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
        expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
-        isShariah: IObyID?.data?.isShariah
+        isShariah: IObyID?.data?.isShariah,
      });
    }
-
  }, [id, IObyID]);

  //=======================[ Creator ]
@@ -293,8 +289,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      isRequired: true,
      section: " ",
      width: "49%",
-      maxLength:150,
-      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.`
+      maxLength: 150,
+      helperText: `Maximum length should be 150 characters. You have entered ${
+        watch()?.investmentNameEnglish?.length || 0
+      } characters.`,
    },
    {
      label: "IO Name (Arabic)",
@@ -305,8 +303,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      arabic: true,
      section: " ",
      width: "49%",
-      maxLength:150,
-      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.`
+      maxLength: 150,
+      helperText: `Maximum length should be 150 characters. You have entered ${
+        watch()?.investmentNameArabic?.length || 0
+      } characters.`,
    },
    {
      label: "Description",
@@ -316,8 +316,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      isRequired: true,
      section: " ",
      width: "49%",
-      maxLength:1000,
-      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.`
+      maxLength: 1000,
+      helperText: `Maximum length should be 1000 characters. You have entered ${
+        watch()?.descriptionEnglish?.length || 0
+      } characters.`,
    },
    {
      label: "Description (Arabic)",
@@ -328,9 +330,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      arabic: true,
      section: " ",
      width: "49%",
-      maxLength:1000,
-      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.`
-      
+      maxLength: 1000,
+      helperText: `Maximum length should be 1000 characters. You have entered ${
+        watch()?.descriptionArabic?.length || 0
+      } characters.`,
    },
    {
      label: "Holding Period",
@@ -341,8 +344,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriod,
-      maxLength:20,
-      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.`
+      maxLength: 20,
+      helperText: `Maximum length should be 20 characters. You have entered ${
+        watch()?.holdingPeriod?.length || 0
+      } characters.`,
    },
    {
      label: "Holding Period (Arabic)",
@@ -354,11 +359,12 @@ const IODetails = ({ enableNextTab, index, data }) => {
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriodArabic,
-      maxLength:20,
-      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.`
+      maxLength: 20,
+      helperText: `Maximum length should be 20 characters. You have entered ${
+        watch()?.holdingPeriodArabic?.length || 0
+      } characters.`,
    },

-
    {
      label: "Expected Return",
      name: "expectedReturn",
@@ -383,14 +389,13 @@ const IODetails = ({ enableNextTab, index, data }) => {
      label: "Shariah",
      name: "isShariah",
      type: "checkBox",
-      value:IObyID?.data?.isShariah,
+      value: IObyID?.data?.isShariah,
      // isRequired: true,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.isShariah,
    },

-
    {
      label: "Investment Type",
      placeHolder: "Select option",
@@ -428,19 +433,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
      name: "closingDate",
      // value: "IObyID?.data?.closingDate",
      type: "date",
-      isRequired: true,
+      // isRequired: true,
      section: " ",
      width: "32.3%",
-      dateValue:formatDatee(IObyID?.data?.closingDate),
+      dateValue: formatDatee(IObyID?.data?.closingDate),
      // helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
-      closingDate:true
+      closingDate:id ? null : true
    },
    {
      label: "ISIN",
      placeHolder: "",
      name: "ISIN",
      type: "text",
-      align:"right",
+      align: "right",
      section: " ",
      width: "32.3%",
    },
@@ -452,8 +457,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.InvestmentDetails,
-      maxLength:20,
-      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.`
+      maxLength: 20,
+      helperText: `Maximum length should be 20 characters. You have entered ${
+        watch()?.InvestmentDetails?.length || 0
+      } characters.`,
    },

    {
@@ -465,7 +472,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
      width: "100%",
      isRequired: true,
      options: investmentTypeOptions,
-      handleInputChange:id ?  handleInputChangeEdit : handleInputChangeCreate,
+      handleInputChange: id ? handleInputChangeEdit : handleInputChangeCreate,
      value: values,
    },

@@ -478,8 +485,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      width: "100%",
      options: investmentTypeOptions,
      value: IObyID?.data?.comment,
-      maxLength:100,
-      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
+      maxLength: 100,
+      helperText: `Maximum length should be 100 characters. You have entered ${
+        watch()?.comment?.length || 0
+      } characters.`,
    },
  ];
  const groupedFields = formFields.reduce((groups, field) => {
@@ -492,30 +501,29 @@ const IODetails = ({ enableNextTab, index, data }) => {
  }, {});

  const onSubmit = async (data) => {
-
    delete data.table;

    setIsLoading(true);
-    const updatedMinAmount = values?.map(({id, value, _id})=>{
+    const updatedMinAmount = values?.map(({ id, value, _id }) => {
      return {
-        id:_id,
-        country_xid:id,
-        minInvestmentAmt: Number(value)
-      }
-    })
+        id: _id,
+        country_xid: id,
+        minInvestmentAmt: Number(value),
+      };
+    });

    // console.log(formatDateToYYYYMMDD(data.closingDate));
    const formData = {
      ...data,
      investmentType_xid: Number(data.investmentType),
      sponsor_xid: Number(data.sponserName),
-    minInvestmentAmt:updatedMinAmount,
-    closingDate: formatDateToYYYYMMDD(data.closingDate)
+      minInvestmentAmt: updatedMinAmount,
+      closingDate: formatDateToYYYYMMDD(data.closingDate),
    };

    // console.log(formData);
    if (id) {
-      console.log("========================",formData);
+      console.log("========================", formData);
      const res = await updateIO({ data: formData, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
@@ -525,20 +533,24 @@ const IODetails = ({ enableNextTab, index, data }) => {
        });
        navigate(`/view-io/${id}`);
        enableNextTab(index);
-      } else if(res?.error?.status === 400){
+      } else if (res?.error?.status === 400) {
        setIsLoading(false);
        toast({
-          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
        });
-      } else if(res?.error?.status === 500){
+      } else if (res?.error?.status === 500) {
        setIsLoading(false);
        toast({
-          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
        });
      }
    } else {
      try {
-        console.log("========================",formData);
+        console.log("========================", formData);
        const res = await creatIO(formData);
        console.log(res?.error?.status);
        if (res?.data?.statusCode === 200) {
@@ -548,15 +560,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
          });
          navigate(`/view-io/${res?.data?.data}`);
          enableNextTab(index);
-        } else if(res?.error?.status === 400){
+        } else if (res?.error?.status === 400) {
          setIsLoading(false);
          toast({
-            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
          });
-        }else if(res?.error?.status === 500){
+        } else if (res?.error?.status === 500) {
          setIsLoading(false);
          toast({
-            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
          });
        }
      } catch (error) {
@@ -565,7 +581,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
      }
    }

-
    // ==========================
    // if (params?.id) {
    //   return enableNextTab(index);
@@ -583,9 +598,8 @@ const IODetails = ({ enableNextTab, index, data }) => {
  };

  return IObyIDisLoading ? (
-    <FullscreenLoaders height={'70vh'} />
+    <FullscreenLoaders height={"70vh"} />
  ) : (
-    
    <FormInputMain
      p={0.1}
      w={250}
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -153,7 +153,8 @@ const IONAVDetails = () => {
            </Tab>
          </TabList>
          {IODetails?.isInvestedAmount
-            ? isMaker() && (
+            ? isMaker() && 
+            IODetails?.ioSatatus !== "Exited" && (
                <Button
                  onClick={handleAdd}
                  leftIcon={<AddIcon />}
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -137,6 +137,11 @@ const Pending = () => {
          })}
        </Text>
      ),
+      // Amount:(
+      //   <div>
+      //     <ViewDistributionInvestor amount={item?.transactionAmount} />
+      //   </div>
+      // ),
      "Created By": (
        <Text
          textTransform={"capitalize"}
@@ -200,6 +205,8 @@ const Pending = () => {
    })
  );

+  
+
  const handleDelete = () => {
    const updatedSponsors = sponser.filter(
      (sponsor) => sponsor.id !== actionId
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -108,7 +108,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose, id: exitId, amount }) => {
    "Last Name",
    "Amount",
    "Holding (%)",
-    "Distriution Amt($)",
+    "Distribution Amt($)",
    "Yeild (%)",
  ];

@@ -169,7 +169,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose, id: exitId, amount }) => {
        </Text>
      </Box>
    ),
-    "Distriution Amt($)": (
+    "Distribution Amt($)": (
      <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.distribution_amt?.toLocaleString(undefined, {
--- a/src/Pages/IO_Management/IOArtifactsAdd.jsx
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -360,7 +360,7 @@ const IOArtifactsAdd = ({
        isOpen={alert}
        onClose={handleAlertClose}
        alertHandler={handleSave}
-        message={"Are you sure you want to update this artifact?"}
+        message={"Are you sure you want to add this artifact?"}
        isLoading={loading}
      />
    </>
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -60,9 +60,9 @@ export const investmentDocSchema = yup.object().shape({
  //   return value && value.size <= 2 * 1024 * 1024; // 2MB in bytes
  // })
  fileName: yup.string().required("File name is required")
-  .max(30, "File name must be at most 30 characters"), // Maximum length validation,
+  .max(35, "File name must be at most 30 characters"), // Maximum length validation,
  documentNameArabic: yup.string().required("File name Arabic is required")
-  .max(25, "File name must be at most 30 characters"), 
+  .max(25, "File name must be at most 35 characters"), 
 });

 const InvestmentDocuments = ({
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -112,8 +112,18 @@ const AmountInvested = ({ isOpen, onClose }) => {
    });
  };

+  const handleModalClose = () => {
+    reset({
+      transactionDate: "",
+      Total_Amount: IODetails?.totalAmtInvestmentInUSD || 0,
+      amountInvested: 0,
+      IoCash: IODetails?.totalAmtInvestmentInUSD || 0,
+    });
+    onClose();
+  };
+
  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={handleModalClose}>
      <ModalOverlay /> 
      <ModalContent>
        <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
@@ -246,7 +256,7 @@ const AmountInvested = ({ isOpen, onClose }) => {
              >
                Save
              </Button>
-              <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
+              <Button size={"sm"} rounded={"sm"} mr={3}  onClick={handleModalClose}>
                Close
              </Button>
            </ModalFooter>
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -495,7 +495,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
              >
                Save
              </Button>
-              <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
+              <Button size={"sm"} rounded={"sm"} mr={3} onClick={handleClose}>
                Close
              </Button>
            </>
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -17,6 +17,9 @@ import {
  ModalHeader,
  ModalOverlay,
  FormErrorMessage,
+  Text,
+  Textarea,
+  Box,
 } from "@chakra-ui/react";
 import {
  useGetIOprepopulateDataQuery,
@@ -37,6 +40,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
  const { data } = useGetIOprepopulateDataQuery();
  const [updateStatusIo] = useUpdateStatusIoMutation();
  const [updateCancleStatus] = useUpdateCancleStatusToMutation();
+  const [message, setMessage] = useState(null);
+  const [messageError, setMessageError] = useState(null);

  // useEffect(() => {
  //   setSelectedStatusId(status?.[0]?.id);
@@ -47,11 +52,14 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
    setSelectedStatusId(id);
  };

-  const handleSubmit = async () => {
+  const handleSubmit = async (data) => {
    if (!selectedStatusId) {
      setError("Please select status");
      return;
    }
+    if (!message) {
+      return setMessageError("message is required");
+    }
    setError("");
    setIsLoading(true);
    try {
@@ -60,7 +68,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
      // If selectedItem is 'Cancelled', make the updateCancelStatus API call
      if (selectedItem === import.meta.env.VITE_STATUS_CANCELLED) {
        res = await updateCancleStatus({
-          id
+          id: id,
+          data: { comments: message },
        });
      }
      // Otherwise, make the updateStatusIo API call
@@ -84,6 +93,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
  const handleClose = () => {
    setSelectedItem(null);
    setSelectedStatusId(null);
+    setMessage(null);
+    setMessageError(null);
    onClose();
    setError("");
  };
@@ -121,7 +132,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                    colorScheme={
                      selectedItem === import.meta.env.VITE_STATUS_DRAFT
                        ? "gray"
-                        : selectedItem === import.meta.env.VITE_STATUS_PROCESSING
+                        : selectedItem ===
+                          import.meta.env.VITE_STATUS_PROCESSING
                        ? "yellow"
                        : selectedItem === import.meta.env.VITE_STATUS_OPEN
                        ? "blue"
@@ -163,7 +175,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                        colorScheme={
                          statusAdmin === import.meta.env.VITE_STATUS_DRAFT
                            ? "gray"
-                            : statusAdmin === import.meta.env.VITE_STATUS_PROCESSING
+                            : statusAdmin ===
+                              import.meta.env.VITE_STATUS_PROCESSING
                            ? "yellow"
                            : statusAdmin === import.meta.env.VITE_STATUS_OPEN
                            ? "blue"
@@ -171,7 +184,8 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                            ? "green"
                            : statusAdmin === import.meta.env.VITE_STATUS_EXITED
                            ? "red"
-                            : statusAdmin === import.meta.env.VITE_STATUS_CANCELLED
+                            : statusAdmin ===
+                              import.meta.env.VITE_STATUS_CANCELLED
                            ? "orange"
                            : "purple"
                        }
@@ -191,6 +205,24 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
              {error}
            </FormErrorMessage>
          </FormControl>
+          {selectedItem === import.meta.env.VITE_STATUS_CANCELLED && (
+            <FormControl mt={5} isRequired>
+              <FormLabel fontSize={"sm"} fontWeight={400}>
+                Message
+              </FormLabel>
+              <Textarea
+                resize={"none"}
+                rounded={5}
+                size="sm"
+                onChange={(e) => setMessage(e.target.value)}
+              />
+            </FormControl>
+          )}
+          {messageError && (
+            <Text fontSize={"sm"} color={"red"}>
+              {messageError}
+            </Text>
+          )}
        </ModalBody>
        <ModalFooter>
          <Button
--- a/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx
@@ -203,7 +203,7 @@ const BankDetails = () => {
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <HStack>
-        <Text as={'span'} fontSize={'sm'} fontWeight={700}>Bank Deatils</Text>
+        <Text as={'span'} fontSize={'sm'} fontWeight={700}>Bank Details</Text>
      </HStack>
        <HStack
          display={"flex"}
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -1,5 +1,5 @@
+import { ViewIcon } from "@chakra-ui/icons";
 import {
-  Avatar,
  Badge,
  Box,
  Button,
@@ -11,23 +11,21 @@ import {
  useDisclosure,
  useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState, useRef } from "react";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import NormalTable from "../../../Components/DataTable/NormalTable";
-import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
-import {
-  ViewIcon,
-} from "@chakra-ui/icons";
-import Pagination from "../../../Components/Pagination";
-import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import CustomAlertDialog from "../../../Components/CustomAlertDialog";
-import ToastBox from "../../../Components/ToastBox";
-import { debounce } from "../../Master/Sponser/AddSponser";
-import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
-import { useGetInvestorsQuery } from "../../../Services/investor.details.service";
-import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-import { exportToExcel, exportToExcelNew, generateSerialNumber } from "../../../Constants/Constants";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { LuFileSpreadsheet } from "react-icons/lu";
+import { useNavigate } from "react-router-dom";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import Pagination from "../../../Components/Pagination";
+import {
+  exportToExcelNew,
+  generateSerialNumber,
+} from "../../../Constants/Constants";
+import { INVESTOR_TABLE_PAGINATION } from "../../../Constants/Paginations";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { useGetInvestorsQuery } from "../../../Services/investor.details.service";
+import InvestmentDetailsEdit from "./InvestmentDetailsEdit";

 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

@@ -49,10 +47,11 @@ const InvestorDetails = () => {
  } = useDisclosure();
  const btnRef = React.useRef();

-
  // =========================== [Use State] =============================
-  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [pageSize, setPageSize] = useState(INVESTOR_TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(
+    INVESTOR_TABLE_PAGINATION?.page
+  );
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");

@@ -73,20 +72,19 @@ const InvestorDetails = () => {
    data: investorDetails,
    isLoading: investorDetailsLoading,
    error,
-  } = useGetInvestorsQuery({
+  } = useGetInvestorsQuery(
+    {
      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search userStatus KYCStatus investorType_xid
      search: debouncedSearchTerm,
      userStatus: status,
      KYCStatus: kyc,
-    country_xid: country
-
+      country_xid: country,
    },
    {
      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
    }
-);
-
+  );

  useEffect(() => {
    // Simulate loading
@@ -107,40 +105,42 @@ const InvestorDetails = () => {
    "Country",
    "Phone Number",
    "E-mail ID",
-    "Type", 
+    // "Type",
+    "Wallet Balance",
+    "Investor Portfolio",
    "KYC Status",
-    "Status",
+    // "Status",
    "Action",
  ];

-
  // ====================================================[Table Filter]================================================================
-  const exportInvestor = investorDetails?.data?.rows?.map((item, idx) => ({
-    "Id": parseInt(item?.id, 10) || item?.id, // Convert to integer, fallback to string if conversion fails
+  const exportInvestor = investorDetails?.data?.rows?.map((item) => ({
+    Id: parseInt(item?.id, 10) || item?.id, // Convert to integer, fallback to string if conversion fails
    "Client ID": item?.clientReference_id, // This is likely a string
    "First Name": item?.principal?.firstName,
    "Last Name": item?.principal?.lastName,
-    "Country": item?.country?.countryName,
+    Country: item?.country?.countryName,
    "Phone Number": item?.principal?.mobileNumber, // Skipping integer conversion, as this is likely a string
    "E-mail ID": item?.principal?.emailAddress,
-    "Type": item?.investor_type?.investorTypeName,
-    "Status": item.ioStatus ? "Ban" : "Unban",
-    "KYC Status": item.KYCStatus ? "Completed" : "Not complete"
+    "Wallet Balance": item?.principal?.WalletBalance_InInvCur, // Skipping integer conversion, as this is likely a string
+    "Investor Portfolio": item?.principal?.Portfolio_InInvCur,
+    // Type: item?.investor_type?.investorTypeName,
+    // Status: item.ioStatus ? "Ban" : "Unban",
+    "KYC Status": item.KYCStatus ? "Completed" : "Not complete",
  }));

  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.id,
    "Sr No": (
      <Text
-      w={'24px'}
+        w={"24px"}
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
        {/* {item.id} */}
-        {generateSerialNumber(idx,currentPage, pageSize )}
-        
+        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    "Client ID": (
@@ -185,42 +185,87 @@ const InvestorDetails = () => {
        </Text>
      </Box>
    ),
-    "Type": (
-      <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} >
-          <Badge color={"forestGreen.500"}    variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
-            {item?.investor_type?.investorTypeName}
+    // Type: (
+    //   <Box w={"auto"} isTruncated={true}>
+    //     <Text as={"span"}>
+    //       <Badge
+    //         color={"forestGreen.500"}
+    //         variant={"ghost"}
+    //         fontWeight={"700"}
+    //         px={2}
+    //         py={0.5}
+    //       >
+    //         {item?.investor_type?.investorTypeName}
+    //       </Badge>
+    //     </Text>
+    //   </Box>
+    // ),
+    // Status: (
+    //   <Box w={"auto"} isTruncated={true}>
+    //     <Badge
+    //       fontWeight={"700"}
+    //       textTransform={"none"}
+    //       colorScheme={item.ioStatus ? "red" : "green"}
+    //       px={2}
+    //       py={0.5}
+    //     >
+    //       {item.ioStatus ? "Ban" : "Unban"}
+    //     </Badge>
+    //   </Box>
+    // ),
+    "Wallet Balance": (
+      <Box
+        display={"flex"}
+        justifyContent={"end"}
+        w={"130px"}
+        isTruncated={true}
+      >
+        <Text as={"span"} color={"teal.900"}>
+          {/* {formatCurrency(removeTrailingZeros(item?.investorAmount))}  */}
+          {parseFloat(item?.WalletBalance_InInvCur || 0).toLocaleString(
+            undefined,
+            {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            }
+          )}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
          </Badge>
        </Text>
      </Box>
    ),
-    Status: (
-    <Box w={"auto"} isTruncated={true}>
-      <Badge
-        fontWeight={"700"}
-        textTransform={"none"}
-        colorScheme={item.ioStatus ? "red" : "green"}
-        px={2}
-        py={0.5}
+    "Investor Portfolio": (
+      <Box
+        display={"flex"}
+        justifyContent={"end"}
+        w={"130px"}
+        isTruncated={true}
      >
-        {item.ioStatus ? "Ban" : "Unban"}
+        <Text as={"span"} color={"teal.900"}>
+          {parseFloat(item?.Portfolio_InInvCur || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
          </Badge>
+        </Text>
      </Box>
    ),
    "KYC Status": (
-      <Box w={"auto"} display={'flex'} alignItems={'center'} isTruncated={true}>
+      <Box w={"auto"} display={"flex"} alignItems={"center"} isTruncated={true}>
        <Text
-        as={'span'}
+          as={"span"}
          fontWeight={"700"}
          textTransform={"none"}
          color={item?.KYCStatus === true ? "green" : "yellow.500"}
          px={2}
          py={0.5}
-          variant={'solid'}
-
+          variant={"solid"}
        >
          {/* {item.KYCStatus ? "Completed" : "Not complete"} */}
-          {item?.KYCStatus === true ? "Completed" : "NotCompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Text>
      </Box>
    ),
@@ -266,7 +311,6 @@ const InvestorDetails = () => {
    setIsLoading(true);
  };

-
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <Box bg="white.500">
@@ -321,7 +365,7 @@ const InvestorDetails = () => {
                KYC Status
              </option>
              <option value="">KYC Status</option>
-              <option value="0">Incompleted</option>
+              <option value="0">Not Completed</option>
              <option value="1">Completed</option>
            </Select>

@@ -337,7 +381,7 @@ const InvestorDetails = () => {
                Country
              </option>
              <option value="">All</option>
-              <option value="1">Behrain</option>
+              <option value="1">Bahrain</option>
              <option value="2">Kuwait</option>
              <option value="3">Oman</option>
              <option value="4">Qatar</option>
@@ -352,16 +396,11 @@ const InvestorDetails = () => {
              currentPage={currentPage}
              setCurrentPage={setCurrentPage}
              totalItems={investorDetails?.data?.totalItems}
-              
            />
-
          </HStack>

-
          <Button
-              onClick={() =>
-                exportToExcelNew(exportInvestor, "Investor Details")
-              }
+            onClick={() => exportToExcelNew(exportInvestor, "Investor Details")}
            leftIcon={<LuFileSpreadsheet />}
            colorScheme="forestGreen"
            size={"sm"}
@@ -370,7 +409,6 @@ const InvestorDetails = () => {
            fontSize={"xs"}
            w={100}
            me={2}
-
            isDisabled={exportInvestor?.length === 0}
          >
            Export xls
--- a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
@@ -150,6 +150,22 @@ const Kyc = () => {
              />
            </FormControl>
          </HStack>
+          <HStack spacing={4} mb={4}>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                PEP Status
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.PEPStatus ? "Yes" : "No"}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+            <FormControl></FormControl>
+          </HStack>
          {/* <HStack spacing={4}>
          <FormControl>
            <FormLabel mb={1} fontSize={"sm"}>Address</FormLabel>
--- a/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
@@ -30,8 +30,37 @@ import {
 } from "../../../Services/exchange.rate.service";
 import ToastBox from "../../../Components/ToastBox";
 import { getTomorrowDate } from "../../../Constants/Constants";
+import * as yup from "yup";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";

+// const editExchange = yup.object().shape({
+//   rate: yup
+//     .number()
+//     .required("Rate is required")
+//     .positive("Rate must be greater than 0")
+//     .test(
+//       "is-decimal",
+//       "Rate must have at most 8 decimal places",
+//       (value) =>
+//         value !== undefined && value.toString().match(/^\d+(\.\d{1,8})?$/)
+//     ),
+// });
+
+const editExchange = yup.object().shape({
+  rate: yup
+    .string()
+    .required("Rate is required")
+    .matches(
+      /^\d+\.\d{8}$/,
+      "Rate must have exactly 8 decimal places"
+    )
+    .test(
+      "is-positive",
+      "Rate must be greater than 0",
+      (value) => parseFloat(value) > 0
+    ),
+});
+
 // Convert date to YYYY-MM-DD format
 const formatDateValue = (date) => {
  if (!date) return "";
@@ -57,8 +86,9 @@ const EditExchangeRate = ({
  const toast = useToast();
  const {} = useDisclosure();
  const [isBtnLoading, setIsBtnLoading] = useState(false);
+  const [rateError, setRateError] = useState("");

-  const { data, isLoading, errors } = useGetExchangeRateByIdQuery(id, {
+  const { data, isLoading, errors,refetch, isFetching } = useGetExchangeRateByIdQuery(id, {
    skip: !id,
  });

@@ -67,17 +97,45 @@ const EditExchangeRate = ({
  const [rate, setRate] = useState("");
  const [alert, setAlert] = useState(false);

+  console.log(rate);
+  
+
  useEffect(() => {
+    if (id) {refetch()}
    if (foundObject) {
-      setRate(foundObject.rate);
+      const numericRate = parseFloat(foundObject.rate) || 0; // Convert to number or default to 0 if invalid
+      setRate(numericRate.toFixed(8)); // Set rate with exactly 8 decimal places
    }
-  }, [foundObject]);
+  }, [foundObject, isOpen]);
+  
+
+  // useEffect(()=>{
+  //   if (id) {
+  //     refetch()
+  //   }
+  // },[isOpen])
+
+  const validateRate = async () => {
+    try {
+      await editExchange.validate({ rate });
+      setRateError(""); // Clear validation error if valid
+      return true;
+    } catch (error) {
+      setRateError(error.message); // Display validation error
+      return false;
+    }
+  };

  const handleSave = async () => {
+    const isValid = await validateRate();
+    if (!isValid) {
+      return; // Prevent submission if validation fails
+    }
+
    setIsBtnLoading(true);
    try {
      const data = {
-        rate: rate,
+        rate,
      };
      const res = await updateExchange({ data, id });
      if (res?.data?.statusCode === 200) {
@@ -88,9 +146,31 @@ const EditExchangeRate = ({
        setAlert(false);
        onClose();
      }
-    } catch (error) {}
+    } catch (error) {
+      setIsBtnLoading(false);
+      // Handle error
+    }
  };

+  const checkValidate = async (e) => {
+    e.preventDefault();
+
+    // Wait for the validation to complete
+    const isValid = await validateRate();
+
+    if (!isValid) {
+      return; // Prevent submission if validation fails
+    } else {
+      setAlert(true); // Only trigger modal if validation passes
+    }
+  };
+
+  useEffect(() => {
+    if (rate) {
+      validateRate();
+    }
+  }, [rate]);
+
  return (
    <>
      <Drawer
@@ -100,18 +180,13 @@ const EditExchangeRate = ({
        onClose={onClose}
        finalFocusRef={btnRef}
      >
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            setAlert(true);
-          }}
-        >
+        <form onSubmit={(e) => checkValidate(e)}>
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader fontSize={"md"}>Edit rate</DrawerHeader>

-            {isLoading ? (
+            {isFetching ? (
              <FullscreenLoaders />
            ) : (
              <>
@@ -153,16 +228,26 @@ const EditExchangeRate = ({
                    <Text fontSize={"sm"}>{formatDate(getTomorrowDate())}</Text>
                  </FormControl>

-                  <FormControl mb={4} isRequired>
+                  <FormControl mb={4} isRequired isInvalid={!!rateError}>
                    <FormLabel fontSize={"sm"}>Rate</FormLabel>
                    <Input
-                      required
                      type="number"
                      placeholder="Type rate here..."
                      size={"sm"}
                      value={rate}
-                      onChange={(e) => setRate(e.target.value)}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        // Match numbers with at most 8 decimal places
+                        if (/^\d*\.?\d{0,8}$/.test(value)) {
+                          setRate(value);
+                        }
+                      }}
                    />
+                    {rateError && (
+                      <Text color="red.500" fontSize="sm" mt={1}>
+                        {rateError}
+                      </Text>
+                    )}
                  </FormControl>
                </DrawerBody>
                <DrawerFooter>
@@ -173,6 +258,15 @@ const EditExchangeRate = ({
                    size={"sm"}
                    mr={3}
                    onClick={onClose}
+                    // onClick={() => {
+                    //   window.location.reload();
+                    //   onClose(); 
+                    // }}
+                    // onClick={() => {
+                    //   setRate(""); 
+                    //   setRateError(""); 
+                    //   onClose();
+                    // }}
                  >
                    Cancel
                  </Button>
--- a/src/Services/ban.investor.service.js
+++ b/src/Services/ban.investor.service.js
@@ -20,9 +20,9 @@ export const banInvestorDetails = createApi({
 

    getUnbanInvestor: builder.query({
-      query: ({ page, size, searchTerm, userStatus, KYCStatus, country_xid  }) => {
+      query: ({ page, size, search, userStatus, KYCStatus, country_xid  }) => {
        // Start with the base URL, including searchTerm
-        let baseURL = `/investorDetails/admin/getAllUnbanned?search=${searchTerm || ""}&userStatus=${userStatus ||""}&KYCStatus=${KYCStatus || ""}&country_xid=${country_xid||""}`;
+        let baseURL = `/investorDetails/admin/getAllUnbanned?search=${search || ""}&userStatus=${userStatus ||""}&KYCStatus=${KYCStatus || ""}&country_xid=${country_xid||""}`;
        
        // Conditionally append kycStatus if it's defined
        if (KYCStatus) {
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -256,8 +256,9 @@ export const ioService = createApi({

    updateCancleStatusTo: builder.mutation({
      query: ({ id, data }) => ({
-        url: `/io/admin/transaction/${id}/cancel`,
+        url: `/io/admin/maker-transaction/${id}/io-cancel`,
        method: "POST",
+        body:data
      }),
      invalidatesTags: ["getIOById"],
    }),