Exchange updated
This commit is contained in:
@@ -24,6 +24,7 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
|
||||
size={"sm"}
|
||||
// ref={cancelRef}
|
||||
onClick={onClose}
|
||||
rounded={'sm'}
|
||||
>
|
||||
No
|
||||
</Button>
|
||||
@@ -32,6 +33,7 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
|
||||
isLoading={isLoading}
|
||||
onClick={alertHandler}
|
||||
size={"sm"}
|
||||
rounded={'sm'}
|
||||
colorScheme="red"
|
||||
ml={3}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Box, Image, Text } from "@chakra-ui/react"
|
||||
import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
|
||||
// import EmptySearchListImage from "../assets/EmptySearchList.svg"
|
||||
// import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
|
||||
import EmptySearchListImage from "../assets/EmptySearchList.svg"
|
||||
|
||||
const EmptySearchList = ({message}) => {
|
||||
return (
|
||||
|
||||
@@ -92,7 +92,7 @@ const HeaderMain = ({
|
||||
Hello, developer admin
|
||||
</Text>
|
||||
<Text as={"span"} className="web-text-xsmall">
|
||||
siddhesh@rubix.com
|
||||
siddhesh@tanami.com
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
186
src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
Normal file
186
src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerOverlay,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useRef, useState, useEffect } from "react";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import { FiEdit3 } from "react-icons/fi";
|
||||
import { BiMessageSquareEdit } from "react-icons/bi";
|
||||
import { TbEdit } from "react-icons/tb";
|
||||
|
||||
// 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 EditExchangeRate = ({ id, setIsLoading }) => {
|
||||
const btnRef = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { rateExchange, setRateExchange } = useContext(GlobalStateContext);
|
||||
|
||||
const foundObject = rateExchange.find((item) => item.id === id);
|
||||
|
||||
const [effectFrom, setEffectFrom] = useState("");
|
||||
const [effectTill, setEffectTill] = useState("");
|
||||
const [rate, setRate] = useState("");
|
||||
const [alert, setAlert] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (foundObject) {
|
||||
setEffectFrom(formatDateValue(foundObject.effectFrom));
|
||||
setEffectTill(formatDateValue(foundObject.effectTill));
|
||||
setRate(foundObject.rate);
|
||||
}
|
||||
}, [foundObject]);
|
||||
|
||||
const handleSave = () => {
|
||||
setIsLoading(true);
|
||||
const updatedExchange = rateExchange.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
effectFrom: new Date(effectFrom),
|
||||
effectTill: new Date(effectTill),
|
||||
rate: parseFloat(rate),
|
||||
}
|
||||
: item
|
||||
);
|
||||
setTimeout(() => {
|
||||
setRateExchange(updatedExchange);
|
||||
setIsLoading(false);
|
||||
setAlert(false);
|
||||
onClose();
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
leftIcon={<TbEdit/>}
|
||||
ref={btnRef}
|
||||
onClick={onOpen}
|
||||
// colorScheme="forestGreen"
|
||||
color={"green.500"}
|
||||
size={"xs"}
|
||||
variant={"ghost"}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Drawer
|
||||
isOpen={isOpen}
|
||||
placement="right"
|
||||
onClose={onClose}
|
||||
finalFocusRef={btnRef}
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader fontSize={"md"}>Edit rate</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Box display={"flex"} mb={5}>
|
||||
<Box w={"50%"} display={"flex"} flexDirection={"column"} gap={1}>
|
||||
<FormLabel fontSize={"sm"}>From</FormLabel>
|
||||
<Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
{foundObject?.fromCurr}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box w={"50%"} display={"flex"} flexDirection={"column"} gap={1}>
|
||||
<FormLabel fontSize={"sm"}>To</FormLabel>
|
||||
<Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
{foundObject?.toCurr}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<FormControl mb={4}>
|
||||
<FormLabel fontSize={"sm"}>Effective from</FormLabel>
|
||||
<Input
|
||||
value={effectFrom}
|
||||
onChange={(e) => setEffectFrom(e.target.value)}
|
||||
fontSize={"sm"}
|
||||
type="date"
|
||||
size={"sm"}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl mb={4}>
|
||||
<FormLabel fontSize={"sm"}>Effective to</FormLabel>
|
||||
<Input
|
||||
value={effectTill}
|
||||
onChange={(e) => setEffectTill(e.target.value)}
|
||||
type="date"
|
||||
size={"sm"}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl mb={4}>
|
||||
<FormLabel fontSize={"sm"}>Rate</FormLabel>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Type rate here..."
|
||||
size={"sm"}
|
||||
value={rate}
|
||||
onChange={(e) => setRate(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme={"green"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mr={3}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
colorScheme={"green"}
|
||||
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 update rates?"}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditExchangeRate;
|
||||
@@ -27,6 +27,7 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import { formatDate } from "../../../Components/Functions/UTCConvertor";
|
||||
import EditExchangeRate from "./EditExchangeRate";
|
||||
|
||||
const ExchangeRate = () => {
|
||||
const toast = useToast();
|
||||
@@ -70,7 +71,7 @@ const ExchangeRate = () => {
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
// "Sr No.",
|
||||
"From currency",
|
||||
"To currency",
|
||||
"Effective from",
|
||||
@@ -81,22 +82,24 @@ const ExchangeRate = () => {
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center fw- web-text-small"
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
// "Sr No.": (
|
||||
// <Text
|
||||
// justifyContent={slideFromRight ? "right" : "left"}
|
||||
// as={"span"}
|
||||
// color={"gray.600"}
|
||||
// fontWeight={'600'}
|
||||
// className="d-flex align-items-center fw- web-text-small"
|
||||
// >
|
||||
// {index + 1}.
|
||||
// </Text>
|
||||
// ),
|
||||
"From currency": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
fontWeight={'600'}
|
||||
className="d-flex align-items-center fw- web-text-small"
|
||||
>
|
||||
{item.fromCurr}
|
||||
</Text>
|
||||
@@ -106,7 +109,8 @@ const ExchangeRate = () => {
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
fontWeight={'600'}
|
||||
className="d-flex align-items-center fw- web-text-small"
|
||||
>
|
||||
{item.toCurr}
|
||||
</Text>
|
||||
@@ -115,8 +119,9 @@ const ExchangeRate = () => {
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center fw- web-text-small"
|
||||
color={"gray.600"}
|
||||
fontWeight={'600'}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{formatDate(item.effectFrom)}
|
||||
</Text>
|
||||
@@ -125,8 +130,9 @@ const ExchangeRate = () => {
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center fw-500 web-text-small"
|
||||
color={"gray.600"}
|
||||
fontWeight={'600'}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{formatDate(item.effectTill)}
|
||||
</Text>
|
||||
@@ -136,16 +142,19 @@ const ExchangeRate = () => {
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
fontWeight={'600'}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.rate}
|
||||
</Text>
|
||||
),
|
||||
|
||||
Action: (
|
||||
<Button colorScheme="green" size={"xs"} variant={"ghost"}>
|
||||
Edit
|
||||
</Button>
|
||||
// <Button colorScheme="green" size={"xs"} variant={"ghost"}>
|
||||
// Edit
|
||||
// </Button>
|
||||
|
||||
<EditExchangeRate setIsLoading={setIsLoading} id={item.id} />
|
||||
),
|
||||
}));
|
||||
|
||||
|
||||
@@ -101,22 +101,23 @@ const Sponser = () => {
|
||||
"Sponser name": (
|
||||
<Text justifyContent={slideFromRight? 'right': 'left' }
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
color={"teal.900"}
|
||||
fontWeight={'500'}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.sponserName}
|
||||
</Text>
|
||||
),
|
||||
Address: (
|
||||
<Box w={350} isTruncated={true} >
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={'500'}>
|
||||
{item.sponserAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Mobile no": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={'500'}>
|
||||
{item.mobileNo}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -124,7 +125,7 @@ const Sponser = () => {
|
||||
Status:
|
||||
<Switch
|
||||
size={"sm"}
|
||||
color="green"
|
||||
colorScheme="green"
|
||||
onChange={() => handleUpdateStatus(item.id)}
|
||||
isChecked={item.status}
|
||||
/>
|
||||
@@ -142,7 +143,7 @@ const Sponser = () => {
|
||||
,
|
||||
"Created At": (
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} className=" fw-bold">
|
||||
<Text as={"span"} color={"gray.600"} fontWeight={'500'}>
|
||||
{formatDate(item.createdAt)}
|
||||
</Text>
|
||||
<Menu>
|
||||
|
||||
Reference in New Issue
Block a user