150 lines
3.6 KiB
JavaScript
150 lines
3.6 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerCloseButton,
|
|
DrawerContent,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerOverlay,
|
|
FormControl,
|
|
FormHelperText,
|
|
FormLabel,
|
|
Input,
|
|
Text,
|
|
useDisclosure,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext, useRef, useState, useEffect } from "react";
|
|
import { FiEdit3 } from "react-icons/fi";
|
|
import { BiMessageSquareEdit } from "react-icons/bi";
|
|
import { TbEdit } from "react-icons/tb";
|
|
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
|
import { AddIcon } from "@chakra-ui/icons";
|
|
|
|
// Convert date to YYYY-MM-DD format
|
|
const formatDateValue = (date) => {
|
|
if (!date) return "";
|
|
const d = new Date(date);
|
|
let month = "" + (d.getMonth() + 1);
|
|
let day = "" + d.getDate();
|
|
const year = d.getFullYear();
|
|
|
|
if (month.length < 2) month = "0" + month;
|
|
if (day.length < 2) day = "0" + day;
|
|
|
|
return [year, month, day].join("-");
|
|
};
|
|
|
|
const AddIOCharges = ({ setCharges, charges }) => {
|
|
const btnRef = useRef();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const [chargeTitle, setChargeTitle] = useState("");
|
|
const [chargeValue, setChargeValue] = useState(0.0);
|
|
|
|
const handleSave = () => {
|
|
setCharges([
|
|
...charges,
|
|
{
|
|
title: chargeTitle,
|
|
value: chargeValue,
|
|
},
|
|
]);
|
|
|
|
setChargeTitle("");
|
|
setChargeValue("");
|
|
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 100);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
leftIcon={<AddIcon />}
|
|
ref={btnRef}
|
|
onClick={onOpen}
|
|
// colorScheme="forestGreen"
|
|
color={"green.500"}
|
|
size={"xs"}
|
|
// variant={"ghost"}
|
|
rounded={"md"}
|
|
ms={"auto"}
|
|
>
|
|
Add Charges
|
|
</Button>
|
|
<Drawer
|
|
isOpen={isOpen}
|
|
placement="right"
|
|
onClose={onClose}
|
|
finalFocusRef={btnRef}
|
|
>
|
|
<DrawerOverlay />
|
|
<DrawerContent>
|
|
<DrawerCloseButton />
|
|
<DrawerHeader fontSize={"md"}>Add charges</DrawerHeader>
|
|
|
|
<DrawerBody>
|
|
<FormControl mb={4}>
|
|
<FormLabel fontSize={"sm"}>Charge title</FormLabel>
|
|
<Input
|
|
value={chargeTitle}
|
|
onChange={(e) => setChargeTitle(e.target.value)}
|
|
fontSize={"sm"}
|
|
type="text"
|
|
size={"sm"}
|
|
placeholder="Charge title"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormControl mb={4}>
|
|
<FormLabel fontSize={"sm"}>Charge value</FormLabel>
|
|
<Input
|
|
value={chargeValue}
|
|
onChange={(e) => setChargeValue(e.target.value)}
|
|
fontSize={"sm"}
|
|
type="number"
|
|
size={"sm"}
|
|
placeholder="00.00$"
|
|
/>
|
|
<FormHelperText fontSize={"xs"}>
|
|
Please enter value in Dollars
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</DrawerBody>
|
|
|
|
<DrawerFooter>
|
|
<Button
|
|
variant="outline"
|
|
colorScheme={"green"}
|
|
rounded={"sm"}
|
|
size={"sm"}
|
|
mr={3}
|
|
onClick={() => {
|
|
onClose();
|
|
setChargeTitle("");
|
|
setChargeValue("");
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
|
|
<Button
|
|
colorScheme={"green"}
|
|
rounded={"sm"}
|
|
size={"sm"}
|
|
onClick={handleSave}
|
|
>
|
|
Save
|
|
</Button>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddIOCharges;
|