artifacts table

src/Components/DataTable/DataTable.jsx

@@ -22,6 +22,7 @@ const DataTable = ({
   setData,
   isLoading,
   tableHeadRow,
+  tableHeadRowTwo,
   emptyMessage,
   centered,
   setMouseEntered,

src/Contexts/GlobalStateProvider.jsx

@@ -310,33 +310,53 @@ const GlobalStateProvider = ({ children }) => {
   const [iOArtifacts, setIOArtifacts] = useState([
     {
       id: 1,
-      type: "JPG",
       fileName: "Banner image",
       document: "Banner.jpg",
       status: true,
     },
     {
       id: 2,
-      type: "JPG",
       fileName: "Banner image",
       document: "Banner.jpg",
       status: true,
     },
     {
       id: 3,
-      type: "JPG",
       fileName: "Banner image",
       document: "Banner.jpg",
       status: true,
     },
     {
       id: 4,
-      type: "JPG",
       fileName: "Banner image",
       document: "Banner.jpg",
       status: true,
     },
   ]);
+
+  const [iOArtifactsTwo, setIOArtifactsTwo] = useState([
+    {
+      id: 1,
+      videoFileName: "Property preview",
+      status: true,
+    },
+    {
+      id: 2,
+      videoFileName: "Property preview",
+      status: true,
+    },
+    {
+      id: 3,
+      videoFileName: "Property preview",
+      status: true,
+    },
+    {
+      id: 4,
+      videoFileName: "Property preview",
+      status: true,
+    },
+  ]);
+
   const [investmentType, setInvestmentType] = useState([
     {
       id: 1,
@@ -1641,6 +1661,8 @@ const GlobalStateProvider = ({ children }) => {
         setKeyMerits,
         iOArtifacts,
         setIOArtifacts,
+        iOArtifactsTwo,
+        setIOArtifactsTwo,
         investors, 
         setInvestors,IODetails, setIODetails,
         navDetails, 

src/Pages/IO_Management/CreateIO/ArtifactsEditImage.jsx

@@ -0,0 +1,123 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormLabel,
+    Input,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState } from "react";
+  import { useForm } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+  
+  export const investmentDoct = yup.object().shape({
+    type: yup.string().required("Sponser name is required"),
+    document: yup.string().required("Sponser name is required"),
+    fileName: yup.string().required("Mobile no is required"),
+  });
+  
+  const ArtifactsEditImage = ({ isOpen, onClose, secondField }) => {
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [alert, setAlert] = useState(false);
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDoct),
+    });
+  
+    const onSubmit = (data) => {
+      setIOArtifactsTwo((prevIOArtifactsTwo) => [
+        {
+          ...data,
+          status: true,
+          id: uuidv4(),
+          createdAt: new Date().toISOString(),
+        },
+        ...prevIOArtifactsTwo,
+      ]);
+      setAlert(false);
+      onClose();
+    };
+  
+    return (
+      <>
+        <Drawer
+          placement="right"
+          initialFocusRef={secondField}
+          isOpen={isOpen}
+          onClose={onClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Artifacts</DrawerHeader>
+  
+            <DrawerBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>File Name</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="text"
+                  size={"sm"} 
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>DOCUMENT</FormLabel>
+                <Input
+                  value={file}
+                  onChange={(e) => setFile(e.target.value)}
+                  fontSize={"sm"}
+                  type="file"
+                  className="form-control"
+                  size={"sm"}
+                />
+              </FormControl>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSubmit(onSubmit)}
+          message={"Are you sure you want to add this document?"}
+        />
+      </>
+    );
+  };
+  
+  export default ArtifactsEditImage;
+  

src/Pages/IO_Management/CreateIO/ArtifactsEditVideo.jsx

@@ -0,0 +1,123 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormLabel,
+    Input,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState } from "react";
+  import { useForm } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+  
+  export const investmentDoct = yup.object().shape({
+    type: yup.string().required("Sponser name is required"),
+    document: yup.string().required("Sponser name is required"),
+    fileName: yup.string().required("Mobile no is required"),
+  });
+  
+  const ArtifactsEditVideo = ({ isOpen, onClose, fourField }) => {
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [alert, setAlert] = useState(false);
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDoct),
+    });
+  
+    const onSubmit = (data) => {
+      setIOArtifactsTwo((prevIOArtifactsTwo) => [
+        {
+          ...data,
+          status: true,
+          id: uuidv4(),
+          createdAt: new Date().toISOString(),
+        },
+        ...prevIOArtifactsTwo,
+      ]);
+      setAlert(false);
+      onClose();
+    };
+  
+    return (
+      <>
+        <Drawer
+          placement="right"
+          initialFocusRef={fourField}
+          isOpen={isOpen}
+          onClose={onClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Artifacts</DrawerHeader>
+  
+            <DrawerBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>File Name</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="text"
+                  size={"sm"} 
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>VIDEO STREAMING URL</FormLabel>
+                <Input
+                  value={file}
+                  onChange={(e) => setFile(e.target.value)}
+                  fontSize={"sm"}
+                  type="file"
+                  className="form-control"
+                  size={"sm"}
+                />
+              </FormControl>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSubmit(onSubmit)}
+          message={"Are you sure you want to add this document?"}
+        />
+      </>
+    );
+  };
+  
+  export default ArtifactsEditVideo;
+  

