feat : In home page "get statement" worked.

feat : After 5 minutes session timeout automatically. feat: realtime otp feature up
2025-10-09 14:22:39 +05:30
parent 75a4e9199b
commit 8a194a5855
17 changed files with 326 additions and 139 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -6,23 +6,28 @@
 - >Taking Url and try to login -Logout

 ### Feature
- Password Expiry Logic
-    - login -> check password Expiry -> Change password -> login screen
+- >Password Expiry Logic
+    - >login -> check password Expiry -> Change password -> login screen
 - >Logout popup :
   - >Are you sure want to logout?
 - >Home page password Expiry message
 - Set userId and login with userID
- Limit of transaction daily
+- Limit of transaction daily  --Asif
 - >Statement Download
 - >In Every OTP page "Resend button" & 3 min timing of expiry.
 - OTP binding with actual mobile number.
+- Beneficiary delete feature
 - IN settings page NOTE position Fixing.
 - >Admin page 
   - >give rights
   - >view rights 
 - Forget Password
- >For Migration if user not have password
+<!-- - >For Migration if user not have password -->
 - E-mandate
- Make every page responsive
+<!-- - Make every page responsive (need to check settings and payment tab) -->
+- Locked (3 times wrong password in time of login)
+- >session timeout
+- login time otp
+<!-- - narration   (in statement) Last 10 transaction the remarks not comes from subham sites-->


