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 (
-
- {/*
- }
- colorScheme="forestGreen"
- size={"sm"}
- rounded={"sm"}
- fontSize={"xs"}
- variant={'ghost'}
- mt={3}
- onClick={()=>onOpen()}
- >Search Investor
- */}
{
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
-
-
- {errors.description?.message}
-
-
-
-
-
-
+ {/* Amount Field */}
+
+
+ Amount
+
+
+ {errors.transaction_amount?.message}
+
+ {/* Support File Field with Preview */}
+
+
+ Support file
+
+
+ {errors.spportFile_path?.message}
+ {/* Animated Preview */}
+ {filePreview && fileType?.type.startsWith("image/") && (
+
+
+
+ setFilePreview(null)} className="link" rounded={'md'} color={'red.700'} cursor={'pointer'} p={1.5} position={'absolute'} top={0} right={0} as={DeleteIcon} boxSize={7} />
+
+ File Name: {fileType?.name}
+ File Size: {bytesToMB(fileType?.size)} Mb
+ File Type: {fileType?.type}
+
+
+
+ )}
+
+ {/* Description Field */}
+
+
+ Description
+
+
+ {errors.makerComment?.message}
+
+ {/* Submit Button */}
+
+
+
-
+
+
);
};
diff --git a/src/Pages/Fawateer/SelectInvestorModal.jsx b/src/Pages/Fawateer/SelectInvestorModal.jsx
index 17a9e77..f5e805f 100644
--- a/src/Pages/Fawateer/SelectInvestorModal.jsx
+++ b/src/Pages/Fawateer/SelectInvestorModal.jsx
@@ -22,7 +22,7 @@ import { TABLE_PAGINATION } from '../../Constants/Paginations';
import Pagination from '../../Components/Pagination';
import { AddIcon } from '@chakra-ui/icons';
-const SelectInvestorModal = ({ isOpen, setValue, onClose}) => {
+const SelectInvestorModal = ({ isOpen, setValue, onClose, setId}) => {
@@ -62,7 +62,9 @@ const [ selectedInvestor, setSelectorInvestor] = useState(null)
const handleCheckboxChange = (id) => {
setSelectedRadio([id]);
const investor = investorDetails?.data?.rows?.find((item)=> item?.id === id)
- setSelectorInvestor(investor)
+ setSelectorInvestor(investor)
+console.log(investor);
+ setId(investor?.principal_xid)
// setValue("investorName",`${selectedInvestor?.principal?.firstName} ${selectedInvestor?.principal?.lastName}`)
// setValue("clientId",selectedInvestor?.clientReference_id)
return
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index d3e2825..3400743 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -1,5 +1,11 @@
import { HiOutlineNewspaper } from "react-icons/hi";
-import { TbBrandMedium, TbBuildingBank, TbChartHistogram, TbLayoutDashboard, TbReportMoney } from "react-icons/tb";
+import {
+ TbBrandMedium,
+ TbBuildingBank,
+ TbChartHistogram,
+ TbLayoutDashboard,
+ TbReportMoney,
+} from "react-icons/tb";
import {
RiBankLine,
RiFileUserLine,
@@ -97,44 +103,42 @@ export const nav = [
title: "INVESTORS REQUEST",
type: "title",
},
- {
- title: "Fawateer Deposit",
- submenu: [
- {
- title: "Create Request",
- path: "/fawateer-request",
- icon: RiMoneyDollarBoxLine,
- },
- {
- title: "View History",
- path: "/fawateer-history",
- icon: RiExchangeBoxLine,
- },
- ],
- type: "accordion",
- Icon: HiOutlineBanknotes,
- },
-
-
- {
- title: "Fawateer Deposit",
- submenu: [
- {
- title: "Pending Request",
- path: "/fawateer-approver",
- icon: RiMoneyDollarBoxLine,
+ localStorage.getItem("role") === "Maker"
+ ? {
+ title: "Fawateer Deposit",
+ submenu: [
+ {
+ title: "Create Request",
+ path: "/fawateer-request",
+ icon: RiMoneyDollarBoxLine,
+ },
+ {
+ title: "View History",
+ path: "/fawateer-history",
+ icon: RiExchangeBoxLine,
+ },
+ ],
+ type: "accordion",
+ Icon: HiOutlineBanknotes,
+ }
+ : {
+ title: "Fawateer Deposit",
+ submenu: [
+ {
+ title: "Pending Request",
+ path: "/fawateer-approver",
+ icon: RiMoneyDollarBoxLine,
+ },
+ {
+ title: "View History",
+ path: "/approver-history",
+ icon: RiExchangeBoxLine,
+ },
+ ],
+ type: "accordion",
+ Icon: HiOutlineBanknotes,
},
- {
- title: "View History",
- path: "/approver-history",
- icon: RiExchangeBoxLine,
- },
- ],
- type: "accordion",
- Icon: HiOutlineBanknotes,
- },
-
{
title: "Bank Deposit",
diff --git a/src/Services/fawateer.maker.service.js b/src/Services/fawateer.maker.service.js
new file mode 100644
index 0000000..501fc51
--- /dev/null
+++ b/src/Services/fawateer.maker.service.js
@@ -0,0 +1,52 @@
+// investorDetails.service.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+// import { api } from "./api.service";
+import { baseQuery } from "./token.serivce";
+
+// const baseUrl = api?.defaults.baseURL;
+
+// Define a service using a base URL and expected endpoints
+export const fawateerMaker = createApi({
+ reducerPath: "fawateerMaker",
+ baseQuery: baseQuery,
+ tagTypes: [""],
+
+ endpoints: (builder) => ({
+
+
+
+ getBank: builder.query({
+ query: ({ page, size }) =>
+ `/bankDetails/admin/?page=${page}&size=${size}`,
+ providesTags: ["getBank"],
+ }),
+
+ updateBankDetails: builder.mutation({
+ query: ({ data, id }) => ({
+ url: `/bankDetails/admin/${id}`,
+ method: "PATCH",
+ body: data,
+ }),
+ invalidatesTags: ["getBank"],
+ }),
+
+ createFawateerRequest: builder.mutation({
+ query: ({ data, id }) => ({
+ url: `/fawateer/admin/${id}`,
+ method: "POST",
+ body: data,
+ }),
+ invalidatesTags: [""],
+ }),
+
+
+
+
+
+ }),
+});
+
+// Export hooks for usage in functional components
+export const {
+ useCreateFawateerRequestMutation
+} = fawateerMaker;
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 4e63ec8..de05ab3 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -44,11 +44,10 @@ export const baseQuery = async (args, api, extraOptions) => {
);
if (refreshResult.data) {
- console.log('hit');
- console.log(refreshResult?.data?.data?.access?.token);
-
// Save new tokens
localStorage.setItem("accessToken", refreshResult?.data?.data?.access?.token);
+ localStorage.setItem("role", refreshResult?.data?.data?.role);
+ // console.log(refreshResult?.data?.data?.role);
// Retry the original request with the new token
@@ -97,9 +96,11 @@ export const apiSlice = createApi({
const { data } = await queryFulfilled;
// Store tokens in local storage
localStorage.setItem("accessToken", data?.data?.access?.token);
+
localStorage.setItem("refreshToken", data?.data?.refresh?.token);
// localStorage.setItem('refreshTokenExp', data?.data?.refresh?.expires);
localStorage.setItem("accessTokenExp", data?.data?.access?.expires);
+ localStorage.setItem("role", data?.data?.role);
} catch (error) {
console.error("Login failed:", error);
}
diff --git a/src/Store/Store.js b/src/Store/Store.js
index 81fc20f..5de50f9 100644
--- a/src/Store/Store.js
+++ b/src/Store/Store.js
@@ -15,7 +15,6 @@ import { apiSlice, baseQuery } from "../Services/token.serivce";
import { drawalRequest } from "../Services/drawal.request.service";
import { deleteRequest } from "../Services/delete.request.service";
import { banInvestorDetails } from "../Services/ban.investor.service";
-import { fawateerRequest } from "../Services/fawateer.request.service";
export const store = configureStore({
reducer: {
@@ -32,7 +31,6 @@ export const store = configureStore({
[drawalRequest.reducerPath]: drawalRequest.reducer,
[deleteRequest.reducerPath]: deleteRequest.reducer,
[banInvestorDetails.reducerPath]: banInvestorDetails.reducer,
- [fawateerRequest.reducerPath]: fawateerRequest.reducer,
// Add other reducers as needed
},
middleware: (getDefaultMiddleware) =>
@@ -54,7 +52,6 @@ export const store = configureStore({
drawalRequest.middleware,
deleteRequest.middleware,
banInvestorDetails.middleware,
- fawateerRequest.middleware,
),
});