From f7a8da789ca83168a117cf43708eef968b814f63 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Mon, 12 Aug 2024 15:35:39 +0530
Subject: [PATCH] update

---
 src/Pages/Dashbaord.jsx                       |   8 +-
 src/Pages/IO_Management/CreateIO/AddIONav.jsx | 234 ++++++++++++++++++
 .../IO_Management/CreateIO/IONAVDetails.jsx   |  95 +++++--
 src/Pages/IO_Management/IOArtifactsAdd.jsx    |   5 +-
 src/Pages/IO_Management/KeyMeritsAdd.jsx      |   2 +-
 .../ViewIO/HeaderModal/UpdateIONav.jsx        |   6 +-
 .../ViewIO/HeaderModal/UpdateIOStatus.jsx     |  47 +++-
 .../IO_Management/ViewIO/ViewIOTable.jsx      |  25 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |  35 +--
 9 files changed, 392 insertions(+), 65 deletions(-)
 create mode 100644 src/Pages/IO_Management/CreateIO/AddIONav.jsx

diff --git a/src/Pages/Dashbaord.jsx b/src/Pages/Dashbaord.jsx
index 5f71e43..dda5aeb 100644
--- a/src/Pages/Dashbaord.jsx
+++ b/src/Pages/Dashbaord.jsx
@@ -126,12 +126,12 @@ const Dashbaord = () => {
           <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
         </Box>
       </Box>
-      <Box h={'330px'} display={'flex'} pe={4} >
+      <Box h={'45%'} display={'flex'} pe={4} >
         <Box w={'60%'} h={'100%'} p={4} pe={6} pt={1}  >
           <Box position={'relative'} h={'100%'} boxShadow={'lg'} display={'flex'} justifyContent={'center'} rounded={'xl'} p={5} ps={0} pe={0}>
-            <Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text> 
-             <LineChart />
-            {/* <ApexLine/> */}
+            {/* <Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text> 
+             <LineChart /> */}
+            <ApexLine/>
           </Box>
         </Box>
 
diff --git a/src/Pages/IO_Management/CreateIO/AddIONav.jsx b/src/Pages/IO_Management/CreateIO/AddIONav.jsx
new file mode 100644
index 0000000..ad7c533
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/AddIONav.jsx
@@ -0,0 +1,234 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Select,
+    Stack,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+  import { v4 as uuidv4 } from "uuid";
+  import { useCreateIoCashMutation, useCreateIoNavMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import ToastBox from "../../../Components/ToastBox";
+  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+  import CurrencyInput from "../../../Components/CurrencyInput";
+import { formatDatee } from "../../../Components/FormField";
+  
+  const ioNav = yup.object().shape({
+    transactionDate: yup.string().required("Artifact name is required"),
+    transactionAmount: yup.number().required("Artifact name is required"),
+    comments: yup.string().notRequired(),
+  });
+  
+  const AddIONav = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+    const params = useParams()
+    const id = params?.id
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false)
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+  
+  
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+  
+    const [createIoNav] = useCreateIoNavMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(ioNav),
+    });
+  
+  
+    const [createIoCash] = useCreateIoCashMutation()
+  
+  
+    const onSubmit = async (data) => {
+  
+      setIsLoading(true)
+  
+      try {
+  
+        const res = await createIoNav({ data, id })
+        if (res?.data?.statusCode === 201) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose()
+        }else if(res?.error?.status === 400){
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          });
+        }
+  
+  
+      } catch (error) {
+        console.log(error);
+  
+      }
+  
+    };
+  
+  
+  
+    const handleConfirm = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setAlert(false)
+      onClose()
+      reset({
+        transactionDate:"",
+        transactionAmount:"",
+        comments:""
+      })
+    }
+
+
+
+
+const today = formatDatee(new Date(), 'yyyy-MM-dd'); 
+
+
+  
+    return (
+      <>
+        <Drawer
+          size={"md"}
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={handleClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+  
+            <DrawerBody>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.transactionDate} isRequired>
+                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                  <Controller
+                    name="transactionDate"
+                    control={control}
+                    render={({ field }) => (
+                      <Input {...field} 
+                      max={today} // Set max attribute to today’s date
+                       fontSize={"sm"} type="date" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionDate?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.transactionAmount} isRequired>
+                  <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                  <Controller
+                    name="transactionAmount"
+                    control={control}
+                    render={({ field }) => (
+                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionAmount?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.comments}>
+                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                  <Controller
+                    name="comments"
+                    control={control}
+                    render={({ field }) => (
+                      <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.comments?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+              </Stack>
+            </DrawerBody>
+  
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+  
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+  
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to add NAV details?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default AddIONav;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
index febb978..6a9c277 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
@@ -1,14 +1,19 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import GlobalStateContext from '../../../Contexts/GlobalStateContext';
-import { Box, HStack, Input,Text, Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
 import { OPACITY_ON_LOAD } from '../../../Layout/animations';
 import Pagination from '../../../Components/Pagination';
-import DataTable from '../../../Components/DataTable/DataTable';
+import NormalTable from '../../../Components/DataTable/NormalTable';
 import CustomAlertDialog from '../../../Components/CustomAlertDialog';
+import { formatDatee } from '../../../Components/FormField';
+import { AddIcon } from '@chakra-ui/icons';
+import AddIONav from './AddIONav';
 
 const IONAVDetails = () => {
-  const { navDetails, setNavDetails, slideFromRight } =
+  const { navDetails, setNavDetails, IODetails } =
     useContext(GlobalStateContext);
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
     const [searchTerm, setSearchTerm] = useState("");
     const [isLoading, setIsLoading] = useState(true);
     const [deleteAlert, setDeleteAlert] = useState(false);
@@ -16,6 +21,10 @@ const IONAVDetails = () => {
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+
+    console.log(IODetails?.ioNAVHistory);
+    
+
     
   useEffect(() => {
     // Simulate loading
@@ -29,50 +38,74 @@ const IONAVDetails = () => {
 
     // Table setup
     const tableHeadRow = [
-      "Sr.No",
-      "As On Date",
-      "IO NAV Value",
+      // "Sr.No",
+      "Valuation Date",
+      "NAV",
+      "Last NAV update",
+      "Investment Closed",
       "Comments",
       "Update by ",
-      "Update On",
+      // "Update On",
     ];
 
       // Table filter
-  const filteredData = navDetails?.filter((item) => {
-    const name = item.updateBy;
+  const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
+    const name = item.transactionType;
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
     return nameMatches;
   });
 
-  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
+  const  extractedArray=filteredData?.map((item, index) => ({
     id: item?.id,
     "Sr.No": index +1,
-    "As On Date": (
+    "Valuation Date": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item.date}
+        {formatDatee(item.transactionDate)}
       </Text>
     ),
-    "IO NAV Value": (
+    "NAV": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {`$${item.IONavValue}`}
+        {`$ ${item.transactionAmount}`}
+      </Text>
+    ),
+    "Last NAV update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `$ ${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.initialNAVvalue&&`$ ${item.initialNAVvalue}`}
       </Text>
     ),
     "Comments": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -83,18 +116,20 @@ const IONAVDetails = () => {
     ),
     "Update by ": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent ={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
+        gap={2}
         className="d-flex align-items-center web-text-small"
       >
-        {item.updateBy}
+        
+    <Avatar size='sm' name={"faisal"} src={null} />Faisal
       </Text>
     ),
     "Update On": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -103,7 +138,7 @@ const IONAVDetails = () => {
         {item.updateOn}
       </Text>
     ),
-  })));
+  }));
 
 
 
@@ -145,15 +180,18 @@ const IONAVDetails = () => {
         {/* <HStack display={"flex"} alignItems={"center"}>
           <Pagination totalItems={10} />
         </HStack> */}
+
+
+{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO NAV</Button>:null}
+
       </HStack>
     </Box>
 
-    <DataTable
+    <NormalTable
       centered={true}
       emptyMessage={`We don't have any Sponers`}
       tableHeadRow={tableHeadRow}
       data={extractedArray} 
-      setData={setExtractedArray}
       isLoading={isLoading}
       viewActionId={actionId}
       setViewActionId={setActionId}
@@ -169,6 +207,15 @@ const IONAVDetails = () => {
       alertHandler={handleDelete}
       isLoading={isLoading}
     />
+
+
+
+<AddIONav 
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField} />
+
+
   </Box>
   )
 }
diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx
index c8a2ced..18a530b 100644
--- a/src/Pages/IO_Management/IOArtifactsAdd.jsx
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -116,7 +116,10 @@ const IOArtifactsAdd = ({
           toast({
             render: () => <ToastBox message={res?.data?.message} />,
           });
-          reset();
+          reset({
+            artifactName: "",
+            artifactPathName: "",
+          });
           setFile(null);
           setIsLoading(false);
           setAlert(false);
diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx
index dab9a79..e3102e0 100644
--- a/src/Pages/IO_Management/KeyMeritsAdd.jsx
+++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx
@@ -305,7 +305,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
                           </Text>
                         </Box>
                       </MenuButton>
-                      <MenuList minW="415px" size={"sm"} fontWeight={500}>
+                      <MenuList overflow={'scroll'} minW="415px" size={"sm"} fontWeight={500}>
                         {icons?.map(({ iconName, id, iconFilePath }) => (
                           <MenuItem
                             key={id}
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index ab4b400..95643e2 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -31,7 +31,7 @@ import { formatDatee } from "../../../../Components/FormField";
 
 const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Artifact name is required"),
-  ioTransType_xid: yup.number().required("Artifact name is required"),
+  // ioTransType_xid: yup.number().required("Artifact name is required"),
   transactionAmount: yup.number().required("Artifact name is required"),
   comments: yup.string().notRequired(),
 });
@@ -116,7 +116,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
             </FormControl>
 
 
-            <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+            {/* <FormControl isInvalid={errors.ioTransType_xid} isRequired>
               <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
               <Controller
                 name="ioTransType_xid"
@@ -139,7 +139,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
               <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                 {errors.ioTransType_xid?.message}
               </FormErrorMessage>
-            </FormControl>
+            </FormControl> */}
 
 
 
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
index b992fae..8248b0d 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -82,18 +82,30 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
               textAlign={"left"}
             >
               <Badge 
+          rounded={"full"}
+          pt={1.5}
+          pb={1.5}
+          ps={4}
+          pe={4}
+          mt={1.5}
+          mb={1.5}
           textTransform={"none"}
-          variant={"subtle"}
           colorScheme={
             selectedItem === "Draft"
-              ? "blue"
+              ? "gray"
               : selectedItem === "Processing"
               ? "yellow"
               : selectedItem === "Open"
-              ? "forestGreen"
+              ? "blue"
               : selectedItem === "Closed"
-              ? "red":null
-          } py={"3px"} px={"8px"}>
+              ? "green"
+              : selectedItem === "Exited"
+              ? "red"
+              : selectedItem === "Canclled"
+              ? "orange"
+              : "purple"
+          } 
+          py={"3px"} px={"8px"}>
                     {selectedItem ? selectedItem: "No action"}
                   </Badge>
             </MenuButton>
@@ -106,17 +118,32 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
                   onClick={() => handleMenuItemClick(statusAdmin, id)}
                 >
                   <Badge 
+          rounded={"full"}
+          pt={1.5}
+          pb={1.5}
+          ps={4}
+          pe={4}
+          mt={1.5}
+          mb={1.5}
           textTransform={"none"}
-          variant={"subtle"}
+          
+          // variant={"solid"}
           colorScheme={
             statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : statusAdmin === "Processing"
               ? "yellow"
               : statusAdmin === "Open"
-              ? "forestGreen"
-              : "red"
-          } py={"1px"} px={"8px"}>
+              ? "blue"
+              : statusAdmin === "Closed"
+              ? "green"
+              : statusAdmin === "Exited"
+              ? "red"
+              : statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
+          }
+          py={"1px"} px={"8px"}>
                     {statusAdmin}
                   </Badge>
                 </MenuItem>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index c71ceb7..bd4b0e3 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -144,21 +144,30 @@ const ViewIOTable = () => {
     "IO Status": (
       <Box w={"auto"} isTruncated={true}>
         <Badge
-          rounded={"sm"}
-          pt={0.5}
-          pb={0.5}
+          rounded={"full"}
+          pt={1}
+          pb={1}
           ps={4}
           pe={4}
-          // textTransform={"none"}
-          variant={"subtle"}
+          mt={1.5}
+          mb={1.5}
+          textTransform={"none"}
+          
+          // variant={"solid"}
           colorScheme={
             item?.ioStatus?.statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : item?.ioStatus?.statusAdmin === "Processing"
-              ? "orange"
+              ? "yellow"
               : item?.ioStatus?.statusAdmin === "Open"
+              ? "blue"
+              : item?.ioStatus?.statusAdmin === "Closed"
               ? "green"
-              : "red"
+              : item?.ioStatus?.statusAdmin === "Exited"
+              ? "red"
+              : item?.ioStatus?.statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
           }
           
   boxShadow={'0 4px 6px rgba(0, 0, 0, 0.1)'} // Adjusted shadow
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 607eb88..21938cb 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -122,11 +122,11 @@ const ViewIOdataHeader = ({data}) => {
       title:"Distribution To Investors",
       onClickFunction:onDistInvestorOpen
     },
-    // {
-    //   id:5,
-    //   title:"Update IO NAV",
-    //   onClickFunction:onUpdateNavOpen
-    // },
+    {
+      id:5,
+      title:"Update IO NAV",
+      onClickFunction:onUpdateNavOpen
+    },
     {
       id:8,
       title:"Exit",
@@ -234,23 +234,30 @@ console.log(filteredMenu);
           IO Status
         </Text>
         <Badge
-          rounded={"sm"}
-          pt={0.5}
-          pb={0.5}
+          rounded={"full"}
+          pt={1}
+          pb={1}
           ps={4}
           pe={4}
-          // textTransform={"none"}
-          variant={"subtle"}
+          mt={1.5}
+          mb={1.5}
+          textTransform={"none"}
+          
+          // variant={"solid"}
           colorScheme={
             IODetails?.ioStatus?.statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : IODetails?.ioStatus?.statusAdmin === "Processing"
-              ? "orange"
+              ? "yellow"
               : IODetails?.ioStatus?.statusAdmin === "Open"
-              ? "green"
+              ? "blue"
               : IODetails?.ioStatus?.statusAdmin === "Closed"
+              ? "green"
+              : IODetails?.ioStatus?.statusAdmin === "Exited"
               ? "red"
-              : "gray"
+              : IODetails?.ioStatus?.statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
           }
         >
           {IODetails?.ioStatus?.statusAdmin