feat : logout popup

wip : Resend button and timer

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

@@ -8,6 +8,7 @@ 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,6 +435,7 @@ export default function SendToBeneficiaryOwn() {
                             </Group>
                             <Group grow>
                                 {showOtpField && (
+                                    
                                     <TextInput
                                         label="OTP"
                                         placeholder="Enter OTP"
@@ -423,6 +446,23 @@ export default function SendToBeneficiaryOwn() {
                                         disabled={showTxnPassword}
                                     />
                                 )}
+                                {!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}
+                                            />
+                                        )
+                                    )
+                                )}
                                 {showTxnPassword && (
                                     <TextInput
                                         label="Transaction Password"