Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

uodated Exchange rate

Browse Source
This commit is contained in:
Siddhesh More
2024-06-26 12:03:13 +05:30
parent 39fbe2b1d5
commit d78702e613
8 changed files with 563 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Components/DataTable/DataTable.jsx
View File

@@ -51,33 +51,14 @@ const DataTable = ({
w={"auto"}
color={"#004118"}
>
{isLoading ? <Skeleton height="20px" /> : heading}
{/* {heading} */}
<Skeleton isLoaded={!isLoading}
fadeDuration={0.4} height="20px" >{heading}</Skeleton>
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{isLoading
? Array?.from({ length: 10 }).map((_, index) => (
<Tr key={index}>
{tableHeadRow.map((_, i) => (
<Td
textAlign={slideFromRight ? "right" : "left"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
w={columnWidth}
>
<Skeleton height="20px" mb={1} mt={1} />
</Td>
))}
</Tr>
))
: data?.map((item, index) => (
{ data?.map((item, index) => (
<Tr
// onMouseEnter={(e) => {
// 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]}
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading} >{item[heading]}</Skeleton>
</Td>
))}
</Tr>

239
src/Components/InvestmentCard/InvestmentCard.jsx
View File

@@ -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 (
<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'}
>
<Image
p={"15px"}
rounded={"24px"}
objectFit="cover"
w={"200px"}
h={"160px"}
src={investment.imgSrc}
alt={investment.title}
/>
<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>
<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>
<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"
>
<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>
</Box>
</Stack>
</Box>
);
};

163
src/Contexts/GlobalStateProvider.jsx
View File

@@ -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 (
<GlobalStateContext.Provider
value={{
@@ -272,7 +422,8 @@ const GlobalStateProvider = ({ children }) => {
colorMode,
toggleColorMode,
slideFromRight,
setSlideFormRight
setSlideFormRight,
investment, setInvestment, rateExchange, setRateExchange
}}
>
{children}

3
src/Layout/DefaultLayout.jsx
View File

@@ -563,10 +563,11 @@ const DashboardLayout = () => {
)}
<main
className={`h-100 ${slideFromRight ? "pe-3" : "ps-3"} `}
className={`h-100 ${slideFromRight ? "pe-3" : "ps-3"} `}
style={{
width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 232 : 74}px)`,
transition: "width 0.3s ease-in-out",
}}
>
{/* <header className="p-2 ps-0 pt-3 fw-400 border-bottom">

2
src/Layout/animations.jsx
View File

@@ -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" }
};

92
src/Pages/IO_Management/ViewIO.jsx
View File

@@ -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 (
<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>
)
}
const ExchangeRate = () => {
const { investment, setInvestment } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(true);
export default ViewIO
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
<Tabs position="relative" variant="unstyled" mt={2}>
<TabList>
<Tab fontSize={"sm"}>All</Tab>
<Tab fontSize={"sm"}>Available</Tab>
<Tab fontSize={"sm"}>Upcomming</Tab>
<Tab fontSize={"sm"}>Closed</Tab>
</TabList>
<TabIndicator
mt="-1.5px"
height="2px"
bg="green.500"
borderRadius="1px"
/>
<TabPanels>
<TabPanel>
{investment?.map((investmentDetails, index) => (
<Skeleton isLoaded={!isLoading}><InvestmentCard key={index} investment={investmentDetails} /></Skeleton>
))}
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
);
};
export default ExchangeRate;

238
src/Pages/Master/ExchangeRate/ExchangeRate.jsx
View File

@@ -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 (
<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,
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
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.": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
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"
>
{item.fromCurr}
</Text>
),
"To currency": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center fw-bold web-text-small"
>
{item.toCurr}
</Text>
),
"Effective from": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center fw- web-text-small"
>
{formatDate(item.effectFrom)}
</Text>
),
"Effective till": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center fw-500 web-text-small"
>
{formatDate(item.effectTill)}
</Text>
),
Rate: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center fw-bold web-text-small"
>
{item.rate}
</Text>
),
Action: (
<Button colorScheme="green" size={"xs"} variant={"ghost"}>
Edit
</Button>
),
}));
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 ExchangeRate;

12
src/Pages/Master/InvestmentType/InvestmentType.jsx
View File

@@ -6,13 +6,13 @@ import InvestmentCard from "../../../Components/InvestmentCard/InvestmentCard";
const InvestmentType = () => {
return (
<Box
h={"100vh"}
w={'100%'}
p={'20px'}
overflow="scroll"
display={'flex'}
height={'100vh'}
justifyContent={'center'}
alignItems={'center'}
>
{/* <Image src={robot} w={"171px"} /> */}
<InvestmentCard />
<Image src={robot} w={"171px"} />
{/* <InvestmentCard /> */}
</Box>
);
};