feat: call the OTP Url in "send money","settings"

src/app/(main)/funds_transfer/page.tsx

@@ -9,6 +9,7 @@ import OutsideQuickPay from "./outside_quick_pay";
 import { IconRefresh } from "@tabler/icons-react";
 import Image from "next/image";
 import img from '@/app/image/logo1.jpg'
+import { sendOtp, verifyOtp } from "@/app/_util/otp";
 
 interface accountData {
   stAccountNo: string;
@@ -42,14 +43,52 @@ export default function QuickPay() {
   const [otp, setOtp] = useState("");
   const [generateOtp, setGenerateOtp] = useState("");
 
-  async function handleGenerateOtp() {
+  // async function handleGenerateOtp() {
-    // const value = await generateOTP(6);
+  //   // const value = await generateOTP(6);
-    const value = "123456";
+  //   const value = "123456";
-    setGenerateOtp(value);
+  //   setGenerateOtp(value);
+  //   setCountdown(180);
+  //   setTimerActive(true);
+  //   return value;
+  // }
+
+  async function handleSendOtp() {
+    const mobileNumber = localStorage.getItem('remitter_mobile_no');
+    if (!mobileNumber) {
+      notifications.show({
+        title: 'Error',
+        message: 'Mobile number not found.Contact to administrator',
+        color: 'red',
+      });
+      return;
+    }
+    try {
+      await sendOtp({ type: 'BENEFICIARY_DELETE' });
+      setShowOtpField(true);
       setCountdown(180);
       setTimerActive(true);
-    return value;
+    } catch (err: any) {
+      console.error('Send OTP failed', err);
+      notifications.show({
+        title: 'Error',
+        message: err.message || 'Send OTP failed.Please try again later.',
+        color: 'red',
+      });
     }
+  }
+
+  async function handleVerifyOtp() {
+    try {
+      await verifyOtp(otp);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+
+
+
 
   const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
   const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
@@ -335,7 +374,7 @@ export default function QuickPay() {
             color="blue"
             onClick={async () => {
               setConfirmModel(false);
-              const otp = await handleGenerateOtp();
+              const otp = await handleSendOtp();
               setShowOtpField(true);
               notifications.show({
                 title: "OTP Sent",
@@ -484,7 +523,7 @@ export default function QuickPay() {
                         <IconRefresh
                           size={22}
                           style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                          onClick={handleGenerateOtp}
+                          onClick={handleSendOtp}
                         />
                       )
                     )}

src/app/(main)/funds_transfer/view_beneficiary/page.tsx

@@ -6,10 +6,8 @@ import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { getBankLogo } from "@/app/_util/getBankLogo";
-import { IconTrash } from "@tabler/icons-react";
+import { IconRefresh, IconTrash } from "@tabler/icons-react";
-
+import { sendOtp, verifyOtp } from "@/app/_util/otp";
-
-
 
 
 interface Beneficiary {
@@ -31,6 +29,41 @@ export default function ViewBeneficiary() {
     const [otpStep, setOtpStep] = useState(false);
     const [otp, setOtp] = useState("");
     const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
+
+    async function handleSendOtp() {
+        const mobileNumber = localStorage.getItem('remitter_mobile_no');
+        if (!mobileNumber) {
+            notifications.show({
+                title: 'Error',
+                message: 'Mobile number not found.Contact to administrator',
+                color: 'red',
+            });
+            return;
+        }
+        try {
+            await sendOtp({ type: 'IMPS' }); // type will be "BENEFICIARY_DELETE"
+            setCountdown(180);
+            setTimerActive(true);
+        } catch (err: any) {
+            console.error('Send OTP failed', err);
+            notifications.show({
+                title: 'Error',
+                message: err.message || 'Send OTP failed.Please try again later.',
+                color: 'red',
+            });
+        }
+    }
+
+    async function handleVerifyOtp() {
+        try {
+            await verifyOtp(otp);
+            return true;
+        } catch {
+            return false;
+        }
+    }
 
     const openDeleteModal = (accountNo: string) => {
         setSelectedAccount(accountNo);
@@ -41,30 +74,15 @@ export default function ViewBeneficiary() {
 
 
     const handleModalConfirm = async () => {
+        if (!selectedAccount) return;
+
         try {
-            // const token = localStorage.getItem("access_token");
+            await handleSendOtp(); // send OTP to user's mobile
-
+            setOtpStep(true); // move modal to OTP input step
-            // // Generate OTP
-            // const otpResponse = await fetch("/api/otp/generate", {
-            //     method: "POST",
-            //     headers: { Authorization: `Bearer ${token}` },
-            // });
-            const  otpResponse ="123456";
-             
-            if (otpResponse !== otp) {
-                notifications.show({
-                    title: "Error",
-                    message: "Failed to generate OTP.",
-                    color: "red",
-                });
-                return;
-            }
-
-            setOtpStep(true); // move to OTP input step
         } catch (err) {
             notifications.show({
                 title: "Error",
-                message: "Something went wrong.",
+                message: "Failed to send OTP. Please try again.",
                 color: "red",
             });
         }
@@ -75,19 +93,8 @@ export default function ViewBeneficiary() {
         if (!otp || !selectedAccount) return;
 
         try {
-            const token = localStorage.getItem("access_token");
+            const isOtpValid = await handleVerifyOtp(); // verify OTP
-
+            if (!isOtpValid) {
-            // Verify OTP
-            const verify = await fetch("/api/otp/verify", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`,
-                },
-                body: JSON.stringify({ otp }),
-            });
-
-            if (!verify.ok) {
                 notifications.show({
                     title: "Invalid OTP",
                     message: "Please enter the correct OTP.",
@@ -96,7 +103,8 @@ export default function ViewBeneficiary() {
                 return;
             }
 
-            // Delete beneficiary
+            // OTP is valid → delete beneficiary
+            const token = localStorage.getItem("access_token");
             const res = await fetch(`/api/beneficiary/${selectedAccount}`, {
                 method: "DELETE",
                 headers: { Authorization: `Bearer ${token}` },
@@ -110,6 +118,8 @@ export default function ViewBeneficiary() {
                     color: "green",
                 });
                 setOpened(false);
+                setOtpStep(false);
+                setOtp("");
             } else {
                 notifications.show({
                     title: "Error",
@@ -126,6 +136,7 @@ export default function ViewBeneficiary() {
         }
     };
 
+
     useEffect(() => {
         const token = localStorage.getItem("access_token");
         if (!token) {
@@ -162,6 +173,23 @@ export default function ViewBeneficiary() {
         fetchBeneficiaries();
     }, []);
 
+    //new use effect
+    useEffect(() => {
+        let interval: NodeJS.Timeout | null = null;
+        if (timerActive && countdown > 0) {
+            interval = setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        } else if (countdown === 0) {
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
+
+
     if (loading) {
         return (
             <Center h="60vh">
@@ -260,6 +288,22 @@ export default function ViewBeneficiary() {
                                     onChange={(e) => setOtp(e.currentTarget.value)}
                                     placeholder="Enter OTP"
                                 />
+                                <Group justify="space-between" mt="xs">
+                                    {/* Resend OTP Timer or Icon */}
+                                    {timerActive ? (
+                                        <Text size="xs" c="dimmed" style={{ minWidth: "180px" }}>
+                                            Resend OTP will be enabled in{" "}
+                                            {String(Math.floor(countdown / 60)).padStart(2, "0")}:
+                                            {String(countdown % 60).padStart(2, "0")}
+                                        </Text>
+                                    ) : (
+                                        <IconRefresh
+                                            size={22}
+                                            style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
+                                            onClick={handleSendOtp}
+                                        />
+                                    )}
+                                </Group>
                                 <Group p="right" mt="md">
                                     <Button variant="default" onClick={() => setOpened(false)}>
                                         Cancel

src/app/(main)/settings/change_login_password/page.tsx

@@ -6,6 +6,7 @@ import { notifications } from "@mantine/notifications";
 import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
+import { sendOtp, verifyOtp } from "@/app/_util/otp";
 
 export default function ChangePassword() {
     const router = useRouter();
@@ -22,14 +23,53 @@ export default function ChangePassword() {
     const [step, setStep] = useState<"form" | "otp" | "final">("form");
     const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
     const icon = <IconLock size={18} stroke={1.5} />;
+    const [showOtpField, setShowOtpField] = useState(false);
 
-    const handleGenerateOtp = async () => {
+    // const handleGenerateOtp = async () => {
-        const value = "123456"; // Or generate a random OTP
+    //     const value = "123456"; // Or generate a random OTP
-        setGeneratedOtp(value);
+    //     setGeneratedOtp(value);
+    //     setCountdown(180);
+    //     setTimerActive(true);
+    //     return value;
+    // };
+
+    async function handleSendOtp() {
+        const mobileNumber = localStorage.getItem('remitter_mobile_no');
+        if (!mobileNumber) {
+            notifications.show({
+                title: 'Error',
+                message: 'Mobile number not found.Contact to administrator',
+                color: 'red',
+            });
+            return;
+        }
+        try {
+            await sendOtp({ type: 'CHANGE_LPWORD' });
+            setShowOtpField(true);
             setCountdown(180);
             setTimerActive(true);
-        return value;
+        } catch (err: any) {
-    };
+            console.error('Send OTP failed', err);
+            notifications.show({
+                title: 'Error',
+                message: err.message || 'Send OTP failed.Please try again later.',
+                color: 'red',
+            });
+        }
+    }
+
+    async function handleVerifyOtp() {
+        try {
+            await verifyOtp(otp);
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+
+
+
 
     useEffect(() => {
         regenerateCaptcha();
@@ -100,7 +140,7 @@ export default function ChangePassword() {
             }
 
             // Passed → move to OTP
-            await handleGenerateOtp();
+            await handleSendOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -310,7 +350,7 @@ export default function ChangePassword() {
                                         <IconRefresh
                                             size={22}
                                             style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                                            onClick={handleGenerateOtp}
+                                            onClick={handleSendOtp}
                                         />
                                     )
                                 )}

src/app/(main)/settings/change_txn_password/page.tsx

@@ -6,6 +6,7 @@ import { notifications } from "@mantine/notifications";
 import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
+import { sendOtp, verifyOtp } from "@/app/_util/otp";
 
 export default function ChangePassword() {
     const router = useRouter();
@@ -21,14 +22,52 @@ export default function ChangePassword() {
     const [otpValidated, setOtpValidated] = useState(false);
     const [step, setStep] = useState<"form" | "otp" | "final">("form");
     const icon = <IconLock size={18} stroke={1.5} />;
+    const [showOtpField, setShowOtpField] = useState(false);
 
-    const handleGenerateOtp = async () => {
+    // const handleGenerateOtp = async () => {
-        const value = "123456"; // Or generate a random OTP
+    //     const value = "123456"; // Or generate a random OTP
-        setGeneratedOtp(value);
+    //     setGeneratedOtp(value);
+    //     setCountdown(180);
+    //     setTimerActive(true);
+    //     return value;
+    // };
+
+
+
+    async function handleSendOtp() {
+        const mobileNumber = localStorage.getItem('remitter_mobile_no');
+        if (!mobileNumber) {
+            notifications.show({
+                title: 'Error',
+                message: 'Mobile number not found.Contact to administrator',
+                color: 'red',
+            });
+            return;
+        }
+        try {
+            await sendOtp({ type: 'CHANGE_TPWORD' });
+            setShowOtpField(true);
             setCountdown(180);
             setTimerActive(true);
-        return value;
+        } catch (err: any) {
-    };
+            console.error('Send OTP failed', err);
+            notifications.show({
+                title: 'Error',
+                message: err.message || 'Send OTP failed.Please try again later.',
+                color: 'red',
+            });
+        }
+    }
+
+    async function handleVerifyOtp() {
+        try {
+            await verifyOtp(otp);
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
 
     useEffect(() => {
         regenerateCaptcha();
@@ -100,7 +139,7 @@ export default function ChangePassword() {
             }
 
             // Passed → move to OTP
-            await handleGenerateOtp();
+            await handleSendOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -309,7 +348,7 @@ export default function ChangePassword() {
                                         <IconRefresh
                                             size={22}
                                             style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                                            onClick={handleGenerateOtp}
+                                            onClick={handleSendOtp}
                                         />
                                     )
                                 )}

src/app/(main)/settings/set_txn_password/page.tsx

@@ -14,6 +14,7 @@ import { notifications } from "@mantine/notifications";
 import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
+import { sendOtp, verifyOtp } from "@/app/_util/otp";
 
 export default function ChangePassword() {
     const [newPassword, setNewPassword] = useState("");
@@ -29,14 +30,50 @@ export default function ChangePassword() {
     const router = useRouter();
 
     const icon = <IconLock size={18} stroke={1.5} />;
+    const [showOtpField, setShowOtpField] = useState(false);
 
-    const handleGenerateOtp = async () => {
+    // const handleGenerateOtp = async () => {
-        const value = "123456"; // Or generate a random OTP
+    //     const value = "123456"; // Or generate a random OTP
-        setGeneratedOtp(value);
+    //     setGeneratedOtp(value);
+    //     setCountdown(180);
+    //     setTimerActive(true);
+    //     return value;
+    // };
+
+
+    async function handleSendOtp() {
+        const mobileNumber = localStorage.getItem('remitter_mobile_no');
+        if (!mobileNumber) {
+            notifications.show({
+                title: 'Error',
+                message: 'Mobile number not found.Contact to administrator',
+                color: 'red',
+            });
+            return;
+        }
+        try {
+            await sendOtp({ type: 'SET_TPWORD' });
+            setShowOtpField(true);
             setCountdown(180);
             setTimerActive(true);
-        return value;
+        } catch (err: any) {
-    };
+            console.error('Send OTP failed', err);
+            notifications.show({
+                title: 'Error',
+                message: err.message || 'Send OTP failed.Please try again later.',
+                color: 'red',
+            });
+        }
+    }
+
+    async function handleVerifyOtp() {
+        try {
+            await verifyOtp(otp);
+            return true;
+        } catch {
+            return false;
+        }
+    }
 
     const regenerateCaptcha = async () => {
         const newCaptcha = await generateCaptcha();
@@ -111,7 +148,7 @@ export default function ChangePassword() {
                 return;
             }
             //  Passed → move to OTP step
-            await handleGenerateOtp();
+            await handleSendOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -310,7 +347,7 @@ export default function ChangePassword() {
                                         <IconRefresh
                                             size={22}
                                             style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                                            onClick={handleGenerateOtp}
+                                            onClick={handleSendOtp}
                                         />
                                     )
                                 )}

src/app/SetPassword/page.tsx

@@ -10,6 +10,8 @@ import changePwdImage from '@/app/image/set_log_pass.jpg';
 import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
 import { generateCaptcha } from '@/app/captcha';
 import { generateOTP } from "../OTPGenerator";
+import { sendOtp, verifyOtp } from "../_util/otp";
+//const [showOtpField, setShowOtpField] = useState(false);
 
 export default function SetLoginPwd() {
   const router = useRouter();
@@ -24,15 +26,57 @@ export default function SetLoginPwd() {
   const [timerActive, setTimerActive] = useState(false);
   const icon = <IconLock size={18} stroke={1.5} />;
   const [generateOtp, setGenerateOtp] = useState("");
+  const [showOtpField, setShowOtpField] = useState(false);
 
-  async function handleGenerateOtp() {
+
-    // const value = await generateOTP(6);
+  // async function handleGenerateOtp() {
-    const value = "123456";
+  //   // const value = await generateOTP(6);
-    setGenerateOtp(value);
+  //   const value = "123456";
-    setCountdown(60);
+  //   setGenerateOtp(value);
-    setTimerActive(true);
+  //   setCountdown(60);
-    // return value;
+  //   setTimerActive(true);
+  //   // return value;
+  // }
+
+
+  async function handleSendOtp() {
+    const mobileNumber = localStorage.getItem('remitter_mobile_no');
+    if (!mobileNumber) {
+      notifications.show({
+        title: 'Error',
+        message: 'Mobile number not found.Contact to administrator',
+        color: 'red',
+      });
+      return;
     }
+    try {
+      await sendOtp({ type: 'CHANGE_LPWORD' });
+      setShowOtpField(true);
+      setCountdown(180);
+      setTimerActive(true);
+    } catch (err: any) {
+      console.error('Send OTP failed', err);
+      notifications.show({
+        title: 'Error',
+        message: err.message || 'Send OTP failed.Please try again later.',
+        color: 'red',
+      });
+    }
+  }
+
+  async function handleVerifyOtp() {
+    try {
+      await verifyOtp(otp);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+
+
+
+
   async function handleLogout(e: React.FormEvent) {
     e.preventDefault();
     localStorage.removeItem("access_token");
@@ -104,7 +148,7 @@ export default function SetLoginPwd() {
     }
     if (!captchaValidate) {
       setCaptchaValidate(true);
-      handleGenerateOtp();
+      handleSendOtp();
       return;
     }
     if (!otp) {
@@ -296,7 +340,7 @@ export default function SetLoginPwd() {
                             <Button
                               variant="subtle"
                               px={8}
-                              onClick={handleGenerateOtp}
+                              onClick={handleSendOtp}
                               leftSection={<IconRefresh size={16} />}
                             >
                               Resend

src/app/_util/otp.ts

@@ -16,7 +16,7 @@ interface SendOtpPayload {
 
 function getStoredMobileNumber(): string | null {
   // const mobileNumber = localStorage.getItem('remitter_mobile_no');
-  const mobileNumber= "7890544527";
+  const mobileNumber = "6297421727";
   if (!mobileNumber) {
     notifications.show({
       title: 'Missing Mobile Number',