From ab175b4c7672f8d4fb4823b8a16fc61c8803c071 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Fri, 13 Sep 2024 19:43:38 +0530 Subject: [PATCH] =?UTF-8?q?table=20changes=F0=9F=91=A8=E2=80=8D=E2=9A=95?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Contexts/GlobalStateProvider.jsx | 16 ++ src/Pages/Admin/BankDetails/BankDetails.jsx | 6 +- src/Pages/Admin/Users.jsx | 261 ++++++++++++++++-- .../Deposit/DepositRequest/DepositRequest.jsx | 4 +- .../DepositViewHistory/DepositHistory.jsx | 4 +- .../IO_Management/ViewIO/ViewIOTable.jsx | 43 +-- .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 2 +- .../WithDrawal/DrawalView/ViewHistory.jsx | 16 +- src/Routes/Routes.js | 8 +- 9 files changed, 302 insertions(+), 58 deletions(-) diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 43a4a4d..6d09134 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -1407,6 +1407,19 @@ const GlobalStateProvider = ({ children }) => { }, ]); + + const [users, setUsers] = useState([ + { + id: 1, + firstName: "SA00000001", + lastName: "John David", + emailID: "John", + role: "David", + phoneNumber:"8940035906", + }, + ]); + + const [InvestorWallet, setInvestorWallet] = useState(null); // ==============[ prod state ]=============================== @@ -1490,6 +1503,9 @@ const GlobalStateProvider = ({ children }) => { isIOloading, setIOloading, + + users, + setUsers, }} > {children} diff --git a/src/Pages/Admin/BankDetails/BankDetails.jsx b/src/Pages/Admin/BankDetails/BankDetails.jsx index cae6253..f1d55ca 100644 --- a/src/Pages/Admin/BankDetails/BankDetails.jsx +++ b/src/Pages/Admin/BankDetails/BankDetails.jsx @@ -77,7 +77,7 @@ const BankDetails = () => { // ====================================================[Table Setup]================================================================ const tableHeadRow = [ - "Sr N/O", + // "Sr N/O", "Country name", "Account Name", "Account No", @@ -138,11 +138,11 @@ const BankDetails = () => { "Account Name": ( - {item.accountName} + {item?.accountName} ), - "Account No ": ( + "Account No": ( {item?.accountNumber} diff --git a/src/Pages/Admin/Users.jsx b/src/Pages/Admin/Users.jsx index 5d7401f..5b2bc9b 100644 --- a/src/Pages/Admin/Users.jsx +++ b/src/Pages/Admin/Users.jsx @@ -1,22 +1,241 @@ -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 Users = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +import { + Box, + Button, + HStack, + Input, + Text, + Tooltip, + useToast, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState, useRef } from "react"; +import { Link, Link as RouterLink, useNavigate } from "react-router-dom"; +import {EditIcon,} from "@chakra-ui/icons"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import DataTable from "../../Components/DataTable/NormalTable"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import ToastBox from "../../Components/ToastBox"; +import { debounce } from "./Contact"; -export default Users \ No newline at end of file +const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter + +const Users = () => { + const navigate = useNavigate(); + const toast = useToast(); + const thirdField = useRef(); + const { users, setUsers, 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(""); + // const { + // isOpen: isEditOpen, + // onOpen: onEditOpen, + // onClose: onEditClose, + // } = useDisclosure(); + + const btnRef = React.useRef(); + + // const { + // data: bankDetails, + // isLoading: bankDetailsLoading, + // error, + // } = useGetBankQuery({ page: 1, size: 10 }); + + + useEffect(() => { + // Simulate loading + const timer = setTimeout(() => { + setIsLoading(false); + }, 1500); + + // Cleanup the timer on component unmount + return () => clearTimeout(timer); + }, []); + + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + "Sr N/O", + "First Name", + "Last Name", + "E-mail ID", + "Role", + "Phone Number", + "Action", + ]; + + const handleUpdateStatus = debounce((id) => { + setUsers((prevData) => + prevData.map((users) => + users.id === id ? { ...users } : users + ) + ); + toast({ + render: () => , + }); + }, 300); + + // ====================================================[Table Filter]================================================================ + const filteredData = users?.data?.filter((item) => { + // Filter by name (case insensitive) + const name = item.emailID; + 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, + "Sr N/O": ( + + {item.id} + + ), + "First Name": ( + + + {item.firstName} + + + ), + "Last Name": ( + + + {item?.lastName} + + + ), + "E-mail ID": ( + + + {item?.emailID} + + + ), + "Role": ( + + + {item.role} + + + ), + "Phone Number": ( + + + {item.phoneNumber} + + + ), + Action: ( + + + + + + ), + })); + + const handleDelete = () => { + const updatedInvestorDetails = InvestorDetails.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setInvestorDetails(updatedInvestorDetails); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + const handleEdit = (id) => { + setActionId(id); + onEditOpen(); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default Users; diff --git a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx index 821a414..1d074fb 100644 --- a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx +++ b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx @@ -95,7 +95,7 @@ const DepositRequest = () => { "Last Name", "Country", "Phone Number", - "Amount in Investor currency", + "Deposit Amount", "Deposit Date", "Action", ]; @@ -189,7 +189,7 @@ const DepositRequest = () => { ), - "Amount in Investor currency": ( + "Deposit Amount": ( { "Last Name", "Country", "Phone Number", - "Amount in Investor currency", + "Deposit Amount", "Deposit Date", "Status", "Supporting's", @@ -184,7 +184,7 @@ const DepositHistory = () => { ), - "Amount in Investor currency": ( + "Deposit Amount": ( { "Sponsor", "Investment Type", "Goal Amount", + "Amount Raised", "Closing Date", "IO Status", // "Preview", @@ -134,31 +135,25 @@ const ViewIOTable = () => { ), "IO Name": ( - // - // - // - // {item.investmentNameEnglish ? item.investmentNameEnglish : "---"} - // - // - // {item.investmentNameEnglish ? item.investmentNameEnglish : "---"} @@ -181,18 +176,32 @@ const ViewIOTable = () => { ), "Goal Amount": ( - - - {/* {item.goalAmount - ? formatCurrency(removeTrailingZeros(item.goalAmount)) - : "---"} */} + + + + $ + {`${parseFloat(item.goalAmount || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2, })}`} - - USD + + + ), + "Amount Raised": ( + + + {/* {item.goalAmount + ? formatCurrency(removeTrailingZeros(item.goalAmount)) + : "---"} */} + + + $ + {`${parseFloat(item.totalRaisedAmount || 0).toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })}`} ), diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx index ddd156d..0e0bb9d 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx @@ -312,7 +312,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => { color={"gray.500"} fontWeight={"500"} > - Amount Invested :- + Amount Raised :- {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */} diff --git a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx index eeb6ede..274c1ad 100644 --- a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx +++ b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx @@ -105,8 +105,8 @@ const ViewHistory = () => { "Country", "Phone Number", // "Currency", - "Amount in Investor currency", "Withdrawal Amount", + // "Withdrawal Amount", "Status", ]; @@ -185,14 +185,14 @@ const ViewHistory = () => { ), + // "Withdrawal Amount": ( + // + // + // ${parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} + // + // + // ), "Withdrawal Amount": ( - - - ${parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} - - - ), - "Amount in Investor currency": ( {parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}{item?.currencyCode} diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 4a33e67..d5c26de 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -100,9 +100,9 @@ export const RouteLink = [ { path: "/notification", Component: UnderConstruction }, // { path: "/contact", Component: Contact }, { path: "/contact", Component: UnderConstruction }, - // { path: "/users", Component: Users }, - { path: "/users", Component: UnderConstruction }, - // { path: "/bank-details", Component: BankDetails }, - { path: "/bank-details", Component: UnderConstruction }, + { path: "/users", Component: Users }, + // { path: "/users", Component: UnderConstruction }, + { path: "/bank-details", Component: BankDetails }, + // { path: "/bank-details", Component: UnderConstruction }, { path: "/bank-details/edit-bank-details/:id", Component: EditBankDetails }, ];