tanami-admin-panel/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx

import { ChevronDownIcon } from "@chakra-ui/icons";
import React, { useState } from "react";
import {
  Badge,
  Button,
  FormLabel,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import {
  useGetIOprepopulateDataQuery,
  useUpdateStatusIoMutation,
} from "../../../../Services/io.service";
import { useParams } from "react-router-dom";

const UpdateIOStatus = ({ isOpen, onClose }) => {
  const params = useParams();
  const id = params?.id;
  const [selectedItem, setSelectedItem] = useState("Open");
  const [isLoadingg, setIsLoading] = useState(false);
  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
  const [selectedStatusId, setSelectedStatusId] = useState(data?.data?.ioStatus[0]?.id);

  const [updateStatusIo] = useUpdateStatusIoMutation();
  console.log(data?.data?.ioStatus);

  console.log(data?.data?.ioStatus);

  const handleMenuItemClick = (item, id) => {
    setSelectedItem(item);
    setSelectedStatusId(id);
  };

  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      const res = await updateStatusIo({
        data: {
          ioStatus_xid: selectedStatusId,
        },
        id,
      });
      console.log(res);
      setIsLoading(false)
      onClose()
    } catch (error) {}
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
            Status
          </FormLabel>
          <Menu>
            <MenuButton
              as={Button}
              rightIcon={<ChevronDownIcon />}
              fontSize={"sm"}
              fontWeight={500}
              w={"100%"}
              textAlign={"left"}
            >
              <Badge 
          textTransform={"none"}
          variant={"solid"}
          colorScheme={
            selectedItem === "Draft"
              ? "blue"
              : selectedItem === "Processing"
              ? "yellow"
              : selectedItem === "Open"
              ? "forestGreen"
              : "red"
          } py={"3px"} px={"8px"}>
                    {selectedItem}
                  </Badge>
            </MenuButton>
            <MenuList w={"400px"}>
              {data?.data?.ioStatus?.map(({ id, statusAdmin }) => (
                <MenuItem
                  key={id}
                  fontSize={"sm"}
                  onClick={() => handleMenuItemClick(statusAdmin, id)}
                >
                  <Badge 
          textTransform={"none"}
          variant={"solid"}
          colorScheme={
            statusAdmin === "Draft"
              ? "blue"
              : statusAdmin === "Processing"
              ? "yellow"
              : statusAdmin === "Open"
              ? "forestGreen"
              : "red"
          } py={"1px"} px={"8px"}>
                    {statusAdmin}
                  </Badge>
                </MenuItem>
              ))}
            </MenuList>
          </Menu>
        </ModalBody>
        <ModalFooter>
          <Button
            bg={"hsla(139, 100%, 14%, 1)"}
            mr={3}
            color={"#fff"}
            _hover={{
              bg: "hsl(139deg 98.99% 26.59%)",
            }}
            size={"sm"}
            rounded={"sm"}
            onClick={handleSubmit}
            isLoading={isLoadingg}
          >
            Save
          </Button>
          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default UpdateIOStatus;