467 lines
12 KiB
JavaScript
467 lines
12 KiB
JavaScript
import {
|
|
Avatar,
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
HStack,
|
|
Input,
|
|
Table,
|
|
Tag,
|
|
Tbody,
|
|
Text,
|
|
Th,
|
|
Tooltip,
|
|
Tr,
|
|
useDisclosure,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext, useEffect, useRef, useState } from "react";
|
|
import {
|
|
AddIcon,
|
|
CheckIcon,
|
|
CloseIcon,
|
|
DeleteIcon,
|
|
EditIcon,
|
|
ViewIcon,
|
|
} from "@chakra-ui/icons";
|
|
import { LuFileSpreadsheet } from "react-icons/lu";
|
|
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
|
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
|
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
|
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
|
import ToastBox from "../../../../Components/ToastBox";
|
|
import AddCashDetails from "../AddCashDetails";
|
|
import { debounce } from "../../../Admin/Contact";
|
|
import AddPending from "./AddPending";
|
|
import { useParams } from "react-router-dom";
|
|
import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
|
|
import RequestApproveModal from "./RequestApproveModal";
|
|
import RequestRejectModal from "./RequestRejectModal";
|
|
import AddCaseDetails from "./AddCaseDetails";
|
|
import { encryptString } from "../../../../Constants/Constants";
|
|
|
|
const formatDate = (date) => new Date(date).toLocaleDateString();
|
|
|
|
const Pending = () => {
|
|
const toast = useToast();
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
const firstField = useRef();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const { IODetails, approved, setApproved } = useContext(GlobalStateContext);
|
|
const [searchTerm, setSearchTerm] = 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 [updateIOCase] = useUpdateIOCaseMutation();
|
|
const {
|
|
isOpen: isConfirmOpen,
|
|
onOpen: onConfirmOpen,
|
|
onClose: onConfirmClose,
|
|
} = useDisclosure();
|
|
const {
|
|
isOpen: isRejectOpen,
|
|
onOpen: onRejectOpen,
|
|
onClose: onRejectClose,
|
|
} = useDisclosure();
|
|
|
|
useEffect(() => {
|
|
// Simulate loading
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 1500);
|
|
|
|
// Cleanup the timer on component unmount
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const formatDate = (date) => {
|
|
return new Date(date).toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
|
|
// Table filter
|
|
const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter(
|
|
(item) => {
|
|
// Filter by name (case insensitive)
|
|
const name = item?.transactionDate;
|
|
const searchLower = searchTerm?.toLowerCase();
|
|
const nameMatches = name?.toLowerCase().includes(searchLower);
|
|
return nameMatches;
|
|
}
|
|
);
|
|
|
|
const tableHeadRow = [
|
|
"Sr No.",
|
|
"Transaction Date",
|
|
"Transaction Type",
|
|
"Amount",
|
|
"Comments",
|
|
"Update By",
|
|
"Update On",
|
|
...(localStorage?.getItem('role')!==encryptString(import.meta.env.VITE_VITE_MAKER) ? ["Actions"] : []),
|
|
|
|
];
|
|
|
|
const extractedArray = filteredData?.map((item, index) => ({
|
|
id: item?.id,
|
|
"Sr No.": (
|
|
<Text as={"span"} color={"gray.800"} fontWeight={"500"}>
|
|
{index + 1}.
|
|
</Text>
|
|
),
|
|
"Transaction Date": (
|
|
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
|
{formatDate(item?.transactionDate)}
|
|
</Text>
|
|
),
|
|
"Transaction Type": (
|
|
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
|
{item?.transactionType}
|
|
</Text>
|
|
),
|
|
Amount: (
|
|
<Text as={"span"} color={"gray.800"} fontWeight={"500"}>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</Text>
|
|
),
|
|
Comments: (
|
|
<Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
|
|
{item?.comments}
|
|
</Text>
|
|
),
|
|
"Update By": (
|
|
<Text
|
|
w={"100px"}
|
|
as={"span"}
|
|
color={"gray.800"}
|
|
fontWeight={"500"}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
>
|
|
{/* <Avatar
|
|
mr={2}
|
|
size="sm"
|
|
name={item?.creator?.firstName}
|
|
src={item?.creator?.profilePhoto}
|
|
/> */}
|
|
{item?.modifier?.firstName}
|
|
</Text>
|
|
),
|
|
"Update On": (
|
|
<Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
|
|
{formatDate(item.updatedAt)}
|
|
</Text>
|
|
),
|
|
Actions: (
|
|
<Box display={"flex"} justifyContent={"center"}>
|
|
{localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) ? <Box>
|
|
{index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
|
|
<Tooltip
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
label="Approve"
|
|
bg="#fff"
|
|
color={"green.500"}
|
|
placement="left-start"
|
|
>
|
|
<Button
|
|
// colorScheme="forestGreen"
|
|
// color="green.500"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
textTransform={"inherit"}
|
|
fontWeight={500}
|
|
px={2}
|
|
py={1}
|
|
onClick={() => {
|
|
setActionId(item.id);
|
|
onConfirmOpen();
|
|
}}
|
|
colorScheme="green"
|
|
variant={"solid"}
|
|
cursor={"pointer"}
|
|
>
|
|
<CheckIcon fontSize={"12px"} />
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
label="Reject"
|
|
bg="#fff"
|
|
color={"red.500"}
|
|
placement="left-start"
|
|
>
|
|
<Button
|
|
colorScheme="red"
|
|
// color="red.500"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
textTransform={"inherit"}
|
|
fontWeight={500}
|
|
px={2}
|
|
onClick={() => {
|
|
setActionId(item.id);
|
|
onRejectOpen();
|
|
}}
|
|
py={1}
|
|
// variant={"solid"}
|
|
>
|
|
<CloseIcon fontSize={"10px"} />
|
|
</Button>
|
|
</Tooltip></Box>}
|
|
|
|
</Box> : <Button
|
|
colorScheme="green"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
px={2}
|
|
py={1}
|
|
fontWeight={500}
|
|
onClick={() => {
|
|
setActionId(item.id);
|
|
}}
|
|
>
|
|
<ViewIcon me={"4px"} /> View
|
|
</Button>}
|
|
</Box>
|
|
),
|
|
}));
|
|
|
|
const handleDelete = () => {
|
|
const updatedSponsors = sponser.filter(
|
|
(sponsor) => sponsor.id !== actionId
|
|
);
|
|
|
|
setTimeout(() => {
|
|
setCaseDetails(updatedSponsors);
|
|
setDeleteAlert(false);
|
|
setIsLoading(false);
|
|
}, 100);
|
|
setIsLoading(true);
|
|
};
|
|
|
|
const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map(
|
|
(item, index) => ({
|
|
"Transaction date": item?.transactionDate,
|
|
"Transaction type": item?.transactionType,
|
|
Amount: parseFloat(item?.transactionAmount) || 0,
|
|
Comments: item?.comments,
|
|
})
|
|
);
|
|
|
|
const Total = () => {
|
|
return (
|
|
<Table size="sm">
|
|
<Tbody backgroundColor="gray.50">
|
|
<Tr>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="130px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
Balance in IO Cash
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="150px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="150px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
></Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="80px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
></Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="50px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
></Th>
|
|
</Tr>
|
|
</Tbody>
|
|
</Table>
|
|
);
|
|
};
|
|
|
|
const handleAdd = async () => {
|
|
try {
|
|
const res = await updateIOCase(id);
|
|
if (res?.data) {
|
|
// toast({
|
|
// render: () => (
|
|
// <ToastBox status={"success"} message={res?.data?.message} />
|
|
// ),
|
|
// });
|
|
setIsLoading(false);
|
|
onOpen();
|
|
} else if (res?.error) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={"error"} message={res?.error?.data?.message} />
|
|
),
|
|
});
|
|
setIsLoading(false);
|
|
}
|
|
} catch (error) {}
|
|
};
|
|
|
|
return (
|
|
<Box {...OPACITY_ON_LOAD} pb={0}>
|
|
<Box bg="white.500">
|
|
<HStack
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
pb={3}
|
|
spacing="24px"
|
|
>
|
|
<Input
|
|
type="search"
|
|
width={300}
|
|
placeholder="Search..."
|
|
size="sm"
|
|
rounded="sm"
|
|
focusBorderColor="green.500"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
|
|
{/* <HStack display={"flex"} alignItems={"center"}>
|
|
{IODetails?.isInvestedAmount ? (
|
|
localStorage?.getItem('role') ==="Maker"&& <Button
|
|
onClick={handleAdd}
|
|
leftIcon={<AddIcon />}
|
|
colorScheme="forestGreen"
|
|
size={"sm"}
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
>
|
|
Add
|
|
</Button>
|
|
) : null}
|
|
</HStack> */}
|
|
</HStack>
|
|
</Box>
|
|
|
|
<NormalTable
|
|
emptyMessage={`We don't have any Sponers`}
|
|
tableHeadRow={tableHeadRow}
|
|
data={extractedArray}
|
|
isLoading={isLoading}
|
|
viewActionId={actionId}
|
|
setViewActionId={setActionId}
|
|
// total={<Total />}
|
|
setMouseEnteredId={setMouseEnteredId}
|
|
setMouseEntered={setMouseEntered}
|
|
/>
|
|
|
|
<CustomAlertDialog
|
|
onClose={() => setDeleteAlert(false)}
|
|
isOpen={deleteAlert}
|
|
message={"Are you sure you want to delete sponers?"}
|
|
alertHandler={handleDelete}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
<AddCaseDetails
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
firstField={firstField}
|
|
/>
|
|
|
|
<RequestApproveModal
|
|
// data={data?.data?.rows}
|
|
isOpen={isConfirmOpen}
|
|
onClose={onConfirmClose}
|
|
id={actionId}
|
|
// firstField={firstField}
|
|
/>
|
|
<RequestRejectModal
|
|
isOpen={isRejectOpen}
|
|
onClose={onRejectClose}
|
|
id={actionId}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Pending;
|