refactor: Update source code with the NPCI and CBS API

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

@@ -1,34 +1,19 @@
 "use client";
-
 import React, { useEffect, useState } from 'react';
-import { TextInput, Button, Grid, Text, PasswordInput } from '@mantine/core';
+import { TextInput, Button, Grid, Text, PasswordInput,Loader,Group, Select, Stack } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useRouter } from "next/navigation";
 
-const MockOthersAccountValidation =
-    [
-        {
-            'stBenAccountNo': '50077736834',
-            'stBenName': 'Ram Patnayak',
-        },
-        {
-            'stBenAccountNo': '50088836834',
-            'stBenName': 'Sumit Ghosh',
-        },
-        {
-            'stBenAccountNo': '21112076570',
-            'stBenName': 'Mr Sumit Ghosh',
-        },
-    ]
-
 export default function AddBeneficiaryOthers() {
     const router = useRouter();
     const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [loading, setLoading] = useState(false);
     const [bankName, setBankName] = useState('');
     const [ifsccode, setIfsccode] = useState('');
     const [branchName, setBranchName] = useState('');
     const [accountNo, setAccountNo] = useState('');
     const [confirmAccountNo, setConfirmAccountNo] = useState('');
+    const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
     const [nickName, setNickName] = useState('');
     const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
     const [otp, setOtp] = useState('');
@@ -38,7 +23,6 @@ export default function AddBeneficiaryOthers() {
     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); };
 
     useEffect(() => {
@@ -99,7 +83,7 @@ export default function AddBeneficiaryOthers() {
     };
 
     const validateAndSendOtp = async () => {
-        if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo) {
+        if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo || !beneficiaryType) {
             notifications.show({
                 withBorder: true,
                 color: "red",
@@ -147,13 +131,9 @@ export default function AddBeneficiaryOthers() {
         }
         //  Validation for now
         try {
-            // const matched = MockOthersAccountValidation.find(
-            //     (entry) => entry.stBenAccountNo === accountNo
-            // );
-
+            setLoading(true);
             const token = localStorage.getItem("access_token");
-            const response = await fetch(
-                `http://localhost:8080/api/beneficiary/validate/outside-bank?accountNo=${accountNo}&ifscCode=${ifsccode}&remitterName=""`,
+            const response = await fetch(`/api/beneficiary/validate/outside-bank?accountNo=${accountNo}&ifscCode=${ifsccode}&remitterName=""`,
                 {
                     method: "GET",
                     headers: {
@@ -163,7 +143,6 @@ export default function AddBeneficiaryOthers() {
                 }
             );
             const data = await response.json();
-
             if (response.ok && data?.name) {
                 setBeneficiaryName(data.name);
                 setValidationStatus("success");
@@ -189,9 +168,23 @@ export default function AddBeneficiaryOthers() {
             setBeneficiaryName("Something went wrong");
             setValidationStatus("error");
         }
+        finally {
+            setLoading(false);
+        }
     };
 
     const verifyOtp = () => {
+        if (!otp) {
+            notifications.show({
+                withBorder: true,
+                color: "Red",
+                title: "Null Field",
+                message: "Please Enter Valid OTP",
+                autoClose: 5000,
+            });
+            return;
+        }
+
         if (otp === generatedOtp) {
             setOtpVerified(true);
             notifications.show({
@@ -211,20 +204,70 @@ export default function AddBeneficiaryOthers() {
             });
         }
     };
-    const AddBen = () => {
+    const AddBen = async () => {
+        try {
+            const token = localStorage.getItem("access_token");
+            const response = await fetch(`/api/beneficiary`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({
+                    accountNo: accountNo,
+                    ifscCode: ifsccode,
+                    accountType: beneficiaryType,
+                    name: beneficiaryName
+
+                }),
+            }
+            );
+            const data = await response.json();
+            if (response.ok) {
                 notifications.show({
                     withBorder: true,
                     color: "green",
-            title: "Beneficiary Added",
-            message: "Beneficiary added successfully.",
+                    title: "Added",
+                    message: "Beneficiary Added successfully",
                     autoClose: 5000,
                 });
+                return;
+            }
+            else{
+                notifications.show({
+                    withBorder: true,
+                    color: "Red",
+                    title: "Error",
+                    message: data?.error,
+                    autoClose: 5000,
+                });
+                return;
+            }
+        }
+        catch {
+            notifications.show({
+                title: "Error",
+                message: "Something went wrong",
+                color: "red",
+            });
+        }
+        finally{
+            setBankName('');
+            setBranchName('');
+            setIfsccode('');
+            setAccountNo('');
+            setConfirmAccountNo('');
+            setBeneficiaryName('');
+            setNickName('');
+            setBeneficiaryType(null);
+            setIsVisibilityLocked(false);
+            setOtpSent(false);
+        }
     };
 
     if (!authorized) return null;
     return (
-        <Grid gutter="md">
-
+        <Grid gutter="md" style={{padding:'5px'}}>
             <Grid.Col span={4}>
                 <TextInput
                     label="IFSC Code"
@@ -236,34 +279,30 @@ export default function AddBeneficiaryOthers() {
                         setIfsccode(val);
                     }}
                     maxLength={11}
-                    required
+                    withAsterisk
                 />
             </Grid.Col>
-
             <Grid.Col span={4}>
                 <TextInput
                     label="Bank Name"
-                    placeholder="Enter bank"
                     value={bankName}
                     disabled
                     onChange={(e) => {
                         let val = e.currentTarget.value.replace(/[^A-Za-z ]/g, "");
                         setBankName(val.slice(0, 100));
                     }}
-                    required
+                    withAsterisk
                 />
             </Grid.Col>
-
             <Grid.Col span={4}>
                 <TextInput
                     label="Branch Name"
                     value={branchName}
                     disabled
                     maxLength={100}
-                    required
+                    withAsterisk
                 />
             </Grid.Col>
-
             <Grid.Col span={4}>
                 <TextInput
                     label="Beneficiary Account Number"
@@ -280,11 +319,9 @@ export default function AddBeneficiaryOthers() {
                     onFocus={() => setShowPayeeAcc(true)}
                     readOnly={isVisibilityLocked}
                     maxLength={17}
-                    // disabled={isVisibilityLocked}
-                    required
+                    withAsterisk
                 />
             </Grid.Col>
-
             <Grid.Col span={4}>
                 <TextInput
                     label="Confirm Beneficiary Account Number"
@@ -297,12 +334,11 @@ export default function AddBeneficiaryOthers() {
                         }
                     }}
                     maxLength={17}
-                    // disabled={isVisibilityLocked}
                     readOnly={isVisibilityLocked}
-                    required
-                    onCopy={(e) => e.preventDefault()}
-                    onPaste={(e) => e.preventDefault()}
-                    onCut={(e) => e.preventDefault()}
+                    withAsterisk
+                // onCopy={(e) => e.preventDefault()}
+                // onPaste={(e) => e.preventDefault()}
+                // onCut={(e) => e.preventDefault()}
                 />
 
                 {validationStatus === "error" && (
@@ -311,16 +347,17 @@ export default function AddBeneficiaryOthers() {
                     </Text>
                 )}
             </Grid.Col>
-
             <Grid.Col span={4}>
-                <TextInput
-                    label="Nick Name (Optional)"
-                    placeholder="Enter nickname (optional)"
-                    value={nickName}
-                    onChange={(e) => setNickName(e.currentTarget.value)}
+                <Select
+                    label="Beneficiary Account Type"
+                    placeholder="Select type"
+                    data={["Savings", "Current"]}
+                    value={beneficiaryType}
+                    onChange={setBeneficiaryType}
+                    readOnly={isVisibilityLocked}
+                    withAsterisk
                 />
             </Grid.Col>
-
             <Grid.Col span={4}>
                 <TextInput
                     label="Beneficiary Name"
@@ -330,14 +367,28 @@ export default function AddBeneficiaryOthers() {
                     required
                 />
             </Grid.Col>
+            <Grid.Col span={4}>
+                <TextInput
+                    label="Nick Name (Optional)"
+                    placeholder="Enter nickname (optional)"
+                    value={nickName}
+                    onChange={(e) => setNickName(e.currentTarget.value)}
 
-
+                />
+            </Grid.Col>
             {!otpSent && (
-                <Grid.Col>
-                    <Button onClick={validateAndSendOtp}>Validate</Button>
+                <Grid.Col >
+                    <Group gap="sm">
+                        <Button onClick={validateAndSendOtp} disabled={loading}>Validate</Button>
+                        {loading && (
+                            <>
+                                <Loader size='sm' type="bars"></Loader>
+                                <Text>Looking for Beneficiary Name</Text>
+                            </>
+                        )}
+                    </Group>
                 </Grid.Col>
             )}
-
             {otpSent && (
                 <>
                     <Grid.Col span={3}>
@@ -347,15 +398,13 @@ export default function AddBeneficiaryOthers() {
                             value={otp}
                             onChange={(e) => setOtp(e.currentTarget.value)}
                             maxLength={6}
-                            disabled={otpVerified} // ✅ Disable after verified
+                            disabled={otpVerified} //Disable after verified
                         />
                     </Grid.Col >
                     <Grid.Col >
                         {!otpVerified ? (
                             <Button onClick={verifyOtp}>Validate OTP</Button>
                         ) : (
-
-
                             <Button color="blue" size="sm" onClick={AddBen}>
                                 Add
                             </Button>
@@ -364,8 +413,6 @@ export default function AddBeneficiaryOthers() {
                 </>
             )}
         </Grid>
-
-
     );
 };
 

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

@@ -192,14 +192,14 @@ const AddBeneficiary: React.FC = () => {
         <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
             <Title order={3} mb="md">Add Beneficiary</Title>
 
-            <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
+            {/* <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>
+            </Radio.Group> */}
 
-            {bankType === "own" ? (
+            {/* {bankType === "own" ? (
                 <Grid gutter="md">
                     <Grid.Col span={4}>
                         <Select
@@ -310,11 +310,11 @@ const AddBeneficiary: React.FC = () => {
                         </>
                     )}
                 </Grid>
-            ) : (
+            ) : ( */}
                 <Grid gutter="md">
                     <AddBeneficiaryOthers />
                 </Grid>
-            )}
+            {/* )} */}
         </Paper>
     );
 };

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

@@ -473,7 +473,6 @@ export default function QuickPay() {
                 />
               )}
             </Group>
-
             <Group justify="flex-start">
               <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
                 Validate

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

@@ -14,43 +14,13 @@ interface accountData {
     custname: string;
 }
 
-const MockBeneficiaryData =
-    [
-        {
-            'stBankName': 'Kangra Central Co-operative Bank',
-            'stBenAccountNo': '50077736845',
-            'stBenName': 'RAJAT MAHARANA',
-        },
-        {
-            'stBankName': 'Kangra Central Co-operative Bank',
-            'stBenAccountNo': '50077742351',
-            'stBenName': 'RAJAT MAHARANA',
-        },
-        {
-            'stBankName': 'Kangra Central Co-operative Bank',
-            'stBenAccountNo': '20002076570',
-            'stBenName': 'Mr. PUSHKAR . SHARMA',
-        },
-        {
-            'stBankName': 'State Bank of India',
-            'stBenAccountNo': '50077742361',
-            'stIFSC': 'SBIN0004567',
-            'stBenName': 'Sachin Sharma',
-        },
-        {
-            'stBankName': 'ICICI',
-            'stBenAccountNo': '90088842361',
-            'stIFSC': 'ICICI0004567',
-            'stBenName': 'Eshika Paul',
-        },
-    ]
-
 export default function SendToBeneficiaryOwn() {
     const router = useRouter();
     const [bankType, setBankType] = useState("own");
     const [authorized, setAuthorized] = useState<boolean | null>(null);
     const [accountData, setAccountData] = useState<accountData[]>([]);
     const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
+    const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
     const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
     const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
     const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
@@ -77,25 +47,35 @@ export default function SendToBeneficiaryOwn() {
         label: `${acc.stAccountNo} (${acc.stAccountType})`,
     }));
 
-    const benAccountOption = MockBeneficiaryData.filter((ben_acc) =>
-        bankType === 'own' ? ben_acc.stBankName === 'Kangra Central Co-operative Bank' : true)
-        .map((ben_acc) => ({
-            value: ben_acc.stBenAccountNo,
-            label: `${ben_acc.stBenAccountNo}-${ben_acc.stBenName}`,
-
-        }));
-    const handleBeneficiary = (benAcc: string | null) => {
-        if (benAcc) {
-            setBeneficiaryAcc(benAcc);
-            const selected = MockBeneficiaryData.find((item) => item.stBenAccountNo === benAcc);
-            if (selected)
-                setBeneficiaryName(selected.stBenName);
-        }
-        else {
-            setBeneficiaryAcc('');
-            setBeneficiaryName('');
+    const FetchBeneficiaryDetails = async () => {
+        try {
+            const token = localStorage.getItem("access_token");
+            const response = await fetch("/api/beneficiary", {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+            const data = await response.json();
+            console.log(data);
+            if (response.ok && Array.isArray(data)) {
+                setBeneficiaryData(data);
+            } else {
+                notifications.show({
+                    title: "Error",
+                    message: "Unable to fetch beneficiary list",
+                    color: "red",
+                });
             }
+        } catch {
+            notifications.show({
+                title: "Error",
+                message: "Something went wrong while fetching beneficiaries",
+                color: "red",
+            });
         }
+    };
 
     const FetchAccountDetails = async () => {
         try {
@@ -136,9 +116,37 @@ export default function SendToBeneficiaryOwn() {
     useEffect(() => {
         if (authorized) {
             FetchAccountDetails();
+            FetchBeneficiaryDetails();
         }
     }, [authorized]);
 
+    const benAccountOption = beneficiaryData
+        .filter((ben) =>
+            bankType === "own" ? ben.ifscCode?.startsWith("KACE") : true
+        )
+        .map((ben) => ({
+            value: ben.accountNo,
+            label: `${ben.accountNo} - ${ben.name}`,
+        }));
+
+    const handleBeneficiary = (benAcc: string | null) => {
+        if (benAcc) {
+            setBeneficiaryAcc(benAcc);
+            const selected = beneficiaryData.find(
+                (item) => item.accountNo === benAcc
+            );
+            if (selected) {
+                setBeneficiaryName(selected.name);
+                setBeneficiaryType(selected.accountType);
+            }
+
+        } else {
+            setBeneficiaryAcc(null);
+            setBeneficiaryName(null);
+            setBeneficiaryType(null);
+        }
+    };
+
     async function handleProceed() {
         if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryType || !amount || !remarks) {
             notifications.show({
@@ -253,7 +261,6 @@ export default function SendToBeneficiaryOwn() {
     };
 
     if (!authorized) return null;
-
     return (
         <>
             <Modal
@@ -351,7 +358,6 @@ export default function SendToBeneficiaryOwn() {
                                     withAsterisk
                                     readOnly={showOtpField}
                                 />
-
                                 <TextInput
                                     label="Amount"
                                     type="number"

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

@@ -43,11 +43,11 @@ const MockBeneficiaryData =
         },
     ]
 
-
 export default function SendToBeneficiaryOthers() {
     const router = useRouter();
     const [authorized, setAuthorized] = useState<boolean | null>(null);
     const [accountData, setAccountData] = useState<accountData[]>([]);
+    const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
     const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
     const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
     const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
@@ -70,26 +70,57 @@ export default function SendToBeneficiaryOthers() {
         setGenerateOtp(value);
         return value;
     }
+
+    const FetchBeneficiaryDetails = async () => {
+        try {
+            const token = localStorage.getItem("access_token");
+            const response = await fetch("/api/beneficiary", {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+            const data = await response.json();
+            console.log(data);
+            if (response.ok && Array.isArray(data)) {
+                setBeneficiaryData(data);
+            } else {
+                notifications.show({
+                    title: "Error",
+                    message: "Unable to fetch beneficiary list",
+                    color: "red",
+                });
+            }
+        } catch {
+            notifications.show({
+                title: "Error",
+                message: "Something went wrong while fetching beneficiaries",
+                color: "red",
+            });
+        }
+    };
     const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
     const accountOptions = accountData.map((acc) => ({
         value: acc.stAccountNo,
         label: `${acc.stAccountNo} (${acc.stAccountType})`,
     }));
 
-    const benAccountOption = MockBeneficiaryData.filter((ben_acc) =>
-        ben_acc.stBankName !== 'Kangra Central Co-operative Bank')
-        .map((ben_acc) => ({
-            value: ben_acc.stBenAccountNo,
-            label: ben_acc.stBenAccountNo,
+    const benAccountOption = beneficiaryData.
+        filter((ben) => !ben.ifscCode?.startsWith("KACE"))
+        .map((ben) => ({
+            value: ben.accountNo,
+            label: `${ben.accountNo} - ${ben.name}`,
 
         }));
-    const handleBeneficiary = (benAcc: string | null) => {
-        if (benAcc) {
-            setBeneficiaryAcc(benAcc);
-            const selected = MockBeneficiaryData.find((item) => item.stBenAccountNo === benAcc);
-            if (selected)
-                setBeneficiaryName(selected.stBenName);
-            setBeneficiaryIFSC(selected?.stIFSC ?? '');
+
+    const handleBeneficiary = (ben: string | null) => {
+        if (ben) {
+            setBeneficiaryAcc(ben);
+            const selected = beneficiaryData.find((item) => item.accountNo === ben && !item.ifscCode?.startsWith("KACE"));
+            if (selected) {
+                setBeneficiaryName(selected.name);
+                setBeneficiaryIFSC(selected?.ifscCode ?? '');
             }
             else {
                 setBeneficiaryAcc('');
@@ -97,6 +128,7 @@ export default function SendToBeneficiaryOthers() {
                 setBeneficiaryIFSC('');
             }
         }
+    }
 
     const FetchAccountDetails = async () => {
         try {
@@ -137,6 +169,7 @@ export default function SendToBeneficiaryOthers() {
     useEffect(() => {
         if (authorized) {
             FetchAccountDetails();
+            FetchBeneficiaryDetails();
         }
     }, [authorized]);
 

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

@@ -1,13 +1,41 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
+import React, { useEffect, useState } from "react";
+import { Center, Group, Loader, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
+import Image, { StaticImageData } from "next/image";
+import BOI from '@/app/image/bank_logo/BOI.jpg';
+import hdfc from '@/app/image/bank_logo/hdfc.jpg';
+import sbi from '@/app/image/bank_logo/sbi.jpg';
+import icici from '@/app/image/bank_logo/icici.jpg'
+import pnb from '@/app/image/bank_logo/pnb.jpg'
+import axis from '@/app/image/bank_logo/axis.jpg'
+import logo from '@/app/image/bank_logo/bank.jpg';
+
+interface Beneficiary {
+    accountNo: string;
+    name: string;
+    accountType: string;
+    ifscCode: string;
+    bankName: string;
+    branchName: string;
+}
+
+const bankLogo: Record<string, StaticImageData> = {
+    "BANK OF INDIA": BOI,
+    "HDFC BANK LTD": hdfc,
+    "STATE BANK OF INDIA": sbi,
+    "ICICI BANK LTD": icici,
+    "PUNJAB NATIONAL BANK": pnb,
+    "AXIS BANK": axis
+}
 
 export default function ViewBeneficiary() {
     const router = useRouter();
     const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const token = localStorage.getItem("access_token");
@@ -18,13 +46,85 @@ export default function ViewBeneficiary() {
             setAuthorized(true);
         }
     }, []);
+    useEffect(() => {
+        const fetchBeneficiaries = async () => {
+            try {
+                const token = localStorage.getItem("access_token");
+                const response = await fetch(`/api/beneficiary`, {
+                    method: "GET",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                if (!response.ok) throw new Error("Failed to fetch beneficiaries");
+                const data = await response.json();
+                setBeneficiaries(data);
+            } catch (error) {
+                notifications.show({
+                    title: "Error",
+                    message: "Unable to fetch beneficiaries. Please try again later.",
+                    color: "red",
+                });
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchBeneficiaries();
+    }, []);
+
+    if (loading) {
+        return (
+            <Center h="60vh">
+                <Loader size="lg" color="green" />
+            </Center>
+        );
+    }
 
     if (!authorized) return null;
-
     return (
         <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
-            <Text>View beneficiary feature coming soon.</Text>
-        </Paper>
-
+            <Title order={3} mb="md">My Beneficiaries</Title>
+            {beneficiaries.length === 0 ? (
+                <Text>No beneficiaries found.</Text>
+            ) : (
+                <ScrollArea h={300} type="always">
+                    <Table highlightOnHover withTableBorder stickyHeader style={{ borderCollapse: "collapse", width: "100%" }}>
+                        <Table.Thead>
+                            <Table.Tr style={{ backgroundColor: "#3385ff" }}>
+                                <Table.Th>Bank</Table.Th>
+                                <Table.Th>Account No</Table.Th>
+                                <Table.Th>Name</Table.Th>
+                                <Table.Th>Type</Table.Th>
+                                <Table.Th>IFSC</Table.Th>
+                                {/* <Table.Th>Branch</Table.Th> */}
+                            </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>
+                            {beneficiaries.map((b, i) => (
+                                <Table.Tr key={i}>
+                                    <Table.Td>
+                                        <Group gap='sm'>
+                                            <Image
+                                                src={bankLogo[b.bankName] || logo}
+                                                alt={b.bankName}
+                                                width={20}
+                                                height={15}
+                                            />
+                                            {b.bankName}
+                                        </Group>
+                                    </Table.Td>
+                                    <Table.Td style={{ textAlign: "right" }}>{b.accountNo}</Table.Td>
+                                    <Table.Td>{b.name}</Table.Td>
+                                    <Table.Td>{b.accountType}</Table.Td>
+                                    <Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</Table.Td>
+                                    {/* <Table.Td>{b.branchName}</Table.Td> */}
+                                </Table.Tr>
+                            ))}
+                        </Table.Tbody>
+                    </Table>
+                </ScrollArea>
+            )}
+        </Paper >
     );
 }

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

@@ -224,7 +224,7 @@ export default function Home() {
                         </Box> */}
                         <Stack>
                             <Text fw={700}> ** Book Balance includes uncleared effect.</Text>
-                            <Text fw={700}> ** Click on the "Show Balance" to display balance for the Deposit and Loan account.</Text>
+                            <Text fw={700}> ** Click on the &quot;Show Balance&quot;to display balance for the Deposit and Loan account.</Text>
                             {/* <Text fw={700}> ** Click on the "Get Statement" to display last 5 transactions.</Text> */}
                             <Text></Text>
                         </Stack>

src/app/(main)/layout.tsx

@@ -32,6 +32,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     'Authorization': `Bearer ${token}`
                 },
             });
+            if (!response.ok) {
+                notifications.show({
+                    withBorder: true,
+                    color: "red",
+                    title: "Error",
+                    message: "Internal Server Error",
+                    autoClose: 5000,
+                });
+                localStorage.removeItem("access_token");
+                return;
+            }
             const data = await response.json();
             if (response.ok && Array.isArray(data)) {
                 if (data.length > 0) {

src/app/login/page.tsx

@@ -84,6 +84,7 @@ export default function Login() {
             });
             return;
         }
+        try {
             const response = await fetch('api/auth/login', {
                 method: 'POST',
                 headers: {
@@ -94,7 +95,18 @@ export default function Login() {
                     password: psw,
                 }),
             });
+            if (!response.ok) {
+                notifications.show({
+                    withBorder: true,
+                    color: "red",
+                    title: "Error",
+                    message: "Internal Server Error",
+                    autoClose: 5000,
+                });
+                return;
+            }
             const data = await response.json();
+            console.log(data);
             setIsLogging(true);
             if (response.ok) {
                 console.log(data);
@@ -119,6 +131,17 @@ export default function Login() {
                 });
             }
         }
+        catch (error: any) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Error",
+                message: "Internal Server Error,Please try again Later",
+                autoClose: 5000,
+            });
+            return;
+        }
+    }
     useEffect(() => {
         const headerData = [
             "THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",