From fe9f7ac94e76e9056da7d2e3df762e8eb26adb6e Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 30 Jul 2024 19:37:37 +0530 Subject: [PATCH] deposit modal --- src/Components/DataTable/DataTable.jsx | 10 +- .../{ => DepositRequest}/DepositRequest.jsx | 51 +++++-- .../DepositRequest/DepositRequestApprove.jsx | 128 ++++++++++++++++++ .../DepositRequest/DepositRequestReject.jsx | 99 ++++++++++++++ src/Routes/Routes.js | 3 +- 5 files changed, 268 insertions(+), 23 deletions(-) rename src/Pages/Deposit/{ => DepositRequest}/DepositRequest.jsx (85%) create mode 100644 src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx create mode 100644 src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index f7d0785..facf526 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/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 = ({ {(provided) => ( <> - {/* */} + {/* {caption} */} {caption} @@ -147,10 +145,6 @@ const DataTable = ({ {provided.placeholder}
- - {capTitle} - {caption} - )} diff --git a/src/Pages/Deposit/DepositRequest.jsx b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx similarity index 85% rename from src/Pages/Deposit/DepositRequest.jsx rename to src/Pages/Deposit/DepositRequest/DepositRequest.jsx index 1fcdec6..a9a8d7e 100644 --- a/src/Pages/Deposit/DepositRequest.jsx +++ b/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": ( { {index + 1} ), - "Date": ( + Date: ( { ), "Client ID": ( { ), "First Name": ( - + {item.firstName} @@ -172,7 +185,9 @@ const DepositRequest = () => { Currency: ( - {item.currency} + + {item.currency} + ), @@ -223,8 +238,9 @@ const DepositRequest = () => { fontWeight={500} px={2} py={1} + onClick={onConfirmOpen} > - + { textTransform={"inherit"} fontWeight={500} px={2} + onClick={onRejectOpen} py={1} > - + @@ -316,6 +333,12 @@ const DepositRequest = () => { alertHandler={handleDelete} isLoading={isLoading} /> + + ); }; diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx new file mode 100644 index 0000000..5aff06e --- /dev/null +++ b/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 ( + + + + Confirm + + + + + Deposit Amount + + + + Fees + + {errors.fees && ( + + {errors.fees.message} + + )} + + + Total Amount + + {errors.totalAmount && ( + + {errors.totalAmount.message} + + )} + + + + + + + + + + ); + }; + + export default DepositRequestApprove; + \ No newline at end of file diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx new file mode 100644 index 0000000..4320494 --- /dev/null +++ b/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 ( + + + + Reject + + + + + Comment +