checker maker update

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

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: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        reset()
+        return
+      } else if (res?.data) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        return
+      } else {
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsLoading(false);
+        return
+      }
+  
+    } catch (error) {
+      console.error("Error:", error);
+      toast({
+        render: () => (
+          <ToastBox status={'error'} message={"An error occurred"} />
+        ),
+      });
+      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 (
-
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
-        {/* <HStack ps={1} mb={2} pe={4} w={'100%'} justifyContent={'space-between'}>
-        <Button 
-        rightIcon={<Search2Icon />}
-              colorScheme="forestGreen"
-              size={"sm"}
-              rounded={"sm"}
-              fontSize={"xs"}
-              variant={'ghost'}
-              mt={3}
-              onClick={()=>onOpen()}
-              >Search Investor</Button>
-              </HStack> */}
       <Box
         display={"flex"}
         justifyContent={"space-between"}
@@ -63,37 +131,35 @@ const CreateRequest = () => {
         mt={5}
         px={4}
         as="form"
-       onSubmit={handleSubmit(onSubmit)}
+        onSubmit={handleSubmit(onSubmit)}
       >
-        <FormControl w={"49%"} mb={2}>
-          <FormLabel isInvalid={errors.investorName} textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+        {/* Investor Name Field */}
+        <FormControl w={"49%"} mb={2} isInvalid={errors.investorName}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Investor name
           </FormLabel>
           <InputGroup size='sm'>
-        <Input
-            bg={"#F5F8F6"}
-            focusBorderColor="forestGreen.300"
-            size={"sm"}
-            fontSize={"sm"}
-            rounded={"sm"}
-            type={"text"}
-            readOnly={true}
-            placeholder={"Investor name"}
-
-            {...register("investorName")} // Register the field
-            _placeholder={{ fontSize: "sm" }}
-            // value={`${selectedInvestor?.principal?.firstName} ${selectedInvestor?.principal?.lastName}`}
-          />
-          <InputRightAddon gap={2} color={'forestgreen.400'} onClick={onOpen} cursor={'pointer'} fontWeight={600} fontSize={'xs'}><Search2Icon /> Search</InputRightAddon>
-    </InputGroup>
-
-    <FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.investorName?.message}</FormHelperText>
+            <Input
+              bg={"#F5F8F6"}
+              focusBorderColor="forestGreen.300"
+              size={"sm"}
+              fontSize={"sm"}
+              rounded={"sm"}
+              type={"text"}
+              readOnly={true}
+              placeholder={"Investor name"}
+              {...register("investorName")}
+              _placeholder={{ fontSize: "sm" }}
+            />
+            <InputRightAddon gap={2} color={'forestgreen.400'} onClick={onOpen} cursor={'pointer'} fontWeight={600} fontSize={'xs'}>
+              <Search2Icon /> Search
+            </InputRightAddon>
+          </InputGroup>
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.investorName?.message}</FormHelperText>
         </FormControl>
 
-
-      
-
-        <FormControl isInvalid={errors.clientId} w={"49%"} mb={2}>
+        {/* Client ID Field */}
+        <FormControl w={"49%"} mb={2} isInvalid={errors.clientId}>
           <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Client Id
           </FormLabel>
@@ -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")}
           />
-
-<FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.clientId?.message}</FormHelperText>
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.clientId?.message}</FormHelperText>
         </FormControl>
 
+        {/* Date Field */}
+        <FormControl w={"49%"} mb={2} isInvalid={errors.date}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Date
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"transaction_date"}
+            max={new Date().toISOString().split("T")[0]} // Disable future dates
+            {...register("transaction_date")}
+          />
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_date?.message}</FormHelperText>
+        </FormControl>
 
