Added Exchange rate page
This commit is contained in:
rockyeverlast
@@ -1,11 +1,225 @@
|
||||
import { Box } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../../Layout/animations'
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Portal,
|
||||
Select,
|
||||
Switch,
|
||||
Tag,
|
||||
Text,
|
||||
} 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";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
|
||||
|
||||
const ExchangeRate = () => {
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} bg={"green.200"} overflowY={"scroll"} height={"100vh"}></Box>
|
||||
)
|
||||
}
|
||||
const { sponser, setSponser } = useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
|
||||
export default ExchangeRate
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sponser name",
|
||||
"Address",
|
||||
"Mobile no",
|
||||
"Status",
|
||||
"Created At",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = (id) => {
|
||||
console.log(`Status updated for id: ${id}`);
|
||||
// Add your status update logic here
|
||||
};
|
||||
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = sponser.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.sponserName;
|
||||
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) => ({
|
||||
"Sponser name": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
>
|
||||
{item.sponserName}
|
||||
</Text>
|
||||
),
|
||||
Address: (
|
||||
<Box w={350} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.sponserAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Mobile no": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.mobileNo}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
Status:
|
||||
// <Switch
|
||||
// size={"sm"}
|
||||
// colorScheme="teal"
|
||||
// onChange={() => handleUpdateStatus(item.id)}
|
||||
// isChecked={item.status}
|
||||
// />
|
||||
|
||||
item?.status ? (
|
||||
<Badge variant={"outline"} colorScheme="green">
|
||||
Passed
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant={"outline"} colorScheme="red">
|
||||
Not passes
|
||||
</Badge>
|
||||
),
|
||||
"Created At": (
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} className=" fw-bold">
|
||||
{formatDate(item.createdAt)}
|
||||
</Text>
|
||||
<Menu>
|
||||
<MenuButton className="link p-1 rounded-1">
|
||||
<HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
</MenuButton>
|
||||
<Portal>
|
||||
<MenuList minWidth="80px">
|
||||
<RouterLink to={`edit/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">Edit</MenuItem>
|
||||
</RouterLink>
|
||||
<RouterLink to={`view/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">View</MenuItem>
|
||||
</RouterLink>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
className="web-text-medium"
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Portal>
|
||||
</Menu>
|
||||
</span>
|
||||
),
|
||||
}));
|
||||
|
||||
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"}>
|
||||
<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"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Pagination totalItems={10} />
|
||||
|
||||
<Link to={"/sponser/add-sponser"}>
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme={"green"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
>
|
||||
Add Exchange Rate
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
// totalPages={10}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExchangeRate;
|
||||
|
||||
@@ -6,75 +6,6 @@ import { VscSymbolClass } from "react-icons/vsc";
|
||||
import { FiUsers } from "react-icons/fi";
|
||||
|
||||
|
||||
export const nav = [
|
||||
{
|
||||
title: "MAIN MENU",
|
||||
type: "title",
|
||||
},
|
||||
{
|
||||
title: "Master",
|
||||
submenu: [
|
||||
{
|
||||
title: "Sponser",
|
||||
path: "/sponser",
|
||||
icon: RiMoneyDollarBoxLine
|
||||
},
|
||||
{
|
||||
title: "Exchange rate",
|
||||
path: "/exchange-rate",
|
||||
icon: RiExchangeBoxLine
|
||||
},
|
||||
{
|
||||
title: "Asset classes",
|
||||
path: "/view",
|
||||
icon: VscSymbolClass
|
||||
},
|
||||
],
|
||||
type: "accordion",
|
||||
Icon: TbBrandMedium,
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
submenu: [
|
||||
{
|
||||
title: "Sponser",
|
||||
path: "/loop",
|
||||
icon: TbBrandMedium
|
||||
},
|
||||
{
|
||||
title: "Class",
|
||||
path: "/class",
|
||||
icon: TbBrandMedium
|
||||
},
|
||||
{
|
||||
title: "View",
|
||||
path: "/view",
|
||||
icon: TbBrandMedium
|
||||
},
|
||||
],
|
||||
type: "accordion",
|
||||
Icon: FiUsers,
|
||||
},
|
||||
{
|
||||
title: "Single Link",
|
||||
type: "single",
|
||||
path: "/",
|
||||
Icon: HiOutlineNewspaper,
|
||||
},
|
||||
// {
|
||||
// title: "SPONSER",
|
||||
// type: "title",
|
||||
// },
|
||||
// {
|
||||
// title: "Single Link",
|
||||
// type: "single",
|
||||
// path: "/",
|
||||
// Icon: HiOutlineNewspaper,
|
||||
// },
|
||||
];
|
||||
|
||||
|
||||
|
||||
export const nestedNav = [
|
||||
{
|
||||
title: "MAIN MENU",
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
import Investment from "../Pages/Investment/Investment";
|
||||
import ExchangeRate from "../Pages/Master/ExchangeRate/ExchangeRate";
|
||||
import AddSponser from "../Pages/Master/Sponser/AddSponser";
|
||||
import Sponser from "../Pages/Master/Sponser/Sponsers";
|
||||
@@ -11,6 +10,6 @@ export const RouteLink = [
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{ path: "/exchange-rate", Component: ExchangeRate },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user