diff --git a/src/Pages/Admin/BankDetails.jsx b/src/Pages/Admin/BankDetails/BankDetails.jsx similarity index 87% rename from src/Pages/Admin/BankDetails.jsx rename to src/Pages/Admin/BankDetails/BankDetails.jsx index 4488fff..8266930 100644 --- a/src/Pages/Admin/BankDetails.jsx +++ b/src/Pages/Admin/BankDetails/BankDetails.jsx @@ -28,14 +28,14 @@ import { EmailIcon, ViewIcon, } from "@chakra-ui/icons"; -import { OPACITY_ON_LOAD } from "../../Layout/animations"; -import DataTable from "../../Components/DataTable/DataTable"; -import Pagination from "../../Components/Pagination"; -import GlobalStateContext from "../../Contexts/GlobalStateContext"; -import CustomAlertDialog from "../../Components/CustomAlertDialog"; -import ToastBox from "../../Components/ToastBox"; -import { debounce } from "../Master/Sponser/AddSponser"; -import { useGetBankQuery } from "../../Services/bank.details.service"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import DataTable from "../../../Components/DataTable/DataTable"; +import Pagination from "../../../Components/Pagination"; +import GlobalStateContext from "../../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../../Components/CustomAlertDialog"; +import ToastBox from "../../../Components/ToastBox"; +import { debounce } from "../../Master/Sponser/AddSponser"; +import { useGetBankQuery } from "../../../Services/bank.details.service"; const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter @@ -44,7 +44,7 @@ const BankDetails = () => { const toast = useToast(); const thirdField = useRef(); const { InvestorDetails, setInvestorDetails, slideFromRight } = - useContext(GlobalStateContext); + useContext(GlobalStateContext); const [searchTerm, setSearchTerm] = useState(""); const [isLoading, setIsLoading] = useState(true); const [deleteAlert, setDeleteAlert] = useState(false); @@ -64,7 +64,7 @@ const BankDetails = () => { error, } = useGetBankQuery({ page: 1, size: 10 }); - console.log(bankDetails); + console.log(bankDetails?.data); useEffect(() => { // Simulate loading @@ -98,9 +98,9 @@ const BankDetails = () => { }, 300); // ====================================================[Table Filter]================================================================ - const filteredData = bankDetails?.data?.rows?.filter((item) => { + const filteredData = bankDetails?.data?.filter((item) => { // Filter by name (case insensitive) - const name = item.country_xid; + const name = item.accountName; const searchLower = searchTerm.toLowerCase(); const nameMatches = name?.toLowerCase().includes(searchLower); @@ -147,7 +147,7 @@ const BankDetails = () => { "Account No ": ( - {item.accountNumber} + {item?.accountNumber} ), @@ -169,16 +169,16 @@ const BankDetails = () => { placement="top" > diff --git a/src/Pages/Admin/BankDetails/EditBankDetails.jsx b/src/Pages/Admin/BankDetails/EditBankDetails.jsx new file mode 100644 index 0000000..fe08a64 --- /dev/null +++ b/src/Pages/Admin/BankDetails/EditBankDetails.jsx @@ -0,0 +1,194 @@ +import React, { useEffect, useState } from "react"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import { Box, useToast } from "@chakra-ui/react"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { useNavigate, useParams } from "react-router-dom"; +import FormInputMain from "../../../Components/FormInputMain"; +import ToastBox from "../../../Components/ToastBox"; +import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders"; +import CustomAlertDialog from "../../../Components/CustomAlertDialog"; +import SwitchButton from "../../../Components/SwitchButton"; +import * as yup from "yup"; +import { useGetBankQuery, useUpdateBankDetailsMutation } from "../../../Services/bank.details.service"; +// import { useUpdateBankDetailsMutation, useGetBankQuery } from "../../../Services/investorDetails.service"; + +const editBankSchema = yup.object().shape({ + accountNumber: yup.string().required("Account number is required"), + swiftCode: yup.string().required("SWIFT code is required"), + bankName: yup.string().required("Bank name is required"), + bankAddress: yup.string().required("Bank address is required"), + IBANnumber: yup.string().required("IBAN number is required"), +}); + +const EditBankDetails = () => { + const toast = useToast(); + const params = useParams(); + const navigate = useNavigate(); + const id = params?.id; + + const [isLoadingBtn, setIsLoadingBtn] = useState(false); + const [alert, setAlert] = useState(false); + const [form, setForm] = useState({}); + const [isSwitchOn, setIsSwitchOn] = useState(false); + + const [updateBankDetails] = useUpdateBankDetailsMutation(); + const { data: bankDetails, error, isLoading } = useGetBankQuery({ id }, { skip: !id }); + + const { + control, + handleSubmit, + formState: { errors }, + reset, + } = useForm({ + resolver: yupResolver(editBankSchema), + }); + + useEffect(() => { + if (bankDetails) { + reset({ + accountNumber: bankDetails.accountNumber, + swiftCode: bankDetails.swiftCode, + bankName: bankDetails.bankName, + bankAddress: bankDetails.bankAddress, + IBANnumber: bankDetails.IBANnumber, + }); + } + }, [bankDetails, reset]); + + if (isLoading) { + return ; + } + + const handleConfirm = async () => { + setIsLoadingBtn(true); + + try { + const formData = { + ...form, + isActive: isSwitchOn, + }; + + const response = await updateBankDetails({ data: formData, id }); + if (response?.data?.statusCode) { + toast({ + render: () => , + }); + + setIsLoadingBtn(false); + setAlert(false); + navigate("/bank-details"); + } else { + throw new Error("Something went wrong"); + } + } catch (error) { + toast({ + render: () => , + }); + + setIsLoadingBtn(false); + navigate("/bank-details"); + } + }; + + const formEditFields = [ + { + label: "Country Name", + placeHolder: "Enter country name", + name: "countryName", + type: "text", + isRequired: true, + section: "Add Details", + maxLength: 50, + width: "32%", + }, + { + label: "Account Name", + name: "accountName", + placeHolder: "Enter account name", + type: "text", + isRequired: true, + section: "Add Details", + maxLength: 255, + width: "32%", + }, + { + label: "Account Number *", + name: "accountNumber", + placeHolder: "Enter account number", + type: "text", + section: "Add Details", + width: "32%", + }, + { + label: "IBAN Number", + name: "IBANnumber", + placeHolder: "Enter IBAN number", + type: "text", + section: "Add Details", + width: "32%", + }, + { + label: "SWIFT Code", + name: "swiftCode", + placeHolder: "Enter SWIFT code", + type: "text", + section: "Add Details", + width: "32%", + }, + { + label: "Bank Name", + name: "bankName", + placeHolder: "Enter bank name", + type: "text", + section: "Add Details", + width: "32%", + }, + { + label: "Bank Address", + name: "bankAddress", + placeHolder: "Enter bank address", + type: "text", + section: "Add Details", + width: "32%", + }, + ]; + + const groupedEditFields = formEditFields.reduce((groups, field) => { + const { section } = field; + if (!groups[section]) { + groups[section] = []; + } + groups[section].push(field); + return groups; + }, {}); + + const onSubmit = (data) => { + if (!Object.keys(errors).length) { + setForm(data); + setAlert(true); + } + }; + + return ( + + + + setAlert(false)} + alertHandler={handleConfirm} + message="Are you sure you want to update these details?" + isLoading={isLoadingBtn} + /> + + ); +}; + +export default EditBankDetails; diff --git a/src/Pages/Admin/Contact.jsx b/src/Pages/Admin/Contact.jsx index ebc52ce..d83021b 100644 --- a/src/Pages/Admin/Contact.jsx +++ b/src/Pages/Admin/Contact.jsx @@ -19,11 +19,12 @@ import { v4 as uuidv4 } from "uuid"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; import FormInputMain from "../../Components/FormInputMain"; +import { useGetContactQuery } from "../../Services/contact.service"; export const addSponser = yup.object().shape({ phoneNumber: yup.string().required("Phone Number is required"), - emailId: yup.string().required("E-mail ID is required"), - WebsiteURL: yup.string().required("Website URL is required"), + emailAddress: yup.string().required("E-mail ID is required"), + websiteUrl: yup.string().required("Website URL is required"), }); export function debounce(func, delay) { @@ -50,6 +51,13 @@ const Contact = () => { console.log(errors); + const { + data: contact, + isLoading: contactLoading, + error, + } = useGetContactQuery({ page: 1, size: 10 }); + + console.log(contact?.data); const formFields = [ { @@ -62,7 +70,7 @@ const Contact = () => { }, { label: "E-mail ID ", - name: "emailId", + name: "emailAddress", placeHolder:" ", type: "text", isRequired: true, @@ -70,7 +78,7 @@ const Contact = () => { }, { label: "Website URL", - name: "WebsiteURL", + name: "websiteUrl", placeHolder:" ", type: "text", isRequired: true, diff --git a/src/Pages/Master/Sponser/EditSponser.jsx b/src/Pages/Master/Sponser/EditSponser.jsx index e1de7c5..bb7389a 100644 --- a/src/Pages/Master/Sponser/EditSponser.jsx +++ b/src/Pages/Master/Sponser/EditSponser.jsx @@ -95,7 +95,7 @@ const EditSponser = () => { }, { label: "Address (Arabic)", - name: "sponserAddressArabic", + name: "sponserAddressArabic", placeHolder: " ", type: "text", isRequired: true, @@ -106,7 +106,7 @@ const EditSponser = () => { label: "Bank Name (English)", name: "bankName", placeHolder: " ", - type: "text", + type: "text", isRequired: true, section: "Add Details", }, diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 05388bb..647ed06 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -2,7 +2,7 @@ import DeletionHistory from "../Pages/AccountDeletion/DeletionHistory"; import DeletionRequest from "../Pages/AccountDeletion/DeletionRequest"; // import Academy from "../Pages/Admin/Academy"; -import BankDetails from "../Pages/Admin/BankDetails"; +import BankDetails from "../Pages/Admin/BankDetails/BankDetails"; import BankInvestor from "../Pages/Admin/BankInvestor"; import Contact from "../Pages/Admin/Contact"; import Notification from "../Pages/Admin/Notification"; @@ -37,6 +37,7 @@ import DepositHistory from "../Pages/Deposit/DepositViewHistory/DepositHistory"; import Academy from "../Pages/Admin/ManageAcademy/Academy"; import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType"; import DepositRequest from "../Pages/Deposit/DepositRequest/DepositRequest"; +import EditBankDetails from "../Pages/Admin/BankDetails/EditBankDetails"; export const RouteLink = [ // =============[ Tanami ]================ @@ -94,4 +95,5 @@ export const RouteLink = [ { path: "/contact", Component: Contact }, { path: "/users", Component: Users }, { path: "/bank-details", Component: BankDetails }, + { path: "/bank-details/edit-bank-details/:id", Component: EditBankDetails }, ]; diff --git a/src/Services/bank.details.service.js b/src/Services/bank.details.service.js index e301f3b..45aaddb 100644 --- a/src/Services/bank.details.service.js +++ b/src/Services/bank.details.service.js @@ -16,9 +16,20 @@ export const bankDetails = createApi({ `/bankDetails/admin/?page=${page}&size=${size}`, providesTags: ["getBank"], }), + + // ========[Update Sponser]======== + + updateBankDetails: builder.mutation({ + query: ({ data, id }) => ({ + url: `/bankDetails/admin/${id}`, + method: "PATCH", + body: data, + }), + invalidatesTags: ["getBankDetails"], + }), }), }); // Export hooks for usage in functional components -export const { useGetBankQuery } = bankDetails; +export const { useGetBankQuery,useUpdateBankDetailsMutation } = bankDetails; diff --git a/src/Services/contact.service.js b/src/Services/contact.service.js new file mode 100644 index 0000000..d165202 --- /dev/null +++ b/src/Services/contact.service.js @@ -0,0 +1,24 @@ +// investorDetails.service.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; +import { api } from "./api.service"; + +const baseUrl = api?.defaults.baseURL; + +// Define a service using a base URL and expected endpoints +export const contact = createApi({ + reducerPath: "contact", + baseQuery: fetchBaseQuery({ baseUrl }), + tagTypes: [], + endpoints: (builder) => ({ + + getContact: builder.query({ + query: ({ page, size }) => + `/contactDetails/admin/?page=${page}&size=${size}`, + providesTags: ["getContact"], + }), + + }), +}); + +// Export hooks for usage in functional components +export const { useGetContactQuery } = contact; diff --git a/src/Store/Store.js b/src/Store/Store.js index e6e2a13..e0399f6 100644 --- a/src/Store/Store.js +++ b/src/Store/Store.js @@ -9,6 +9,7 @@ import { investorTransaction } from "../Services/investor.transaction.service"; import { api } from "../Services/api.service"; import { keyMerits } from "../Services/Key.merits.service"; import { bankDetails } from "../Services/bank.details.service"; +import { contact } from "../Services/contact.service"; export const store = configureStore({ reducer: { @@ -19,6 +20,7 @@ export const store = configureStore({ [investorDetails.reducerPath]: investorDetails.reducer, [investorTransaction.reducerPath]: investorTransaction.reducer, [bankDetails.reducerPath]: bankDetails.reducer, + [contact.reducerPath]: contact.reducer, // Add other reducers as needed }, middleware: (getDefaultMiddleware) => @@ -34,6 +36,7 @@ export const store = configureStore({ investorDetails.middleware, investorTransaction.middleware, bankDetails.middleware, + contact.middleware, ), });