deposit modal

src/Components/DataTable/DataTable.jsx

@@ -10,7 +10,6 @@ import {
   Skeleton,
   TableCaption,
   Box,
-  Text,
 } from "@chakra-ui/react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import EmptySearchList from "../EmptySearchList";
@@ -29,8 +28,7 @@ const DataTable = ({
   setMouseEntered,
   setMouseEnteredId,
   caption,
-  isDraggable,
-  capTitle
+  isDraggable
 }) => {
   const navigate = useNavigate();
   const { slideFromRight } = useContext(GlobalStateContext);
@@ -64,7 +62,7 @@ const DataTable = ({
           <Droppable droppableId="table">
             {(provided) => (
               <>
-              {/*  */}
+              {/* <Box mb={2}>{caption}</Box> */}
               <Table size="sm" {...provided.droppableProps} ref={provided.innerRef}>
                 <TableCaption p={0}>{caption}</TableCaption>
                 <Thead backgroundColor="gray.50">
@@ -147,10 +145,6 @@ const DataTable = ({
                   {provided.placeholder}
                 </Tbody>
               </Table>
-              <Box>
-                <Text>{capTitle}</Text>
-                <Box mb={2}>{caption}</Box>
-              </Box>
               </>
             )}
           </Droppable>

src/Pages/Deposit/DepositRequest/DepositRequest.jsx

@@ -7,6 +7,7 @@ import {
   Switch,
   Text,
   Tooltip,
+  useDisclosure,
   useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -21,13 +22,15 @@ import {
   ViewIcon,
 } from "@chakra-ui/icons";
 //   import { debounce } from "./AddInvestmentType";
-import { debounce } from "../Master/Sponser/AddSponser";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import Pagination from "../../Components/Pagination";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import CustomAlertDialog from "../../Components/CustomAlertDialog";
-import ToastBox from "../../Components/ToastBox";
-import DataTable from "../../Components/DataTable/DataTable";
+import { debounce } from "../../Master/Sponser/AddSponser";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import ToastBox from "../../../Components/ToastBox";
+import DataTable from "../../../Components/DataTable/DataTable";
+import DepositRequestApprove from "./DepositRequestApprove";
+import DepositRequestReject from "./DepositRequestReject";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -42,6 +45,16 @@ const DepositRequest = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
 
   useEffect(() => {
     // Simulate loading
@@ -107,7 +120,7 @@ const DepositRequest = () => {
       // id: item?.id,
       "Sr.no": (
         <Text
-            w={"30px"}
+          w={"30px"}
           justifyContent={slideFromRight ? "right" : "left"}
           as={"span"}
           color={"teal.900"}
@@ -117,7 +130,7 @@ const DepositRequest = () => {
           {index + 1}
         </Text>
       ),
-      "Date": (
+      Date: (
         <Text
           w={"60px"}
           justifyContent={slideFromRight ? "right" : "left"}
@@ -131,7 +144,7 @@ const DepositRequest = () => {
       ),
       "Client ID": (
         <Text
-         w={"60px"}
+          w={"60px"}
           justifyContent={slideFromRight ? "right" : "left"}
           as={"span"}
           color={"teal.900"}
@@ -142,7 +155,7 @@ const DepositRequest = () => {
         </Text>
       ),
       "First Name": (
-        <Box isTruncated={true} w={'50px'}>
+        <Box isTruncated={true} w={"50px"}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
             {item.firstName}
           </Text>
@@ -172,7 +185,9 @@ const DepositRequest = () => {
       Currency: (
         <Box w={"50px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            <Badge px={2} py={1}>{item.currency}</Badge>
+            <Badge px={2} py={1}>
+              {item.currency}
+            </Badge>
           </Text>
         </Box>
       ),
@@ -223,8 +238,9 @@ const DepositRequest = () => {
               fontWeight={500}
               px={2}
               py={1}
+              onClick={onConfirmOpen}
             >
-              <CheckIcon fontSize={'12px'} />
+              <CheckIcon fontSize={"12px"} />
             </Badge>
           </Tooltip>
           <Tooltip
@@ -243,9 +259,10 @@ const DepositRequest = () => {
               textTransform={"inherit"}
               fontWeight={500}
               px={2}
+              onClick={onRejectOpen}
               py={1}
             >
-              <CloseIcon fontSize={'10px'} />
+              <CloseIcon fontSize={"10px"} />
             </Badge>
           </Tooltip>
         </Box>
@@ -316,6 +333,12 @@ const DepositRequest = () => {
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
+      <DepositRequestApprove
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        // firstField={firstField}
+      />
+      <DepositRequestReject isOpen={isRejectOpen} onClose={onRejectClose} />
     </Box>
   );
 };

src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx

@@ -0,0 +1,128 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    useDisclosure,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  
+  export const conformModalSchema = yup.object().shape({
+    fees: yup.string().required("File name is required"),
+    totalAmount: yup.string().required("File name is required"),
+  });
+  
+  const DepositRequestApprove = ({ isOpen, onClose, firstField }) => {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const onSubmit = (data) => {
+      setFile(data.document[0]);
+  
+      const newDocument = {
+        ...data,
+        document: data.document[0].name, // Store the document name
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+        Type: getFileIcon(file.type),
+      };
+  
+      setCreate((prevCreate) => [...prevCreate, newDocument]);
+      onClose();
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };  
+  
+    return (
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Deposit Amount</FormLabel>
+                <Input
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  placeholder={"$100,000"}
+                  readOnly
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Fees</FormLabel>
+                <Input 
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  placeholder={"$100,000"}
+                />
+                {errors.fees && (
+                  <Text fontSize="xs" color="red">
+                    {errors.fees.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Total Amount</FormLabel>
+                <Input 
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  placeholder={"$100,000"}
+                />
+                {errors.totalAmount && (
+                  <Text fontSize="xs" color="red">
+                    {errors.totalAmount.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+                Cancel
+              </Button>
+              <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
+                Confirm
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default DepositRequestApprove;
+  

src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx

@@ -0,0 +1,99 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  
+  export const conformModalSchema = yup.object().shape({
+      comment: yup.string().required("Comment is required"),
+  });
+  
+  const DepositRequestReject = ({ isOpen, onClose, firstField }) => {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const onSubmit = (data) => {
+      setFile(data.document[0]);
+  
+      const newDocument = {
+        ...data,
+        document: data.document[0].name, // Store the document name
+        comment: true,
+        id: uuidv4(),
+        Type: getFileIcon(file.type),
+      };
+  
+      setCreate((prevCreate) => [...prevCreate, newDocument]);
+      onClose();
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+    return (
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea rows={6} 
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"$100,000"}
+                  rounded={'md'}
+                  resize={'none'}
+                />
+                {errors.comment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comment.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+                Cancel
+              </Button>
+              <Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default DepositRequestReject;
+  

src/Routes/Routes.js

@@ -32,10 +32,11 @@ import Sponser from "../Pages/Master/Sponser/Sponsers";
 import ViewSponser from "../Pages/Master/Sponser/ViewSponser";
 import PendingRequest from "../Pages/WithDrawal/PendingRequest";
 import ViewHistory from "../Pages/WithDrawal/DrawalView/ViewHistory";
-import DepositRequest from "../Pages/Deposit/DepositRequest";
+// import DepositRequest from "../Pages/Deposit/DepositRequest";
 import DepositHistory from "../Pages/Deposit/DepositViewHistory/DepositHistory";
 import Academy from "../Pages/Admin/ManageAcademy/Academy";
 import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType";
+import DepositRequest from "../Pages/Deposit/DepositRequest/DepositRequest";
 
 export const RouteLink = [
   // =============[ Tanami ]================