Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

src/Pages/Admin/BankDetails.jsx

@@ -1,22 +0,0 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const BankDetails = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
-
-export default BankDetails

src/Pages/Admin/BankDetails/BankDetails.jsx

@@ -0,0 +1,254 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Select,
+  Switch,
+  Tag,
+  Text,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { HiDotsVertical } from "react-icons/hi";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import {
+  AddIcon,
+  DeleteIcon,
+  EditIcon,
+  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";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const BankDetails = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const thirdField = useRef();
+  const { InvestorDetails, setInvestorDetails, slideFromRight } =
+    useContext(GlobalStateContext); 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const {
+    isOpen: isEditOpen,
+    onOpen: onEditOpen,
+    onClose: onEditClose,
+  } = useDisclosure();
+  const btnRef = React.useRef();
+
+  const {
+    data: bankDetails,
+    isLoading: bankDetailsLoading,
+    error,
+  } = useGetBankQuery({ page: 1, size: 10 });
+
+  console.log(bankDetails?.data);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr N/O",
+    "Country name",
+    "Account Name",
+    "Account No",
+    "Bank Name",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setInvestorDetails((prevData) =>
+      prevData.map((InvestorDetails) =>
+        InvestorDetails.id === id ? { ...InvestorDetails } : InvestorDetails
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = bankDetails?.data?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.accountName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  console.log(bankDetails);
+
+  const extractedArray = filteredData?.map((item) => ({
+    id: item?.id,
+    "Sr N/O": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {item.id}
+      </Text>
+    ),
+    "Country name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.country_xid}
+        </Text>
+      </Box>
+    ),
+    "Account Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.accountName}
+        </Text>
+      </Box>
+    ),
+    "Account No ": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.accountNumber}
+        </Text>
+      </Box>
+    ),
+    "Bank Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.bankName}
+        </Text>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              navigate(`/bank-details/edit-bank-details/${item.id}`);
+            }}
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestorDetails = InvestorDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorDetails(updatedInvestorDetails);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleEdit = (id) => {
+    setActionId(id);
+    onEditOpen();
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default BankDetails;

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 <FullscreenLoaders />;
+  }
+
+  const handleConfirm = async () => {
+    setIsLoadingBtn(true);
+
+    try {
+      const formData = {
+        ...form,
+        isActive: isSwitchOn,
+      };
+
+      const response = await updateBankDetails({ data: formData, id });
+      if (response?.data?.statusCode) {
+        toast({
+          render: () => <ToastBox message={response.data.message} />,
+        });
+
+        setIsLoadingBtn(false);
+        setAlert(false);
+        navigate("/bank-details");
+      } else {
+        throw new Error("Something went wrong");
+      }
+    } catch (error) {
+      toast({
+        render: () => <ToastBox message="Something went wrong" status="error" />,
+      });
+
+      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 (
+    <Box {...OPACITY_ON_LOAD} overflowY="scroll" height="100vh" pb={14}>
+      <FormInputMain
+        groupedFields={groupedEditFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+        submitTitle={id ? "Update" : "Submit"}
+      />
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleConfirm}
+        message="Are you sure you want to update these details?"
+        isLoading={isLoadingBtn}
+      />
+    </Box>
+  );
+};
+
+export default EditBankDetails;

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,

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

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 },
 ];

src/Services/bank.details.service.js

@@ -0,0 +1,35 @@
+// 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 bankDetails = createApi({
+  reducerPath: "bankDetails",
+  baseQuery: fetchBaseQuery({ baseUrl }),
+  tagTypes: [],
+  endpoints: (builder) => ({
+
+    getBank: builder.query({
+      query: ({ page, size }) =>
+        `/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,useUpdateBankDetailsMutation } = bankDetails;

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;

src/Store/Store.js

@@ -8,6 +8,8 @@ import { investorDetails } from "../Services/investor.details.service";
 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: {
@@ -17,6 +19,8 @@ export const store = configureStore({
     [ioService.reducerPath]: ioService.reducer,
     [investorDetails.reducerPath]: investorDetails.reducer,
     [investorTransaction.reducerPath]: investorTransaction.reducer,
+    [bankDetails.reducerPath]: bankDetails.reducer,
+    [contact.reducerPath]: contact.reducer,
     // Add other reducers as needed
   },
   middleware: (getDefaultMiddleware) =>
@@ -31,6 +35,8 @@ export const store = configureStore({
       ioService.middleware,
       investorDetails.middleware,
       investorTransaction.middleware,
+      bankDetails.middleware,
+      contact.middleware,
     ),
 });