requst table
This commit is contained in:
YasinShaikh123
@@ -2,6 +2,7 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
Heading,
|
||||
Image,
|
||||
Progress,
|
||||
@@ -9,112 +10,144 @@ import {
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@chakra-ui/react";
|
||||
import { FADE_IN_SCALE_UP, OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
|
||||
const InvestmentCard = ({ investment }) => {
|
||||
const investments = [
|
||||
{
|
||||
imgSrc:
|
||||
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
|
||||
title: "Multi Family Residence Portfolio",
|
||||
sponsor: "KKR",
|
||||
annReturn: "12.5%",
|
||||
annYield: "12.5%",
|
||||
minInvests: "$1,000",
|
||||
targClose: "24 December",
|
||||
holdingPer: "5-7 years",
|
||||
progressValue: 80,
|
||||
},
|
||||
{
|
||||
imgSrc:
|
||||
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
|
||||
title: "Multi Family Residence Portfolio",
|
||||
sponsor: "KKR",
|
||||
annReturn: "12.5%",
|
||||
annYield: "12.5%",
|
||||
minInvests: "$1,000",
|
||||
targClose: "24 December",
|
||||
holdingPer: "5-7 years",
|
||||
progressValue: 80,
|
||||
},
|
||||
{
|
||||
imgSrc:
|
||||
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
|
||||
title: "Multi Family Residence Portfolio",
|
||||
sponsor: "KKR",
|
||||
annReturn: "12.5%",
|
||||
annYield: "12.5%",
|
||||
minInvests: "$1,000",
|
||||
targClose: "24 December",
|
||||
holdingPer: "5-7 years",
|
||||
progressValue: 80,
|
||||
},
|
||||
];
|
||||
|
||||
const InvestmentCard = () => {
|
||||
return (
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
m={1}
|
||||
// direction={{ base: "column", sm: "row" }}
|
||||
// overflow="scroll"
|
||||
variant="outline"
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
p={4}
|
||||
boxShadow={"md"}
|
||||
rounded={"md"}
|
||||
border={"none"}
|
||||
w={'90%'}
|
||||
mb={4}
|
||||
>
|
||||
<Image
|
||||
// p={"15px"}
|
||||
rounded={"md"}
|
||||
objectFit="cover"
|
||||
w={"200px"}
|
||||
h={"120px"}
|
||||
src={investment.imgSrc}
|
||||
alt={investment.title}
|
||||
/>
|
||||
|
||||
<Stack as={"span"}>
|
||||
<Box>
|
||||
<Heading size="sm" fontWeight={"500"}>
|
||||
{investment.title}
|
||||
</Heading>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Sponsor:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.sponsor}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Ann return:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.annReturn}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Ann Yield:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.annYield}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack as={"span"} borderLeft={"1px solid #ccc"} p={4}>
|
||||
<Box>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Min.Invests:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.minInvests}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Targ Close:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.targClose}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Holding per:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.holdingPer}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack as={"span"}>
|
||||
<Box>
|
||||
<Tooltip
|
||||
hasArrow
|
||||
placement="top-start"
|
||||
label={investment.progressValue}
|
||||
bg="white"
|
||||
color="#000"
|
||||
<Box w={"100%"}>
|
||||
<Box>
|
||||
{investments.map((investment, index) => (
|
||||
<Card
|
||||
direction={{ base: "column", sm: "row" }}
|
||||
overflow="scroll"
|
||||
variant="outline"
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={'20px'}
|
||||
boxShadow={'md'}
|
||||
border={'none'}
|
||||
>
|
||||
<Progress
|
||||
width={"200px"}
|
||||
value={investment.progressValue}
|
||||
rounded={"10px"}
|
||||
colorScheme={"green"}
|
||||
size={"sm"}
|
||||
<Image
|
||||
p={"15px"}
|
||||
rounded={"24px"}
|
||||
objectFit="cover"
|
||||
w={"200px"}
|
||||
h={"160px"}
|
||||
src={investment.imgSrc}
|
||||
alt={investment.title}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
// variant='ghost'
|
||||
w={"100%"}
|
||||
colorScheme={"gray"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mt={"20px"}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<CardBody>
|
||||
<Heading size="sm" fontWeight={"500"}>
|
||||
{investment.title}
|
||||
</Heading>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Sponsor:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.sponsor}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Ann return:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.annReturn}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Ann Yield:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.annYield}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
</CardBody>
|
||||
</Stack>
|
||||
<Stack borderLeft={"1px solid #ccc"}>
|
||||
<CardBody>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Min.Invests:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.minInvests}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Targ Close:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.targClose}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text fontSize="sm" mb={"4px"}>
|
||||
Holding per:{" "}
|
||||
<Text as={"span"} fontWeight={"600"}>
|
||||
{investment.holdingPer}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
</CardBody>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<CardBody>
|
||||
<Tooltip hasArrow placement='top-start' label={investment.progressValue} bg='white' color='#000'>
|
||||
<Progress
|
||||
width={"200px"}
|
||||
value={investment.progressValue}
|
||||
rounded={"10px"}
|
||||
colorScheme={"green"}
|
||||
size={'sm'}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
// variant='ghost'
|
||||
w={"100%"}
|
||||
colorScheme={"gray"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mt={"20px"}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</CardBody>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -276,7 +276,8 @@ const GlobalStateProvider = ({ children }) => {
|
||||
targClose: "24 December",
|
||||
holdingPer: "5-7 years",
|
||||
progressValue: 80,
|
||||
},{
|
||||
},
|
||||
{
|
||||
imgSrc:
|
||||
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
|
||||
title: "Multi Family Residence Portfolio",
|
||||
@@ -287,7 +288,8 @@ const GlobalStateProvider = ({ children }) => {
|
||||
targClose: "24 December",
|
||||
holdingPer: "5-7 years",
|
||||
progressValue: 80,
|
||||
},{
|
||||
},
|
||||
{
|
||||
imgSrc:
|
||||
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
|
||||
title: "Multi Family Residence Portfolio",
|
||||
@@ -350,11 +352,6 @@ const GlobalStateProvider = ({ children }) => {
|
||||
effectTill: getRandomDate(startDate, endDate),
|
||||
rate: 2.66
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
id : uuidv4(),
|
||||
fromCurr: "AED د.إ. ",
|
||||
@@ -379,9 +376,6 @@ const GlobalStateProvider = ({ children }) => {
|
||||
effectTill: getRandomDate(startDate, endDate),
|
||||
rate: 2.66
|
||||
},
|
||||
|
||||
|
||||
|
||||
{
|
||||
id : uuidv4(),
|
||||
fromCurr: "BHD .د.ب;",
|
||||
@@ -408,6 +402,228 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
])
|
||||
|
||||
const [ pendingRequest, setPendingRequest ] = useState([
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id : uuidv4(),
|
||||
date: getRandomDate(startDate, endDate),
|
||||
Distribution: "lorem ipsum dummy text",
|
||||
charge: "500",
|
||||
year: "2024",
|
||||
quater: "Q 1",
|
||||
amount: 1000
|
||||
},
|
||||
])
|
||||
|
||||
const [viewHistory, setViewHistory] = useState([
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-01-15",
|
||||
Distribution: "Office supplies",
|
||||
charge: "200.50",
|
||||
year: "2024",
|
||||
quarter: "Q1",
|
||||
amount: 1500
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-02-10",
|
||||
Distribution: "Marketing expenses",
|
||||
charge: "450.00",
|
||||
year: "2024",
|
||||
quarter: "Q1",
|
||||
amount: 2000
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-03-05",
|
||||
Distribution: "Software subscription",
|
||||
charge: "300.75",
|
||||
year: "2024",
|
||||
quarter: "Q1",
|
||||
amount: 1200
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-04-18",
|
||||
Distribution: "Travel expenses",
|
||||
charge: "600.30",
|
||||
year: "2024",
|
||||
quarter: "Q2",
|
||||
amount: 2500
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-05-22",
|
||||
Distribution: "Consulting fees",
|
||||
charge: "800.00",
|
||||
year: "2024",
|
||||
quarter: "Q2",
|
||||
amount: 3000
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-06-14",
|
||||
Distribution: "Office rent",
|
||||
charge: "1200.25",
|
||||
year: "2024",
|
||||
quarter: "Q2",
|
||||
amount: 3500
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-07-09",
|
||||
Distribution: "Utilities",
|
||||
charge: "150.40",
|
||||
year: "2024",
|
||||
quarter: "Q3",
|
||||
amount: 1000
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-08-29",
|
||||
Distribution: "Employee training",
|
||||
charge: "500.00",
|
||||
year: "2024",
|
||||
quarter: "Q3",
|
||||
amount: 1800
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-09-13",
|
||||
Distribution: "Website maintenance",
|
||||
charge: "350.65",
|
||||
year: "2024",
|
||||
quarter: "Q3",
|
||||
amount: 1400
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-10-23",
|
||||
Distribution: "Advertising",
|
||||
charge: "900.50",
|
||||
year: "2024",
|
||||
quarter: "Q4",
|
||||
amount: 2200
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-10-23",
|
||||
Distribution: "Advertising",
|
||||
charge: "900.50",
|
||||
year: "2024",
|
||||
quarter: "Q4",
|
||||
amount: 2200
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
date: "2024-10-23",
|
||||
Distribution: "Advertising",
|
||||
charge: "900.50",
|
||||
year: "2024",
|
||||
quarter: "Q4",
|
||||
amount: 2200
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<GlobalStateContext.Provider
|
||||
value={{
|
||||
@@ -423,7 +639,9 @@ const GlobalStateProvider = ({ children }) => {
|
||||
toggleColorMode,
|
||||
slideFromRight,
|
||||
setSlideFormRight,
|
||||
investment, setInvestment, rateExchange, setRateExchange
|
||||
investment, setInvestment, rateExchange, setRateExchange,
|
||||
pendingRequest,setPendingRequest,
|
||||
viewHistory,setViewHistory
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,22 +1,220 @@
|
||||
import { Box, Image, Text } from "@chakra-ui/react"
|
||||
// import error from "../assets/Error.svg"
|
||||
import robot from "../../assets/robot.png"
|
||||
// import robot from "../assets/robot.png"
|
||||
const PendingRequest = () => {
|
||||
return (
|
||||
|
||||
<Box
|
||||
h={'100vh'}
|
||||
display={'flex'}
|
||||
justifyContent={'center'}
|
||||
alignItems={'center'}
|
||||
flexDirection={'column'}
|
||||
gap={8}
|
||||
>
|
||||
<Image src={robot} w={"171px"} />
|
||||
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Text,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import DataTable from "../../Components/DataTable/DataTable";
|
||||
import Pagination from "../../Components/Pagination";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../Components/CustomAlertDialog";
|
||||
import { formatDate } from "../../Components/Functions/UTCConvertor";
|
||||
// import { formatDate } from "../../Components/Functions/UTCConvertor";
|
||||
|
||||
export default PendingRequest
|
||||
const PendingRequest = () => {
|
||||
const toast = useToast();
|
||||
const { slideFromRight, pendingRequest, setPendingRequest } =
|
||||
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("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = pendingRequest.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.Distribution;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
// Filter by status
|
||||
// const status = item.status;
|
||||
// const statusLower = status ? "active" : "inactive";
|
||||
|
||||
// const statusMatches =
|
||||
// statusFilter === "all" ||
|
||||
// (statusFilter === "active" && status === true) ||
|
||||
// (statusFilter === "inactive" && status === false);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Date",
|
||||
"Distribution Amount",
|
||||
"Charges (USD)",
|
||||
"Year",
|
||||
"Quater",
|
||||
"Amount",
|
||||
];
|
||||
|
||||
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 web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Date": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{formatDate(item.date)}
|
||||
</Text>
|
||||
),
|
||||
"Distribution Amount": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.Distribution}
|
||||
</Text>
|
||||
),
|
||||
"Charges (USD)": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.charge}
|
||||
{/* {formatDate(item.charge)} */}
|
||||
</Text>
|
||||
),
|
||||
Year: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.year}
|
||||
</Text>
|
||||
),
|
||||
Quater: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.quater}
|
||||
</Text>
|
||||
),
|
||||
|
||||
Amount: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.amount}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
ps={1}
|
||||
pe={1}
|
||||
pb={4}
|
||||
pt={4}
|
||||
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"}>
|
||||
<Pagination totalItems={10} />
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default PendingRequest;
|
||||
|
||||
@@ -1,22 +1,220 @@
|
||||
import { Box, Image, Text } from "@chakra-ui/react"
|
||||
// import error from "../assets/Error.svg"
|
||||
import robot from "../../assets/robot.png"
|
||||
// import robot from "../assets/robot.png"
|
||||
const ViewHistory = () => {
|
||||
return (
|
||||
|
||||
<Box
|
||||
h={'100vh'}
|
||||
display={'flex'}
|
||||
justifyContent={'center'}
|
||||
alignItems={'center'}
|
||||
flexDirection={'column'}
|
||||
gap={8}
|
||||
>
|
||||
<Image src={robot} w={"171px"} />
|
||||
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Text,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import DataTable from "../../Components/DataTable/DataTable";
|
||||
import Pagination from "../../Components/Pagination";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../Components/CustomAlertDialog";
|
||||
import { formatDate } from "../../Components/Functions/UTCConvertor";
|
||||
// import { formatDate } from "../../Components/Functions/UTCConvertor";
|
||||
|
||||
export default ViewHistory
|
||||
const ViewHistory = () => {
|
||||
const toast = useToast();
|
||||
const { slideFromRight, viewHistory, setViewHistory } =
|
||||
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("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = viewHistory.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.Distribution;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
// Filter by status
|
||||
// const status = item.status;
|
||||
// const statusLower = status ? "active" : "inactive";
|
||||
|
||||
// const statusMatches =
|
||||
// statusFilter === "all" ||
|
||||
// (statusFilter === "active" && status === true) ||
|
||||
// (statusFilter === "inactive" && status === false);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Date",
|
||||
"Distribution Amount",
|
||||
"Charges (USD)",
|
||||
"Year",
|
||||
"Quater",
|
||||
"Amount",
|
||||
];
|
||||
|
||||
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 web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Date": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{formatDate(item.date)}
|
||||
</Text>
|
||||
),
|
||||
"Distribution Amount": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.Distribution}
|
||||
</Text>
|
||||
),
|
||||
"Charges (USD)": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.charge}
|
||||
{/* {formatDate(item.charge)} */}
|
||||
</Text>
|
||||
),
|
||||
Year: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.year}
|
||||
</Text>
|
||||
),
|
||||
Quater: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.quarter}
|
||||
</Text>
|
||||
),
|
||||
|
||||
Amount: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
{item.amount}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
ps={1}
|
||||
pe={1}
|
||||
pb={4}
|
||||
pt={4}
|
||||
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"}>
|
||||
<Pagination totalItems={10} />
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewHistory;
|
||||
|
||||
Reference in New Issue
Block a user