table changes👨‍⚕️

2024-09-13 19:43:38 +05:30
parent c9c7a7be69
commit ab175b4c76
9 changed files with 302 additions and 58 deletions
--- 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}
--- 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": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.accountName}
+          {item?.accountName}
        </Text>
      </Box>
    ),
-    "Account No ": (
+    "Account No": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.accountNumber}
--- 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 (
-    
-    <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 {
+  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
+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: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 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": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {item.id}
+      </Text>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailID}
+        </Text>
+      </Box>
+    ),
+    "Role": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.role}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              navigate(`/bank-details/edit-bank-details/${item.id}`);
+            }}
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  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 (
+    <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
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        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 Users;
--- 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 = () => {
        </Text>
      </Box>
    ),
-    "Amount in Investor currency": (
+    "Deposit Amount": (
      <Box
        display={"flex"}
        justifyContent={"end"}
--- a/src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx
+++ b/src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx
@@ -85,7 +85,7 @@ const DepositHistory = () => {
    "Last Name",
    "Country",
    "Phone Number",
-    "Amount in Investor currency",
+    "Deposit Amount",
    "Deposit Date",
    "Status",
    "Supporting's",
@@ -184,7 +184,7 @@ const DepositHistory = () => {
        </Text>
      </Box>
    ),
-    "Amount in Investor currency": (
+    "Deposit Amount": (
      <Box
        isTruncated={true}
        display={"flex"}
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -91,6 +91,7 @@ const ViewIOTable = () => {
    "Sponsor",
    "Investment Type",
    "Goal Amount",
+    "Amount Raised",
    "Closing Date",
    "IO Status",
    // "Preview",
@@ -134,31 +135,25 @@ const ViewIOTable = () => {
      </Box>
    ),
    "IO Name": (
-      // <Box w={"200px"} isTruncated={true}>
-      //   <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-      //     <Tooltip w={"100%"} label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"} placement='top'>
-      //       {item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
-      //     </Tooltip>
-      //   </Text>
-      // </Box>
      <Tooltip
        hasArrow
-        bg={"#fff"}
+        bg="#c6f6d5"
        fontSize={"xs"}
        label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
        placement="top-start"
        color={"blue.800"}
+        
      >
        <Text
          as={"span"}
          color={"teal.900"}
          fontWeight={"500"}
-          maxWidth="200px" // Adjust width as needed
+          maxWidth="100px" // Adjust width as needed
          display="block" // Ensure block display for proper truncation
          overflow="hidden"
          isTruncated
          textOverflow="ellipsis"
-          cursor={"grab"}
+          cursor={"pointer"}
        >
          {item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
        </Text>
@@ -181,18 +176,32 @@ const ViewIOTable = () => {
      </Box>
    ),
    "Goal Amount": (
-      <Box w={"100%"} display={"flex"} justifyContent={"end"} alignItems={'center'}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {/* {item.goalAmount
-            ? formatCurrency(removeTrailingZeros(item.goalAmount))
-            : "---"} */}
+      <Box w={"100%"} display={"flex"} justifyContent={"start"} alignItems={'center'}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>       
+        <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
          {`${parseFloat(item.goalAmount || 0).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}`}
-          <Badge ms={1} colorScheme="green">
-            USD
+        </Text>
+      </Box>
+    ),
+    "Amount Raised": (
+      <Box w={"100%"} display={"flex"} justifyContent={"start"} alignItems={'center'}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {/* {item.goalAmount
+            ? formatCurrency(removeTrailingZeros(item.goalAmount))
+            : "---"} */}
+            
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
          </Badge>
+          {`${parseFloat(item.totalRaisedAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}`}
        </Text>
      </Box>
    ),
--- 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 :-
          </Text>
          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
            {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
--- 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 = () => {
        </Text>
      </Box>
    ),
+    // "Withdrawal Amount": (
+    //   <Box  isTruncated={true}>
+    //     <Text as={"span"} color={"teal.900"}>
+    //     <Badge ms={1} colorScheme="green" me={1}>$</Badge>{parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+    //     </Text>
+    //   </Box>
+    // ),
    "Withdrawal Amount": (
-      <Box  isTruncated={true}>
-        <Text as={"span"} color={"teal.900"}>
-        <Badge ms={1} colorScheme="green" me={1}>$</Badge>{parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-        </Text>
-      </Box>
-    ),
-    "Amount in Investor currency": (
      <Box isTruncated={true} display={'flex'} justifyContent={'end'}>
        <Text as={"span"} color={"teal.900"}>
        {parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}<Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
--- 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 },
 ];