From 50eca2810b8602f477597d0300b48e75ae192199 Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Mon, 24 Jun 2024 17:50:11 +0530 Subject: [PATCH] Added Exchange rate page --- .../Master/ExchangeRate/ExchangeRate.jsx | 230 +++++++++++++++++- src/Routes/Nav.js | 69 ------ src/Routes/Routes.js | 3 +- 3 files changed, 223 insertions(+), 79 deletions(-) diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx index ccbc6d8..b5193c9 100644 --- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx +++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx @@ -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 ( - - ) -} + 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 \ No newline at end of file + 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": ( + + {item.sponserName} + + ), + 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 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/Routes/Nav.js b/src/Routes/Nav.js index ca91c74..208274f 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -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", diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index f6eaffa..43ef8e6 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -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 }, ];