feat : implement the quick pay screen

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");

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>
+    </>
   );
 }