tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unified transaction url.

Browse Source 
feat: modify admin pages.
This commit is contained in:
Tomosa Sarkar
2025-08-29 17:11:44 +05:30
parent bbbfcc52d2
commit 78c0fa6e95
9 changed files with 501 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(main)/accounts/account_statement/accountStatement.tsx
View File

@@ -146,7 +146,7 @@ export default function AccountStatementPage() {
{/* Left side – form */}
<Grid.Col span={{ base: 12, md: 4 }}>
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
<Title order={4} mb="sm">Account Statement</Title>
<Title order={4} mb="sm">Account Transactions</Title>
<Select
label="Select Account Number"
placeholder="Choose account number"
@@ -176,7 +176,7 @@ export default function AccountStatementPage() {
{/* Right side – transaction list */}
<Grid.Col span={{ base: 12, md: 8 }}>
<Paper shadow="sm" radius="md" p="md" withBorder h={400} style={{ display: 'flex', flexDirection: 'column' }}>
<Title order={5} mb="xs">Account Transaction Statement</Title>
<Title order={5} mb="xs">Account Transactions</Title>
<Text fw={500} fs="italic" >Account No : {selectedAccNo}</Text>
<Divider size="xs" />
<ScrollArea style={{ flex: 1 }}>

15
src/app/(main)/funds_transfer/page.tsx
View File

@@ -338,7 +338,7 @@ export default function QuickPay() {
Quick Pay - Own Bank
</Title>
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
<div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Stack gap="xs">
<Group grow>
<Select
@@ -423,7 +423,7 @@ export default function QuickPay() {
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
withAsterisk
leftSection ="₹"
leftSection="₹"
readOnly={showOtpField}
/>
@@ -498,6 +498,17 @@ export default function QuickPay() {
</Button>
</Group>
</Stack>
<Stack gap={1} mt="xs">
<Text size="xs" c="green">
• Minimum Transfer Amount on this Day is Rs. 1.00
</Text>
<Text size="xs" c="green">
• Maximum Transfer Limit per Day is Rs. 500000.00
</Text>
<Text size="xs" c="green">
• Available Transfer Amount on this Day is Rs. 500000.00
</Text>
</Stack>
</div>
{/* ) : (
<div>

23
src/app/(main)/funds_transfer/send_beneficiary/page.tsx
View File

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import SendToBeneficiaryOthers from "./sendBeneficiaryOthers";
interface accountData {
stAccountNo: string;
stAccountType: string;
@@ -257,6 +258,8 @@ export default function SendToBeneficiaryOwn() {
setIsSubmitting(false);
setShowTxnPassword(false);
setShowOtpField(false);
setOtp('');
setTxnPassword('');
}
};
@@ -311,7 +314,7 @@ export default function SendToBeneficiaryOwn() {
</Radio.Group>
{bankType === "own" ? (
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
<div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Stack gap="xs">
<Group grow>
<Select
@@ -340,9 +343,7 @@ export default function SendToBeneficiaryOwn() {
readOnly
withAsterisk
/>
</Group>
<Group justify="space-between" >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
@@ -372,7 +373,7 @@ export default function SendToBeneficiaryOwn() {
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
withAsterisk
leftSection ="₹"
leftSection="₹"
readOnly={showOtpField}
/>
@@ -425,6 +426,20 @@ export default function SendToBeneficiaryOwn() {
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
</Button>
</Group>
<Stack gap={1} mt="xs">
<Text size="xs" c="green">
• Minimum Transfer Amount on this Day is Rs. 1.00
</Text>
<Text size="xs" c="green">
• Maximum Transfer Limit per Day is Rs. 500000.00
</Text>
<Text size="xs" c="green">
• Available Transfer Amount on this Day is Rs. 500000.00
</Text>
<Text size="xs" c="red" fw={700}>
NOTE : Funds Transfer can be done only to previous added Beneficiary Accounts.
</Text>
</Stack>
</Stack>
</div>
) : (

347
src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
View File

@@ -1,10 +1,11 @@
"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 { Button, Divider, Group, List, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import { IconAlertTriangle } from "@tabler/icons-react";
interface accountData {
stAccountNo: string;
@@ -17,6 +18,7 @@ export default function SendToBeneficiaryOthers() {
const [authorized, setAuthorized] = useState<boolean | null>(null);
const [accountData, setAccountData] = useState<accountData[]>([]);
const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
const [showIntroModal, setShowIntroModal] = useState(true);
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
@@ -287,6 +289,8 @@ export default function SendToBeneficiaryOthers() {
setIsSubmitting(false);
setShowTxnPassword(false);
setShowOtpField(false);
setOtp('');
setTxnPassword('');
}
};
@@ -294,6 +298,58 @@ export default function SendToBeneficiaryOthers() {
return (
<>
<Modal
opened={showIntroModal}
onClose={() => setShowIntroModal(false)}
centered
withCloseButton={false} // force them to press OK
>
<Stack gap={1}>
<Title order={4} style={{ textAlign: "center" }}>Important Note</Title>
<Text size="sm">• <strong>IMPS</strong> is available 24X7. Limit: up to ₹5,00,000. Money is transfer instantly.</Text>
<Text size="sm">• <strong>NEFT</strong> is available 24x7. Can be used for any amount but not instant.</Text>
<Text size="sm">• <strong>RTGS</strong> is for ₹2,00,000 and above. Available during banking hours.As per directions of RBI, RTGS transactions are subjected to the following{" "}
<strong>Time Varying Tariff</strong> in addition to the existing <strong>RTGS</strong>
Commission. The tariff will be calculated based on the time of completion
of transaction.</Text>
<List
spacing="xs"
size="sm"
icon={
<ThemeIcon color="red" size={20} radius="xl">
<IconAlertTriangle size={14} />
</ThemeIcon>
}
>
<List.Item>
From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
<strong>₹0.00</strong>
</List.Item>
<List.Item>
After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
<strong>₹1.00</strong>
</List.Item>
<List.Item>
After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
</List.Item>
</List>
<Divider my="sm" variant="dashed" />
<Text size="xs" c="blue">
• Minimum Transfer Amount on this Day is Rs. 1.00
</Text>
<Text size="xs" c="blue">
• Maximum Transfer Limit per Day is Rs. 500000.00
</Text>
<Text size="xs" c="blue">
• Available Transfer Amount on this Day is Rs. 500000.00
</Text>
<Group justify="flex-end" mt="md">
<Button color="blue" onClick={() => setShowIntroModal(false)}>
Okay
</Button>
</Group>
</Stack>
</Modal>
<Modal
opened={showConfirmModel}
onClose={() => setConfirmModel(false)}
@@ -330,133 +386,178 @@ export default function SendToBeneficiaryOthers() {
</Group>
</Modal>
{/* main content */}
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
<Stack gap={5} justify="flex-start">
<Group grow gap='xs' >
<Select
label="Select Debit Account Number"
placeholder="Choose account number"
data={accountOptions}
value={selectedAccNo}
onChange={setSelectedAccNo}
withAsterisk
readOnly={isVisibilityLocked}
/>
<Select
label="Beneficiary Account No"
placeholder="Choose beneficiary account number"
data={benAccountOption}
value={beneficiaryAcc}
onChange={handleBeneficiary}
withAsterisk
readOnly={isVisibilityLocked}
nothingFoundMessage='No account found'
/>
<TextInput
label="Beneficiary Name"
value={beneficiaryName ? beneficiaryName : ""}
disabled
readOnly
withAsterisk
/>
<TextInput
label="Beneficiary IFSC Code"
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
disabled
readOnly
withAsterisk
/>
</Group>
<Group gap='xs' >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
</Text>
</Group>
<Group grow gap='xs'>
<Radio.Group
name="payment-mode"
label="Select Payment Method"
value={paymentMode}
onChange={setPaymentMode}
withAsterisk
readOnly={isVisibilityLocked}
>
<Group gap="xs">
<Radio value="IMPS" label="IMPS" />
<Radio value="RTGS" label="RTGS" />
<Radio value="NEFT" label="NEFT" />
</Group>
<Text size="xs" c="red">
{paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
{paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
{paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
{!showIntroModal && (
<div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Stack gap={5} justify="flex-start">
<Group grow gap='xs' >
<Select
label="Select Debit Account Number"
placeholder="Choose account number"
data={accountOptions}
value={selectedAccNo}
onChange={setSelectedAccNo}
withAsterisk
readOnly={isVisibilityLocked}
/>
<Select
label="Beneficiary Account No"
placeholder="Choose beneficiary account number"
data={benAccountOption}
value={beneficiaryAcc}
onChange={handleBeneficiary}
withAsterisk
readOnly={isVisibilityLocked}
nothingFoundMessage='No account found'
/>
<TextInput
label="Beneficiary Name"
value={beneficiaryName ? beneficiaryName : ""}
disabled
readOnly
withAsterisk
/>
<TextInput
label="Beneficiary IFSC Code"
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
disabled
readOnly
withAsterisk
/>
</Group>
<Group gap='xs' >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
</Text>
</Radio.Group>
<TextInput
label="Amount"
type="number"
value={amount}
onChange={(e) => {
let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={getAmountError()}
leftSection="₹"
withAsterisk
readOnly={showOtpField}
/>
<TextInput
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => {
let input = e.currentTarget.value;
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
setRemarks(input)
}}
maxLength={50}
withAsterisk
readOnly={showOtpField}
/>
</Group>
<Group grow>
{showOtpField && (
<TextInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
</Group>
<Group grow gap='xs'>
<Radio.Group
name="payment-mode"
label="Select Payment Method"
value={paymentMode}
onChange={setPaymentMode}
withAsterisk
disabled={showTxnPassword}
/>
)}
{showTxnPassword && (
readOnly={isVisibilityLocked}
>
<Group gap="xs">
<Radio value="IMPS" label="IMPS" />
<Radio value="RTGS" label="RTGS" />
<Radio value="NEFT" label="NEFT" />
</Group>
<Text size="xs" c="red">
{paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
{paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
{paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
</Text>
</Radio.Group>
<TextInput
label="Transaction Password"
placeholder="Enter transaction password"
type="password"
value={txnPassword}
onChange={(e) => setTxnPassword(e.currentTarget.value)}
label="Amount"
type="number"
value={amount}
onChange={(e) => {
let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={getAmountError()}
leftSection="₹"
withAsterisk
readOnly={showOtpField}
/>
)}
</Group>
<Group justify="flex-start">
<Button
variant="filled"
color="blue"
onClick={handleProceed}
loading={isSubmitting}
>
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
</Button>
</Group>
</Stack>
</div >
<TextInput
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => {
let input = e.currentTarget.value;
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
setRemarks(input)
}}
maxLength={50}
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>
<Group justify="flex-start">
<Button
variant="filled"
color="blue"
onClick={handleProceed}
loading={isSubmitting}
>
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
</Button>
</Group>
<Stack gap={1} mt="xs">
{paymentMode === "RTGS" &&
<>
<Text size="xs" >
• As per directions of RBI, RTGS transactions are subjected to the following{" "}
<strong>Time Varying Tariff</strong> in addition to the existing RTGS
Commission. The tariff will be calculated based on the time of completion
of transaction.
</Text>
<List
spacing="xs"
size="sm"
// icon={
// <ThemeIcon color="red" size={20} radius="xl">
// <IconAlertTriangle size={14} />
// </ThemeIcon>
// }
>
<List.Item>
From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
<strong>₹0.00</strong>
</List.Item>
<List.Item>
After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
<strong>₹1.00</strong>
</List.Item>
<List.Item>
After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
</List.Item>
</List>
</>
}
<Text size="xs" c="dimmed">
• Minimum Transfer Limit per Day is Rs. 1.00
</Text>
<Text size="xs" c="dimmed">
• Maximum Transfer Limit per Day is Rs. 500000.00
</Text>
<Text size="xs" c="dimmed">
• Available Transfer Amount on this Day is Rs. 500000.00
</Text>
</Stack>
</Stack>
</div >
)}
</>
);
}

45
src/app/(main)/funds_transfer/view_beneficiary/page.tsx
View File

@@ -13,6 +13,7 @@ import pnb from '@/app/image/bank_logo/pnb.jpg'
import axis from '@/app/image/bank_logo/axis.jpg'
import kccb from '@/app/image/bank_logo/kccb.jpg'
import logo from '@/app/image/bank_logo/bank.jpg';
import { IconTrash } from "@tabler/icons-react";
interface Beneficiary {
accountNo: string;
@@ -23,15 +24,31 @@ interface Beneficiary {
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,
"THE KANGRA CENTRAL CO-OP BANK LIMITED": kccb
}
export const getBankLogo = (bankName: string): StaticImageData | undefined => {
const name = bankName.toUpperCase();
if (name.includes("STATE BANK")) {
return sbi;
}
if (name.includes("PUNJAB NATIONAL")) {
return pnb;
}
if (name.includes("HDFC")) {
return hdfc;
}
if (name.includes("ICICI")) {
return icici;
}
if (name.includes("AXIS")) {
return axis;
}
if (name.includes("BANK OF INDIA")) {
return BOI;
}
if (name.includes("KANGRA")) {
return kccb;
}
return undefined; // fallback
};
export default function ViewBeneficiary() {
const router = useRouter();
@@ -95,11 +112,11 @@ export default function ViewBeneficiary() {
<Table.Thead>
<Table.Tr style={{ backgroundColor: "#3385ff" }}>
<Table.Th>Bank</Table.Th>
<Table.Th>Account No</Table.Th>
<Table.Th style={{ textAlign: "right" }}>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.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
<Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
@@ -108,7 +125,7 @@ export default function ViewBeneficiary() {
<Table.Td>
<Group gap='sm'>
<Image
src={bankLogo[b.bankName] || logo}
src={getBankLogo(b.bankName) ??logo}
alt={b.bankName}
width={20}
height={15}
@@ -120,7 +137,7 @@ export default function ViewBeneficiary() {
<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.Td style={{ textAlign: "center" }}><IconTrash color="red"/></Table.Td>
</Table.Tr>
))}
</Table.Tbody>