From eae989642bcfc54f3ebb97b19ebcbfe21b6c903d Mon Sep 17 00:00:00 2001
From: "tomosa.sarkar" <tomosa.sarkar@tcs.com>
Date: Sat, 19 Jul 2025 16:38:11 +0530
Subject: [PATCH] feat : implement the quick pay screen

---
 .../(main)/accounts/account_details/page.tsx  | 179 ++++++++
 .../account_statement/accountStatement.tsx    |   1 -
 src/app/(main)/accounts/layout.tsx            |   1 +
 src/app/(main)/accounts/page.tsx              |  96 +++--
 src/app/(main)/funds_transfer/layout.tsx      |   7 +-
 src/app/(main)/funds_transfer/page.tsx        | 399 ++++++++++--------
 src/app/OTPGenerator.ts                       |  10 +
 7 files changed, 482 insertions(+), 211 deletions(-)
 create mode 100644 src/app/(main)/accounts/account_details/page.tsx
 create mode 100644 src/app/OTPGenerator.ts

diff --git a/src/app/(main)/accounts/account_details/page.tsx b/src/app/(main)/accounts/account_details/page.tsx
new file mode 100644
index 0000000..3116567
--- /dev/null
+++ b/src/app/(main)/accounts/account_details/page.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+    Group,
+    Paper,
+    Select,
+    Stack,
+    Text,
+    Title,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+
+interface accountData {
+    stAccountNo: string;
+    stAccountType: string;
+    stAvailableBalance: string;
+    custname: string;
+    stBookingNumber: string;
+    stApprovedAmount?: string; // optional for loan accounts
+}
+
+export default function AccountDetails() {
+    const router = useRouter();
+    const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]);
+    const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
+    const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [accountDetails, setAccountDetails] = useState<accountData | null>(null);
+    const searchParams = useSearchParams();
+    const passedAccNo = searchParams.get("accNo");
+
+    useEffect(() => {
+        const token = localStorage.getItem("access_token");
+        if (!token) {
+            setAuthorized(false);
+            router.push("/login");
+        } else {
+            setAuthorized(true);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (authorized) {
+            const saved = sessionStorage.getItem("accountData");
+            if (saved) {
+                const parsed: accountData[] = JSON.parse(saved);
+                const options = parsed.map((acc) => ({
+                    label: `${acc.stAccountNo} - ${acc.stAccountType}`,
+                    value: acc.stAccountNo,
+                }));
+                setAccountOptions(options);
+                if (passedAccNo) {
+                    handleAccountSelection(passedAccNo);
+                }
+            }
+        }
+    }, [authorized]);
+
+    const handleAccountSelection = async (accNo: string | null) => {
+        setSelectedAccNo(accNo);
+        setAccountDetails(null);
+        if (!accNo) return;
+        try {
+            const token = localStorage.getItem("access_token");
+            const response = await fetch("/api/customer", {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+
+            const data: accountData[] = await response.json();
+            if (response.ok && Array.isArray(data)) {
+                const matched = data.find((acc) => acc.stAccountNo === accNo);
+                if (matched) {
+                    // Simulate approvedBalance for loan accounts
+                    if (matched.stAccountType.toUpperCase().includes("LN")) {
+                        matched.stApprovedAmount = (
+                            parseFloat(matched.stAvailableBalance) + 20000
+                        ).toFixed(2); // dummy logic
+                    }
+                    setAccountDetails(matched);
+                } else {
+                    notifications.show({
+                        withBorder: true,
+                        color: "orange",
+                        title: "Account not found",
+                        message: "Selected account was not found in the response.",
+                    });
+                }
+            } else {
+                throw new Error("Invalid response");
+            }
+        } catch (err) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Fetch failed",
+                message: "Could not fetch account details. Try again.",
+            });
+        }
+    };
+
+    if (!authorized) return null;
+
+    return (
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
+            <Title order={3} mb="md">
+                Account Details
+            </Title>
+
+            <Stack gap="md">
+                <Select
+                    label="Select Account Number"
+                    placeholder="Choose account number"
+                    data={accountOptions}
+                    value={selectedAccNo}
+                    onChange={handleAccountSelection}
+                    searchable
+                />
+
+                {accountDetails && (
+                    <Paper withBorder p="md" radius="md" bg="gray.0">
+                        <Stack gap="sm">
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Account Number</Text>
+                                <Text size="md">{accountDetails.stAccountNo}</Text>
+                            </Group>
+
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Account Type</Text>
+                                <Text size="md">{accountDetails.stAccountType}</Text>
+                            </Group>
+
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Description</Text>
+                                <Text size="md">{accountDetails.stBookingNumber}</Text>
+                            </Group>
+
+                            {/* Show Loan-specific fields */}
+                            {accountDetails.stAccountType.toUpperCase().includes("LN") ? (
+                                <>
+                                    <Group p="apart">
+                                        <Text size="sm" fw={500} c="dimmed">Approved Balance</Text>
+                                        <Text size="md" c="gray.8">
+                                            ₹{parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString("en-IN", {
+                                                minimumFractionDigits: 2,
+                                            })}
+                                        </Text>
+                                    </Group>
+                                    <Group p="apart">
+                                        <Text size="sm" fw={500} c="dimmed">Available Balance</Text>
+                                        <Text size="md" c="red">
+                                            – ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
+                                                minimumFractionDigits: 2,
+                                            })}
+                                        </Text>
+                                    </Group>
+                                </>
+                            ) : (
+                                <Group p="apart">
+                                    <Text size="sm" fw={500} c="dimmed">Balance</Text>
+                                    <Text size="md" c="green">
+                                        ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
+                                            minimumFractionDigits: 2,
+                                        })}
+                                    </Text>
+                                </Group>
+                            )}
+                        </Stack>
+                    </Paper>
+                )}
+            </Stack>
+        </Paper>
+    );
+}
diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx
index 49a715e..a7f37e2 100644
--- a/src/app/(main)/accounts/account_statement/accountStatement.tsx
+++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx
@@ -61,7 +61,6 @@ export default function AccountStatementPage() {
         }
     }, [passedAccNo]);
 