-   {/* Date */}
-   <FormControl w={"49%"} mb={2} isInvalid={errors.date}>
-            <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
-              Date
-            </FormLabel>
-            <Input
-              bg={"#F5F8F6"}
-              focusBorderColor="forestGreen.300"
-              size={"sm"}
-              fontSize={"sm"}
-              rounded={"sm"}
-              type={"date"}
-              placeholder={"Date"}
-              {...register("date")} // Register the field
-              max={new Date().toISOString().split("T")[0]} // Disable future dates
-            />
-
-            <FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.date?.message}</FormHelperText>
-                    </FormControl>
-
-
-          {/* Amount */}
-          <FormControl w={"49%"} mb={2} isInvalid={errors.amount}>
-            <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
-              Amount
-            </FormLabel>
-            <Input
-              bg={"#F5F8F6"}
-              focusBorderColor="forestGreen.300"
-              size={"sm"}
-              fontSize={"sm"}
-              rounded={"sm"}
-              type={'number'}
-              placeholder={"Amount"}
-              {...register("amount")} // Register the field
-            />
-
-            <FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.amount?.message}</FormHelperText>
-                    </FormControl>
-  {/* Support file */}
-  <FormControl w={"49%"} mb={2} isInvalid={errors.supportFile}>
-            <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
-              Support file
-            </FormLabel>
-            <Input
-              bg={"#F5F8F6"}
-              focusBorderColor="forestGreen.300"
-              size={"sm"}
-              fontSize={"sm"}
-              rounded={"sm"}
-              type={"file"}
-              className="form-control"
-              placeholder={"Support file"}
-              {...register("supportFile")} // Register the field
-              onChange={(e) => setValue("supportFile", e.target.files[0])}
-            />
-            <FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.supportFile?.message}</FormHelperText>
-                    </FormControl>
-
-          {/* Description */}
-          <FormControl w={"100%"} mb={2} isInvalid={errors.description}>
-            <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
-              Description
-            </FormLabel>
-            <Textarea
-              bg={"#F5F8F6"}
-              focusBorderColor="forestGreen.300"
-              size={"sm"}
-              fontSize={"sm"}
-              rounded={"sm"}
-              placeholder={"Description"}
-              {...register("description")} // Register the field
-            />
-            <FormHelperText as={'span'} fontSize={'xs'} fontWeight={500} style={{ color: "red" }} >{errors.description?.message}</FormHelperText>
-                    </FormControl>
-
-
-<HStack mt={2} w={'100%'} justifyContent={'flex-end'}>
-        <Button 
-              colorScheme="forestGreen"
-              size={"sm"}
-              rounded={"sm"}
-              fontSize={"xs"}
-              type="submit"
-              >Create request</Button>
-              </HStack>
+        {/* Amount Field */}
+        <FormControl w={"49%"} mb={2} isInvalid={errors.amount}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Amount
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"number"}
+            placeholder={"Amount"}
+            {...register("transaction_amount")}
+          />
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_amount?.message}</FormHelperText>
+        </FormControl>
 
+        {/* Support File Field with Preview */}
+        <FormControl w={"49%"} mb={2} isInvalid={errors.spportFile_path}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Support file
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"file"}
+            className="form-control"
+            placeholder={"Support file"}
+            {...register("spportFile_path")}
+            onChange={handleFileChange}
+          />
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.spportFile_path?.message}</FormHelperText>
 
+          {/* Animated Preview */}
+          {filePreview && fileType?.type.startsWith("image/") && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+              style={{ marginTop: "10px" }}
+            >
+              <Box  position={'relative'} display={'flex'} alignContent={'flex-end'} gap={3}   mt={2}>
+                <Image  src={filePreview} alt="File preview" maxW={"150px"} borderRadius="md" boxShadow="md" />
+                <Icon  onClick={()=> setFilePreview(null)} className="link" rounded={'md'} color={'red.700'} cursor={'pointer'} p={1.5}  position={'absolute'} top={0} right={0} as={DeleteIcon} boxSize={7} />
+                <VStack justifyItems={'flex-end'} alignItems={'flex-start'}>
+                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Name: <Text as={'span'} color={'GrayText'}> {fileType?.name}</Text></Text>
+                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Size: <Text as={'span'} color={'GrayText'}> {bytesToMB(fileType?.size)} Mb</Text></Text>
+                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Type: <Text as={'span'} color={'GrayText'}> {fileType?.type}</Text></Text>
 
+                </VStack>
+              </Box>
+            </motion.div>
+          )}
+        </FormControl>
 
+        {/* Description Field */}
+        <FormControl w={"100%"} mb={2} isInvalid={errors.makerComment}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Description
+          </FormLabel>
+          <Textarea
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            placeholder={"Description"}
+            {...register("makerComment")}
+          />
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.makerComment?.message}</FormHelperText>
+        </FormControl>
 
+        {/* Submit Button */}
+        <HStack mt={2} w={'100%'} justifyContent={'flex-end'}>
+          <Button 
+            colorScheme="forestGreen"
+            size={"sm"}
+            rounded={"sm"}
+            fontSize={"xs"}
+            type="submit"
+            isLoading={isLoading}
+          >
+            Create request
+          </Button>
+        </HStack>
       </Box>
-      <SelectInvestorModal setValue={setValue}  onClose={onClose} isOpen={isOpen} onOpen={onOpen}/>
+
+      <SelectInvestorModal setId={setId} setValue={setValue} onClose={onClose} isOpen={isOpen} onOpen={onOpen}/>
     </Box>
   );
 };

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

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",

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;

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);
         }

src/Store/Store.js

@@ -15,6 +15,7 @@ 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 { fawateerMaker } from "../Services/fawateer.maker.service";
 
 export const store = configureStore({
   reducer: {
@@ -31,6 +32,8 @@ export const store = configureStore({
     [drawalRequest.reducerPath]: drawalRequest.reducer,
     [deleteRequest.reducerPath]: deleteRequest.reducer,
     [banInvestorDetails.reducerPath]: banInvestorDetails.reducer,
+    [fawateerMaker.reducerPath]: fawateerMaker.reducer,
+
     // Add other reducers as needed
   },
   middleware: (getDefaultMiddleware) =>
@@ -52,6 +55,8 @@ export const store = configureStore({
       drawalRequest.middleware,
       deleteRequest.middleware,
       banInvestorDetails.middleware,
+      fawateerMaker.middleware,
+
     ),
 });