selected css

src/App.css

@@ -14,6 +14,11 @@
   /* font-family: "Lato", sans-serif !important; */
 }
 
+::selection {
+  background-color: #004717; /* Change this to your desired color */
+  color: white; /* Optional: Change the text color */
+}
+
 .pointer {
   cursor: pointer !important;
 }

src/Components/CurrencyInput.jsx

@@ -9,12 +9,11 @@ import { Input } from "@chakra-ui/react";
 // };
 
 export const formatCurrency = (value) => {
-  if (!value) return '';
+  if (value === undefined || value === null) return ''; // Handle undefined or null values
-  const [integer, decimal] = value?.split('.');
+  const [integer, decimal] = String(value).split('.'); // Convert value to string before splitting
-  const formattedInteger = integer?.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
 };
-
 const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
 
   

src/Components/FormField.jsx

@@ -404,7 +404,7 @@ const FormField = ({
                           w={6}
                           h={6}
                           src={
-                            " https://tanami.betadelivery.com/" +
+                            import.meta.env.VITE_IMAGE_URL +
                             item?.logo
                           }
                         />

src/Components/ImageViewer.jsx

@@ -26,7 +26,7 @@ const ImageViewer = ({ src, isOpen, onClose }) => {
               rounded={6}
               w={"100%"}
               h={"100%"}
-              src={"https://tanami.betadelivery.com/" + src}
+              src={import.meta.env.VITE_IMAGE_URL + src}
             />
           </ModalBody>
         </ModalContent>

src/Components/MobileView.jsx

@@ -10,6 +10,7 @@ import {
   ModalHeader,
   ModalOverlay,
   Progress,
+  Spinner,
   Stack,
   Text,
 } from "@chakra-ui/react";
@@ -25,20 +26,26 @@ import { IoBatteryHalf } from "react-icons/io5";
 import { BiWifi } from "react-icons/bi";
 import { useGetIOByIdQuery } from "../Services/io.service";
 import { useNavigate, useParams } from "react-router-dom";
+import FullscreenLoaders from "./Loaders/FullscreenLoaders";
+import { formatDate } from "../Constants/Constants";
+import { BsFileText } from "react-icons/bs";
 
-const MobileView = ({ isOpen, onClose, finalRef }) => {
+const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
   const [time, setTime] = useState(new Date());
   const navigate = useNavigate();
   const params = useParams();
-  const id = params?.id;
+  const id = actionId;
 
   const {
-    data,
+    data: IObyID,
     isLoading: IObyIDisLoading,
     error: IObyIDerror,
   } = useGetIOByIdQuery(id, { skip: !id });
 
-  console.log(data);
+  console.log(IObyID);
+
+  const keyMerits = IObyID?.data?.keyMerits || [];
+  const artifactsImage = IObyID?.data?.artifactsImage || [];
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -52,7 +59,7 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
     return date.toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit",
-      hour12: false,
+      hour12: true,
     });
   };
 
@@ -79,7 +86,17 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
             display={"flex"}
             justifyContent={"center"}
             h={"600px"}
-            w={"330px"}
+            w={"320px"}
+            sx={{
+              "@media (max-width: 2024px)": {
+                  height:"695px",
+                  width:"360px",
+              },
+              "@media (max-width: 1440px)": {
+                  height:"600px",
+                  width:"320px",
+              },
+            }}
           >
             <Image
               h={"100%"}
@@ -98,6 +115,21 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
               pt={"36px"}
               px={"15px"}
             >
+              {IObyIDisLoading ? (
+                <Box
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"center"}
+                h={"100%"}
+                >
+                  <Spinner 
+                  thickness='3px'
+                  color='purple.900'
+                  size='lg'
+                   />
+                </Box>
+              ) : (
+                <>
                   <Box>
                     <Box
                       display={"flex"}
@@ -140,6 +172,14 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                     position={"relative"}
                     borderBottomLeftRadius={"23px"}
                     borderBottomRightRadius={"23px"}
+                    sx={{
+                      "@media (max-width: 2024px)": {
+                          height:"575px",
+                      },
+                      "@media (max-width: 1440px)": {
+                        height:"483px",
+                      },
+                    }}
                   >
                     <Box
                       mb={4}
@@ -175,16 +215,21 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                         >
                           <LuClock color="#d8804e" />{" "}
                           <Text mb={0} ml={1}>
-                        Closing Date Aug 23 2024
+                            Closing Date {formatDate(IObyID?.data?.closingDate)}
                           </Text>
                         </Text>
+                        {artifactsImage?.[0]?.artifactPathName && (
                           <Image
                             borderTopLeftRadius={"20px"}
                             borderTopRightRadius={"20px"}
                             h={"130px"}
                             w={"100%"}
-                      src={mobileBanner}
+                            src={
+                              "https://tanami.betadelivery.com/" +
+                              artifactsImage[0]?.artifactPathName
+                            }
                           />
+                        )}
                       </Box>
                       <Stack mt="3" bg={"#fff"} py={4} px={4}>
                         <Text
@@ -193,10 +238,10 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                           color={"#000"}
                           mb={0}
                         >
-                      Guinevere Gates
+                          {IObyID?.data?.investmentType?.investmentTypeName}
                         </Text>
                         <Heading fontSize="16px" color={"#004717"}>
-                      BHD 46,258
+                          BHD {IObyID?.data?.goalAmount}
                         </Heading>
                         <Progress
                           colorScheme="green"
@@ -218,60 +263,63 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                           mb={0}
                           color={"#9d9d9d"}
                         >
-                      fugit eligendi dolore dolore et
+                          {IObyID?.data?.descriptionEnglish}
                         </Text>
                       </Stack>
                       <Box py={4} px={4}>
                         <Box display={"flex"} justifyContent={"space-between"}>
                           <Text
-                        fontSize={"10px"}
+                            fontSize={"xs"}
                             mb={1}
-                        fontWeight={600}
+                            fontWeight={500}
                             color={"#616161"}
                           >
                             Sponsor name:
                           </Text>
-                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
-                        Scott Simon
+                            {IObyID?.data?.sponsor?.sponsorName}
                           </Text>
                         </Box>
                         <Box display={"flex"} justifyContent={"space-between"}>
                           <Text
-                        fontSize={"10px"}
+                            fontSize={"xs"}
                             mb={1}
-                        fontWeight={600}
+                            fontWeight={500}
                             color={"#616161"}
                           >
                             Estimated return:
                           </Text>
-                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
-                        A provident veniam
+                            {IObyID?.data?.expectedReturn}
                           </Text>
                         </Box>
                         <Box display={"flex"} justifyContent={"space-between"}>
                           <Text
-                        fontSize={"10px"}
+                            fontSize={"xs"}
                             mb={1}
-                        fontWeight={600}
+                            fontWeight={500}
                             color={"#616161"}
                           >
                             Hoiding period:
                           </Text>
-                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
-                        Eius eiusmod exericit
+                            {IObyID?.data?.holdingPeriod}
                           </Text>
                         </Box>
                         <Box display={"flex"} justifyContent={"space-between"}>
                           <Text
-                        fontSize={"10px"}
+                            fontSize={"xs"}
                             mb={1}
-                        fontWeight={600}
+                            fontWeight={500}
                             color={"#616161"}
                           >
                             Minimum investment:
                           </Text>
-                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
-                        BHD 1
+                            {
+                              IObyID?.data?.minInvestmentAmt?.[0]?.country
+                                ?.minInvestmentAmt
+                            }
                           </Text>
                         </Box>
                       </Box>
@@ -287,13 +335,23 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                         Key Merits
                       </Heading>
                       <Box display={"flex"} alignItems={"center"}>
+                        {keyMerits?.[0]?.icon?.iconFilePath && (
                           <Image
-                      width={"30px"}
+                            rounded={"md"}
-                      me={2}
+                            display={"flex"}
-                      src="https://tanami.betadelivery.com/public/icons/icon3.svg"
+                            p={1}
+                            justifyContent={"center"}
+                            alignItems={"center"}
+                            src={
+                              "https://tanami.betadelivery.com/" +
+                              keyMerits[0].icon.iconFilePath
+                            }
+                            w={8}
+                            h={8}
                           />
+                        )}
                         <Text fontSize={"xs"} mb={0}>
-                      Sit sunt consequunt Dolores minim suscip
+                          {IObyID?.data?.keyMerits[0]?.meritsDescription}
                         </Text>
                       </Box>
                     </Box>
@@ -306,14 +364,20 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                       <Heading fontSize="14px" fontWeight={600}>
                         Investment Documents
                       </Heading>
-                  <Box bg={"#f5f8f6"} w={"150px"} p={3} borderRadius={"10px"}>
+                      <Box
+                        bg={"#f5f8f6"}
+                        w={"150px"}
+                        p={3}
+                        borderRadius={"10px"}
+                      >
                         <Box display={"flex"} alignItems={"center"} mb={2}>
-                      <Image
+                          {/* <Image
                         me={1}
                         src="https://tanami.betadelivery.com/public/icons/icon8.svg"
-                      />
+                      /> */}
-                      <Text fontSize={"xs"} mb={0}>
+                          <BsFileText color="forestGreen" fontSize="18px" />
-                        Merrill Rocha
+                          <Text fontSize={"xs"} mb={0} ml={2}>
+                            {IObyID?.data?.documents?.[0]?.documentName}
                           </Text>
                         </Box>
                         <Box
@@ -322,7 +386,7 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                           justifyContent={"space-between"}
                         >
                           <Text mb={0} fontSize={"sm"}>
-                        0.03 mb
+                            {IObyID?.data?.documents?.[0]?.documentSize}
                           </Text>
                           <GrDownload fontSize={"15px"} />
                         </Box>
@@ -337,12 +401,25 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                       <Heading fontSize="14px" fontWeight={600}>
                         Videos
                       </Heading>
-                  <video autoPlay style={{ borderRadius: "18px" }}>
+                      <video
+                        autoPlay
+                        loop
+                        controls
+                        style={{
+                          borderRadius: "18px",
+                          width: "100%",
+                          height: "auto",
+                        }}
+                      >
                         <source
-                      src="https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
+                          src={
+                            IObyID?.data?.artifactsVideo?.[0]
+                              ?.artifactStreamingURL
+                          }
                           type="video/mp4"
                           style={{ height: "200px" }}
                         />
+                        Your browser does not support the video tag.
                       </video>
                     </Box>
                   </Box>
@@ -370,6 +447,8 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                       Invest
                     </Button>
                   </Box>
+                </>
+              )}
             </Box>
           </Box>
         </HStack>

