From 0c21e997322406cf1c11007dc1a94ca3ff25e0eb Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:41:19 +0530
Subject: [PATCH] update comment changes

---
 .../CreateIO/IOArtifactsVideo.jsx             |  4 +-
 .../IOCashDetails/RequestApproveModal.jsx     | 14 +--
 .../IOCashDetails/RequestRejectModal.jsx      | 10 ++-
 .../IONAVDetails/RequestApproveModal.jsx      | 14 +--
 .../IONAVDetails/RequestRejectModal.jsx       | 10 ++-
 .../ApproveDistrubationModal.jsx              | 14 +--
 .../IOTransaction/ApproveInvestedModal.jsx    | 14 +--
 .../ApprovedCancelTransaction.jsx             | 10 +--
 .../CreateIO/IOTransaction/ApprovedExit.jsx   | 12 +--
 .../IOTransaction/RequestApproveModal.jsx     | 14 +--
 .../IOTransaction/RequestExitApproveModal.jsx | 14 +--
 .../IOTransaction/RequestRejectModal.jsx      |  9 +-
 .../IO_Management/CreateIO/Investors.jsx      |  4 +-
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 85 ++++++++++++++++---
 .../IO_Management/ViewIO/ViewIOdetails.jsx    | 36 ++++----
 .../DrawalRequest/DrawalRequestApprove.jsx    | 10 ++-
 .../DrawalRequest/DrawalRequestReject.jsx     | 12 ++-
 17 files changed, 193 insertions(+), 93 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
index 535f7a7..c9b71a7 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -152,7 +152,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
 
           <DrawerBody>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.artifactName}>
+              <FormControl isInvalid={errors.artifactName} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
                 <Controller
                   name="artifactName"
@@ -166,7 +166,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
                 </FormErrorMessage>
               </FormControl>
 
-              <FormControl isInvalid={errors.artifactStreamingURL}>
+              <FormControl isInvalid={errors.artifactStreamingURL} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
                 <Controller
                   name="artifactStreamingURL"
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
index 1acc243..a737d08 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -134,14 +134,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
-                 {watch("checkerComment")?.length || 0} characters.
+                 {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
index 13b37ea..4d1a439 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -134,14 +134,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
               <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                {watch("checkerComment")?.length || 0} characters.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index 4fb5ba8..1ce7964 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -126,8 +126,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -136,14 +136,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}> Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
