diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index 7a97857..5a421b2 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/src/Components/DataTable/DataTable.jsx @@ -51,33 +51,14 @@ const DataTable = ({ w={"auto"} color={"#004118"} > - {isLoading ? : heading} - {/* {heading} */} + {heading} ))} - {isLoading - ? Array?.from({ length: 10 }).map((_, index) => ( - - {tableHeadRow.map((_, i) => ( - - - - ))} - - )) - : data?.map((item, index) => ( + { data?.map((item, index) => ( { // e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover @@ -116,7 +97,7 @@ const DataTable = ({ // : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells // } > - {item[heading]} + {item[heading]} ))} diff --git a/src/Components/InvestmentCard/InvestmentCard.jsx b/src/Components/InvestmentCard/InvestmentCard.jsx index 775dd5a..ba0dac3 100644 --- a/src/Components/InvestmentCard/InvestmentCard.jsx +++ b/src/Components/InvestmentCard/InvestmentCard.jsx @@ -2,7 +2,6 @@ import { Box, Button, Card, - CardBody, Heading, Image, Progress, @@ -10,144 +9,112 @@ import { Text, Tooltip, } from "@chakra-ui/react"; +import { FADE_IN_SCALE_UP, OPACITY_ON_LOAD } from "../../Layout/animations"; -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 = () => { +const InvestmentCard = ({ investment }) => { return ( - - - {investments.map((investment, index) => ( - - {investment.title} + + {investment.title} - - - - {investment.title} - - - Sponsor:{" "} - - {investment.sponsor} - {" "} - - - Ann return:{" "} - - {investment.annReturn} - {" "} - - - Ann Yield:{" "} - - {investment.annYield} - {" "} - - - - - - - Min.Invests:{" "} - - {investment.minInvests} - {" "} - - - Targ Close:{" "} - - {investment.targClose} - {" "} - - - Holding per:{" "} - - {investment.holdingPer} - {" "} - - - - - - - - - - - - - ))} - + + + + {investment.title} + + + Sponsor:{" "} + + {investment.sponsor} + {" "} + + + Ann return:{" "} + + {investment.annReturn} + {" "} + + + Ann Yield:{" "} + + {investment.annYield} + {" "} + + + + + + + Min.Invests:{" "} + + {investment.minInvests} + {" "} + + + Targ Close:{" "} + + {investment.targClose} + {" "} + + + Holding per:{" "} + + {investment.holdingPer} + {" "} + + + + + + + + + + + ); }; diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 1c040cf..0feb015 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -1,12 +1,18 @@ // GlobalStateContext.js import React, { useState } from "react"; import GlobalStateContext from "./GlobalStateContext"; -import { useColorMode } from "@chakra-ui/react"; +import { effect, useColorMode } from "@chakra-ui/react"; +import { v4 as uuidv4 } from "uuid"; -function generateUID() { - // Generates a random 8-character alphanumeric string - return Math.random().toString(36).substring(2, 10); -} + +const getRandomDate = (start, end) => { + const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + return date.toISOString(); +}; + + +const startDate = new Date(2020, 0, 1); // January 1, 2020 +const endDate = new Date(); // Current date const GlobalStateProvider = ({ children }) => { const [isAuthenticate, setIsAuthenticate] = useState(false); @@ -258,6 +264,150 @@ const GlobalStateProvider = ({ children }) => { }, ]); + const [investment, setInvestment] = useState([ + { + 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: ",00 $0", + 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: ",00 $0", + 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: ",00 $0", + targClose: "24 December", + holdingPer: "5-7 years", + progressValue: 80, + }, + ]) + + const [ rateExchange, setRateExchange ] = useState([ + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "BHD .د.ب;", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "KWD ·د.ك", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "OMR ﷼.", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "QAR ﷼.", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "SAR ﷼.", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "USD $", + toCurr: "AED د.إ. ", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + + + + + + { + id : uuidv4(), + fromCurr: "AED د.إ. ", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "SAR ﷼.", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "QAR ﷼.", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + + + + { + id : uuidv4(), + fromCurr: "BHD .د.ب;", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "KWD ·د.ك", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + { + id : uuidv4(), + fromCurr: "OMR ﷼.", + toCurr: "USD $", + effectFrom: getRandomDate(startDate, endDate), + effectTill: getRandomDate(startDate, endDate), + rate: 2.66 + }, + ]) + return ( { colorMode, toggleColorMode, slideFromRight, - setSlideFormRight + setSlideFormRight, + investment, setInvestment, rateExchange, setRateExchange }} > {children} diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx index f3fd563..124bd88 100644 --- a/src/Layout/DefaultLayout.jsx +++ b/src/Layout/DefaultLayout.jsx @@ -563,10 +563,11 @@ const DashboardLayout = () => { )}
{/*
diff --git a/src/Layout/animations.jsx b/src/Layout/animations.jsx index 7ac044d..2d825ae 100644 --- a/src/Layout/animations.jsx +++ b/src/Layout/animations.jsx @@ -10,7 +10,7 @@ export const SLIDE_IN_BOTTOM = { as: motion.div, initial: { opacity: 0, y: 50 }, animate: { opacity: 1, y: 0 }, - transition: { duration: 0.5, ease: "easeInOut" } + transition: { duration: 1, ease: "easeInOut" } }; diff --git a/src/Pages/IO_Management/ViewIO.jsx b/src/Pages/IO_Management/ViewIO.jsx index 0bf73b6..d72ab4f 100644 --- a/src/Pages/IO_Management/ViewIO.jsx +++ b/src/Pages/IO_Management/ViewIO.jsx @@ -1,22 +1,76 @@ -import { Box, Image, Text } from "@chakra-ui/react" +import { + Box, + Image, + Skeleton, + Tab, + TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, + Text, +} from "@chakra-ui/react"; // import error from "../assets/Error.svg" -import robot from "../../assets/robot.png" +// import robot from "../../../assets/robot.png" +import { useContext, useEffect, useState } from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import InvestmentCard from "../../Components/InvestmentCard/InvestmentCard"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; // import robot from "../assets/robot.png" -const ViewIO = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +const ExchangeRate = () => { + const { investment, setInvestment } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(true); -export default ViewIO \ No newline at end of file + + + + useEffect(() => { + // Simulate loading + const timer = setTimeout(() => { + setIsLoading(false); + }, 1500); + + // Cleanup the timer on component unmount + return () => clearTimeout(timer); + }, []); + + + + + return ( + + + + All + Available + Upcomming + Closed + + + + + {investment?.map((investmentDetails, index) => ( + + ))} + + +

two!

+ + +

three!

+ + +

three!

+ + + + + ); +}; + +export default ExchangeRate; diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx index f384bd8..40ed679 100644 --- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx +++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx @@ -1,22 +1,218 @@ -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 ExchangeRate = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +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 { formatDate } from "../../../Components/Functions/UTCConvertor"; -export default ExchangeRate \ No newline at end of file +const ExchangeRate = () => { + const toast = useToast(); + const { slideFromRight, rateExchange, setRateExchange } = + 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 = rateExchange.filter((item) => { + // Filter by name (case insensitive) + const name = item.fromCurr; + 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.", + "From currency", + "To currency", + "Effective from", + "Effective till", + "Rate", + "Action", + ]; + + const extractedArray = filteredData?.map((item, index) => ({ + id: item?.id, + "Sr No.": ( + + {index + 1}. + + ), + "From currency": ( + + {item.fromCurr} + + ), + "To currency": ( + + {item.toCurr} + + ), + "Effective from": ( + + {formatDate(item.effectFrom)} + + ), + "Effective till": ( + + {formatDate(item.effectTill)} + + ), + Rate: ( + + {item.rate} + + ), + + Action: ( + + ), + })); + + const handleDelete = () => { + const updatedSponsors = sponser.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setSponser(updatedSponsors); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default ExchangeRate; diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx index ae4303c..36ce927 100644 --- a/src/Pages/Master/InvestmentType/InvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx @@ -6,13 +6,13 @@ import InvestmentCard from "../../../Components/InvestmentCard/InvestmentCard"; const InvestmentType = () => { return ( - {/* */} - + + {/* */} ); };