--- a/src/app/(main)/accounts/account_statement/accountStatement.tsx
+++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx
@@ -49,7 +49,7 @@ export default function AccountStatementPage() {
                    .then(res => res.json())
                    .then(data => {
                        if (Array.isArray(data)) {
-                            const last5 = data.slice(0, 5);
+                            const last5 = data.slice(0, 10);
                            setTransactions(last5);
                            // Reuse balance logic
                            const saved = sessionStorage.getItem("accountData");
@@ -247,7 +247,7 @@ export default function AccountStatementPage() {

                    {(!startDate && !endDate && transactions.length > 0) && (
                        <Text fs="italic" c="#228be6" ta="center">
-                            Last 5 Transactions
+                            Last 10 Transactions
                        </Text>
                    )}
                    <ScrollArea style={{ flex: 1 }}>
@@ -290,12 +290,12 @@ export default function AccountStatementPage() {
                            // ✅ Desktop View – Table Layout
                            <Table style={{ borderCollapse: "collapse", width: "100%" }}>
                                <thead style={{ backgroundColor: "#3385ff" }}>
-                                    <tr>
-                                        <th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Name</th>
+                                    {/* <tr>
+                                        <th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Narration</th>
                                        <th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Date</th>
                                        <th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Amount (₹)</th>
                                        <th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Balance (₹)</th>
-                                    </tr>
+                                    </tr> */}
                                </thead>
                                <tbody>
                                    {transactions.map((txn, i) => (
--- a/src/app/(main)/accounts/page.tsx
+++ b/src/app/(main)/accounts/page.tsx
@@ -32,7 +32,7 @@ export default function AccountSummary() {
      const data = await response.json();
      if (response.ok && Array.isArray(data)) {
        setAccountData(data);
-        sessionStorage.setItem("accountData", JSON.stringify(data));
+        // sessionStorage.setItem("accountData", JSON.stringify(data));
      }
    } catch {
      notifications.show({
--- a/src/app/(main)/funds_transfer/page.tsx
+++ b/src/app/(main)/funds_transfer/page.tsx
@@ -249,7 +249,7 @@ export default function QuickPay() {
          toAccount: beneficiaryAcc,
          toAccountType: beneficiaryType,
          amount: amount,
-          narration: remarks,
+          remarks: remarks,
          tpassword: txnPassword,
        }),
      });
--- a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx
+++ b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx
@@ -1,14 +1,15 @@
 "use client";

-import React, { useEffect, useRef, useState } from "react";
-import { Button, Center, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title, Box, PasswordInput } from "@mantine/core";
+import React, { useEffect, useState } from "react";
+import { Button, Group, Modal, Paper, Radio, Select, Stack, Text, TextInput, Title, PasswordInput } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
-import { generateOTP } from '@/app/OTPGenerator';
 import SendToBeneficiaryOthers from "./sendBeneficiaryOthers";
 import Image from "next/image";
 import img from '@/app/image/logo1.jpg';
 import { IconRefresh } from "@tabler/icons-react";
+import { sendOtp, verifyOtp } from '@/app/_util/otp';
+

 interface accountData {
    stAccountNo: string;
@@ -36,25 +37,48 @@ export default function SendToBeneficiaryOwn() {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [showOtpField, setShowOtpField] = useState(false);
    const [otp, setOtp] = useState("");
-    const [generateOtp, setGenerateOtp] = useState("");
-
    const [countdown, setCountdown] = useState(180);
    const [timerActive, setTimerActive] = useState(false);

-    async function handleGenerateOtp() {
-        // const value = await generateOTP(6);
-        const value = "123456";
-        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: 'IMPS' });
+            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;
+        }
+    }
+
    const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
    const accountOptions = accountData.map((acc) => ({
        value: acc.stAccountNo,
        label: `${acc.stAccountNo} (${acc.stAccountType})`,
    }));
-
    const FetchBeneficiaryDetails = async () => {
        try {
            const token = localStorage.getItem("access_token");
@@ -66,7 +90,7 @@ export default function SendToBeneficiaryOwn() {
                },
            });
            const data = await response.json();
-            console.log(data);
+            // console.log(data);
            if (response.ok && Array.isArray(data)) {
                setBeneficiaryData(data);
            } else {
@@ -195,21 +219,27 @@ export default function SendToBeneficiaryOwn() {
            setIsVisibilityLocked(true);
            return;
        }
+        if (showOtpField && !showTxnPassword) {
+            if (!otp) {
+                notifications.show({
+                    title: "Error",
+                    message: "Please enter the OTP",
+                    color: "red",
+                });
+                return;
+            }

-        if (!otp) {
-            notifications.show({
-                title: "Enter OTP",
-                message: "Please enter the OTP",
-                color: "red",
-            });
-            return;
-        }
-        if (otp !== generateOtp) {
-            notifications.show({
-                title: "Invalid OTP",
-                message: "The OTP entered does not match",
-                color: "red",
-            });
+            const verified = await handleVerifyOtp();
+            if (!verified) {
+                notifications.show({
+                    title: "Invalid OTP",
+                    message: "The OTP entered does not match",
+                    color: "red",
+                });
+                return;
+            }
+            // If OTP verified successfully → show transaction password field
+            setShowTxnPassword(true);
            return;
        }

@@ -241,7 +271,7 @@ export default function SendToBeneficiaryOwn() {
                    toAccount: beneficiaryAcc,
                    toAccountType: beneficiaryType,
                    amount: amount,
-                    narration: remarks,
+                    remarks: remarks,
                    tpassword: txnPassword,
                }),
            });
@@ -325,7 +355,7 @@ export default function SendToBeneficiaryOwn() {
                        color="blue"
                        onClick={async () => {
                            setConfirmModel(false);
-                            const otp = await handleGenerateOtp();
+                            const otp = await handleSendOtp();
                            setShowOtpField(true);
                            notifications.show({
                                title: "OTP Sent",
@@ -459,7 +489,7 @@ export default function SendToBeneficiaryOwn() {
                                                    <IconRefresh
                                                        size={22}
                                                        style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                                                        onClick={handleGenerateOtp}
+                                                        onClick={handleSendOtp}
                                                    />
                                                )
                                            )}
--- a/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
+++ b/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
@@ -4,10 +4,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { Button, Center, Divider, Group, List, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
-import { generateOTP } from '@/app/OTPGenerator';
 import { IconAlertTriangle, 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 {
@@ -38,16 +38,57 @@ export default function SendToBeneficiaryOthers() {
    const [otp, setOtp] = useState("");
    const [countdown, setCountdown] = useState(180);
    const [timerActive, setTimerActive] = useState(false);
-    const [generateOtp, setGenerateOtp] = useState("");

-    async function handleGenerateOtp() {
-        // const value = await generateOTP(6);
-        const value = "123456";
-        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 {
+            if (paymentMode === "IMPS") { await sendOtp({ type: 'IMPS' }); }
+            if (paymentMode === "RTGS") {
+                await sendOtp(
+                    {
+                        type: 'RTGS',
+                        amount: amount ? Number(amount) : undefined,
+                        beneficiary: beneficiaryName || undefined
+                    });
+            }
+            if (paymentMode === "NEFT") {
+                await sendOtp(
+                    {
+                        type: 'NEFT',
+                        amount: amount ? Number(amount) : undefined,
+                        beneficiary: beneficiaryName || undefined
+                    });
+            }
+            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;
+        }
+    }
+
    const getAmountError = () => {
        if (!amount || !selectedAccount) return null;
        const amt = Number(amount);
@@ -78,7 +119,7 @@ export default function SendToBeneficiaryOthers() {
                },
            });
            const data = await response.json();
-            console.log(data);
+            // console.log(data);
            if (response.ok && Array.isArray(data)) {
                setBeneficiaryData(data);
            } else {
@@ -216,20 +257,43 @@ export default function SendToBeneficiaryOthers() {
            return;
        }

-        if (!otp) {
-            notifications.show({
-                title: "Enter OTP",
-                message: "Please enter the OTP",
-                color: "red",
-            });
-            return;
-        }
-        if (otp !== generateOtp) {
-            notifications.show({
-                title: "Invalid OTP",
-                message: "The OTP entered does not match",
-                color: "red",
-            });
+        // if (!otp) {
+        //     notifications.show({
+        //         title: "Enter OTP",
+        //         message: "Please enter the OTP",
+        //         color: "red",
+        //     });
+        //     return;
+        // }
+        // if (otp !== generateOtp) {
+        //     notifications.show({
+        //         title: "Invalid OTP",
+        //         message: "The OTP entered does not match",
+        //         color: "red",
+        //     });
+        //     return;
+        // }
+        if (showOtpField && !showTxnPassword) {
+            if (!otp) {
+                notifications.show({
+                    title: "Error",
+                    message: "Please enter the OTP",
+                    color: "red",
+                });
+                return;
+            }
+
+            const verified = await handleVerifyOtp();
+            if (!verified) {
+                notifications.show({
+                    title: "Invalid OTP",
+                    message: "The OTP entered does not match",
+                    color: "red",
+                });
+                return;
+            }
+            // If OTP verified successfully → show transaction password field
+            setShowTxnPassword(true);
            return;
        }

@@ -271,7 +335,8 @@ export default function SendToBeneficiaryOthers() {
                    amount: amount,
                    beneficiaryName: beneficiaryName,
                    remitterName: remitter_name,
-                    tpassword: txnPassword
+                    tpassword: txnPassword,
+                    remarks: remarks
                }),
            });
            const result = await res.json();
@@ -321,59 +386,6 @@ export default function SendToBeneficiaryOthers() {

    return (
        <>
-            {/* <Modal
-                opened={showIntroModal}
-                onClose={() => setShowIntroModal(false)}
-                centered
-                withCloseButton={false} // force them to press OK
-            >
-                <Stack gap={1}>
-                    <Title order={4} style={{ textAlign: "center" }}>Important Note</Title>
-                    <Text size="sm">• <strong>IMPS</strong> is available 24X7. Limit: up to ₹5,00,000. Money is transfer instantly.</Text>
-                    <Text size="sm">• <strong>NEFT</strong> is available 24x7. Can be used for any amount but not instant.</Text>
-                    <Text size="sm">• <strong>RTGS</strong> is for ₹2,00,000 and above. Available during banking hours.As per directions of RBI, RTGS transactions are subjected to the following{" "}
-                        <strong>Time Varying Tariff</strong> in addition to the existing <strong>RTGS</strong>
-                        Commission. The tariff will be calculated based on the time of completion
-                        of transaction.</Text>
-                    <List
-                        spacing="xs"
-                        size="sm"
-                        icon={
-                            <ThemeIcon color="red" size={20} radius="xl">
-                                <IconAlertTriangle size={14} />
-                            </ThemeIcon>
-                        }
-                    >
-                        <List.Item>
-                            From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
-                            <strong>₹0.00</strong>
-                        </List.Item>
-                        <List.Item>
-                            After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
-                            <strong>₹1.00</strong>
-                        </List.Item>
-                        <List.Item>
-                            After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
-                        </List.Item>
-                    </List>
-                    <Divider my="sm" variant="dashed" />
-                    <Text size="xs" c="blue">
-                        • Minimum Transfer Amount on this Day is Rs. 1.00
-                    </Text>
-                    <Text size="xs" c="blue">
-                        • Maximum Transfer Limit per Day is Rs. 500000.00
-                    </Text>
-                    <Text size="xs" c="blue">
-                        • Available Transfer Amount on this Day is Rs. 500000.00
-                    </Text>
-                    <Group justify="flex-end" mt="md">
-                        <Button color="blue" onClick={() => setShowIntroModal(false)}>
-                            Okay
-                        </Button>
-                    </Group>
-                </Stack>
-            </Modal> */}
-
            <Modal
                opened={showIntroModal}
                onClose={() => setShowIntroModal(false)}
@@ -456,9 +468,6 @@ export default function SendToBeneficiaryOthers() {
                </Stack>
            </Modal>

-
-
-
            <Modal
                opened={showConfirmModel}
                onClose={() => setConfirmModel(false)}
@@ -491,7 +500,7 @@ export default function SendToBeneficiaryOthers() {
                        color="blue"
                        onClick={async () => {
                            setConfirmModel(false);
-                            const otp = await handleGenerateOtp();
+                            const otp = await handleSendOtp();
                            setShowOtpField(true);
                            notifications.show({
                                title: "OTP Sent",
@@ -505,6 +514,7 @@ export default function SendToBeneficiaryOthers() {
                    </Button>
                </Group>
            </Modal>
+
            {/* main content */}
            {!showIntroModal && (
                <div style={{ maxHeight: "290px", overflowY: "auto" }}>
@@ -625,7 +635,7 @@ export default function SendToBeneficiaryOthers() {
                                                <IconRefresh
                                                    size={22}
                                                    style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
-                                                    onClick={handleGenerateOtp}
+                                                    onClick={handleSendOtp}
                                                />
                                            )
                                        )}
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -71,6 +71,7 @@ export default function Home() {
            const data = await response.json();
            if (response.ok && Array.isArray(data)) {
                SetAccountData(data);
+                sessionStorage.setItem("accountData", JSON.stringify(data));
                if (data.length > 0) {
                    const firstDeposit = data.find(acc => acc.stAccountType !== "LN");
                    const firstLoan = data.find(acc => acc.stAccountType === "LN");
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState } from 'react';
-import { Box, Button, Divider, Group, Image, Popover, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Image, Modal, Popover, Stack, Text, Title } from '@mantine/core';
 import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter, usePathname } from "next/navigation";
@@ -17,6 +17,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
    const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
    const [custname, setCustname] = useState<string | null>(null);
    const isMobile = useMediaQuery("(max-width: 768px)");
+    const [sessionModal, setSessionModal] = useState(false);
+    const [countdown, setCountdown] = useState(30); // 30 sec countdown before auto logout

    const [opened, { open, close }] = useDisclosure(false);

@@ -80,6 +82,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
            });
        }
    }
+
+    // When reload and click on back then logout
    useEffect(() => {
        // Push fake history state to trap navigation
        window.history.pushState(null, "", window.location.href);
@@ -155,6 +159,58 @@ export default function RootLayout({ children }: { children: React.ReactNode })
        fetchLoginTime();
    }, []);

+    // LOGOUT AFTER 5 MINUTES OF INACTIVITY OR TAB SWITCH
+    useEffect(() => {
+        const INACTIVITY_LIMIT = 5 * 60 * 1000; // 5 minutes
+        let inactiveSince: number | null = null;
+        let countdownTimer: NodeJS.Timeout;
+
+        const startCountdown = () => {
+            setSessionModal(true);
+            setCountdown(30); // start from 30 seconds
+
+            countdownTimer = setInterval(() => {
+                setCountdown((prev) => {
+                    if (prev <= 1) {
+                        clearInterval(countdownTimer);
+                        doLogout(); // auto logout after countdown
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+        };
+
+        const handleVisibilityChange = () => {
+            if (document.hidden) {
+                // User switched tab → mark inactive time
+                inactiveSince = Date.now();
+            } else {
+                // User returned to tab
+                if (inactiveSince && Date.now() - inactiveSince >= INACTIVITY_LIMIT) {
+                    // Inactive for ≥ 5 min → show modal
+                    startCountdown();
+                }
+                inactiveSince = null; // reset inactiveSince
+            }
+        };
+
+        const handleUserActivity = () => {
+            // Reset inactivity timestamp if user interacts
+            inactiveSince = null;
+        };
+
+        const activityEvents = ["mousemove", "keydown", "click", "scroll", "touchstart"];
+        activityEvents.forEach((event) => window.addEventListener(event, handleUserActivity));
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+
+        return () => {
+            activityEvents.forEach((event) => window.removeEventListener(event, handleUserActivity));
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+            clearInterval(countdownTimer);
+        };
+    }, []);
+
    const navItems = [
        { href: "/home", label: "Home", icon: IconHome },
        { href: "/accounts", label: "Accounts", icon: IconBook },
@@ -274,6 +330,32 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                            >
                                {children}
                            </Box>
+                            {/* this model for session logout  */}
+                            <Modal
+                                opened={sessionModal}
+                                onClose={() => setSessionModal(false)}
+                                withCloseButton={false}
+                                centered
+                                closeOnClickOutside={false} // <--- prevents clicking outside to close
+                                closeOnEscape={false}       // <--- prevents ESC key
+                                title="Session Timeout Warning"
+                            >
+                                <Stack align="center" gap="md">
+                                    <Text ta="center" c="red">
+                                        You have been inactive for a while.
+                                        <br />
+                                        You’ll be logged out automatically in <b>{countdown}</b> seconds.
+                                    </Text>
+                                    <Group justify="center" mt="sm">
+                                        {/* <Button color="gray" variant="default" onClick={() => setSessionModal(false)}>
+                                            Stay Logged In
+                                        </Button> */}
+                                        <Button color="red" onClick={doLogout}>
+                                            Logout Now
+                                        </Button>
+                                    </Group>
+                                </Stack>
+                            </Modal>

                            <Divider size="xs" color="blue" />

--- a/src/app/(main)/settings/change_login_password/page.tsx
+++ b/src/app/(main)/settings/change_login_password/page.tsx
@@ -160,7 +160,7 @@ export default function ChangePassword() {
                    return;
                }
                const result = await response.json();
-                console.log(result);
+                // console.log(result);
                if (!response.ok) {
                    notifications.show({
                        title: "Failed",
--- a/src/app/(main)/settings/change_txn_password/page.tsx
+++ b/src/app/(main)/settings/change_txn_password/page.tsx
@@ -160,7 +160,7 @@ export default function ChangePassword() {
                    return;
                }
                const result = await response.json();
-                console.log(result);
+                // console.log(result);
                if (!response.ok) {
                    notifications.show({
                        title: "Failed",
--- a/src/app/ChangePassword/page.tsx
+++ b/src/app/ChangePassword/page.tsx
@@ -184,6 +184,7 @@ export default function ChangePassword() {
                        color: "red",
                        autoClose: false,
                    });
+                    resetForm();
                } else {
                    notifications.show({
                        title: "Success",
@@ -199,6 +200,7 @@ export default function ChangePassword() {
                    message: err.message || "Server error, please try again later",
                    color: "red",
                });
+                resetForm();
            }
        }
    };
--- a/src/app/ForgetPassword/page.tsx
+++ b/src/app/ForgetPassword/page.tsx
@@ -98,7 +98,7 @@ export default function ForgetLoginPwd() {
    });
    const data = await response.json();
    if (response.ok) {
-      console.log(data);
+      // console.log(data);
      notifications.show({
        withBorder: true,
        color: "green",
--- a/src/app/SetPassword/page.tsx
+++ b/src/app/SetPassword/page.tsx
@@ -136,7 +136,7 @@ export default function SetLoginPwd() {
    });
    const data = await response.json();
    if (response.ok) {
-      console.log(data);
+      // console.log(data);
      notifications.show({
        withBorder: true,
        color: "green",
--- a/src/app/SetTxn/page.tsx
+++ b/src/app/SetTxn/page.tsx
@@ -160,7 +160,7 @@ export default function SetTransactionPwd() {
        });
        const data = await response.json();
        if (response.ok) {
-            console.log(data);
+            // console.log(data);
            notifications.show({
                withBorder: true,
                color: "green",
--- a/src/app/_util/otp.ts
+++ b/src/app/_util/otp.ts
@@ -0,0 +1,60 @@
+import { notifications } from '@mantine/notifications';
+import axios from 'axios';
+
+interface SendOtpPayload {
+  mobileNumber?: string;
+  type: string;
+  amount?: number;
+  beneficiary?: string;
+  ifsc?: string;
+  acctFrom?: string;
+  acctTo?: string;
+  ref?: string;
+  date?: string;
+  userOtp?: string;
+}
+
+function getStoredMobileNumber(): string | null  {
+  // const mobileNumber = localStorage.getItem('remitter_mobile_no');
+  const mobileNumber= "7890544527";
+  if (!mobileNumber) {
+    notifications.show({
+      title: 'Missing Mobile Number',
+      message: 'Mobile number not found. Please re-login or update your profile.',
+      color: 'red',
+    });
+    return null;
+  }
+  return mobileNumber;
+}
+
+export async function sendOtp(payload: SendOtpPayload) {
+  try {
+    const mobileNumber = payload.mobileNumber || getStoredMobileNumber();
+    const response = await axios.post(
+      'http://localhost:8080/api/otp/send',
+      { ...payload, mobileNumber },
+      { headers: { 'Content-Type': 'application/json' } }
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error('Error sending OTP:', error.response?.data || error.message);
+    throw error.response?.data || error;
+  }
+}
+
+
+export async function verifyOtp(otp: string) {
+  try {
+    const mobileNumber = getStoredMobileNumber();
+    const response = await axios.post(
+      `http://localhost:8080/api/otp/verify?mobileNumber=${mobileNumber}`,
+      { otp },
+      { headers: { 'Content-Type': 'application/json' } }
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error('Error verifying OTP:', error.response?.data || error.message);
+    throw error.response?.data || error;
+  }
+}
--- a/src/app/eMandate/mandate_page/page.tsx
+++ b/src/app/eMandate/mandate_page/page.tsx
@@ -188,7 +188,7 @@ export default function MandatePage() {
                }),
            });
            const data = await response.json();
-            console.log(data)
+            // console.log(data)
            if (!response.ok) throw new Error("Failed to send OTP");

            notifications.show({
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -118,7 +118,7 @@ export default function Login() {
                }),
            });
            const data = await response.json();
-            console.log(data);
+            // console.log(data);
            if (data.error === "MIGRATED_USER_HAS_NO_PASSWORD") {
                //console.log("Migration issue detected → opening modal");
                setOpened(true);
@@ -141,10 +141,11 @@ export default function Login() {
            }
            setIsLogging(true);
            if (response.ok) {
-                console.log(data);
+                // console.log(data);
                const token = data.token;
                localStorage.setItem("access_token", token);
                localStorage.setItem("pswExpiryDate", data.loginPswExpiry);
+                // console.log("Expiry Date:",(dayjs(data.loginPswExpiry)).diff(dayjs(), "day"));

                // Password Expiry Logic todo
                if (data.loginPswExpiry && (dayjs(data.loginPswExpiry)).diff(dayjs(), "day") < 0) {
@@ -155,14 +156,10 @@ export default function Login() {
                        message: "Your password has expired, please set a new one.",
                        autoClose: 4000,
                    });
-
-
-
                    router.push("/ChangePassword");
                    return;
                }

-
                if (data.FirstTimeLogin === true) {
                    router.push("/SetPassword")
                }