src/Constants/Constants.js

@@ -130,3 +130,10 @@ export function formatTimestampInGulfTimezone(timestamp) {
   };
   return date.toLocaleDateString('en-GB', options);
 }
+
+
+export function formatDate(dateString) {
+  const options = { year: 'numeric', month: 'short', day: 'numeric' };
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', options);
+}

src/Pages/Deposit/DepositRequest/DepositRequest.jsx

@@ -36,7 +36,6 @@ import { useGetDepositRequestQuery } from "../../../Services/deposit.request.ser
 import { current } from "@reduxjs/toolkit";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 import { removeTrailingZeros } from "../../../Constants/Constants";
-import { formatCurrency } from "../../../Components/CurrencyInput";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -179,7 +178,9 @@ const DepositRequest = () => {
     "Amount in Investor currency": (
       <Box display={'flex'} justifyContent={'end'} w={"100px"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          {formatCurrency(removeTrailingZeros(item?.investorAmount))} <Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
+          {/* {formatCurrency(removeTrailingZeros(item?.investorAmount))}  */}
+        {parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+          <Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
         </Text>
       </Box>
     ),

src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Box,
   Button,
   FormControl,
@@ -137,7 +138,7 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
           <Box as="form" onSubmit={handleSubmit(onSubmit)}>
             <ModalBody>
               <FormControl mb={4} isRequired>
-                <FormLabel fontSize="sm">Deposit Amount (SAR)</FormLabel>
+                <FormLabel fontSize="sm">Deposit Amount <Badge colorScheme="green">{fileredData?.currencyCode}</Badge></FormLabel>
                 <Input
                   focusBorderColor="green.400"
                   name="investorAmount"

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -229,7 +229,7 @@ const filteredData = data?.data?.rows
           colorScheme={"forestGreen"}
         >                                                                                           
           <Link
-            href={"https://tanami.betadelivery.com/" + item?.supporting_FileName}
+            href={import.meta.env.VITE_IMAGE_URL + item?.supporting_FileName}
             isExternal
           >
             <Box

src/Pages/IO_Management/CreateIO/AddCashDetails.jsx

@@ -113,7 +113,9 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
   const handleClose = () => {
     setAlert(false)
     onClose()
-    reset()
+    reset({
+      transactionAmount:""
+    })
   }
 
   return (

src/Pages/IO_Management/CreateIO/IOArtifacts.jsx

@@ -180,7 +180,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
           colorScheme={"forestGreen"}
         >
           <Link
-            href={"https://tanami.betadelivery.com/" + item?.artifactPathName}
+            href={import.meta.env.VITE_IMAGE_URL + item?.artifactPathName}
             isExternal
           >
             <Box

src/Pages/IO_Management/CreateIO/IOCashDetails.jsx

@@ -81,7 +81,7 @@ const IOCashDetails = () => {
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
     return nameMatches;
-  });
+  }).sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
 
 
   const extractedArray = filteredData?.map((item, index) => ({

src/Pages/IO_Management/CreateIO/IONAVDetails.jsx

@@ -54,7 +54,7 @@ const IONAVDetails = () => {
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
     return nameMatches;
-  });
+  }).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
 
   const  extractedArray=filteredData?.map((item, index) => ({
     id: item?.id,

src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx

@@ -37,7 +37,7 @@ import SetDisplayOrder from "./SetDisplayOrder";
 
 const downloadFile = (filePath, fileName) => {
 
-  fetch("https://tanami.betadelivery.com/" + filePath)
+  fetch(import.meta.env.VITE_IMAGE_URL+filePath)
     .then((response) => {
       if (!response.ok) {
         throw new Error("Network response was not ok");

src/Pages/IO_Management/CreateIO/KeyMerits.jsx

@@ -57,6 +57,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
   const [isBtnLoading, setIsBtnLoading] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
+  
   const {
     isOpen: isEditOpen,
     onOpen: onEditOpen,
@@ -135,7 +136,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
         p={1}
         justifyContent={"center"}
         alignItems={"center"}
-        src={" https://tanami.betadelivery.com/" + item?.icon?.iconFilePath}
+        src={import.meta.env.VITE_IMAGE_URL+ item?.icon?.iconFilePath}
         w={8}
         h={8}
       />

src/Pages/IO_Management/CreateIO/SetDisplayOrder.jsx

@@ -63,7 +63,7 @@ const SetDisplayOrder = ({ data }) => {
             p={1}
             justifyContent={"center"}
             alignItems={"center"}
-            src={"https://tanami.betadelivery.com/" + item?.icon?.iconFilePath}
+            src={import.meta.env.VITE_IMAGE_URL + item?.icon?.iconFilePath}
             w={8}
             h={8}
           />

src/Pages/IO_Management/IOArtifactsAdd.jsx

@@ -260,7 +260,7 @@ const IOArtifactsAdd = ({
                   <Image
                     rounded={"md"}
                     src={
-                      "https://tanami.betadelivery.com/" +
+                      import.meta.env.VITE_IMAGE_URL +
                       watch()?.artifactPathName
                     }
                     alt="Image Preview"

src/Pages/IO_Management/KeyMeritsAdd.jsx

@@ -285,7 +285,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
                       >
                         <Box display="flex" alignItems="center">
                           {selectedImageIcon && <Image
-                            src={`https://tanami.betadelivery.com/${selectedImageIcon}`}
+                            src={`${import.meta.env.VITE_IMAGE_URL}${selectedImageIcon}`}
                             alt={selectedImageIcon}
                             boxSize="1rem"
                             mr="12px"
@@ -305,7 +305,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
                           >
                             <Box display="flex" alignItems="center">
                               <Image
-                                src={`https://tanami.betadelivery.com/${iconFilePath}`}
+                                src={`${import.meta.env.VITE_IMAGE_URL}${iconFilePath}`}
                                 alt={iconName}
                                 boxSize="1rem"
                                 mr="12px"

src/Pages/IO_Management/KeyMeritsEdit.jsx

@@ -284,7 +284,7 @@ const KeyMeritsEdit = ({
                       >
                         <Box display="flex" alignItems="center">
                           {selectedImageIcon&&<Image
-                            src={`https://tanami.betadelivery.com/${selectedImageIcon}`}
+                            src={`${import.meta.env.VITE_IMAGE_URL}${selectedImageIcon}`}
                             alt={selectedImageIcon}
                             boxSize="1rem"
                             mr="12px"
@@ -304,7 +304,7 @@ const KeyMeritsEdit = ({
                           >
                             <Box display="flex" alignItems="center">
                               <Image
-                                src={`https://tanami.betadelivery.com/${iconFilePath}`}
+                                src={`${import.meta.env.VITE_IMAGE_URL}${iconFilePath}`}
                                 alt={iconName}
                                 boxSize="1rem"
                                 mr="12px"

src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormErrorMessage,
   FormLabel,
   HStack,
   Input,
@@ -23,8 +24,61 @@ import {
 import DataTable from "../../../../Components/DataTable/DataTable";
 import { useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
+import { useGetDistributionInvestorMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+
+export const investor = yup.object().shape({
+  amount: yup.string().required("Amount is required"),
+});
+
+
+
+const DistributionInvestor = ({ isOpen, onClose, }) => {
+  
+
+   const params = useParams() 
+    const id = params?.id
+
+  // const {
+  //   data:IObyID,
+  //   error,
+  //   isLoading,
+  // } = useGetDistributionInvestorMutation(id);
+
+  const [ getDistributionInvestment ] = useGetDistributionInvestorMutation()
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: yupResolver(investor),
+  });
+
+  // useEffect(()=>{
+  //   try {
+  //     const res = getDistributionInvestment({id,data})
+  //     console.log(res);
+      
+  //   } catch (error) {
+      
+  //   }
+  // },[])
+
+  
+  
+  // console.log(IObyID);
+  
+
+
+
 
-const DistributionInvestor = ({ isOpen, onClose }) => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sr No.",
@@ -205,22 +259,48 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     );
   };
 
+
+
+ const onSubmit = (data) =>{
+  console.log( data );
+
+  
+  
+ }
+
   return (
     <Modal size={"xl"} isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent maxW={1000}>
-        <ModalHeader fontSize={"md"}>Distribution To Investor Transaction</ModalHeader>
+        <ModalHeader fontSize={"md"}>
+          Distribution To Investor Transaction
+        </ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-        <Text as="label" mb='5px' fontSize='sm' fontWeight={500}>Amount to Distribute</Text>
+          {/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
-          <HStack mb={4}>
+            Amount to Distribute
-            <Input placeholder="$00.00" size={"sm"} className="col" />
+          </Text> */}
+          <HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4}>
             {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
+            <FormControl isInvalid={errors.amount}>
+                <FormLabel fontSize={"sm"}> Amount to Distribute</FormLabel>
+                <Controller
+                  name="amount"
+                  control={control}
+                  render={({ field }) => (
+                    <Input {...field} fontSize={"sm"} type="number" size={"sm"} textAlign={"right"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.amount?.message}
+                </FormErrorMessage>
+              </FormControl>
             <Button
               // leftIcon={<AddIcon />}
               size={"sm"}
               rounded={"sm"}
               colorScheme="forestGreen"
+              type="submit"
             >
               Calculate
             </Button>
@@ -243,14 +323,12 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
-            size={'sm'}
+            size={"sm"}
             rounded={"sm"}
           >
             Save
           </Button>
-          <Button 
+          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
-            size={'sm'}
-            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>

src/Pages/IO_Management/ViewIO/ViewIOTable.jsx

@@ -81,7 +81,7 @@ const ViewIOTable = () => {
     "Goal Amount",
     "Holding Period",
     "IO Status",
-    // "Preview",
+    "Preview",
     "Action",
   ];
 
@@ -189,18 +189,22 @@ const ViewIOTable = () => {
     ),
     Preview: (
       <Box display={"flex"} justifyContent={"start"}>
-        <Button
+        <Badge
-          // _hover={{ color: "green.500" }}
+        display={"flex"} px={2} py={1} alignItems={"center"} 
+        color={"#000"}
+        fontWeight={500}
           bg="purple.200"
-          // transition={"0.5s all"}
+          onClick={() =>{
-          onClick={onOpen}
+            setActionId(item.id) 
-          // color="green.300"
+            onOpen();
-          rounded={"md"}
+          }}
+          rounded={"sm"}
           size={"xs"}
           variant={"ghost"}
+          cursor={"pointer"}
         >
           <ImMobile className="me-1" /> View
-        </Button>
+        </Badge>
       </Box>
     ),
     Action: (
@@ -363,7 +367,7 @@ const ViewIOTable = () => {
         setMouseEntered={setMouseEntered}
       />
 
-      <MobileView isOpen={isOpen} onClose={onClose} />
+      <MobileView isOpen={isOpen} onClose={onClose} actionId={actionId} />
 
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}

src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx

@@ -41,8 +41,8 @@ import Cancle from "./HeaderModal/Cancle";
 import { AddIcon } from "@chakra-ui/icons";
 import { GrGallery } from "react-icons/gr";
 import Loader01 from "../../../Components/Loaders/Loader01";
-import { formatCurrency } from "../../../Components/CurrencyInput";
+// import { formatCurrency } from "../../../Components/CurrencyInput";
-import { removeTrailingZeros } from "../../../Constants/Constants";
+// import { removeTrailingZeros } from "../../../Constants/Constants";
 
 const ViewIOdataHeader = ({data, isLoading}) => {
   const params = useParams();
@@ -51,6 +51,7 @@ const ViewIOdataHeader = ({data, isLoading}) => {
   const btnRef = useRef();
   const { IODetails, isIOloading } = useContext(GlobalStateContext);
   
+  
   const {
     isOpen: isInvestmentOpen,
     onOpen: onInvestmentOpen,
@@ -104,6 +105,10 @@ const ViewIOdataHeader = ({data, isLoading}) => {
   };
 
 
+  console.log(import.meta.env.VITE_IMAGE_URL +
+    IODetails?.artifactsImage?.[0]?.artifactPathName);
+
+
 
   const menu = [
     {
@@ -208,7 +213,7 @@ const filteredMenu = menu?.filter(item => apiTransactionTitles?.includes(item.id
             w={"100%"}
             objectFit={"cover"}
             src={
-              " https://tanami.betadelivery.com/" +
+              import.meta.env.VITE_IMAGE_URL +
               IODetails?.artifactsImage?.[0]?.artifactPathName
             }
             alt={IODetails?.ioName}
@@ -294,7 +299,8 @@ const filteredMenu = menu?.filter(item => apiTransactionTitles?.includes(item.id
           IO MV
         </Text>
         <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
-          {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"}
+          {/* {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"} */}
+          {parseFloat(IODetails?.ioNAV||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
         </Text>
       </Box>
 
@@ -303,7 +309,8 @@ const filteredMenu = menu?.filter(item => apiTransactionTitles?.includes(item.id
           IO cash
         </Text>
         <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
-          {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"}
+          {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
+          {parseFloat(IODetails?.ioCash||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
         </Text>
       </Box>
 
@@ -312,7 +319,8 @@ const filteredMenu = menu?.filter(item => apiTransactionTitles?.includes(item.id
           IO NAV
         </Text>
         <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
-          {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"}
+          {/* {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"} */}
+          {parseFloat(IODetails?.ioMVNAV||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
         </Text>
       </Box>
 

src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx

@@ -263,7 +263,8 @@ const ViewIOdetails = () => {
     {
       label: "Goal Amount",
       placeHolder: "$00.00",
-      value: IObyID?.data?.goalAmount ? formatCurrency(removeTrailingZeros(IObyID?.data?.goalAmount)) : "---",
+      value: IObyID?.data?.goalAmount?parseFloat(IObyID?.data?.goalAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "---",
+      
       name: "goalAmount",
       type: "number",
       isRequired: true,

src/Services/api.service.js

@@ -3,7 +3,7 @@ import axios from "axios";
 // Create an Axios instance for API calls
 export const api = axios.create({
   // baseURL: `https://tanami.betadelivery.com/api/v1`,
-  baseURL: `https://admin.tanami.betadelivery.com/api/v1`, // Replace with your API base URL
+  baseURL: import.meta.env.VITE_BAS_URL, // Replace with your API base URL
   timeout: 10000, // Adjust timeout as needed
   headers: {
     "Content-Type": "application/json",

src/Services/deposite.service.js

@@ -0,0 +1,101 @@
+//sponser.service
+// Need to use the React-specific entry point to import createApi
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { api } from "./api.service";
+
+const baseUrl = api?.defaults.baseURL;
+
+// const baseUrl = `${import.meta.env.VITE_API_BASE_URL}/${import.meta.env.VITE_API_VERSION}`
+
+// Define a service using a base URL and expected endpoints
+export const deposite = createApi({
+  reducerPath: "deposite",
+  baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
+  tagTypes: ["gtDeposite"],
+  endpoints: (builder) => ({
+
+
+
+    // ======[Get All]=====
+
+    getSponserMaster: builder.query({
+      query: ({ page, size }) => `/sponsor/admin?page=${page}&size=${size}`,
+      providesTags: ["getSponser"],
+    }),
+
+
+    // ========[Get Active]========
+
+    getActiveSponserMaster: builder.query({
+      query: () => `/sponsor/admin/active`,
+      providesTags: ["getSponser"],
+    }),
+
+    getSponserMasterActive: builder.query({
+      query: () => "/sponsor/admin/active",
+    }),
+    
+
+    // ======[Get ID]=====
+
+    getSponserById: builder.query({
+      query: (id) => `/sponsor/admin/${id}`,
+      providesTags: ["getSponser"],
+    }),
+
+    // ========[Toggle Status]========
+
+    toggleStatus: builder.mutation({
+      query: ({ id }) => ({
+        url: `/sponsor/admin/toggle-status/${id}`,
+        method: "PATCH",
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
+
+    // ========[Create Sponser]========
+
+    createSponser: builder.mutation({
+      query: (data) => ({
+        url: `/sponsor/admin`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
+
+    // ========[Update Sponser]========
+
+    updateSponser: builder.mutation({
+      query: ({ data, id }) => ({
+        url: `/sponsor/admin/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
+
+    // ========[Delete Sponser]========
+
+    deleteSponser: builder.mutation({
+      query: (id) => ({
+        url: `/sponsor/admin/delete/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
+
+  }),
+});
+
+// Export hooks for usage in functional components
+export const {
+  useGetSponserMasterQuery,
+  useGetSponserMasterActiveQuery,
+  useToggleStatusMutation,
+  useCreateSponserMutation,
+  useUpdateSponserMutation,
+  useGetSponserByIdQuery,
+  useDeleteSponserMutation,
+  useGetActiveSponserMasterQuery
+} = sponserMaster;

src/Services/io.service.js

@@ -231,7 +231,7 @@ export const ioService = createApi({
 
 
 
-    // =====[ Amount Investment ]
+    // =====[ Amount Investment ] ======
     amountIvestment : builder.mutation({
       query: ({ data, id }) => ({
         url: `/io/admin/amount-invested/${id}`,
@@ -242,9 +242,17 @@ export const ioService = createApi({
     }),
 
 
+    // ======== [ Distribution Transaction ] ========
 
 
-
+    getDistributionInvestor : builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/io-distribution/pre-populate/${id}`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getIOById"],
+    }),
 
   
 
@@ -296,8 +304,8 @@ export const {
   useUpdateStatusIoMutation,
 
 
-
-
-
   useAmountIvestmentMutation,
+
+
+  useGetDistributionInvestorMutation,
 } = ioService;

src/Services/token.serivce.js

@@ -1,8 +1,8 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
 // Define a base query function with RTK Query
 // export const baseQuery = fetchBaseQuery({
-//   baseUrl: 'https://admin.tanami.betadelivery.com/api/v1',
+//   baseUrl: 'https://sprint4.tanami.betadelivery.com/api/v1',
 //   prepareHeaders: (headers) => {
 //     const token = localStorage.getItem('accessToken');
 //     if (token) {
@@ -12,17 +12,14 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 //   },
 // });
 
-
-
-
 // Define a base query function with token refresh logic
 export const baseQuery = async (args, api, extraOptions) => {
   let result = await fetchBaseQuery({
-    baseUrl: 'https://admin.tanami.betadelivery.com/api/v1',
+    baseUrl: import.meta.env.VITE_BAS_URL,
     prepareHeaders: (headers) => {
-      const token = localStorage.getItem('accessToken');
+      const token = localStorage.getItem("accessToken");
       if (token) {
-        headers.set('x-auth-token', token);
+        headers.set("x-auth-token", token);
       }
       return headers;
     },
@@ -30,38 +27,47 @@ export const  baseQuery = async (args, api, extraOptions) => {
 
   if (result.error && result.error.status === 401) {
     // Handle token refresh
-    const refreshToken = localStorage.getItem('refreshToken');
+    const refreshToken = localStorage.getItem("refreshToken");
     if (refreshToken) {
       try {
         const refreshResult = await fetchBaseQuery({
-          baseUrl: 'https://admin.tanami.betadelivery.com/api/v1',
+          baseUrl: import.meta.env.VITE_BAS_URL,
-        })({
+        })(
-          url: '/auth/user/regenerate-token',
+          {
-          method: 'POST',
+            url: "/auth/user/regenerate-token",
+            method: "POST",
             body: { refreshToken },
-        }, api, extraOptions);
+          },
+          api,
+          extraOptions
+        );
 
         if (refreshResult.data) {
-          
           // Save new tokens
-          localStorage.setItem('accessToken', refreshResult.data.access.token);
+          localStorage.setItem("accessToken", refreshResult.data.access.token);
-          localStorage.setItem('refreshToken', refreshResult.data.refresh.token);
+          localStorage.setItem(
-          localStorage.setItem('refreshTokenExp', refreshResult.data.refresh.expires);
+            "refreshToken",
+            refreshResult.data.refresh.token
+          );
+          localStorage.setItem(
+            "refreshTokenExp",
+            refreshResult.data.refresh.expires
+          );
 
           // Retry the original request with the new token
           result = await fetchBaseQuery({
-            baseUrl: 'https://admin.tanami.betadelivery.com/api/v1',
+            baseUrl: import.meta.env.VITE_BAS_URL,
             prepareHeaders: (headers) => {
-              const token = localStorage.getItem('accessToken');
+              const token = localStorage.getItem("accessToken");
               if (token) {
-                headers.set('x-auth-token', token);
+                headers.set("x-auth-token", token);
               }
               return headers;
             },
           })(args, api, extraOptions);
         }
       } catch (err) {
-        console.error('Failed to refresh token:', err);
+        console.error("Failed to refresh token:", err);
         // Handle refresh failure (e.g., redirect to login)
       }
     }
@@ -72,32 +78,32 @@ export const  baseQuery = async (args, api, extraOptions) => {
 
 // Create an RTK Query API slice
 export const apiSlice = createApi({
-  reducerPath: 'api',
+  reducerPath: "api",
   baseQuery: baseQuery,
   endpoints: (builder) => ({
     login: builder.mutation({
       query: (credentials) => ({
-        url: '/auth/admin',
+        url: "/auth/admin",
-        method: 'POST',
+        method: "POST",
         body: credentials,
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         try {
           const { data } = await queryFulfilled;
           // Store tokens in local storage
-          localStorage.setItem('accessToken', data?.data?.access?.token) ;
+          localStorage.setItem("accessToken", data?.data?.access?.token);
-          localStorage.setItem('refreshToken', data?.data?.refresh?.token);
+          localStorage.setItem("refreshToken", data?.data?.refresh?.token);
           // localStorage.setItem('refreshTokenExp', data?.data?.refresh?.expires);
-          localStorage.setItem('accessTokenExp', data?.data?.access?.expires);
+          localStorage.setItem("accessTokenExp", data?.data?.access?.expires);
         } catch (error) {
-          console.error('Login failed:', error);
+          console.error("Login failed:", error);
         }
       },
     }),
     refreshToken: builder.mutation({
       query: (refreshToken) => ({
-        url: '/auth/user/regenerate-token',
+        url: "/auth/user/regenerate-token",
-        method: 'POST',
+        method: "POST",
         body: { refreshToken },
       }),
     }),