Merge branch 'dev' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/tomosa.sarkar/IB into dev

src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { TextInput, Button, Grid, Text, PasswordInput, Loader, Group, Select, Stack } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useRouter } from "next/navigation";
+import { IconRefresh } from '@tabler/icons-react';
 
 export default function AddBeneficiaryOthers() {
     const router = useRouter();
@@ -20,10 +21,46 @@ export default function AddBeneficiaryOthers() {
     const [generatedOtp, setGeneratedOtp] = useState('');
     const [otpSent, setOtpSent] = useState(false);
     const [otpVerified, setOtpVerified] = useState(false);
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     const [validationStatus, setValidationStatus] = useState<'success' | 'error' | null>(null);
     const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
     const [showPayeeAcc, setShowPayeeAcc] = useState(true);
     const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
+    const [generateOtp, setGenerateOtp] = useState("");
+
+    const handleGenerateOtp = async () => {
+        const value = "123456"; // Or call your API to generate OTP
+        setGeneratedOtp(value);
+
+        // start countdown at 180 seconds (3 minutes)
+        setCountdown(180);
+        setTimerActive(true);
+
+        return value;
+    };
+
+
+    // Countdown effect
+    useEffect(() => {
+        let interval: number | undefined;
+
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
+
 
     useEffect(() => {
         const token = localStorage.getItem("access_token");
@@ -76,11 +113,28 @@ export default function AddBeneficiaryOthers() {
         }
     }, [ifsccode]);
 
-    const handleGenerateOtp = async () => {
+
-        const value = "123456"; // Or generate a random OTP
+    // useEffect(() => {
-        setGeneratedOtp(value);
+    //     let interval: number | undefined;
-        return value;
+    //     if (timerActive && countdown > 0) {
-    };
+    //         interval = window.setInterval(() => {
+    //             setCountdown((prev) => prev - 1);
+    //         }, 1000);
+    //     }
+    //     if (countdown === 0) {
+    //         if (interval) clearInterval(interval);
+    //         setTimerActive(false);
+    //     }
+    //     return () => {
+    //         if (interval) clearInterval(interval);
+    //     };
+    // }, [timerActive, countdown]);
+
+    // const handleGenerateOtp = async () => {
+    //     const value = "123456"; // Or generate a random OTP
+    //     setGeneratedOtp(value);
+    //     return value;
+    // };
 
     const validateAndSendOtp = async () => {
         if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo || !beneficiaryType) {
@@ -398,9 +452,26 @@ export default function AddBeneficiaryOthers() {
                             value={otp}
                             onChange={(e) => setOtp(e.currentTarget.value)}
                             maxLength={6}
-                            disabled={otpVerified} //Disable after verified
+                            disabled={otpVerified}
                             withAsterisk
+                             style={{ flex: 1 }}
                         />
+
+                        {!otpVerified && (
+                            timerActive ? (
+                                <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                    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={handleGenerateOtp}
+                                />
+                            )
+                        )}
                     </Grid.Col >
                     <Grid.Col >
                         {!otpVerified ? (

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

@@ -37,7 +37,7 @@ export default function QuickPay() {
   const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
   const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
   const [showOtpField, setShowOtpField] = useState(false);
-  const [countdown, setCountdown] = useState(60);
+  const [countdown, setCountdown] = useState(180);
   const [timerActive, setTimerActive] = useState(false);
   const [otp, setOtp] = useState("");
   const [generateOtp, setGenerateOtp] = useState("");
@@ -46,7 +46,7 @@ export default function QuickPay() {
     // const value = await generateOTP(6);
     const value = "123456";
     setGenerateOtp(value);
-    setCountdown(60);
+    setCountdown(180);
     setTimerActive(true);
     return value;
   }
@@ -457,6 +457,7 @@ export default function QuickPay() {
             <Group grow>
               {showOtpField && (
                 <>
+                  <Group gap="xs" align="flex-end">
                     <PasswordInput
                       label="OTP"
                       placeholder="Enter OTP"
@@ -466,23 +467,25 @@ export default function QuickPay() {
                       onChange={(e) => setOtp(e.currentTarget.value)}
                       withAsterisk
                       disabled={showTxnPassword}
+                      style={{ flex: 1 }}
                     />
                     {!showTxnPassword && (
                       timerActive ? (
-                      <Text size="xs" c="dimmed">
+                        <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
-                        Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
+                          Resend OTP will be enabled in{" "}
+                          {String(Math.floor(countdown / 60)).padStart(2, "0")}:
+                          {String(countdown % 60).padStart(2, "0")}
                         </Text>
                       ) : (
-                      <Button
+                        <IconRefresh
-                        variant="subtle"
+                          size={22}
-                        px={8}
+                          style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
                           onClick={handleGenerateOtp}
-                        leftSection={<IconRefresh size={16} />}
+                        />
-                      >
-                        Resend
-                      </Button>
                       )
                     )}
+
+                  </Group>
                 </>
               )}
               {showTxnPassword && (

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

@@ -1,13 +1,14 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Center, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title, Box } from "@mantine/core";
+import { Button, Center, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title, Box, 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";
 
 interface accountData {
     stAccountNo: string;
@@ -37,10 +38,15 @@ export default function SendToBeneficiaryOwn() {
     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;
     }
     const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
@@ -122,6 +128,22 @@ export default function SendToBeneficiaryOwn() {
         }
     }, [authorized]);
 
+    useEffect(() => {
+        let interval: number | undefined;
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
     const benAccountOption = beneficiaryData
         .filter((ben) =>
             bankType === "own" ? ben.ifscCode?.startsWith("KACE") : true
@@ -413,16 +435,39 @@ export default function SendToBeneficiaryOwn() {
                             </Group>
                             <Group grow>
                                 {showOtpField && (
-                                    <TextInput
+                                    <>
+                                        <Group gap="xs" align="flex-end">
+                                            <PasswordInput
                                                 label="OTP"
                                                 placeholder="Enter OTP"
                                                 type="otp"
                                                 value={otp}
+                                                maxLength={6}
                                                 onChange={(e) => setOtp(e.currentTarget.value)}
                                                 withAsterisk
                                                 disabled={showTxnPassword}
+                                                style={{ flex: 1 }}
                                             />
+                                            {!showTxnPassword && (
+                                                timerActive ? (
+                                                    <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                                        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={handleGenerateOtp}
+                                                    />
+                                                )
                                             )}
+
+                                        </Group>
+                                    </>
+                                )}
+
                                 {showTxnPassword && (
                                     <TextInput
                                         label="Transaction Password"

src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Center, Divider, Group, List, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
+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 } from "@tabler/icons-react";
+import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
 import Image from "next/image";
 import img from '@/app/image/logo1.jpg'
 
@@ -36,12 +36,16 @@ export default function SendToBeneficiaryOthers() {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [showOtpField, setShowOtpField] = useState(false);
     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;
     }
     const getAmountError = () => {
@@ -164,6 +168,22 @@ export default function SendToBeneficiaryOthers() {
         }
     }, [authorized]);
 
+    useEffect(() => {
+        let interval: number | undefined;
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
     async function handleProceed() {
         if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryIFSC || !paymentMode || !amount || !remarks) {
             notifications.show({
@@ -581,15 +601,37 @@ export default function SendToBeneficiaryOthers() {
                         </Group>
                         <Group grow>
                             {showOtpField && (
-                                <TextInput
+                                <>
+                                    <Group gap="xs" align="flex-end">
+                                        <PasswordInput
                                             label="OTP"
                                             placeholder="Enter OTP"
                                             type="otp"
                                             value={otp}
+                                            maxLength={6}
                                             onChange={(e) => setOtp(e.currentTarget.value)}
                                             withAsterisk
                                             disabled={showTxnPassword}
+                                            style={{ flex: 1 }}
                                         />
+                                        {!showTxnPassword && (
+                                            timerActive ? (
+                                                <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                                    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={handleGenerateOtp}
+                                                />
+                                            )
+                                        )}
+
+                                    </Group>
+                                </>
                             )}
                             {showTxnPassword && (
                                 <TextInput

src/app/(main)/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState } from 'react';
-import { Box, Button, Divider, Group, Image, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Image, 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";
@@ -8,6 +8,10 @@ import { Providers } from '../providers';
 import logo from '@/app/image/logo1.jpg';
 import NextImage from 'next/image';
 import { notifications } from '@mantine/notifications';
+import { useDisclosure } from '@mantine/hooks';
+import { Dialog } from '@mantine/core';
+
+
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     const router = useRouter();
@@ -16,6 +20,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
     const [custname, setCustname] = useState<string | null>(null);
 
+
+    const [opened, { open, close }] = useDisclosure(false);
+
     function doLogout() {
         localStorage.removeItem("access_token");
         sessionStorage.removeItem("access_token");
@@ -241,9 +248,45 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                                             </Link>
                                         );
                                     })}
-                                    <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
+                                    {/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
+                                        Logout
+                                    </Button> */}
+                                    <Popover
+                                        opened={opened}
+                                        onChange={close}
+                                        position="bottom-end"   // 👈 Logout button ke niche right align
+                                        withArrow
+                                        shadow="md"
+                                    >
+                                        <Popover.Target>
+                                            <Button
+                                                leftSection={<IconLogout size={20} />}
+                                                variant="subtle"
+                                                onClick={open}
+                                            >
                                                 Logout
                                             </Button>
+                                        </Popover.Target>
+
+                                        <Popover.Dropdown>
+                                            <Text size="sm" mb="sm">
+                                                Are you sure you want to logout?
+                                            </Text>
+                                            <Group justify="flex-end" gap="sm">
+                                                <Button variant="default" onClick={close}>
+                                                    Cancel
+                                                </Button>
+                                                <Button color="red" onClick={handleLogout}>
+                                                    Logout
+                                                </Button>
+                                            </Group>
+                                        </Popover.Dropdown>
+                                    </Popover>
+
+
+
+
+
                                 </Group>
                             </div>
 

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

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconLock } from "@tabler/icons-react";
+import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
 
@@ -17,6 +17,8 @@ export default function ChangePassword() {
     const [otp, setOtp] = useState("");
     const [generatedOtp, setGeneratedOtp] = useState('');
     const [otpValidated, setOtpValidated] = useState(false);
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     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} />;
@@ -24,6 +26,8 @@ export default function ChangePassword() {
     const handleGenerateOtp = async () => {
         const value = "123456"; // Or generate a random OTP
         setGeneratedOtp(value);
+        setCountdown(180);
+        setTimerActive(true);
         return value;
     };
 
@@ -31,6 +35,23 @@ export default function ChangePassword() {
         regenerateCaptcha();
     }, []);
 
+    useEffect(() => {
+        let interval: number | undefined;
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
+
     const regenerateCaptcha = async () => {
         const newCaptcha = await generateCaptcha();
         setCaptcha(newCaptcha);
@@ -263,18 +284,42 @@ export default function ChangePassword() {
                         />
                     </div>
                 </div>
+                <Group grow>
                     {step !== "form" && (
+                        <>
+                            <Group gap="xs" align="flex-end">
                                 <PasswordInput
-                        label="Enter OTP"
+                                    label="OTP"
-                        placeholder="Enter 6-digit OTP"
+                                    placeholder="Enter OTP"
+                                    type="otp"
                                     value={otp}
+                                    maxLength={6}
                                     onChange={(e) => setOtp(e.currentTarget.value)}
                                     withAsterisk
-                        mt="sm"
+                                    disabled={otpValidated}
-                        maxLength={6}
+                                    style={{ flex: 1 }}
-                        readOnly={otpValidated}
                                 />
+                                {!otpValidated && (
+                                    timerActive ? (
+                                        <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                            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={handleGenerateOtp}
+                                        />
+                                    )
                                 )}
+
+                            </Group>
+                        </>
+                    )}
+                </Group>
+
                 <Group mt="md" gap="sm">
                     <Button onClick={handleSubmit}>
                         {step === "form" && "Submit"}

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

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconLock } from "@tabler/icons-react";
+import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
 
@@ -15,6 +15,8 @@ export default function ChangePassword() {
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState("");
     const [otp, setOtp] = useState("");
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     const [generatedOtp, setGeneratedOtp] = useState('');
     const [otpValidated, setOtpValidated] = useState(false);
     const [step, setStep] = useState<"form" | "otp" | "final">("form");
@@ -23,6 +25,8 @@ export default function ChangePassword() {
     const handleGenerateOtp = async () => {
         const value = "123456"; // Or generate a random OTP
         setGeneratedOtp(value);
+        setCountdown(180);
+        setTimerActive(true);
         return value;
     };
 
@@ -30,6 +34,22 @@ export default function ChangePassword() {
         regenerateCaptcha();
     }, []);
 
+    useEffect(() => {
+        let interval: number | undefined;
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
     const regenerateCaptcha = async () => {
         const newCaptcha = await generateCaptcha();
         setCaptcha(newCaptcha);
@@ -79,7 +99,7 @@ export default function ChangePassword() {
                 return;
             }
 
-            // ✅ Passed → move to OTP
+            // Passed → move to OTP
             await handleGenerateOtp();
             setStep("otp");
             notifications.show({
@@ -263,18 +283,41 @@ export default function ChangePassword() {
                         />
                     </div>
                 </div>
+                <Group grow>
                     {step !== "form" && (
+                        <>
+                            <Group gap="xs" align="flex-end">
                                 <PasswordInput
-                        label="Enter OTP"
+                                    label="OTP"
-                        placeholder="Enter 6-digit OTP"
+                                    placeholder="Enter OTP"
+                                    type="otp"
                                     value={otp}
+                                    maxLength={6}
                                     onChange={(e) => setOtp(e.currentTarget.value)}
                                     withAsterisk
-                        mt="sm"
+                                    disabled={otpValidated}
-                        maxLength={6}
+                                    style={{ flex: 1 }}
-                        readOnly={otpValidated}
                                 />
+                                {!otpValidated && (
+                                    timerActive ? (
+                                        <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                            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={handleGenerateOtp}
+                                        />
+                                    )
                                 )}
+
+                            </Group>
+                        </>
+                    )}
+                </Group>
                 <Group mt="md" gap="sm">
                     <Button onClick={handleSubmit}>
                         {step === "form" && "Submit"}

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

@@ -11,7 +11,7 @@ import {
     Text
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconLock } from "@tabler/icons-react";
+import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
 
@@ -22,19 +22,21 @@ export default function ChangePassword() {
     const [captchaInput, setCaptchaInput] = useState("");
     const [otp, setOtp] = useState("");
     const [otpValidated, setOtpValidated] = useState(false);
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     const [step, setStep] = useState<"form" | "otp" | "final">("form");
-
+    const [generatedOtp, setGeneratedOtp] = useState('');
     const router = useRouter();
-    const [passwordHistory] = useState([
+
-        "Pass@1234",
-        "OldPass@123",
-        "MyPass#2023",
-    ]);
     const icon = <IconLock size={18} stroke={1.5} />;
 
-    useEffect(() => {
+    const handleGenerateOtp = async () => {
-        regenerateCaptcha();
+        const value = "123456"; // Or generate a random OTP
-    }, []);
+        setGeneratedOtp(value);
+        setCountdown(180);
+        setTimerActive(true);
+        return value;
+    };
 
     const regenerateCaptcha = async () => {
         const newCaptcha = await generateCaptcha();
@@ -42,6 +44,26 @@ export default function ChangePassword() {
         setCaptchaInput("");
     };
 
+    useEffect(() => {
+        let interval: number | undefined;
+        if (timerActive && countdown > 0) {
+            interval = window.setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            if (interval) clearInterval(interval);
+            setTimerActive(false);
+        }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [timerActive, countdown]);
+
+    useEffect(() => {
+        regenerateCaptcha();
+    }, []);
+
     const validatePasswordPolicy = (password: string) => {
         return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(
             password
@@ -70,15 +92,6 @@ export default function ChangePassword() {
                 return;
             }
 
-            if (passwordHistory.includes(newPassword)) {
-                notifications.show({
-                    title: "Password Reused",
-                    message: "New password must be different from the last 3 passwords.",
-                    color: "red",
-                });
-                return;
-            }
-
             if (newPassword !== confirmPassword) {
                 notifications.show({
                     title: "Password Mismatch",
@@ -97,8 +110,8 @@ export default function ChangePassword() {
                 regenerateCaptcha();
                 return;
             }
-
             //  Passed → move to OTP step
+            await handleGenerateOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -107,10 +120,9 @@ export default function ChangePassword() {
             });
             return;
         }
-
         // Step 2 → validate OTP
         if (step === "otp") {
-            if (otp !== "123456") {
+            if (otp !== generatedOtp) {
                 notifications.show({
                     title: "Invalid OTP",
                     message: "Please enter the correct OTP.",
@@ -128,7 +140,6 @@ export default function ChangePassword() {
             });
             return;
         }
-
         // Step 3 → Final API call to set transaction password
         if (step === "final") {
             const token = localStorage.getItem("access_token");
@@ -273,18 +284,43 @@ export default function ChangePassword() {
                     </div>
                 </div>
 
+                <Group grow>
                     {step !== "form" && (
+                        <>
+                            <Group gap="xs" align="flex-end">
                                 <PasswordInput
-                        label="Enter OTP"
+                                    label="OTP"
-                        placeholder="Enter 6-digit OTP"
+                                    placeholder="Enter OTP"
+                                    type="otp"
                                     value={otp}
+                                    maxLength={6}
                                     onChange={(e) => setOtp(e.currentTarget.value)}
                                     withAsterisk
-                        mt="sm"
+                                    disabled={otpValidated}
-                        maxLength={6}
+                                    style={{ flex: 1 }}
-                        readOnly={otpValidated}
                                 />
+                                {!otpValidated && (
+                                    timerActive ? (
+                                        <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                            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={handleGenerateOtp}
+                                        />
+                                    )
                                 )}
+
+                            </Group>
+                        </>
+                    )}
+                </Group>
+
+
             </div>
 
             <Group mt="md" gap="sm">