From a7d3703244851a23b221a1ee1f2059f774b49124 Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Thu, 10 Oct 2024 15:39:23 +0530 Subject: [PATCH] checker maker update --- src/Constants/Constants.js | 4 + src/Pages/Fawateer/CreateRequest.jsx | 374 +++++++++++++-------- src/Pages/Fawateer/SelectInvestorModal.jsx | 6 +- src/Routes/Nav.js | 78 +++-- src/Services/fawateer.maker.service.js | 52 +++ src/Services/token.serivce.js | 7 +- src/Store/Store.js | 5 + 7 files changed, 336 insertions(+), 190 deletions(-) create mode 100644 src/Services/fawateer.maker.service.js diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js index 73a6068..53c8523 100644 --- a/src/Constants/Constants.js +++ b/src/Constants/Constants.js @@ -60,6 +60,10 @@ export function removeTrailingZeros(value) { } +export function bytesToMB(bytes) { + return (bytes / (1024 * 1024)).toFixed(2); // Convert bytes to MB and limit to 2 decimal places +} + export function startCountdown(utcDateString) { // Function to update the countdown diff --git a/src/Pages/Fawateer/CreateRequest.jsx b/src/Pages/Fawateer/CreateRequest.jsx index 42c6cf8..12562d1 100644 --- a/src/Pages/Fawateer/CreateRequest.jsx +++ b/src/Pages/Fawateer/CreateRequest.jsx @@ -1,60 +1,128 @@ import React, { useState } from "react"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; -import { Box, Button, HStack, Input, InputGroup, InputRightAddon, InputRightElement, Textarea, useDisclosure } from "@chakra-ui/react"; +import { Box, Button, HStack, Input, InputGroup, InputRightAddon, Textarea, useDisclosure, Image, Icon, VStack, Text, useToast } from "@chakra-ui/react"; import { FormControl, FormLabel, - FormErrorMessage, FormHelperText, } from "@chakra-ui/react"; -import { ArrowForwardIcon, Search2Icon } from "@chakra-ui/icons"; +import { DeleteIcon, Search2Icon } from "@chakra-ui/icons"; import SelectInvestorModal from "./SelectInvestorModal"; import { useForm } from "react-hook-form"; // Import useForm import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup import * as Yup from "yup"; // Import Yup for validation - - +import { motion } from 'framer-motion'; // Import Framer Motion for animations +import { bytesToMB } from "../../Constants/Constants"; +import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service"; +import ToastBox from "../../Components/ToastBox"; // Validation schema using Yup const validationSchema = Yup.object().shape({ investorName: Yup.string().required("Investor name is required"), clientId: Yup.string().required("Client ID is required"), - date: Yup.date().required("Date is required").max(new Date(), "Date cannot be in the future"), - amount: Yup.number().required("Amount is required").positive("Amount must be positive"), - supportFile: Yup.mixed().required("Support file is required"), - description: Yup.string().required("Description is required"), + transaction_date: Yup.date().required("Date is required").max(new Date(), "Date cannot be in the future"), + transaction_amount: Yup.number().required("Amount is required").positive("Amount must be positive"), + spportFile_path: Yup.mixed().required("Support file is required"), + makerComment: Yup.string().required("Description is required"), }); const CreateRequest = () => { - const { isOpen, onOpen, onClose } = useDisclosure() - const [ selectedInvestor, setSelectorInvestor] = useState({}) + const toast = useToast() + const { isOpen, onOpen, onClose } = useDisclosure(); + const [selectedInvestor, setSelectorInvestor] = useState({}); + const [filePreview, setFilePreview] = useState(null); // State for previewing the file + const [fileType, setFileType] = useState(null); // State to store file type for conditional rendering + const[ isLoading, setIsLoading ] = useState(false) + const [id, setId ] = useState(null) - // Initialize useForm with the resolver for Yup validation - const { register, handleSubmit, setValue, formState: { errors } } = useForm({ + // Initialize useForm with the resolver for Yup validation + const { register, handleSubmit, setValue,reset, formState: { errors } } = useForm({ resolver: yupResolver(validationSchema), }); + + const [ creatFawaateerRequest ] = useCreateFawateerRequestMutation() + + + const onSubmit = async (data) => { + setIsLoading(true) - // Handle form submission - const onSubmit = (data) => { - console.log(data); // Form data - }; + // Convert data to FormData + const formData = new FormData(); + + // Append each field from the data object to the FormData + Object.keys(data).forEach((key) => { + formData.append(key, data[key]); // Append other fields + }); + + try { + // Make the API call with formData + const res = await creatFawaateerRequest({ data: formData, id }); + + if (res?.error) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + reset() + return + } else if (res?.data) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + return + } else { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + return + } + + } catch (error) { + console.error("Error:", error); + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + return + } + }; + + + // Handle file change and preview + const handleFileChange = (e) => { + const file = e.target.files[0]; + console.log(file); + setValue("spportFile_path", file); // Set the file value in the form + setFileType(file); // Set the file type + + if (file && file.type.startsWith("image/")) { + // If the file is an image, generate a preview + const reader = new FileReader(); + reader.onload = () => { + setFilePreview(reader.result); // Set the image preview + }; + reader.readAsDataURL(file); + } else { + setFilePreview(null); // Clear preview if the file is not an image + } + }; + + + return ( - - {/* - - */} { mt={5} px={4} as="form" - onSubmit={handleSubmit(onSubmit)} + onSubmit={handleSubmit(onSubmit)} > - - + {/* Investor Name Field */} + + Investor name - - Search - - - {errors.investorName?.message} + + + Search + + + {errors.investorName?.message} - - - - + {/* Client ID Field */} + Client Id @@ -106,109 +172,121 @@ const CreateRequest = () => { type={"text"} readOnly={true} placeholder={"Client ID"} - _placeholder={{ fontSize: "sm" }} - - {...register("clientId")} // Register the field - // value={selectedInvestor?.clientReference_id} + {...register("clientId")} /> - -{errors.clientId?.message} + {errors.clientId?.message} + {/* Date Field */} + + + Date + + + {errors.transaction_date?.message} + - {/* Date */} - - - Date - - - - {errors.date?.message} - - - - {/* Amount */} - - - Amount - - - - {errors.amount?.message} - - {/* Support file */} - - - Support file - - setValue("supportFile", e.target.files[0])} - /> - {errors.supportFile?.message} - - - {/* Description */} - - - Description - -