feat : logout popup

wip : Resend button and timer

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,32 +457,35 @@ export default function QuickPay() {
             <Group grow>
               {showOtpField && (
                 <>
-                  <PasswordInput
-                    label="OTP"
-                    placeholder="Enter OTP"
-                    type="otp"
-                    value={otp}
-                    maxLength={6}
-                    onChange={(e) => setOtp(e.currentTarget.value)}
-                    withAsterisk
-                    disabled={showTxnPassword}
-                  />
-                  {!showTxnPassword && (
-                    timerActive ? (
-                      <Text size="xs" c="dimmed">
-                        Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
-                      </Text>
-                    ) : (
-                      <Button
-                        variant="subtle"
-                        px={8}
-                        onClick={handleGenerateOtp}
-                        leftSection={<IconRefresh size={16} />}
-                      >
-                        Resend
-                      </Button>
-                    )
-                  )}
+                  <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 && (