investor Details

2024-07-11 11:44:08 +05:30
parent 1d3b8d82ed
commit 57bbad283b
9 changed files with 851 additions and 82 deletions
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -491,8 +491,6 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

-
-  
  const [navDetails, setNavDetails] = useState([
    {
      id: 1,
@@ -512,7 +510,6 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

-
  const [create, setCreate] = useState([
    {
      id: 1,
@@ -759,27 +756,209 @@ const GlobalStateProvider = ({ children }) => {
  const [InvestorDetails, setInvestorDetails] = useState([
    {
      id: 1,
+      fullName:"John David",
      firstName:"John",
      lastName: "David",
      country: "Saudi Arabia",
      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
      kycStatus:"Completed",
-      // investedProperty:"View",
      status:"Unban",
    },
    {
      id: 2,
+      fullName:"John David",
      firstName:"John",
      lastName: "David",
      country: "Saudi Arabia",
      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Incompleted",
+      status:"Unban",
+    },
+    {
+      id: 3,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Completed",
+      status:"Unban",
+    },
+    {
+      id: 4,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Incompleted",
+      status:"Unban",
+    },
+    {
+      id: 5,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Completed",
+      status:"Unban",
+    },
+    {
+      id: 6,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Completed",
+      status:"Unban",
+    },
+    {
+      id: 7,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Incompleted",
+      status:"Unban",
+    },
+    {
+      id: 8,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Incompleted",
+      status:"Unban",
+    },
+    {
+      id: 9,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
+      kycStatus:"Completed",
+      status:"Unban",
+    },
+    {
+      id: 10,
+      fullName:"John David",
+      firstName:"John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      address:"Saudi Arabia",
+      emailID: "john@gmail.com",
+      bankName:"Lorem Text",
+      branchAddress:"Hohenzollernring 58, 95444",
+      iban:"DE 1234 5678 9012 3456",
+      swiftCode:"BC12345",
+      referenceID:"FRYU FHDU 1234",
      kycStatus:"Completed",
-      // investedProperty:"View",
      status:"Unban",
    },
  ]);
+
+  const [viewInvestor, setViewInvestor] = useState([
+    {
+      id: 1,
+      dealId:"UWE3424992",
+      dealId: "KKR Private Equity Fund",
+      sponsorName: "KKR",
+      investAmount: "$100,000",
+      holdingPeriod: "4-5 years",
+      estimatedReturn:"50-60%",
+      kycStatus:"Open",
+    },
+    {
+      id: 2,
+      dealId:"UWE3424992",
+      dealId: "Blackstone Real Estate Income Trust",
+      sponsorName: "Blackstone",
+      investAmount: "$100,000",
+      holdingPeriod: "4-5 years",
+      estimatedReturn:"50-60%",
+      kycStatus:"Pending",
+    },
+    {
+      id: 3,
+      dealId:"UWE3424992",
+      dealId: "J.P. Morgan",
+      sponsorName: "J.P. Morgan",
+      investAmount: "$100,000",
+      holdingPeriod: "4-5 years",
+      estimatedReturn:"50-60%",
+      kycStatus:"Closed",
+    },
+  ]);
+
  const [investorTransaction, setInvestorTransaction] = useState([
    {
      id: 1,
@@ -1635,6 +1814,8 @@ const GlobalStateProvider = ({ children }) => {
        setNavDetails,
        caseDetails,
        setCaseDetails,
+        viewInvestor,
+        setViewInvestor,
      }}
    >
      {children}
--- a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
+++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
@@ -55,7 +55,7 @@ console.log(data);
      const updatedCreate = create.map((item) =>
        item.id === id ? { ...item, ...data } : item
      );
-      setCreate(updatedCreate);
+      setCreate(updatedCreate);  
      onClose();
    };

--- a/src/Pages/Investor_Management/InvestorDetails/InvestmentDetailsEdit.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestmentDetailsEdit.jsx
@@ -0,0 +1,155 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  FormControl,
+  FormLabel,
+  Input,
+  Box,
+  Text,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+
+const InvestmentDetailsEdit = ({ isOpen, onClose, thirdField, id }) => {
+  const { InvestorDetails, setInvestorDetails } = useContext(GlobalStateContext);
+  const [file, setFile] = useState(null);
+
+  const filteredObject = InvestorDetails?.find((item) => item?.id === id);
+
+  const investmentDocSchema = yup.object().shape({
+    fileName: yup.string().required("File name is required"),
+    lastName: yup.string().required("Last name is required"),
+    phoneNumber: yup.string().required("Phone number is required"),
+    emailID: yup.string().required("Email ID is required"),
+  });
+
+  const {
+    control,
+    watch,
+    setValue,
+    handleSubmit,
+    reset,
+    register,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(investmentDocSchema),
+  });
+
+  useEffect(() => {
+    if (filteredObject) {
+      reset({
+        firstName: filteredObject?.firstName,
+        lastName: filteredObject?.lastName,
+        phoneNumber: filteredObject?.phoneNumber,
+        emailID: filteredObject?.emailID,
+      });
+    }
+  }, [id, InvestorDetails, reset]);
+
+  const onSubmit = (data) => {
+    const updatedInvestorDetails = InvestorDetails.map((item) =>
+      item.id === id ? { ...item, ...data } : item
+    );
+    setInvestorDetails(updatedInvestorDetails);
+    onClose();
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader fontSize={"md"}>Investment Limit Update</DrawerHeader>
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <DrawerBody>
+            <FormControl mb={4} isInvalid={errors.firstName}>
+              <FormLabel fontSize="sm">File Name</FormLabel>
+              <Input
+                fontSize="sm"
+                type="text"
+                size="sm"
+                {...register("firstName")}
+              />
+              {errors.firstName && (
+                <Text color="red.500" fontSize="sm">
+                  {errors.firstName.message}
+                </Text>
+              )}
+            </FormControl>
+            <FormControl mb={4} isInvalid={errors.lastName}>
+              <FormLabel fontSize="sm">Last Name</FormLabel>
+              <Input
+                fontSize="sm"
+                type="text"
+                size="sm"
+                {...register("lastName")}
+              />
+              {errors.lastName && (
+                <Text color="red.500" fontSize="sm">
+                  {errors.lastName.message}
+                </Text>
+              )}
+            </FormControl>
+            <FormControl mb={4} isInvalid={errors.phoneNumber}>
+              <FormLabel fontSize="sm">Phone Number</FormLabel>
+              <Input
+                fontSize="sm"
+                type="text"
+                size="sm"
+                {...register("phoneNumber")}
+              />
+              {errors.phoneNumber && (
+                <Text color="red.500" fontSize="sm">
+                  {errors.phoneNumber.message}
+                </Text>
+              )}
+            </FormControl>
+            <FormControl mb={4} isInvalid={errors.emailID}>
+              <FormLabel fontSize="sm">E-mail ID</FormLabel>
+              <Input
+                fontSize="sm"
+                type="text"
+                size="sm"
+                {...register("emailID")}
+              />
+              {errors.emailID && (
+                <Text color="red.500" fontSize="sm">
+                  {errors.emailID.message}
+                </Text>
+              )}
+            </FormControl>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme="green"
+              rounded="sm"
+              size="sm"
+              mr={3}
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button colorScheme="green" rounded="sm" size="sm" type="submit">
+              Save
+            </Button>
+          </DrawerFooter>
+        </Box>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default InvestmentDetailsEdit;
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -15,24 +15,34 @@ import {
  Tag,
  Text,
  Tooltip,
+  useDisclosure,
  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 React, { useContext, useEffect, useState,useRef } 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, DeleteIcon, EditIcon, EmailIcon, ViewIcon } 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 { debounce } from "../Master/Sponser/AddSponser";
+import { Link, Link as RouterLink,useNavigate } from "react-router-dom";
+import {
+  AddIcon,
+  DeleteIcon,
+  EditIcon,
+  EmailIcon,
+  ViewIcon,
+} 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 { debounce } from "../../Master/Sponser/AddSponser";
+import InvestmentDetailsEdit from "./InvestmentDetailsEdit";

 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

 const InvestorDetails = () => {
+  const navigate = useNavigate();
  const toast = useToast();
+  const thirdField = useRef();
  const { InvestorDetails, setInvestorDetails, slideFromRight } =
    useContext(GlobalStateContext);
  const [searchTerm, setSearchTerm] = useState("");
@@ -41,6 +51,8 @@ const InvestorDetails = () => {
  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()

  useEffect(() => {
    // Simulate loading
@@ -122,7 +134,7 @@ const InvestorDetails = () => {
        </Text>
      </Box>
    ),
-    "Country": (
+    Country: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item.country}
@@ -145,16 +157,18 @@ const InvestorDetails = () => {
    ),
    "KYC Status": (
      <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"}>
+        <Badge fontWeight={'500'}  textTransform={'none'} color={item.kycStatus === "Completed" ? "blue"  : "red"} px={2} py={0.5}>
          {item.kycStatus}
-        </Text>
+        </Badge>
      </Box>
    ),
    "Invested Property": (
      <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"}>
-           View
-        </Text>
+        <Badge as={"span"} color={"teal.900"} variant='outline' colorScheme='green' fontWeight={500} px={2} py={0.5}>
+          <Link to='/investor-details/view-investor-details'>
+              View
+          </Link>
+        </Badge>
      </Box>
    ),
    Status: (
@@ -166,10 +180,9 @@ const InvestorDetails = () => {
      />
    ),
    Action: (
-      <Box display={"flex"} justifyContent={"space-between"}>
-
+      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
        <Tooltip
-          rounded={"sm"} 
+          rounded={"sm"}
          fontSize={"xs"}
          label="View"
          bg="#fff"
@@ -177,6 +190,9 @@ const InvestorDetails = () => {
          placement="top"
        >
          <Button
+            onClick={() => {
+              navigate(`/profile-view/${item.id}`);
+            }}
            _hover={{ color: "green.500" }}
            // transition={"0.5s all"}
            color="green.300"
@@ -187,7 +203,6 @@ const InvestorDetails = () => {
          </Button>
        </Tooltip>

-
        <Tooltip
          rounded={"sm"}
          fontSize={"xs"}
@@ -197,6 +212,7 @@ const InvestorDetails = () => {
          placement="top"
        >
          <Button
+          onClick={() => handleEdit(item.id)}
            _hover={{ color: "blue.500" }}
            // transition={"0.5s all"}
            color="blue.400"
@@ -206,7 +222,6 @@ const InvestorDetails = () => {
            <EditIcon />
          </Button>
        </Tooltip>
-   

        <Tooltip
          rounded={"sm"}
@@ -230,7 +245,6 @@ const InvestorDetails = () => {
            <DeleteIcon />
          </Button>
        </Tooltip>
-
      </Box>
    ),
  }));
@@ -248,6 +262,11 @@ const InvestorDetails = () => {
    setIsLoading(true);
  };

+  const handleEdit = (id) => {
+    setActionId(id);
+    onEditOpen();
+  };
+
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <Box bg="white.500">
@@ -270,22 +289,16 @@ const InvestorDetails = () => {
            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 sponsers
-              </Button>
-            </Link>
          </HStack>
        </HStack>
+        <InvestmentDetailsEdit
+          id={actionId}
+          isOpen={isEditOpen}
+          onClose={onEditClose}
+          thirdField={thirdField}
+        />
      </Box>

      <DataTable
@@ -295,8 +308,6 @@ const InvestorDetails = () => {
        isLoading={isLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
-        // totalPages={10}
-
        setMouseEnteredId={setMouseEnteredId}
        setMouseEntered={setMouseEntered}
      />
--- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
@@ -0,0 +1,124 @@
+import { Box } from "@chakra-ui/react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { useForm } from "react-hook-form"; // assuming react-hook-form is used
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import FormInputView from "../../../Components/FormInputView";
+
+const ProfileView = () => {
+  const navigate = useNavigate();
+  const params = useParams();
+  const { InvestorDetails } = useContext(GlobalStateContext);
+  const { reset } = useForm(); // assuming react-hook-form
+
+  const id = params?.id;
+  const foundObject = InvestorDetails.find(
+    (item) => item?.id.toString() === id.toString()
+  );
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>;
+  }
+
+  const formFields = [
+    {
+      label: "Full Name",
+      value: foundObject.fullName,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "E-mail ID",
+      value: foundObject.emailID,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "Phone Number",
+      value: foundObject.phoneNumber,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "Address",
+      value: foundObject.address,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "Bank Name",
+      value: foundObject.bankName,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "Branch Address",
+      value: foundObject.branchAddress,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "IBAN",
+      value: foundObject.iban,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "SWIFT/BIC code",
+      value: foundObject.swiftCode,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+    {
+      label: "Reference ID",
+      value: foundObject.referenceID,
+      type: "text",
+      isRequired: true,
+      section: "",
+      width:"32%"
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <span
+        onClick={() => navigate(-1)}
+        style={{ fontSize: "15px", cursor: "pointer" }}
+      >
+        <ArrowBackIcon cursor={"pointer"} /> Back
+      </span>
+      <FormInputView width={"32%"} groupedFields={groupedFields} />
+    </Box>
+  );
+};
+
+export default ProfileView;
--- a/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
@@ -0,0 +1,278 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Select,
+  Switch,
+  Tag,
+  Text,
+  Tooltip,
+  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, Navigate, Link as RouterLink } from "react-router-dom";
+import {
+  AddIcon,
+  DeleteIcon,
+  EditIcon,
+  EmailIcon,
+  ViewIcon,
+} 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 { debounce } from "../../Master/Sponser/AddSponser";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const ViewInvestorDetails = () => {
+  const toast = useToast();
+  const { viewInvestor, setViewInvestor, 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("");
+
+  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",
+    "Deal ID",
+    "Deal Name",
+    "Sponsor Name",
+    "Investment Amount",
+    "Holding Period",
+    "Estimated return",
+    "Status",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setViewInvestor((prevData) =>
+      prevData.map((viewInvestor) =>
+        viewInvestor.id === id ? { ...viewInvestor } : viewInvestor
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = viewInvestor?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.dealId;
+    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>
+    ),
+    "Deal ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.dealId}
+        </Text>
+      </Box>
+    ),
+    "Deal Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.dealId}
+        </Text>
+      </Box>
+    ),
+    "Sponsor Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.sponsorName}
+        </Text>
+      </Box>
+    ),
+    "Investment Amount": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.investAmount}
+        </Text>
+      </Box>
+    ),
+    "Holding Period": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.holdingPeriod}
+        </Text>
+      </Box>
+    ),
+    "Estimated return": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.estimatedReturn}
+        </Text>
+      </Box>
+    ),
+    Status: (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"500"}
+          textTransform={"none"}
+          color={
+            item.kycStatus === "Open"
+              ? "green"
+              : item.kycStatus === "Pending"
+              ? "blue"
+              : "red"
+          }
+          px={2}
+          py={0.5}
+        >
+          {item.kycStatus}
+        </Badge>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"space-between"}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <ViewIcon />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestorDetails = InvestorDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorDetails(updatedInvestorDetails);
+      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} />
+
+            <Link to={"/sponser/add-sponser"}>
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme={"green"}
+                rounded={"sm"}
+                size={"sm"}
+              >
+                Add
+              </Button>
+            </Link>
+          </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 ViewInvestorDetails;
--- a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
@@ -48,7 +48,7 @@ const ViewInvestmentType = () => {
    },
    {
      label: "Description Arabic",
-      value: foundObject.descriptionArabic,
+      value: foundObject.descriptionArabic, 
      type: "text",
      isRequired: true,
      section: "Personal Details",
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -1,6 +1,10 @@
 import { HiOutlineNewspaper } from "react-icons/hi";
 import { TbBrandMedium, TbChartHistogram, TbReportMoney } from "react-icons/tb";
-import { RiBankLine, RiFileUserLine, RiMoneyDollarBoxLine } from "react-icons/ri";
+import {
+  RiBankLine,
+  RiFileUserLine,
+  RiMoneyDollarBoxLine,
+} from "react-icons/ri";
 import { RiExchangeBoxLine } from "react-icons/ri";
 import { VscGitPullRequestGoToChanges, VscSymbolClass } from "react-icons/vsc";
 import { FiUsers } from "react-icons/fi";
@@ -32,17 +36,17 @@ export const nav = [
      {
        title: "Sponser Master",
        path: "/sponser",
-        icon: RiMoneyDollarBoxLine
+        icon: RiMoneyDollarBoxLine,
      },
      {
        title: "Investment Type",
        path: "/investment-type",
-        icon: VscSymbolClass
+        icon: VscSymbolClass,
      },
      {
        title: "Exchange Rate",
        path: "/exchange-rate",
-        icon: RiExchangeBoxLine
+        icon: RiExchangeBoxLine,
      },
    ],
    type: "accordion",
@@ -54,12 +58,12 @@ export const nav = [
      {
        title: "Create IO",
        path: "/create-io",
-        icon: MdOutlineAddChart
+        icon: MdOutlineAddChart,
      },
      {
        title: "View IO",
        path: "/view-io",
-        icon: HiOutlineChartSquareBar
+        icon: HiOutlineChartSquareBar,
      },
    ],
    type: "accordion",
@@ -71,12 +75,12 @@ export const nav = [
      {
        title: "Investor Details",
        path: "/investor-details",
-        icon: TbListDetails
+        icon: TbListDetails,
      },
      {
        title: "Investor Transactions",
        path: "/investor-transactions",
-        icon: TbTransactionDollar
+        icon: TbTransactionDollar,
      },
    ],
    type: "accordion",
@@ -85,19 +89,32 @@ export const nav = [
  {
    title: "INVESTORS REQUEST",
    type: "title",
-  }, {
+  },
+  {
+    title: "Investor Management",
+    menu: [
+      {
+        title: "Investor Details",
+        path: "/investor-details",
+        icon: TbListDetails,
+      },
+    ],
+    type: "accordion",
+    Icon: TbCalendarDollar,
+  },
+  {
    title: "Withdrawal",
    submenu: [
      {
        title: "Pending Request",
        path: "/withdraw-request",
-        icon: RiMoneyDollarBoxLine
+        icon: RiMoneyDollarBoxLine,
      },
      {
        title: "View History",
        path: "/withdraw-history",
-        icon: RiExchangeBoxLine
-      }
+        icon: RiExchangeBoxLine,
+      },
    ],
    type: "accordion",
    Icon: BiMoneyWithdraw,
@@ -108,13 +125,13 @@ export const nav = [
      {
        title: "Pending Request",
        path: "/investor-request",
-        icon: RiMoneyDollarBoxLine
+        icon: RiMoneyDollarBoxLine,
      },
      {
        title: "View History",
        path: "/investor-history",
-        icon: RiExchangeBoxLine
-      }
+        icon: RiExchangeBoxLine,
+      },
    ],
    type: "accordion",
    Icon: MdBrowserUpdated,
@@ -125,13 +142,13 @@ export const nav = [
      {
        title: "Pending Request",
        path: "/deletion-request",
-        icon: RiMoneyDollarBoxLine
+        icon: RiMoneyDollarBoxLine,
      },
      {
        title: "View History",
        path: "/deletion-history",
-        icon: RiExchangeBoxLine
-      }
+        icon: RiExchangeBoxLine,
+      },
    ],
    type: "accordion",
    Icon: AiOutlineUserDelete,
@@ -139,39 +156,40 @@ export const nav = [
  {
    title: "MANAGE ADMIN",
    type: "title",
-  }, {
+  },
+  {
    title: "Admin",
    submenu: [
      {
        title: "Ban / Unban Investor",
        path: "/bank-investor",
-        icon: TbReportMoney
+        icon: TbReportMoney,
      },
      {
        title: "Academy",
        path: "/academy",
-        icon: GrManual
+        icon: GrManual,
      },
      {
        title: "Notification",
        path: "/notification",
-        icon: MdNotificationsNone
+        icon: MdNotificationsNone,
      },
      {
        title: "Contact Details",
        path: "/contact",
-        icon: LuContact
+        icon: LuContact,
      },
      {
        title: "Users",
        path: "/users",
-        icon: RiFileUserLine
+        icon: RiFileUserLine,
      },
      {
        title: "Bank Details",
        path: "/bank-details",
-        icon: RiBankLine
-      }
+        icon: RiBankLine,
+      },
    ],
    type: "accordion",
    Icon: MdOutlineAdminPanelSettings,
@@ -184,8 +202,6 @@ export const nav = [
  // },
 ];

-
-
 export const nestedNav = [
  {
    title: "MAIN MENU",
@@ -197,17 +213,17 @@ export const nestedNav = [
          {
            title: "Sponser",
            path: "/sponser",
-            icon: RiMoneyDollarBoxLine
+            icon: RiMoneyDollarBoxLine,
          },
          {
            title: "Exchange rate",
            path: "/exchange-rate",
-            icon: RiExchangeBoxLine
+            icon: RiExchangeBoxLine,
          },
          {
            title: "Asset classes",
            path: "/view",
-            icon: VscSymbolClass
+            icon: VscSymbolClass,
          },
        ],
        type: "accordion",
@@ -219,23 +235,23 @@ export const nestedNav = [
          {
            title: "Sponser",
            path: "/loop",
-            icon: TbBrandMedium
+            icon: TbBrandMedium,
          },
          {
            title: "Class",
            path: "/class",
-            icon: TbBrandMedium
+            icon: TbBrandMedium,
          },
          {
            title: "View",
            path: "/view",
-            icon: TbBrandMedium
+            icon: TbBrandMedium,
          },
        ],
        type: "accordion",
        Icon: HiOutlineNewspaper,
      },
-    ]
+    ],
  },
  {
    title: "User",
@@ -243,17 +259,17 @@ export const nestedNav = [
      {
        title: "Sponser",
        path: "/loop",
-        icon: TbBrandMedium
+        icon: TbBrandMedium,
      },
      {
        title: "Class",
        path: "/class",
-        icon: TbBrandMedium
+        icon: TbBrandMedium,
      },
      {
        title: "View",
        path: "/view",
-        icon: TbBrandMedium
+        icon: TbBrandMedium,
      },
    ],
    type: "accordion",
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -17,8 +17,10 @@ import ViewIOdata from "../Pages/IO_Management/ViewIO/ViewIOdata";
 import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorRequest";
 import UpgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
 import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
-import InvestorDetails from "../Pages/Investor_Management/InvestorDetails";
+import InvestorDetails from "../Pages/Investor_Management/InvestorDetails/InvestorDetails";
 import InvestorTransactions from "../Pages/Investor_Management/InvestorTransactions";
+import ProfileView from "../Pages/Investor_Management/InvestorDetails/ProfileView";
+import ViewInvestorDetails from "../Pages/Investor_Management/InvestorDetails/ViewInvestorDetails";
 import ExchangeRate from "../Pages/Master/ExchangeRate/ExchangeRate";
 import AddInvestmentType from "../Pages/Master/InvestmentType/AddInvestmentType";
 import EditInvestmentType from "../Pages/Master/InvestmentType/EditInvestmentType";
@@ -57,6 +59,8 @@ export const RouteLink = [

  // ===============[ Investor Management]===============
  { path: "/investor-details", Component: InvestorDetails },
+  { path: "/profile-view/:id", Component: ProfileView },
+  { path: "/investor-details/view-investor-details", Component: ViewInvestorDetails },
  { path: "/investor-transactions", Component: InvestorTransactions },

  // ===============[ Withdrawal]===============