src/Pages/IO_Management/CreateIO/IOArtifacts.jsx

@@ -1,8 +1,10 @@
 import {
+  Badge,
   Box,
   Button,
   HStack,
   Input,
+  Link,
   Text,
   Tooltip,
   useDisclosure,
@@ -12,27 +14,45 @@ import DataTable from "../../../Components/DataTable/DataTable";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { debounce } from "../../Master/Sponser/AddSponser";
-import { formatDate } from "../../../Components/Functions/UTCConvertor";
-import {
-  AddIcon,
-  DeleteIcon,
-  DownloadIcon,
-  EditIcon,
-  ViewIcon,
-} from "@chakra-ui/icons";
+import { AddIcon, DeleteIcon, EditIcon, ExternalLinkIcon, ViewIcon } from "@chakra-ui/icons";
 import IOArtifactsAdd from "../IOArtifactsAdd";
+import IOArtifactsVideo from "../IOArtifactsVideo";
+import ArtifactsEditImage from "./ArtifactsEditImage";
+import ArtifactsEditVideo from "./ArtifactsEditVideo";
 
-const IOArtifacts = ({enableNextTab, index}) => {
+const IOArtifacts = ({ enableNextTab, index }) => {
   const { iOArtifacts, setIOArtifacts, slideFromRight } =
     useContext(GlobalStateContext);
+  const { iOArtifactsTwo, setIOArtifactsTwo } = useContext(GlobalStateContext);
   const firstField = useRef();
+  const secondField = useRef();
+  const threeField = useRef();
+  const fourField = useRef();
   const [searchTerm, setSearchTerm] = useState("");
+  const [searchTermTwo, setSearchTermTwo] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isOpenVideo,
+    onOpen: onOpenVideo,
+    onClose: onCloseVideo,
+  } = useDisclosure();
+
+  const {
+    isOpen: isOpenEditImage,
+    onOpen: onOpenEditImage,
+    onClose: onCloseEditImage,
+  } = useDisclosure();
+
+  const {
+    isOpen: isOpenEditVideo,
+    onOpen: onOpenEditVideo,
+    onClose: onCloseEditVideo,
+  } = useDisclosure();
 
   useEffect(() => {
     // Simulate loading
@@ -44,14 +64,6 @@ const IOArtifacts = ({enableNextTab, index}) => {
     return () => clearTimeout(timer);
   }, []);
 
-  const tableHeadRow = [
-    "Sr.no", 
-    "Type", 
-    "File Name", 
-    "Document", 
-    "Action"
-  ];
-
   const handleUpdateStatus = debounce((id) => {
     setIOArtifacts((prevIOArtifacts) =>
       prevIOArtifacts.map((iOArtifacts) =>
@@ -60,14 +72,20 @@ const IOArtifacts = ({enableNextTab, index}) => {
           : iOArtifacts
       )
     );
+    setIOArtifactsTwo((prevIOArtifactsTwo) =>
+      prevIOArtifactsTwo.map((iOArtifactsTwo) =>
+        iOArtifactsTwo.id === id
+          ? { ...iOArtifactsTwo, status: !iOArtifactsTwo.status }
+          : iOArtifactsTwo
+      )
+    );
     toast({
       render: () => <ToastBox message={"Status changed succesfully.!"} />,
     });
   }, 300);
 
   const filteredData = iOArtifacts?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.type;
+    const name = item.fileName;
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
 
@@ -87,6 +105,8 @@ const IOArtifacts = ({enableNextTab, index}) => {
     setIsLoading(true);
   };
 
+  const tableHeadRow = ["Sr.no", "File Name", "Document", "Action"];
+
   const extractedArray = filteredData?.map((item, index) => ({
     "Sr.no": (
       <Text
@@ -99,17 +119,6 @@ const IOArtifacts = ({enableNextTab, index}) => {
         {index + 1}
       </Text>
     ),
-    Type: (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.type}
-      </Text>
-    ),
     "File Name": (
       <Box isTruncated={true}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -117,7 +126,7 @@ const IOArtifacts = ({enableNextTab, index}) => {
         </Text>
       </Box>
     ),
-    "Document": (
+    Document: (
       <Text
         color={"green.500"}
         justifyContent={slideFromRight ? "right" : "left"}
@@ -160,6 +169,127 @@ const IOArtifacts = ({enableNextTab, index}) => {
           placement="top"
         >
           <Button
+            onClick={onOpenEditImage}
+            _hover={{ color: "blue.500" }}
+            // transition={"0.5s all"}
+            color="blue.400"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Delete"
+          bg="#fff"
+          color={"red.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              setActionId(item?.id);
+              setDeleteAlert(true);
+            }}
+            _hover={{ color: "red.500" }}
+            // transition={"0.5s all"}
+            color="red.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <DeleteIcon />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const filteredDataTwo = iOArtifactsTwo?.filter((item) => {
+    const name = item.videoFileName;
+    const searchLower = searchTermTwo.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  const tableHeadRowTwo = [
+    "Sr.no",
+    "File Name",
+    "Video streaming uRL",
+    "Action",
+  ];
+
+  const extractedArrayTwo = filteredDataTwo?.map((item, index) => ({
+    "Sr.no": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {index + 1}
+      </Text>
+    ),
+    "File Name": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.videoFileName}
+        </Text>
+      </Box>
+    ),
+    "Video streaming uRL": (
+      <Text
+        color={"green.500"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        <Badge px={2} py={0.5} display={"flex"} alignItems={"center"} textTransform={"inherit"} fontWeight={500}  colorScheme={"forestGreen"}>
+          <Link
+            href="https://download-video.akamaized.net/v3-1/playback/cc4f87a6-7108-4fd9-9f2a-566d7a65c4fe/3477452e-ca82bc8c?__token__=st=1721904282~exp=1721918682~acl=%2Fv3-1%2Fplayback%2Fcc4f87a6-7108-4fd9-9f2a-566d7a65c4fe%2F3477452e-ca82bc8c%2A~hmac=1e161e351153d7e16b47019c9a65f684ef601b105a080707c0f0520fd0816371&r=dXMtZWFzdDE%3D"
+            isExternal
+          >
+            <Box as="span">View</Box> <ExternalLinkIcon />
+          </Link>
+        </Badge>
+      </Text>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={3}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            onClick={() => {
+              navigate(`view-investment/${item.id}`);
+            }}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <ViewIcon />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Edit"
+          bg="#fff"
+          color={"blue.500"}
+          placement="top"
+        >
+          <Button
+          onClick={onOpenEditVideo}
             _hover={{ color: "blue.500" }}
             // transition={"0.5s all"}
             color="blue.400"
@@ -198,23 +328,16 @@ const IOArtifacts = ({enableNextTab, index}) => {
   return (
     <Box>
       <Box display={"flex"} justifyContent={"space-between"} mb={4}>
-        <Input
-          type="search"
-          width={300}
-          placeholder="Search..."
-          size="sm"
-          rounded="sm"
-          focusBorderColor="green.500"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
+        <Box fontSize={'sm'} fontWeight={500}>
+          Manage iO images
+        </Box>
         <Button
           leftIcon={<AddIcon />}
           onClick={onOpen}
           size={"sm"}
           fontSize={"xs"}
           rounded={"sm"}
-          color={'green'}
+          colorScheme={"forestGreen"}
         >
           Add artifacts
         </Button>
@@ -231,15 +354,43 @@ const IOArtifacts = ({enableNextTab, index}) => {
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
-        // totalPages={10}
-
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
-      
-      <HStack  justifyContent={'flex-end'}>
+      <Box display={"flex"} justifyContent={"space-between"} mb={4}>
+        <Box fontSize={'sm'} fontWeight={500}>
+          Manage IO videos
+        </Box>
+        <Button
+          leftIcon={<AddIcon />}
+          onClick={onOpenVideo}
+          size={"sm"}
+          fontSize={"xs"}
+          rounded={"sm"}
+          colorScheme={"forestGreen"}
+        >
+          Add artifacts
+        </Button>
+        <IOArtifactsVideo
+          isOpen={isOpenVideo}
+          onClose={onCloseVideo}
+          secondField={secondField}
+        />
+      </Box>  
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRowTwo}
+        data={extractedArrayTwo}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      {/* <HStack  justifyContent={'flex-end'}>
         <Button ps={8} pe={8} colorScheme="forestGreen" size={'sm'} rounded={'sm'} onClick={()=> enableNextTab(index)}>Next</Button>
-      </HStack>
+      </HStack> */}
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
@@ -247,6 +398,16 @@ const IOArtifacts = ({enableNextTab, index}) => {
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
+        <ArtifactsEditImage
+          isOpen={isOpenEditImage}
+          onClose={onCloseEditImage}
+          threeField={threeField}
+        />
+        <ArtifactsEditVideo
+          isOpen={isOpenEditVideo}
+          onClose={onCloseEditVideo}
+          fourField={fourField}
+        />
     </Box>
   );
 };

src/Pages/IO_Management/IOArtifactsAdd.jsx

@@ -31,7 +31,7 @@ import {
     const [file, setFile] = useState("");
     const [fileName, setFileName] = useState("");
     const [alert, setAlert] = useState(false);
-  
+    
     const {
       control,
       handleSubmit,
@@ -101,7 +101,7 @@ import {
             <DrawerFooter>
               <Button
                 variant="outline"
-                colorScheme={"green"}
+                colorScheme={"forestGreen"}
                 rounded={"sm"}
                 size={"sm"}
                 mr={3}
@@ -111,7 +111,7 @@ import {
               </Button>
   
               <Button
-                colorScheme={"green"}
+                colorScheme={"forestGreen"}
                 rounded={"sm"}
                 size={"sm"}
                 onClick={() => setAlert(true)}

src/Pages/IO_Management/IOArtifactsVideo.jsx

@@ -0,0 +1,123 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormLabel,
+    Input,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState } from "react";
+  import { useForm } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+  
+  export const investmentDoct = yup.object().shape({
+    type: yup.string().required("Sponser name is required"),
+    document: yup.string().required("Sponser name is required"),
+    fileName: yup.string().required("Mobile no is required"),
+  });
+  
+  const IOArtifactsVideo = ({ isOpen, onClose, secondField }) => {
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [alert, setAlert] = useState(false);
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDoct),
+    });
+  
+    const onSubmit = (data) => {
+      setIOArtifactsTwo((prevIOArtifactsTwo) => [
+        {
+          ...data,
+          status: true,
+          id: uuidv4(),
+          createdAt: new Date().toISOString(),
+        },
+        ...prevIOArtifactsTwo,
+      ]);
+      setAlert(false);
+      onClose();
+    };
+  
+    return (
+      <>
+        <Drawer
+          placement="right"
+          initialFocusRef={secondField}
+          isOpen={isOpen}
+          onClose={onClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Artifacts</DrawerHeader>
+  
+            <DrawerBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>File Name</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="text"
+                  size={"sm"} 
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>Vimeo video link *</FormLabel>
+                <Input
+                  value={file}
+                  onChange={(e) => setFile(e.target.value)}
+                  fontSize={"sm"}
+                  type="file"
+                  className="form-control"
+                  size={"sm"}
+                />
+              </FormControl>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSubmit(onSubmit)}
+          message={"Are you sure you want to add this document?"}
+        />
+      </>
+    );
+  };
+  
+  export default IOArtifactsVideo;
+  

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

@@ -1,9 +1,13 @@
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import React, { useState } from "react";
 import {
-  Box,
+  Badge,
   Button,
-  FormControl,
   FormLabel,
-  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -11,52 +15,65 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Text,
-  Textarea,
 } from "@chakra-ui/react";
 
 const UpdateIOStatus = ({ isOpen, onClose }) => {
+  const [selectedItem, setSelectedItem] = useState("Open");
+
+  const handleMenuItemClick = (item) => {
+    setSelectedItem(item);
+  };
+
+  console.log(selectedItem);
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader fontSize={'md'}>Update IO Status</ModalHeader>
+        <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <FormControl mb={"15px"}>
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-              Date
-            </FormLabel>
-            <Input
-              placeholder="Select Date"
-              size="sm"
-              rounded={'sm'}
+          <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+            Status
+          </FormLabel>
+          <Menu>
+            <MenuButton
+              as={Button}
+              rightIcon={<ChevronDownIcon />}
               fontSize={"sm"}
-              type="date"
-              focusBorderColor="forestGreen.300"
-            />
-          </FormControl>
-
-          <FormControl mb={"15px"} >
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
-            <Input 
-              size="sm"
-              rounded={'sm'}
-              textAlign={'end'}
-              focusBorderColor="forestGreen.300"
-              fontSize={"sm"} placeholder="$00.00"  />
-          </FormControl>
-
-          <FormControl mb={"15px"}>
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-              Comments
-            </FormLabel>
-            <Textarea 
-              size="sm"
-              rounded={'sm'}
-              focusBorderColor="forestGreen.300"
-              fontSize={"sm"} placeholder="Write Comments"  />
-          </FormControl>
+              fontWeight={500}
+              w={"100%"}
+              textAlign={"left"}
+            >
+              {selectedItem}
+            </MenuButton>
+            <MenuList w={"400px"}>
+              <MenuItem
+                fontSize={"sm"}
+                onClick={() => handleMenuItemClick("Processing")}
+              >
+                <Badge py={'1px'} px={"8px"}>Processing</Badge> 
+              </MenuItem>
+              <MenuItem
+                fontSize={"sm"}
+                onClick={() => handleMenuItemClick("Closed")}
+              >
+                <Badge py={'1px'} px={"8px"}>Closed</Badge>
+              </MenuItem>
+              <MenuItem
+                fontSize={"sm"}
+                onClick={() => handleMenuItemClick("Exited")}
+              >
+                <Badge py={'1px'} px={"8px"}>Exited</Badge>
+              </MenuItem>
+              <MenuItem
+                fontSize={"sm"}
+                onClick={() => handleMenuItemClick("Cancelled")}
+              >
+                <Badge py={'1px'} px={"8px"}>Cancelled</Badge>
+              </MenuItem>
+            </MenuList>
+          </Menu>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -66,14 +83,12 @@ const UpdateIOStatus = ({ 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>