notafication dropdown

2025-01-08 17:04:07 +05:30
parent 625f721325
commit 5743cadf5e
3 changed files with 230 additions and 88 deletions
--- a/src/Pages/Admin/Notification.jsx
+++ b/src/Pages/Admin/Notification.jsx
@@ -3,11 +3,14 @@ import {
  Badge,
  Box,
  Button,
+  HStack,
+  Input,
+  Select,
  Text,
  Tooltip,
  useToast,
 } from "@chakra-ui/react";
-import { useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { useNavigate } from "react-router-dom";
@@ -29,9 +32,7 @@ import { ViewIcon } from "@chakra-ui/icons";
 import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";

 export const notification = yup.object().shape({
-  title: yup
-    .string()
-    .required("Investment Name is required"),
+  title: yup.string().required("Investment Name is required"),
  ManualDate: yup
    .date()
    .required("Manual Date is required")
@@ -43,33 +44,26 @@ export const notification = yup.object().shape({
      /^([01]\d|2[0-3]):?([0-5]\d)$/,
      "Invalid time format, must be in HH:mm"
    ),
-  expectedReturn: yup
-    .string()
-    .required("Expected Return is required"),
+  expectedReturn: yup.string().required("Expected Return is required"),
 });

 export const notificationNew = yup.object().shape({
-  title: yup
-    .string()
-    .required("Investment Name is required"),
-    message: yup
-      .string()
-      .required("Message is required"),
-    
+  title: yup.string().required("Investment Name is required"),
+  message: yup.string().required("Message is required"),
 });

-
-
 const Notification = () => {
  const toast = useToast();
  const navigate = useNavigate();
  const [form, setForm] = useState({});
  const [isLoading, setIsLoading] = useState(false);
-  const [ selectedRadio, setSelectedRadio] = useState([])
+  const [selectedRadio, setSelectedRadio] = useState([]);
  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [country, setCountry] = useState("");
+  const [kyc, setKyc] = useState("");

  const {
    control,
@@ -80,21 +74,20 @@ const Notification = () => {
  } = useForm({
    resolver: yupResolver(notificationNew),

-  defaultValues: {
-    title: '',
-    message: '',
-  },
+    defaultValues: {
+      title: "",
+      message: "",
+    },
  });

  console.log(errors);
-  
+
  const {
    data: contact,
    isLoading: contactLoading,
    error,
  } = useGetContactQuery();

-
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString("en-GB", {
      day: "2-digit",
@@ -109,28 +102,36 @@ const Notification = () => {
  //   // error,
  // } = useGetInvestorsQuery({ page: currentPage, size: pageSize });

+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 300); // 300ms delay
+    return () => clearTimeout(handler);
+  }, [searchTerm]);

  const {
-    data : investorDetails,
+    data: investorDetails,
    isLoading: investorDetailsLoading,
    refetch,
-  } = useGetUnbanInvestorQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  });;
-
-
+  } = useGetUnbanInvestorQuery(
+    {
+      page: currentPage, // Omit pagination for search
+      size: 10000, // Omit pagination for search
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+      country_xid: country,
+      KYCStatus: kyc,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );

  console.log(investorDetails);

-
  const [sendNotification] = useSendNotificationMutation();

-  
  if (contactLoading) {
    return <FullscreenLoaders />;
  }
@@ -141,9 +142,11 @@ const Notification = () => {
      placeHolder: " ",
      name: "title",
      type: "text",
-      width:"100%",
-      maxLength:100,
-      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.title?.length || 0} characters.`,
+      width: "100%",
+      maxLength: 100,
+      helperText: `Maximum length should be 100 characters. You have entered ${
+        watch()?.title?.length || 0
+      } characters.`,
      isRequired: true,
      section: "Send Custom Push Notification",
      // value: contact?.phoneNumber || "",
@@ -152,15 +155,16 @@ const Notification = () => {
      label: "Notification Message",
      placeHolder: " ",
      name: "message",
-      width:"100%",
+      width: "100%",
      type: "textarea",
      isRequired: true,
-      maxLength:200,
-      helperText:`Maximum length should be 200 characters. You have entered ${watch()?.message?.length || 0} characters.`,
+      maxLength: 200,
+      helperText: `Maximum length should be 200 characters. You have entered ${
+        watch()?.message?.length || 0
+      } characters.`,
      section: "Send Custom Push Notification",
      // value: contact?.phoneNumber || "",
    },
-    
  ];

  const groupedFields = formFields.reduce((groups, field) => {
@@ -173,55 +177,47 @@ const Notification = () => {
  }, {});

  const onSubmit = async (data) => {
-
    const dataToPass = {
      ...data,
-      principal_xid:selectedRadio
-    }
+      principal_xid: selectedRadio,
+    };
    setIsLoading(true);
    try {
      const res = await sendNotification(dataToPass);
      console.log(res);
-      
+
      if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
-        setIsLoading(false)
-      }else if(res?.data){
+        setIsLoading(false);
+      } else if (res?.data) {
        toast({
-          render: () => (
-            <ToastBox message={res?.data?.message} />
-          ),
+          render: () => <ToastBox message={res?.data?.message} />,
        });
-        setIsLoading(false)
-        setSelectedRadio([])
+        setIsLoading(false);
+        setSelectedRadio([]);
        reset({
-          title: '', // Resetting specific fields
-          message: '', 
+          title: "", // Resetting specific fields
+          message: "",
        }); // Clears the form fields
-      }else{
+      } else {
        toast({
          render: () => (
-            <ToastBox status={'error'} message={"Something went wrong"} />
+            <ToastBox status={"error"} message={"Something went wrong"} />
          ),
        });
-        setIsLoading(false)
+        setIsLoading(false);
      }
    } catch (error) {
      console.log(error);

      setIsLoading(false);
    }
-
-    
  };

-
-
-
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr N/O",
@@ -235,7 +231,6 @@ const Notification = () => {
    "KYC Status",
  ];

-
  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
    "Sr N/O": (
@@ -245,7 +240,7 @@ const Notification = () => {
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
-       {generateSerialNumber(idx,currentPage, pageSize )}
+        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    Date: (
@@ -305,9 +300,9 @@ const Notification = () => {
          color={item?.KYCStatus === false ? "red" : "blue"}
          px={2}
          py={0.5}
-          variant={'ghost'}
+          variant={"ghost"}
        >
-          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Badge>
      </Box>
    ),
@@ -322,18 +317,77 @@ const Notification = () => {
        onSubmit={handleSubmit(onSubmit)}
        btnLoading={isLoading}
      >
-        <Box overflow={'scroll'} h={'58vh'}>
-      <NormalTable
-        centered={true}
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        // isLoading={isLoading}
-        setSelectedRadio={setSelectedRadio}
-        selectedRadio={selectedRadio}
-        showRadioButton={true}
-      />
-      </Box>
+        <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 className="col" justifyContent={"end"}>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setCountry(e.target.value)}
+              value={country}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Country
+              </option>
+              <option value="">All</option>
+              <option value="1">Bahrain</option>
+              <option value="2">Kuwait</option>
+              <option value="3">Oman</option>
+              <option value="4">Qatar</option>
+              <option value="5">Saudi arabia</option>
+              <option value="6">United arab emirates</option>
+            </Select>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setKyc(e.target.value)}
+              value={kyc}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                KYC Status
+              </option>
+              <option value="">KYC Status</option>
+              <option value="0">Not Completed</option>
+              <option value="1">Completed</option>
+            </Select>
+          </HStack>
+        </HStack>
+        <Box overflow={"scroll"} h={"58vh"}>
+          <NormalTable
+            centered={true}
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            isLoading={investorDetailsLoading}
+            setSelectedRadio={setSelectedRadio}
+            selectedRadio={selectedRadio}
+            showRadioButton={true}
+          />
+        </Box>
      </FormInputMain>
    </Box>
  );
--- a/src/Pages/EmailNotification/EmailNotification.jsx
+++ b/src/Pages/EmailNotification/EmailNotification.jsx
@@ -7,6 +7,7 @@ import {
  FormLabel,
  HStack,
  Input,
+  Select,
  Text,
  useToast,
 } from "@chakra-ui/react";
@@ -28,8 +29,11 @@ const EmailNotification = () => {
  const [subject, setSubject] = useState("");
  const [value, setValue] = useState(""); // Quill content (body)
  const toast = useToast();
-
  const [sendCustomNotification] = useSendCustomEmailMutation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [country, setCountry] = useState("");
+  const [kyc, setKyc] = useState("");

  // ===========================[Table Setup]==============================
  const tableHeadRow = [
@@ -47,14 +51,40 @@ const EmailNotification = () => {
  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);

+  // const {
+  //   data: investorDetails,
+  //   isLoading: investorDetailsLoading,
+  //   refetch,
+  // } = useGetUnbanInvestorQuery({
+  //   page: currentPage, // Omit pagination for search
+  //   size: 10000, // Omit pagination for search
+  // });
+
+  // useEffect(() => {
+  //   const handler = setTimeout(() => {
+  //     setDebouncedSearchTerm(searchTerm);
+  //   }, 300); // 300ms delay
+  //   return () => clearTimeout(handler);
+  // }, [searchTerm]);
+
  const {
    data: investorDetails,
    isLoading: investorDetailsLoading,
    refetch,
-  } = useGetUnbanInvestorQuery({
-    page: currentPage, // Omit pagination for search
-    size: 10000, // Omit pagination for search
-  });
+  } = useGetUnbanInvestorQuery(
+    {
+      page: currentPage, // Omit pagination for search
+      size: 10000, // Omit pagination for search
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+      country_xid: country,
+      KYCStatus: kyc,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );

  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
@@ -127,7 +157,7 @@ const EmailNotification = () => {
          py={0.5}
          variant={"ghost"}
        >
-          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Badge>
      </Box>
    ),
@@ -270,7 +300,65 @@ const EmailNotification = () => {


      </FormControl>
-
+      <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 className="col" justifyContent={"end"}>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setCountry(e.target.value)}
+              value={country}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Country
+              </option>
+              <option value="">All</option>
+              <option value="1">Bahrain</option>
+              <option value="2">Kuwait</option>
+              <option value="3">Oman</option>
+              <option value="4">Qatar</option>
+              <option value="5">Saudi arabia</option>
+              <option value="6">United arab emirates</option>
+            </Select>
+            <Select
+              w={250}
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setKyc(e.target.value)}
+              value={kyc}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                KYC Status
+              </option>
+              <option value="">KYC Status</option>
+              <option value="0">Not Completed</option>
+              <option value="1">Completed</option>
+            </Select>
+          </HStack>
+        </HStack>
      <Box overflow={'scroll'} h={'58vh'}>
      <NormalTable
        centered={true}
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -278,7 +278,7 @@ const InvestorDetails = () => {
          pb={4}
          pt={4}
          spacing="24px"
-        >
+      > 
          <Input
            mt={1}
            type="search"