From a1d7b1e9f98a4cad603555c9fd3d483e6b3e6529 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:49:49 +0530 Subject: [PATCH] modal comma --- .../Deposit/DepositRequest/DepositRequest.jsx | 85 +-- .../DepositRequest/DepositRequestApprove.jsx | 124 +++-- .../IO_Management/CreateIO/AddCashDetails.jsx | 4 +- .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 2 +- .../DrawalRequest/DrawalRequestApprove.jsx | 497 ++++++++++-------- 5 files changed, 404 insertions(+), 308 deletions(-) diff --git a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx index 750a6f8..821a414 100644 --- a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx +++ b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx @@ -16,7 +16,7 @@ import { Link, Link as RouterLink, useNavigate } from "react-router-dom"; import { AddIcon, CheckIcon, - CloseIcon, + CloseIcon, DeleteIcon, EditIcon, ViewIcon, @@ -35,7 +35,10 @@ import NormalTable from "../../../Components/DataTable/NormalTable"; import { useGetDepositRequestQuery } from "../../../Services/deposit.request.service"; import { current } from "@reduxjs/toolkit"; import { TABLE_PAGINATION } from "../../../Constants/Paginations"; -import { generateSerialNumber, removeTrailingZeros } from "../../../Constants/Constants"; +import { + generateSerialNumber, + removeTrailingZeros, +} from "../../../Constants/Constants"; export const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter @@ -64,12 +67,11 @@ const DepositRequest = () => { const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page); - const formatDate = (date) => { - return new Date(date).toLocaleDateString('en-GB', { - day: '2-digit', - month: '2-digit', - year: 'numeric', + return new Date(date).toLocaleDateString("en-GB", { + day: "2-digit", + month: "2-digit", + year: "numeric", }); }; @@ -77,7 +79,7 @@ const DepositRequest = () => { data, isLoading: depositRequestLoading, error, - refetch + refetch, } = useGetDepositRequestQuery({ page: currentPage, size: pageSize }); // Use useEffect to refetch data when the component mounts @@ -85,7 +87,6 @@ const DepositRequest = () => { refetch(); }, [refetch]); - // ====================================================[Table Setup]================================================================ const tableHeadRow = [ "Sr.no", @@ -95,7 +96,7 @@ const DepositRequest = () => { "Country", "Phone Number", "Amount in Investor currency", - "Deposit Date", + "Deposit Date", "Action", ]; @@ -113,26 +114,26 @@ const DepositRequest = () => { }, 300); const filteredData = data?.data?.rows - .filter((item) => { - // Filter by name (case insensitive) - const name = [item.firstName, item.lastName, item.countryName].filter(Boolean).join(' '); - const searchLower = searchTerm.toLowerCase(); - const nameMatches = name.toLowerCase().includes(searchLower); + .filter((item) => { + // Filter by name (case insensitive) + const name = [item.firstName, item.lastName, item.countryName] + .filter(Boolean) + .join(" "); + const searchLower = searchTerm.toLowerCase(); + const nameMatches = name.toLowerCase().includes(searchLower); - // Filter by status (Uncomment and use if needed) - // const status = item.status; - // const statusLower = status ? "active" : "inactive"; - - // const statusMatches = - // statusFilter === "all" || - // (statusFilter === "active" && status === true) || - // (statusFilter === "inactive" && status === false); - - return nameMatches; - }) - .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt)); + // Filter by status (Uncomment and use if needed) + // const status = item.status; + // const statusLower = status ? "active" : "inactive"; + // const statusMatches = + // statusFilter === "all" || + // (statusFilter === "active" && status === true) || + // (statusFilter === "inactive" && status === false); + return nameMatches; + }) + .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt)); const extractedArray = filteredData?.map((item, idx) => ({ // id: item?.id, @@ -145,7 +146,7 @@ const DepositRequest = () => { fontWeight={"500"} className="d-flex align-items-center web-text-small" > - {generateSerialNumber(idx,currentPage, pageSize )} + {generateSerialNumber(idx, currentPage, pageSize)} ), "Client ID": ( @@ -161,7 +162,7 @@ const DepositRequest = () => { ), "First Name": ( - + {item?.firstName} @@ -187,20 +188,30 @@ const DepositRequest = () => { {item?.mobileNumber} - ), + ), "Amount in Investor currency": ( - + {/* {formatCurrency(removeTrailingZeros(item?.investorAmount))} */} - {parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} - {item?.currencyCode} + {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} + + {item?.currencyCode} + ), "Deposit Date": ( { onRejectOpen(); }} py={1} - // variant={"solid"} + // variant={"solid"} > @@ -343,12 +354,12 @@ const DepositRequest = () => { isOpen={isConfirmOpen} onClose={onConfirmClose} id={actionId} - // firstField={firstField} + // firstField={firstField} /> ); diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx index 32ce8c7..b6e26a2 100644 --- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx +++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx @@ -3,6 +3,7 @@ import { Box, Button, FormControl, + FormErrorMessage, FormLabel, Input, Modal, @@ -20,11 +21,15 @@ import { import React, { useEffect, useState } from "react"; import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; -import { useForm } from "react-hook-form"; -import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service"; +import { Controller, useForm } from "react-hook-form"; +import { + useGetDepositRequestByIdQuery, + useGetDepositRequestQuery, + useUpdateDepositRequestMutation, +} from "../../../Services/deposit.request.service"; import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders"; import ToastBox from "../../../Components/ToastBox"; -import { formatCurrency } from "../../../Components/CurrencyInput"; +import CurrencyInput, { formatCurrency } from "../../../Components/CurrencyInput"; const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"]; @@ -37,20 +42,26 @@ export const conformModalSchema = yup.object().shape({ // }), }); -const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => { - const toast = useToast() +const DepositRequestApprove = ({ + isOpen, + onClose, + firstField, + id, + data: requestData, +}) => { + const toast = useToast(); const [file, setFile] = useState(); - const [isBtnLoading , setIsBtnLoading] = useState(false) + const [isBtnLoading, setIsBtnLoading] = useState(false); - const [ updateDepositRequest ] = useUpdateDepositRequestMutation() - const { data, isLoading } = useGetDepositRequestByIdQuery(id, { + const [updateDepositRequest] = useUpdateDepositRequestMutation(); + const { data, isLoading } = useGetDepositRequestByIdQuery(id, { skip: !id, }); console.log(data?.data?.investorAmount); - - const { + const { + control, register, reset, watch, @@ -59,8 +70,8 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa } = useForm({ resolver: yupResolver(conformModalSchema), }); - - useEffect(() => { + + useEffect(() => { if (data) { const investorAmount = parseFloat(data?.data?.investorAmount); reset({ @@ -69,9 +80,9 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa }); } }, [id, data, reset]); - - const onSubmit = async(data) => { - setIsBtnLoading(true) + + const onSubmit = async (data) => { + setIsBtnLoading(true); const formData = new FormData(); formData.append("investorAmount", data.investorAmount); @@ -79,42 +90,38 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa const file = data.supporting_FileName["0"]; formData.append("supporting_FileName", file); + try { + const res = await updateDepositRequest({ id, data: formData }); - try { - const res = await updateDepositRequest({ id ,data: formData}) + if (res?.error) { + toast({ + render: () => ( + + ), + }); + setIsBtnLoading(false); + } else if (res?.data?.statusCode === 200) { + toast({ + render: () => , + }); + setIsBtnLoading(false); + } + } catch (error) {} - - if (res?.error) { - toast({ - render: () => ( - - ), - }); - setIsBtnLoading(false) - }else if(res?.data?.statusCode === 200) { - toast({ - render: () => ( - - ), - }); - setIsBtnLoading(false) - } - - } catch (error) { - - } - - heandleOnClose(); + heandleOnClose(); }; - - const heandleOnClose = () =>{ - reset() - onClose() - } + const heandleOnClose = () => { + reset(); + onClose(); + }; return ( - + @@ -125,14 +132,16 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa ) : ( - - Deposit Amount {data?.data?.currencyCode} + {/* + + Deposit Amount + {data?.data?.currencyCode} + )} + */} + + + Deposit Amount + ( + + )} + /> + {errors.investorAmount && ( + + {errors.investorAmount.message} + + )} + Upload Supporting { - const params = useParams() + const params = useParams() const id = params?.id const [file, setFile] = useState(""); const [fileName, setFileName] = useState(""); @@ -134,7 +134,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da - + Date Selection { - + { + const toast = useToast(); + const [file, setFile] = useState(); + const [isBtnLoading, setIsBtnLoading] = useState(false); + + const [updateDrawalRequest] = useUpdateDrawalRequestMutation(); + const { data, isLoading } = useGetDrawalRequestByIdQuery(id, { + skip: !id, }); - - const DrawalRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => { - const toast = useToast() - const [file, setFile] = useState(); - const [isBtnLoading , setIsBtnLoading] = useState(false) - + const filteredData = data?.dat; + const { + control, + register, + reset, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(conformModalSchema), + }); + useEffect(() => { + if (data) { + const investorAmount = parseFloat(data?.data?.investorAmount); + reset({ + investorAmount: investorAmount, + accountName: data?.data?.accountName, + }); + } + }, [id, data, reset]); - - - const [ updateDrawalRequest ] = useUpdateDrawalRequestMutation() - const { data, isLoading } = useGetDrawalRequestByIdQuery(id, { - skip: !id, - }); - + const onSubmit = async (data) => { + setIsBtnLoading(true); - const filteredData =data?.dat; - const { - register, - reset, - handleSubmit, - formState: { errors }, - } = useForm({ - resolver: yupResolver(conformModalSchema), - }); - - useEffect(() => { - if (data) { - const investorAmount = parseFloat(data?.data?.investorAmount); - reset({ - investorAmount: investorAmount, - accountName: data?.data?.accountName, - }); - } - }, [id, data, reset]); - - const onSubmit = async(data) => { - setIsBtnLoading(true) - - try { - const res = await updateDrawalRequest({ id ,data}) - - + const res = await updateDrawalRequest({ id, data }); + if (res?.error) { toast({ render: () => ( ), }); - setIsBtnLoading(false) - }else if(res?.data?.statusCode === 200) { + setIsBtnLoading(false); + } else if (res?.data?.statusCode === 200) { toast({ - render: () => ( - - ), + render: () => , }); - setIsBtnLoading(false) - } - - } catch (error) { - - } - + setIsBtnLoading(false); + } + } catch (error) {} + heandleOnClose(); - }; - - - const handleFileChange = (event) => { - const selectedFile = event.target.files[0]; - setFile(selectedFile); - }; - - - // useEffect(() => { - // if (data) { - // reset({ - // investorAmount: data?.data?.dataValues?.investorAmount, - // }); - // } - // }, [data, reset]); - - - const heandleOnClose = () =>{ - reset({ - investorAmount:"" - }) - onClose() - } - - return ( - - - - - Confirm - - {isLoading ? ( - - ) : ( - - - - Withdrawal Amount {filteredData?.currencyCode} - - {errors.investorAmount && ( - - {errors.investorAmount.message} - - )} - - Investor Account Details - - IBAN: - {data?.data?.bank_payouts?.IBANnumber} - - - Account No: - {data?.data?.bank_payouts?.accountNumber} - - - Bank Name: - {data?.data?.bank_payouts?.bankName} - - - Account Name: - {data?.data?.bank_payouts?.accountName} - - - SWIFT Code: - {data?.data?.bank_payouts?.swiftCode} - - - Bank Address: - {data?.data?.bank_payouts?.bankAddress} - - - Bank Nick Name: - {data?.data?.bank_payouts?.bankNickName} - - - Comments -