update Bank Details👍

2024-09-20 18:04:22 +05:30
parent 1a1910c58c
commit ae1cdc8811
4 changed files with 168 additions and 29 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicons.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tanami Admin</title>
  </head>
--- a/src/Pages/Admin/Notification.jsx
+++ b/src/Pages/Admin/Notification.jsx
@@ -1,22 +1,161 @@
-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 Notification = () => {
-  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>
-  )
-}
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Box,
+  useToast,
+} from "@chakra-ui/react";
+import { useForm} from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { useNavigate } from "react-router-dom";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import FormInputMain from "../../Components/FormInputMain";
+import {
+  useGetContactQuery,
+  useUpdateContactMutation,
+} from "../../Services/contact.service";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import ToastBox from "../../Components/ToastBox";

-export default Notification
+export const notification = yup.object().shape({
+  investmentNameEnglish: yup
+    .string()
+    .required("Investment Name is required"),
+  ManualDate: yup
+    .date()
+    .required("Manual Date is required")
+    .typeError("Invalid date format"),
+  ManualTime: yup
+    .string()
+    .required("Manual Time is required")
+    .matches(
+      /^([01]\d|2[0-3]):?([0-5]\d)$/,
+      "Invalid time format, must be in HH:mm"
+    ),
+  expectedReturn: yup
+    .string()
+    .required("Expected Return is required")
+    .matches(
+      /^[0-9]+(\.[0-9]{1,2})?$/,
+      "Expected Return must be a valid number with up to 2 decimal places"
+    ),
+});
+
+
+
+const Notification = () => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(notification),
+  });
+
+  console.log(errors);
+  
+  const {
+    data: contact,
+    isLoading: contactLoading,
+    error,
+  } = useGetContactQuery();
+  const [updateContact] = useUpdateContactMutation();
+
+  useEffect(() => {
+    if (contact) {
+      reset({
+        phoneNumber: contact?.data[0]?.phoneNumber,
+        emailAddress: contact?.data[0]?.emailAddress,
+        websiteUrl: contact?.data[0]?.websiteUrl,
+      });
+    }
+  }, [contact, reset]);
+
+  if (contactLoading) {
+    return <FullscreenLoaders />;
+  }
+
+  const formFields = [
+    {
+      label: "Investment Name",
+      placeHolder: " ",
+      name: "investmentNameEnglish",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      // value: contact?.phoneNumber || "",
+    },
+    {
+      label: "Manual Date",
+      name: "ManualDate",
+      placeHolder: " ",
+      type: "date",
+      isRequired: true,
+      section: "Add Details",
+      // value: contact?.emailAddress || "",
+    },
+    {
+      label: "Manual Time",
+      name: "ManualTime",
+      placeHolder: " ",
+      type: "time",
+      isRequired: true,
+      section: "Add Details",
+      // value: contact?.websiteUrl || "",
+    },
+    {
+      label: "Expected Return",
+      name: "expectedReturn",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+      // value: contact?.websiteUrl || "",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const onSubmit = async (data) => {
+    setIsLoading(true);
+    try {
+      const res = await updateContact(data);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {
+      console.log(error);
+
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+        btnLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default Notification;
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -181,11 +181,11 @@ export const nav = [
        path: "/academy",
        icon: GrManual,
      },
-      // {
-      //   title: "Notification",
-      //   path: "/notification",
-      //   icon: MdNotificationsNone,
-      // },
+      {
+        title: "Notification",
+        path: "/notification",
+        icon: MdNotificationsNone,
+      },
      {
        title: "Contact Details",
        path: "/contact",
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -100,8 +100,8 @@ export const RouteLink = [
  // { path: "/bank-investor", Component: UnderConstruction },
  // { path: "/academy", Component: Academy },
  { path: "/academy", Component: UnderConstruction },
-  // { path: "/notification", Component: Notification },
-  { path: "/notification", Component: UnderConstruction },
+  { path: "/notification", Component: Notification },
+  // { path: "/notification", Component: UnderConstruction },
  { path: "/contact", Component: Contact },
  // { path: "/contact", Component: UnderConstruction },
  // { path: "/users", Component: Users },