-
     const handleAccountTransaction = async () => {
         if (!selectedAccNo || !startDate || !endDate) {
             notifications.show({
diff --git a/src/app/(main)/accounts/layout.tsx b/src/app/(main)/accounts/layout.tsx
index 0cdf543..fc6af88 100644
--- a/src/app/(main)/accounts/layout.tsx
+++ b/src/app/(main)/accounts/layout.tsx
@@ -13,6 +13,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     const links = [
         { label: "Account Summary", href: "/accounts" },
         { label: "Statement of Account", href: "/accounts/account_statement" },
+        { label: "Account Details", href: "/accounts/account_details" },
     ];
     useEffect(() => {
         const token = localStorage.getItem("access_token");
diff --git a/src/app/(main)/accounts/page.tsx b/src/app/(main)/accounts/page.tsx
index 1e0e878..748a82f 100644
--- a/src/app/(main)/accounts/page.tsx
+++ b/src/app/(main)/accounts/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
+import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -30,7 +30,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({
@@ -64,45 +64,75 @@ export default function AccountSummary() {
     padding: "10px",
   };
 
-  const rows = accountData.map((acc, index) => (
-    <tr key={index}>
-      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.custname}</td>
-      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
-      <td style={{ ...cellStyle, textAlign: "right", color: '#1c7ed6', cursor: "pointer" }}
-        onClick={() => router.push(`/accounts/account_statement?accNo=${acc.stAccountNo}`)}>
-        {acc.stAccountNo}</td>
-      <td style={{ ...cellStyle, textAlign: "right" }}>
-        {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
-          minimumFractionDigits: 2,
-        })}
-      </td>
-    </tr>
-  ));
+  // Filter accounts
+  const depositAccounts = accountData.filter(
+    (acc) => !acc.stAccountType.toUpperCase().includes("LN")
+  );
+  const loanAccounts = accountData.filter((acc) =>
+    acc.stAccountType.toUpperCase().includes("LN")
+  );
+
+  // Function to render table rows
+  const renderRows = (data: accountData[]) =>
+    data.map((acc, index) => (
+      <tr key={index}>
+        <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
+        <td
+          style={{ ...cellStyle, textAlign: "right", color: "#1c7ed6", cursor: "pointer" }}
+          onClick={() => router.push(`/accounts/account_details?accNo=${acc.stAccountNo}`)}
+        >
+          {acc.stAccountNo}
+        </td>
+        <td style={{ ...cellStyle, textAlign: "right" }}>
+          {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
+            minimumFractionDigits: 2,
+          })}
+        </td>
+      </tr>
+    ));
+
+  // Table component
+  const renderTable = (title: string, rows: JSX.Element[]) => (
+    <Paper shadow="sm" radius="md" p="md" withBorder w="100%"
+    // bg="#97E6B8"
+    >
+      <Title order={4} mb="sm">
+        {title}
+      </Title>
+      <ScrollArea>
+        <Table style={{ borderCollapse: "collapse", width: "100%" }}>
+          <thead>
+            <tr style={{ backgroundColor: "#3385ff" }}>
+              <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
+              <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
+              <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
 
   if (authorized) {
     return (
-      <Paper shadow="sm" radius="md" p="md" withBorder>
-        <Title order={3} mb="sm">
-          Account Summary (Currency - INR)
-        </Title>
-        <ScrollArea>
-          <Table style={{ borderCollapse: "collapse", width: "100%" }}>
-            <thead>
-              <tr style={{ backgroundColor: "#3385ff" }}>
-                <th style={{ ...cellStyle, textAlign: "left" }}>Customer Name</th>
-                <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
-                <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
-                <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
-              </tr>
-            </thead>
-            <tbody>{rows}</tbody>
-          </Table>
-        </ScrollArea>
+      <Paper shadow="sm" radius="md" p="md" withBorder h={400}
+      // bg="linear-gradient(90deg,rgba(195, 218, 227, 1) 0%, rgba(151, 230, 184, 1) 50%)"
+      >
+        <Title order={3} mb="md">Account Summary</Title>
+        <Group align="flex-start" grow>
+          {/* Left table for Deposit Accounts */}
+          {depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
+
+          {/* Right table for Loan Accounts (only shown if available) */}
+          {loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
+        </Group>
         <Text mt="sm" size="xs" c="dimmed">
           * Book Balance includes uncleared effects.
         </Text>
       </Paper>
     );
   }
+
   return null;
 }
diff --git a/src/app/(main)/funds_transfer/layout.tsx b/src/app/(main)/funds_transfer/layout.tsx
index 0ab1188..be44799 100644
--- a/src/app/(main)/funds_transfer/layout.tsx
+++ b/src/app/(main)/funds_transfer/layout.tsx
@@ -12,10 +12,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
     const links = [
         { label: " Quick Pay", href: "/funds_transfer" },
-        { label: "Send to Beneficiary", href: "/accounts/account_statement" },
-        { label: "Transfer within the bank", href: "/accounts/account_statement" },
-        { label: "Add Beneficary", href: "/accounts/account_statement" },
-        { label: "View Beneficary ", href: "/accounts/account_statement" },
+        { label: "Add Beneficiary", href: "/accounts/add_beneficiary" },
+        { label: "View Beneficiary ", href: "/accounts/view_beneficiary" },
+        { label: "Send to Beneficiary", href: "/accounts/send_beneficiary" },
     ];
     useEffect(() => {
         const token = localStorage.getItem("access_token");
diff --git a/src/app/(main)/funds_transfer/page.tsx b/src/app/(main)/funds_transfer/page.tsx
index f8f6da3..07b85c5 100644
--- a/src/app/(main)/funds_transfer/page.tsx
+++ b/src/app/(main)/funds_transfer/page.tsx
@@ -1,20 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Group,
-  Paper,
-  Radio,
-  ScrollArea,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
+import { generateOTP } from'@/app/OTPGenerator';
 
 interface accountData {
   stAccountNo: string;
@@ -30,11 +20,13 @@ export default function QuickPay() {
   const [accountData, setAccountData] = useState<accountData[]>([]);
   const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
   const [beneficiaryAcc, setBeneficiaryAcc] = useState("");
+  const [showPayeeAcc, setShowPayeeAcc] = useState(true);
   const [confirmBeneficiaryAcc, setConfirmBeneficiaryAcc] = useState("");
   const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
   const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
   const [amount, setAmount] = useState("");
   const [remarks, setRemarks] = useState("");
+  const [showConfirmModel, setConfirmModel] = useState(false);
   const [showTxnPassword, setShowTxnPassword] = useState(false);
   const [txnPassword, setTxnPassword] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -42,6 +34,17 @@ export default function QuickPay() {
   const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
   const [showOtpField, setShowOtpField] = useState(false);
   const [otp, setOtp] = useState("");
+  const [generateOtp, setGenerateOtp] = useState("");
+
+  async function handleGenerateOtp() {
+    // const value = await generateOTP(6);
+    const value = "123456";
+    setGenerateOtp(value);
+    return value;
+  }
+
+  const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
+  const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
 
   const accountOptions = accountData.map((acc) => ({
     value: acc.stAccountNo,
@@ -60,7 +63,7 @@ export default function QuickPay() {
       });
       const data = await response.json();
       if (response.ok && Array.isArray(data)) {
-        const filterSAaccount =data.filter((acc)=>acc.stAccountType==='SA');
+        const filterSAaccount = data.filter((acc) => acc.stAccountType === 'SA');
         setAccountData(filterSAaccount);
       }
     } catch {
@@ -90,10 +93,8 @@ export default function QuickPay() {
     }
   }, [authorized]);
 
-  const isValidTxnPassword = (password: string) =>
-    /[A-Z]/i.test(password) && /[0-9]/.test(password) && /[^a-zA-Z0-9]/.test(password);
 
-  const handleValidate = async () => {
+  async function handleValidate(){
     if (!selectedAccNo || !beneficiaryAcc ||
       !confirmBeneficiaryAcc
     ) {
@@ -139,6 +140,8 @@ export default function QuickPay() {
       } else {
         setBeneficiaryName("Invalid account number");
         setValidationStatus("error");
+        setBeneficiaryAcc("");
+        setConfirmBeneficiaryAcc("");
       }
     } catch {
       setBeneficiaryName("Invalid account number");
@@ -146,7 +149,7 @@ export default function QuickPay() {
     }
   };
 
-  const handleProceed = async () => {
+  async function handleProceed(){
     if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !beneficiaryType || !amount || !remarks) {
       notifications.show({
         title: "Validation Error",
@@ -164,28 +167,8 @@ export default function QuickPay() {
       });
       return;
     }
-
-    if (!showTxnPassword) {
-      setShowTxnPassword(true);
-      return;
-    }
-
-    if (!txnPassword || !isValidTxnPassword(txnPassword)) {
-      notifications.show({
-        title: "Weak Password",
-        message: "Password must contain letter, number, and special character",
-        color: "red",
-      });
-      return;
-    }
-
-    if (!showOtpField) {
-      setShowOtpField(true);
-      notifications.show({
-        title: "OTP Sent",
-        message: "Check your registered device for OTP",
-        color: "green",
-      });
+    if (!showOtpField && !showTxnPassword && !showConfirmModel) {
+      setConfirmModel(true);
       return;
     }
 
@@ -197,7 +180,28 @@ export default function QuickPay() {
       });
       return;
     }
+    if (otp !== generateOtp) {
+      notifications.show({
+        title: "Invalid OTP",
+        message: "The OTP entered does not match",
+        color: "red",
+      });
+      return;
+    }
 
+    if (!showTxnPassword) {
+      setShowTxnPassword(true);
+      return;
+    }
+
+    if (!txnPassword) {
+      notifications.show({
+        title: "Missing field",
+        message: "Please Enter Transaction Password Before Proceed",
+        color: "red",
+      });
+      return;
+    }
     try {
       setIsSubmitting(true);
       const token = localStorage.getItem("access_token");
@@ -212,23 +216,18 @@ export default function QuickPay() {
           fromAccount: selectedAccNo,
           toAccount: beneficiaryAcc,
           toAccountType: beneficiaryType,
-          amount,
+          amount: amount,
           narration: remarks,
-          txnPassword,
-          otp,
+          tpassword:txnPassword,
         }),
       });
-
       const result = await res.json();
-
       if (res.ok) {
         notifications.show({
           title: "Success",
           message: "Transaction successful",
           color: "green",
         });
-
-        // Reset
         setShowTxnPassword(false);
         setTxnPassword("");
         setShowOtpField(false);
@@ -238,7 +237,7 @@ export default function QuickPay() {
       } else {
         notifications.show({
           title: "Error",
-          message: result?.message || "Transaction failed",
+          message: result?.error || "Transaction failed",
           color: "red",
         });
       }
@@ -256,137 +255,191 @@ export default function QuickPay() {
   if (!authorized) return null;
 
   return (
-    <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
-      <Title order={3} mb="md">
-        Quick Pay
-      </Title>
-      <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
-        <Group justify="center">
-          <Radio value="own" label="Own Bank" />
-          <Radio value="outside" label="Outside Bank" />
+    <>
+      <Modal
+        opened={showConfirmModel}
+        onClose={() => setConfirmModel(false)}
+        // title="Confirm Transaction"
+        centered
+      >
+        <Stack>
+          <Title order={4}>Confirm Transaction</Title>
+          <Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
+          <Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
+          <Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
+          <Text><strong>Amount:</strong> ₹ {amount}</Text>
+          <Text><strong>Remarks:</strong> ₹ {remarks}</Text>
+        </Stack>
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
+          <Button
+            color="blue"
+            onClick={async () => {
+              setConfirmModel(false);
+              const otp = await handleGenerateOtp();
+              setShowOtpField(true);
+              notifications.show({
+                title: "OTP Sent",
+                message: `Check your registered device for OTP`,
+                color: "green",
+                autoClose: 5000,
+              });
+            }}
+          >
+            Confirm
+          </Button>
         </Group>
-      </Radio.Group>
+      </Modal>
+      {/* main content */}
+      <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
+        <Title order={3} mb="md">
+          Quick Pay
+        </Title>
+        <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
+          <Group justify="center">
+            <Radio value="own" label="Own Bank" />
+            <Radio value="outside" label="Outside Bank" />
+          </Group>
+        </Radio.Group>
 
-      {bankType === "own" ? (
-        <ScrollArea style={{ flex: 1 }}>
-          <div style={{ maxHeight: "320px", overflowY: "auto" }}>
-            <Stack gap="xs">
-              <Group grow>
-                <Select
-                  label="Select Debit Account Number"
-                  placeholder="Choose account number"
-                  data={accountOptions}
-                  value={selectedAccNo}
-                  onChange={setSelectedAccNo}
-                  withAsterisk
-                  disabled={isVisibilityLocked}
-                />
+        {bankType === "own" ? (
+            <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+              <Stack gap="xs">
+                <Group grow>
+                  <Select
+                    label="Select Debit Account Number"
+                    placeholder="Choose account number"
+                    data={accountOptions}
+                    value={selectedAccNo}
+                    onChange={setSelectedAccNo}
+                    withAsterisk
+                    readOnly={isVisibilityLocked}
+                  />
+                  <TextInput
+                    label="Payee Account No"
+                    value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
+                    onChange={(e) => {
+                      const value = e.currentTarget.value;
+                      if (/^\d*$/.test(value)) {
+                        setBeneficiaryAcc(value);
+                        setShowPayeeAcc(true);
+                      }
+                    }}
+                    onBlur={() => setShowPayeeAcc(false)}
+                    onFocus={() => setShowPayeeAcc(true)}
+                    withAsterisk
+                    readOnly={isVisibilityLocked}
+                  />
 
-                <TextInput
-                  label="Beneficiary Account No"
-                  value={beneficiaryAcc}
-                  onChange={(e) => {
-                    const value = e.currentTarget.value;
-                    if (/^\d*$/.test(value)) {
-                      setBeneficiaryAcc(value);
-                    }
-                  }}
-                  withAsterisk
-                  disabled={isVisibilityLocked}
-                />
+                  <TextInput
+                    label="Confirm Payee Account No"
+                    value={confirmBeneficiaryAcc}
+                    onChange={(e) => {
+                      const value = e.currentTarget.value;
+                      if (/^\d*$/.test(value)) {
+                        setConfirmBeneficiaryAcc(value);
+                      }
+                    }}
+                    // onCopy={(e) => e.preventDefault()}
+                    // onPaste={(e) => e.preventDefault()}
+                    // onCut={(e) => e.preventDefault()}
+                    withAsterisk
+                    readOnly={isVisibilityLocked}
+                  />
+                </Group>
+                <Group justify="space-between" >
+                  <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
+                    {selectedAccount ? selectedAccount.stAvailableBalance : 0}
+                  </Text>
+                  <Group justify="center">
+                    {validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
+                  </Group>
+                </Group>
+                <Group grow>
+                  <TextInput
+                    label="Payee Name"
+                    value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
+                    // disabled
+                    readOnly
+                  />
 
-                <TextInput
-                  label="Confirm Beneficiary Account No"
-                  value={confirmBeneficiaryAcc}
-                  onChange={(e) => {
-                    const value = e.currentTarget.value;
-                    if (/^\d*$/.test(value)) {
-                      setConfirmBeneficiaryAcc(value);
-                    }
-                  }}
-                  onCopy={(e) => e.preventDefault()}
-                  onPaste={(e) => e.preventDefault()}
-                  onCut={(e) => e.preventDefault()}
-                  withAsterisk
-                  disabled={isVisibilityLocked}
-                />
-              </Group>
+                  <Select
+                    label="Beneficiary A/c Type"
+                    placeholder="Select type"
+                    data={["Savings", "Current"]}
+                    value={beneficiaryType}
+                    onChange={setBeneficiaryType}
+                    withAsterisk
+                    readOnly={showOtpField}
+                  />
 
-              <Group align="center" gap="sm">
-                <Button variant="filled" color="blue" onClick={handleValidate}>
-                  Validate
-                </Button>
-                {validationStatus === "success" && <Text c="green">{beneficiaryName}</Text>}
-                {validationStatus === "error" && <Text c="red">{beneficiaryName}</Text>}
-              </Group>
+                  <TextInput
+                    label="Amount"
+                    type="number"
+                    value={amount}
+                    onChange={(e) => setAmount(e.currentTarget.value)}
+                    error={
+                      selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
+                        "Amount exceeds available balance" : false}
+                    withAsterisk
+                    readOnly={showOtpField}
+                  />
 
-              <Group grow>
-                <Select
-                  label="Beneficiary A/c Type"
-                  placeholder="Select type"
-                  data={["Savings", "Current"]}
-                  value={beneficiaryType}
-                  onChange={setBeneficiaryType}
-                  withAsterisk
-                />
+                  <TextInput
+                    label="Remarks"
+                    placeholder="Enter remarks"
+                    value={remarks}
+                    onChange={(e) => setRemarks(e.currentTarget.value)}
+                    withAsterisk
+                    readOnly={showOtpField}
+                  />
+                </Group>
+                <Group grow>
+                  {showOtpField && (
+                    <TextInput
+                      label="OTP"
+                      placeholder="Enter OTP"
+                      type="otp"
+                      value={otp}
+                      onChange={(e) => setOtp(e.currentTarget.value)}
+                      withAsterisk
+                      disabled={showTxnPassword}
+                    />
+                  )}
+                  {showTxnPassword && (
+                    <TextInput
+                      label="Transaction Password"
+                      placeholder="Enter transaction password"
+                      type="password"
+                      value={txnPassword}
+                      onChange={(e) => setTxnPassword(e.currentTarget.value)}
+                      withAsterisk
+                    />
+                  )}
+                </Group>
 
-                <TextInput
-                  label="Amount"
-                  type="number"
-                  value={amount}
-                  onChange={(e) => setAmount(e.currentTarget.value)}
-                  withAsterisk
-                />
-
-                <TextInput
-                  label="Remarks"
-                  placeholder="Enter remarks"
-                  value={remarks}
-                  onChange={(e) => setRemarks(e.currentTarget.value)}
-                  withAsterisk
-                />
-              </Group>
-
-              {showTxnPassword && (
-                <TextInput
-                  label="Transaction Password"
-                  placeholder="Enter transaction password"
-                  type="password"
-                  value={txnPassword}
-                  onChange={(e) => setTxnPassword(e.currentTarget.value)}
-                  withAsterisk
-                />
-              )}
-
-              {showOtpField && (
-                <TextInput
-                  label="OTP"
-                  placeholder="Enter OTP"
-                  value={otp}
-                  onChange={(e) => setOtp(e.currentTarget.value)}
-                  withAsterisk
-                />
-              )}
-
-              <Group justify="flex-start">
-                <Button
-                  variant="filled"
-                  color="blue"
-                  onClick={handleProceed}
-                  loading={isSubmitting}
-                  disabled={validationStatus !== "success"}
-                >
-                  {showOtpField ? "Proceed to Pay" : "Proceed"}
-                </Button>
-              </Group>
-            </Stack>
-          </div>
-        </ScrollArea>
-      ) : (
-        <Text size="lg" mt="md">
-          hii
-        </Text>
-      )}
-    </Paper>
+                <Group justify="flex-start">
+                  <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
+                    Validate
+                  </Button>
+                  <Button
+                    variant="filled"
+                    color="blue"
+                    onClick={handleProceed}
+                    loading={isSubmitting}
+                    disabled={validationStatus !== "success"}
+                  >
+                    {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
+                  </Button>
+                </Group>
+              </Stack>
+            </div>
+        ) : (
+          <Text size="lg" mt="md">
+            hii
+          </Text>
+        )}
+      </Paper>
+    </>
   );
 }
diff --git a/src/app/OTPGenerator.ts b/src/app/OTPGenerator.ts
new file mode 100644
index 0000000..dc18098
--- /dev/null
+++ b/src/app/OTPGenerator.ts
@@ -0,0 +1,10 @@
+export function generateOTP(length: number) {
+    const digits = '0123456789';
+    let otp = '';
+    otp += digits[Math.floor(Math.random() * 9)+1]; //first digit cannot be zero
+    for (let i = 1; i < length; i++) {
+        otp += digits[Math.floor(Math.random() * digits.length)];
+    }
+    // console.log("OTP generate :",otp);
+    return otp;
+}
\ No newline at end of file