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/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>
-          <HStack mb={4}>
-            <Input placeholder="$00.00" size={"sm"} className="col" />
+          {/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
+            Amount to Distribute
+          </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 
-            size={'sm'}
-            rounded={"sm"} mr={3} onClick={onClose}>
+          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>

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,11 +242,19 @@ 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;