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

Reviewed-on: #31

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{

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"):

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";
@@ -29,9 +32,7 @@ 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 [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,
@@ -80,21 +74,20 @@ const Notification = () => {
   } = useForm({
     resolver: yupResolver(notificationNew),
 
-  defaultValues: {
-    title: '',
-    message: '',
-  },
+    defaultValues: {
+      title: "",
+      message: "",
+    },
   });
 
   console.log(errors);
-  
+
   const {
     data: contact,
     isLoading: contactLoading,
     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 : 10000 || pageSize || 500,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  });;
+  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: 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,55 +183,47 @@ const Notification = () => {
   }, {});
 
   const onSubmit = async (data) => {
-
     const dataToPass = {
       ...data,
-      principal_xid:selectedRadio
-    }
+      principal_xid: selectedRadio,
+    };
     setIsLoading(true);
     try {
       const res = await sendNotification(dataToPass);
       console.log(res);
-      
+
       if (res?.error) {
         toast({
           render: () => (
             <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,13 +306,14 @@ 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}>
@@ -322,18 +324,77 @@ const Notification = () => {
         onSubmit={handleSubmit(onSubmit)}
         btnLoading={isLoading}
       >
-        <Box overflow={'scroll'} h={'58vh'}>
-      <NormalTable
-        centered={true}
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        // isLoading={isLoading}
-        setSelectedRadio={setSelectedRadio}
-        selectedRadio={selectedRadio}
-        showRadioButton={true}
-      />
-      </Box>
+        <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={investorDetailsLoading}
+            setSelectedRadio={setSelectedRadio}
+            selectedRadio={selectedRadio}
+            showRadioButton={true}
+          />
+        </Box>
       </FormInputMain>
     </Box>
   );

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
-    size: 10000, // 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>
     ),
@@ -135,9 +165,9 @@ const EmailNotification = () => {
 
   const modules = {
     toolbar: [
-    //   [{ header: "1" }, { header: "2" }, 
-    //   // { font: [] }
-    // ],
+      //   [{ header: "1" }, { header: "2" },
+      //   // { font: [] }
+      // ],
       // [{ size: [] }],
       ["bold", "italic", "underline", "strike", "blockquote"],
       [{ list: "ordered" }, { list: "bullet" }],
@@ -147,12 +177,15 @@ const EmailNotification = () => {
 
   // Main submission logic
   const handleSend = async (e) => {
-    e.preventDefault();  // Prevent default form submission
+    e.preventDefault(); // Prevent default form submission
 
     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;
@@ -172,44 +208,36 @@ const EmailNotification = () => {
     const emailPayload = {
       subject,
       body: value,
-      principal_xid:  selectedRadio,
+      principal_xid: selectedRadio,
     };
 
-
     try {
-      const res = await sendCustomNotification(emailPayload)
-      console.log(res); 
+      const res = await sendCustomNotification(emailPayload);
+      console.log(res);
       if (res?.error) {
         toast({
           render: () => (
             <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,40 +275,92 @@ 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
-          }}
-          value={value}
-          onChange={setValue}
-          modules={modules}
-          placeholder="Start typing here..."
-
-        />
+          <ReactQuill
+            theme="snow"
+            style={{
+              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'}>
-      <NormalTable
-        centered={true}
-        emptyMessage={`We don't have any Sponsors`}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        setSelectedRadio={setSelectedRadio}
-        selectedRadio={selectedRadio}
-        showRadioButton={true}
-      />
+      <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`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+          showRadioButton={true}
+        />
       </Box>
 
       <HStack justifyContent={"flex-end"} px={2}>

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,10 +169,10 @@ 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"}>
-          {IODetails?.ioTransactionRecords?.Pending[index]?.transactionAmount?.toLocaleString(undefined, {
+          {item?.distribution_amt?.toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           })}

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 = ({

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,9 +68,10 @@ 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
       else {
         res = await updateStatusIo({
@@ -72,7 +81,7 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
           id,
         });
       }
-  
+
       console.log("API Response:", res);
       setIsLoading(false);
       handleClose();
@@ -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"
@@ -154,7 +166,7 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                       <Badge
                         rounded={"full"}
                         pt={1.5}
-                        pb={1.5} 
+                        pb={1.5}
                         ps={4}
                         pe={4}
                         mt={1.5}
@@ -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

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"}

src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx

@@ -105,14 +105,16 @@ 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) => ({
+  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,
@@ -120,8 +122,10 @@ const InvestorDetails = () => {
     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",
+    "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",
   }));
 
@@ -181,32 +185,72 @@ 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}
-        >
-          {item.ioStatus ? "Ban" : "Unban"}
-        </Badge>
+    "Investor Portfolio": (
+      <Box
+        display={"flex"}
+        justifyContent={"end"}
+        w={"130px"}
+        isTruncated={true}
+      >
+        <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": (
@@ -221,7 +265,7 @@ const InvestorDetails = () => {
           variant={"solid"}
         >
           {/* {item.KYCStatus ? "Completed" : "Not complete"} */}
-          {item?.KYCStatus === true ? "Completed" : "NotCompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
         </Text>
       </Box>
     ),
@@ -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>

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>

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>

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) {

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"],
     }),