diff --git a/src/Components/InvestmentCard/InvestmentCard.jsx b/src/Components/InvestmentCard/InvestmentCard.jsx index 6b08414..13ed3af 100644 --- a/src/Components/InvestmentCard/InvestmentCard.jsx +++ b/src/Components/InvestmentCard/InvestmentCard.jsx @@ -16,7 +16,7 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations"; const InvestmentCard = ({ investment }) => { return ( { mb={"20px"} boxShadow={"md"} border={"none"} - mt={2} + mt={2} > { objectFit="cover" w={"200px"} h={"140px"} - src={investment?.imgSrc} - alt={investment?.title} + src={investment?.banner_image} + alt={investment?.ioName} /> - {investment?.title} + {investment?.ioName} { ? "green" : "red" } - ps={2} pe={2} pt={0.5} pb={0.5} + ps={2} + pe={2} + pt={0.5} + pb={0.5} fontSize={"xs"} ms={3} > @@ -60,75 +63,88 @@ const InvestmentCard = ({ investment }) => { - Sponsor:{" "} + Sponsor: - {investment?.sponsor} - {" "} + {investment?.sponserName} + - Ann return:{" "} + Ann return: - {investment?.annReturn} - {" "} + {investment?.annualReturn} + - Ann Yield:{" "} + Ann Yield: - {investment?.annYield} - {" "} + {investment?.annualyield} + + + + Tenure: + + {investment?.tenure} + + + + Quaterly: + + {investment?.quaterly} + + + Destributed Amount: + + {investment?.destributedAmount} + + - Min.Invests:{" "} + Min.Invests: {investment?.minInvests} - {" "} + - Targ Close:{" "} + Targ Close: - {investment?.targClose} - {" "} + {new Date(investment?.targetClose).toLocaleDateString()} + - Holding per:{" "} + Year: - {investment?.holdingPer} - {" "} + {investment?.year} + - - - $ 500,000.450 - {investment?.progressValue} % Funded + + + $ 500,000.450 + + + 75 % Funded + - {/* */} - - {/* */} - - - + + + + + {/* */} + + ); +}; + +export default AddInvestmentType; diff --git a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx new file mode 100644 index 0000000..bc2f65d --- /dev/null +++ b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx @@ -0,0 +1,22 @@ +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 EditInvestmentType = () => { + return ( + + + + {/* The requested URL was not found on this server. */} + + ) +} + +export default EditInvestmentType \ No newline at end of file diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx index 36ce927..f61ccc5 100644 --- a/src/Pages/Master/InvestmentType/InvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx @@ -1,18 +1,255 @@ -import { Box, Card, CardBody, Heading, Image, Stack, Text } from "@chakra-ui/react"; -// import error from "../assets/Error.svg" -import robot from "../../../assets/robot.png"; -import InvestmentCard from "../../../Components/InvestmentCard/InvestmentCard"; -// import robot from "../assets/robot.png" +import { + Avatar, + Badge, + Box, + Button, + HStack, + Input, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Select, + Switch, + Tag, + 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 { HiDotsVertical } from "react-icons/hi"; +import { Link, Link as RouterLink } from "react-router-dom"; +import { AddIcon, EmailIcon } from "@chakra-ui/icons"; +import Pagination from "../../../Components/Pagination"; +import GlobalStateContext from "../../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../../Components/CustomAlertDialog"; +import ToastBox from "../../../Components/ToastBox"; +import { debounce } from "../Sponser/AddSponser"; + +const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter + const InvestmentType = () => { + const toast = useToast() + const { investmentType, setInvestmentType,slideFromRight } = 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 Setup]================================================================ + const tableHeadRow = [ + "investment name", + "Address", + "Mobile no", + "Status", + "Created At", + ]; + + const handleUpdateStatus = debounce((id) => { + + setInvestmentType((prevInvestmentType) => + prevInvestmentType.map((investmentType) => + investmentType.id === id ? { ...investmentType, status: !investmentType.status } : investmentType + ) + ); + toast({ + render: () => ( + + ), + }); + },300) ; + + // ====================================================[Table Filter]================================================================ + const filteredData = investmentType.filter((item) => { + // Filter by name (case insensitive) + const name = item.investmentName; + 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; + }); + + const extractedArray = filteredData?.map((item) => ({ + id: item?.id, + "investment name": ( + + {item.investmentName} + + ), + Address: ( + + + {item.sponserAddress} + + + ), + "Mobile no": ( + + + {item.mobileNo} + + + ), + Status: + handleUpdateStatus(item.id)} + isChecked={item.status} + /> + + // item?.status ? ( + // + // Passed + // + // ) : ( + // + // Not passes + // + // ), + + , + "Created At": ( + + + {formatDate(item.createdAt)} + + + + + + + + + Edit + + + View + + { + setActionId(item?.id); + setDeleteAlert(true); + }} + className="web-text-medium" + > + Delete + + + + + + ), + })); + + const handleDelete = () => { + const updatedInvestmentType = investmentType.filter((investmentType) => investmentType.id !== actionId); + + setTimeout(() => { + setInvestmentType(updatedInvestmentType); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + + + return ( - - - {/* */} + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + + + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete Investment Type?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> ); }; diff --git a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx new file mode 100644 index 0000000..1c1b8fe --- /dev/null +++ b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx @@ -0,0 +1,22 @@ +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 ViewInvestmentType = () => { + return ( + + + + {/* The requested URL was not found on this server. */} + + ) +} + +export default ViewInvestmentType \ No newline at end of file diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx index b4c7b41..0ae4f37 100644 --- a/src/Pages/Master/Sponser/AddSponser.jsx +++ b/src/Pages/Master/Sponser/AddSponser.jsx @@ -51,6 +51,7 @@ export function debounce(func, delay) { debounceTimer = setTimeout(() => func.apply(this, args), delay); }; } + const AddSponser = () => { const navigate = useNavigate(); const { sponser, setSponser } = useContext(GlobalStateContext); diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 3d73d16..c64e57a 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -17,7 +17,10 @@ import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory"; import InvestorDetails from "../Pages/Investor_Management/InvestorDetails"; import InvestorTransactions from "../Pages/Investor_Management/InvestorTransactions"; import ExchangeRate from "../Pages/Master/ExchangeRate/ExchangeRate"; +import AddInvestmentType from "../Pages/Master/InvestmentType/AddInvestmentType"; +import EditInvestmentType from "../Pages/Master/InvestmentType/EditInvestmentType"; import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType"; +import ViewInvestmentType from "../Pages/Master/InvestmentType/ViewInvestmentType"; import AddSponser from "../Pages/Master/Sponser/AddSponser"; import EditSponser from "../Pages/Master/Sponser/EditSponser"; import Sponser from "../Pages/Master/Sponser/Sponsers"; @@ -39,6 +42,9 @@ export const RouteLink = [ { path: "/exchange-rate", Component: ExchangeRate }, { path: "/investment-type", Component: InvestmentType }, + { path: "/investment-type/add-investment", Component: AddInvestmentType }, + { path: "/investment-type/view-investment/:id", Component: ViewInvestmentType }, + { path: "/investment-type/edit-investment/:id", Component: EditInvestmentType }, // ===============[ IO Management]=============== { path: "/create-io", Component: CreateIO },