index b1bd5de..ff29faf 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveInvestedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -134,14 +134,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
index 596c62b..9c0e86f 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -108,8 +108,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -118,14 +118,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                   <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
index 977fc3f..d2506bd 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -24,7 +24,7 @@ import {
   import {  useApproveExitTransactionMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -122,8 +122,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -132,14 +132,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                  <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
index 3a1bd92..1eae102 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveDistributionMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,8 +123,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -133,14 +133,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
               <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                {watch("checkerComment")?.length || 0} characters.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
index e6c4b5f..a5a16a5 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributionMutation, useApproveExitMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,8 +123,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -133,14 +133,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index d4631f4..3e1660d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -136,6 +139,10 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index 36f0955..35a6eff 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -508,7 +508,7 @@ console.log(IODetails?.investors);
             > 
               Export xls
             </Button>
-            <Box as="span">
+            {/* <Box as="span">
               <Icon
                 ms={0}
                 animation={
@@ -524,7 +524,7 @@ console.log(IODetails?.investors);
                 _hover={{ bg: "gray.100" }}
                 cursor={"pointer"}
               />
-            </Box>
+            </Box> */}
           </Box>
 
           <HStack
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index 5b68c9b..b44b695 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -1,7 +1,10 @@
 import {
   Box,
   Button,
+  Icon,
   Input,
+  keyframes,
+  Stack,
   Tab,
   TabList,
   TabPanel,
@@ -16,7 +19,7 @@ import { useContext, useEffect, useState } from "react";
 import FormInputView from "../../../Components/FormInputView";
 import { useForm } from "react-hook-form"; // assuming react-hook-form is used
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import { ArrowBackIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ViewIOdataHeader from "./ViewIOdataHeader";
 import ViewIOdetails from "./ViewIOdetails";
@@ -42,20 +45,30 @@ import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
 import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
 import { GoDotFill } from "react-icons/go";
 
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
 const ViewIOdata = () => {
   const params = useParams();
   const id = params?.id;
-  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
+  const { data, error, isLoading, refetch } = useGetIOprepopulateDataQuery();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
   const [isEditing, setIsEditing] = useState(false);
+  const [isRefetchLoading, setIsRefetchLoading] = useState(false);
   const { IODetails, setIODetails } = useContext(GlobalStateContext);
-  console.log(IODetails?.isInvestedAmount); 
+  console.log(IODetails?.isInvestedAmount);
 
   const tabs = [
     { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
     {
-      label: "Investment documents", 
+      label: "Investment documents",
       content: <InvestmentDocument data={data?.data} />,
     },
     { label: "Key merits", content: <KeyMerits data={data?.data} /> },
@@ -75,9 +88,14 @@ const ViewIOdata = () => {
     // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
   ];
 
-  
+  const handleRefresh = async () => {
+    setIsRefetchLoading(true);
+
+    await refetch();
+    setIsRefetchLoading(false);
+  };
+
   console.log(IODetails?.ioNAVHistory);
-  
 
   return (
     <Box
@@ -99,7 +117,7 @@ const ViewIOdata = () => {
 
       <Tabs mt={4}>
         <TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
-          <Box display={"flex"}>
+          <Box display={"flex"} position={"relative"} w={"100%"}>
             {tabs.map(({ label }, index) => (
               <Tab
                 px={3}
@@ -113,7 +131,6 @@ const ViewIOdata = () => {
                     ? false
                     : !IODetails?.isInvestedAmount
                 }
-                
                 // isDisabled={
                 //   index === 0 ||
                 //   index === 1 ||
@@ -132,11 +149,57 @@ const ViewIOdata = () => {
                 fontWeight={500}
                 position={"relative"}
               >
-                {label} {index === 5 &&IODetails?.ioCashStatusHistory?.Pending?.length !== 0||
-                  index === 6  && IODetails?.ioNAVStatusHistory?.Pending?.length !== 0 ||
-                  index === 8 && IODetails?.ioTransactionRecords?.Pending?.length !== 0 ? <Box as="span" right={0} color={"forestGreen"} top={1} position={"absolute"}><GoDotFill /></Box>:""}
+                {label}{" "}
+                {(index === 5 &&
+                  IODetails?.ioCashStatusHistory?.Pending?.length !== 0) ||
+                (index === 6 &&
+                  IODetails?.ioNAVStatusHistory?.Pending?.length !== 0) ||
+                (index === 8 &&
+                  IODetails?.ioTransactionRecords?.Pending?.length !== 0) ? (
+                  <Box
+                    as="span"
+                    right={0}
+                    color={"forestGreen"}
+                    top={1}
+                    position={"absolute"}
+                  >
+                    <GoDotFill />
+                  </Box>
+                ) : (
+                  ""
+                )}
               </Tab>
             ))}
+            {/* <Box as="span" position={"absolute"} right={2} bottom={1}>
+              <Icon
+                ms={0}
+                animation={
+                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
+                }
+                bg={"gray.50"}
+                onClick={handleRefresh}
+                fontWeight={600}
+                as={RepeatIcon}
+                boxSize={8}
+                p={2}
+                rounded={"full"}
+                _hover={{ bg: "gray.100" }}
+                cursor={"pointer"}
+              />
+            </Box> */}
+            <Stack position={"absolute"} right={2} bottom={1} direction="row" spacing={4}>
+              <Button
+                isLoading={isRefetchLoading}
+                loadingText="Refresh"
+                colorScheme="forestGreen"
+                variant="solid"
+                size={'xs'}
+                onClick={handleRefresh}
+                fontWeight={400}
+              >
+                Refresh
+              </Button>
+            </Stack>
           </Box>
         </TabList>
         <TabPanels>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
index bd2d3f8..6c837be 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
@@ -1,4 +1,4 @@
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, Text } from "@chakra-ui/react";
 import React, { useContext, useEffect } from "react";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -240,11 +240,6 @@ const ViewIOdetails = () => {
       width: "32.3%",
       value: IObyID?.data?.isShariah,
     },
-
-
-
-
-
     {
       label: "Investment Type",
       placeHolder: "Select option",
@@ -351,19 +346,22 @@ const ViewIOdetails = () => {
 
   return (
     <Box position={"relative"}>
-      <Button
-        position={"absolute"}
-        top={"-62px"}
-        right={0}
-        onClick={() => navigate(`/create-io/${params?.id}`)}
-        ps={4}
-        pe={4}
-        colorScheme="forestGreen"
-        rounded={"sm"}
-        size={"xs"}
-      >  
-        Edit IO
-      </Button>
+      <Box display={"flex"} justifyContent={"space-between"}>
+        <Text></Text>
+        <Button
+          // position={"absolute"}
+          // top={"-62px"}
+          right={0}
+          onClick={() => navigate(`/create-io/${params?.id}`)}
+          ps={4}
+          pe={4}
+          colorScheme="forestGreen"
+          rounded={"sm"}
+          size={"xs"}
+        >  
+          Edit IO
+        </Button>
+      </Box>
       <FormInputView  groupedFields={groupedFields} />
     </Box>
   );
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
index a70e7e6..6163e42 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Heading,
   HStack,
@@ -36,7 +37,8 @@ const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
   investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const DrawalRequestApprove = ({
@@ -59,6 +61,7 @@ const DrawalRequestApprove = ({
   const {
     control,
     register,
+    watch,
     reset,
     handleSubmit,
     formState: { errors },
@@ -259,12 +262,17 @@ const DrawalRequestApprove = ({
                   size="sm"
                   placeholder={"Enter your comments...."}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comment && (
                   <Text fontSize="xs" color="red">
                     {errors.comment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
index 3766c66..e9e3668 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
@@ -2,6 +2,7 @@ import {
     Box,
     Button,
     FormControl,
+    FormHelperText,
     FormLabel,
     Input,
     Modal,
@@ -24,7 +25,8 @@ import {
 import { useDepositRejectMutation } from "../../../Services/drawal.request.service";
   
   export const conformModalSchema = yup.object().shape({
-    comments: yup.string().required("Comment is required"),
+    comments: yup.string().required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
   const DrawalRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -34,6 +36,7 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
   
     const {
       register,
+      watch,
       reset,
       handleSubmit,
       formState: { errors },
@@ -101,16 +104,21 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
                   placeholder={"Enter your comments...."}
                   rounded={"md"}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comments && (
                   <Text fontSize="xs" color="red">
                     {errors.comments.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
-              <Button
+              <Button 
                 colorScheme="gray"
                 mr={3}
                 onClick={onClose}