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

12
package.json
View File

@@ -9,13 +9,13 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@mantine/carousel": "^7.4.0", "@mantine/carousel": "^7.11.1",
"@mantine/charts": "^7.11.1", "@mantine/charts": "^7.11.1",
"@mantine/core": "^7.8.1", "@mantine/core": "^7.11.1",
"@mantine/dates": "^7.8.1", "@mantine/dates": "^7.11.1",
"@mantine/form": "^7.11.0", "@mantine/form": "^7.11.1",
"@mantine/hooks": "^7.8.1", "@mantine/hooks": "^7.11.1",
"@mantine/notifications": "^7.8.1", "@mantine/notifications": "^7.11.1",
"@tabler/icons-react": "^3.28.1", "@tabler/icons-react": "^3.28.1",
"@tanstack/react-query": "^5.32.0", "@tanstack/react-query": "^5.32.0",
"axios": "^1.6.8", "axios": "^1.6.8",

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

@@ -146,7 +146,7 @@ export default function AccountStatementPage() {
{/* Left side – form */} {/* Left side – form */}
<Grid.Col span={{ base: 12, md: 4 }}> <Grid.Col span={{ base: 12, md: 4 }}>
<Paper shadow="sm" radius="md" p="md" withBorder h={400}> <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 <Select
label="Select Account Number" label="Select Account Number"
placeholder="Choose account number" placeholder="Choose account number"
@@ -176,7 +176,7 @@ export default function AccountStatementPage() {
{/* Right side – transaction list */} {/* Right side – transaction list */}
<Grid.Col span={{ base: 12, md: 8 }}> <Grid.Col span={{ base: 12, md: 8 }}>
<Paper shadow="sm" radius="md" p="md" withBorder h={400} style={{ display: 'flex', flexDirection: 'column' }}> <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> <Text fw={500} fs="italic" >Account No : {selectedAccNo}</Text>
<Divider size="xs" /> <Divider size="xs" />
<ScrollArea style={{ flex: 1 }}> <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 Quick Pay - Own Bank
</Title> </Title>
<div style={{ maxHeight: "320px", overflowY: "auto" }}> <div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Stack gap="xs"> <Stack gap="xs">
<Group grow> <Group grow>
<Select <Select
@@ -423,7 +423,7 @@ export default function QuickPay() {
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ? selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false} "Amount exceeds available balance" : false}
withAsterisk withAsterisk
leftSection ="₹" leftSection="₹"
readOnly={showOtpField} readOnly={showOtpField}
/> />
@@ -498,6 +498,17 @@ export default function QuickPay() {
</Button> </Button>
</Group> </Group>
</Stack> </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>
{/* ) : ( {/* ) : (
<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 { generateOTP } from '@/app/OTPGenerator';
import SendToBeneficiaryOthers from "./sendBeneficiaryOthers"; import SendToBeneficiaryOthers from "./sendBeneficiaryOthers";
interface accountData { interface accountData {
stAccountNo: string; stAccountNo: string;
stAccountType: string; stAccountType: string;
@@ -257,6 +258,8 @@ export default function SendToBeneficiaryOwn() {
setIsSubmitting(false); setIsSubmitting(false);
setShowTxnPassword(false); setShowTxnPassword(false);
setShowOtpField(false); setShowOtpField(false);
setOtp('');
setTxnPassword('');
} }
}; };
@@ -311,7 +314,7 @@ export default function SendToBeneficiaryOwn() {
</Radio.Group> </Radio.Group>
{bankType === "own" ? ( {bankType === "own" ? (
<div style={{ maxHeight: "320px", overflowY: "auto" }}> <div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Stack gap="xs"> <Stack gap="xs">
<Group grow> <Group grow>
<Select <Select
@@ -340,9 +343,7 @@ export default function SendToBeneficiaryOwn() {
readOnly readOnly
withAsterisk withAsterisk
/> />
</Group> </Group>
<Group justify="space-between" > <Group justify="space-between" >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance : <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0} {selectedAccount ? selectedAccount.stAvailableBalance : 0}
@@ -372,7 +373,7 @@ export default function SendToBeneficiaryOwn() {
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ? selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false} "Amount exceeds available balance" : false}
withAsterisk withAsterisk
leftSection ="₹" leftSection="₹"
readOnly={showOtpField} readOnly={showOtpField}
/> />
@@ -425,6 +426,20 @@ export default function SendToBeneficiaryOwn() {
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"} {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
</Button> </Button>
</Group> </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> </Stack>
</div> </div>
) : ( ) : (

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

@@ -1,10 +1,11 @@
"use client"; "use client";
import React, { useEffect, useRef, useState } from "react"; 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 { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator'; import { generateOTP } from '@/app/OTPGenerator';
import { IconAlertTriangle } from "@tabler/icons-react";
interface accountData { interface accountData {
stAccountNo: string; stAccountNo: string;
@@ -17,6 +18,7 @@ export default function SendToBeneficiaryOthers() {
const [authorized, setAuthorized] = useState<boolean | null>(null); const [authorized, setAuthorized] = useState<boolean | null>(null);
const [accountData, setAccountData] = useState<accountData[]>([]); const [accountData, setAccountData] = useState<accountData[]>([]);
const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]); const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
const [showIntroModal, setShowIntroModal] = useState(true);
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null); const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null); const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null); const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
@@ -287,6 +289,8 @@ export default function SendToBeneficiaryOthers() {
setIsSubmitting(false); setIsSubmitting(false);
setShowTxnPassword(false); setShowTxnPassword(false);
setShowOtpField(false); setShowOtpField(false);
setOtp('');
setTxnPassword('');
} }
}; };
@@ -294,6 +298,58 @@ export default function SendToBeneficiaryOthers() {
return ( 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 <Modal
opened={showConfirmModel} opened={showConfirmModel}
onClose={() => setConfirmModel(false)} onClose={() => setConfirmModel(false)}
@@ -330,133 +386,178 @@ export default function SendToBeneficiaryOthers() {
</Group> </Group>
</Modal> </Modal>
{/* main content */} {/* main content */}
<div style={{ maxHeight: "320px", overflowY: "auto" }}> {!showIntroModal && (
<Stack gap={5} justify="flex-start"> <div style={{ maxHeight: "290px", overflowY: "auto" }}>
<Group grow gap='xs' > <Stack gap={5} justify="flex-start">
<Select <Group grow gap='xs' >
label="Select Debit Account Number" <Select
placeholder="Choose account number" label="Select Debit Account Number"
data={accountOptions} placeholder="Choose account number"
value={selectedAccNo} data={accountOptions}
onChange={setSelectedAccNo} value={selectedAccNo}
withAsterisk onChange={setSelectedAccNo}
readOnly={isVisibilityLocked} withAsterisk
/> readOnly={isVisibilityLocked}
<Select />
label="Beneficiary Account No" <Select
placeholder="Choose beneficiary account number" label="Beneficiary Account No"
data={benAccountOption} placeholder="Choose beneficiary account number"
value={beneficiaryAcc} data={benAccountOption}
onChange={handleBeneficiary} value={beneficiaryAcc}
withAsterisk onChange={handleBeneficiary}
readOnly={isVisibilityLocked} withAsterisk
nothingFoundMessage='No account found' readOnly={isVisibilityLocked}
/> nothingFoundMessage='No account found'
<TextInput />
label="Beneficiary Name" <TextInput
value={beneficiaryName ? beneficiaryName : ""} label="Beneficiary Name"
disabled value={beneficiaryName ? beneficiaryName : ""}
readOnly disabled
withAsterisk readOnly
/> withAsterisk
<TextInput />
label="Beneficiary IFSC Code" <TextInput
value={beneficiaryIFSC ? beneficiaryIFSC : ""} label="Beneficiary IFSC Code"
disabled value={beneficiaryIFSC ? beneficiaryIFSC : ""}
readOnly disabled
withAsterisk readOnly
/> withAsterisk
</Group> />
<Group gap='xs' > </Group>
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance : <Group gap='xs' >
{selectedAccount ? selectedAccount.stAvailableBalance : 0} <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
</Text> {selectedAccount ? selectedAccount.stAvailableBalance : 0}
</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."}
</Text> </Text>
</Radio.Group> </Group>
<Group grow gap='xs'>
<TextInput <Radio.Group
label="Amount" name="payment-mode"
type="number" label="Select Payment Method"
value={amount} value={paymentMode}
onChange={(e) => { onChange={setPaymentMode}
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)}
withAsterisk withAsterisk
disabled={showTxnPassword} readOnly={isVisibilityLocked}
/> >
)} <Group gap="xs">
{showTxnPassword && ( <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 <TextInput
label="Transaction Password" label="Amount"
placeholder="Enter transaction password" type="number"
type="password" value={amount}
value={txnPassword} onChange={(e) => {
onChange={(e) => setTxnPassword(e.currentTarget.value)} let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={getAmountError()}
leftSection="₹"
withAsterisk withAsterisk
readOnly={showOtpField}
/> />
)}
</Group> <TextInput
<Group justify="flex-start"> label="Remarks"
<Button placeholder="Enter remarks"
variant="filled" value={remarks}
color="blue" onChange={(e) => {
onClick={handleProceed} let input = e.currentTarget.value;
loading={isSubmitting} input = input.replace(/[^a-zA-Z0-9 ]/g, "");
> setRemarks(input)
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"} }}
</Button> maxLength={50}
</Group> withAsterisk
</Stack> readOnly={showOtpField}
</div > />
</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 axis from '@/app/image/bank_logo/axis.jpg'
import kccb from '@/app/image/bank_logo/kccb.jpg' import kccb from '@/app/image/bank_logo/kccb.jpg'
import logo from '@/app/image/bank_logo/bank.jpg'; import logo from '@/app/image/bank_logo/bank.jpg';
import { IconTrash } from "@tabler/icons-react";
interface Beneficiary { interface Beneficiary {
accountNo: string; accountNo: string;
@@ -23,15 +24,31 @@ interface Beneficiary {
branchName: string; branchName: string;
} }
const bankLogo: Record<string, StaticImageData> = { export const getBankLogo = (bankName: string): StaticImageData | undefined => {
"BANK OF INDIA": BOI, const name = bankName.toUpperCase();
"HDFC BANK LTD": hdfc, if (name.includes("STATE BANK")) {
"STATE BANK OF INDIA": sbi, return sbi;
"ICICI BANK LTD": icici, }
"PUNJAB NATIONAL BANK": pnb, if (name.includes("PUNJAB NATIONAL")) {
"AXIS BANK": axis, return pnb;
"THE KANGRA CENTRAL CO-OP BANK LIMITED": kccb }
} 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() { export default function ViewBeneficiary() {
const router = useRouter(); const router = useRouter();
@@ -95,11 +112,11 @@ export default function ViewBeneficiary() {
<Table.Thead> <Table.Thead>
<Table.Tr style={{ backgroundColor: "#3385ff" }}> <Table.Tr style={{ backgroundColor: "#3385ff" }}>
<Table.Th>Bank</Table.Th> <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>Name</Table.Th>
<Table.Th>Type</Table.Th> <Table.Th>Type</Table.Th>
<Table.Th>IFSC</Table.Th> <Table.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
{/* <Table.Th>Branch</Table.Th> */} <Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
</Table.Tr> </Table.Tr>
</Table.Thead> </Table.Thead>
<Table.Tbody> <Table.Tbody>
@@ -108,7 +125,7 @@ export default function ViewBeneficiary() {
<Table.Td> <Table.Td>
<Group gap='sm'> <Group gap='sm'>
<Image <Image
src={bankLogo[b.bankName] || logo} src={getBankLogo(b.bankName) ??logo}
alt={b.bankName} alt={b.bankName}
width={20} width={20}
height={15} height={15}
@@ -120,7 +137,7 @@ export default function ViewBeneficiary() {
<Table.Td>{b.name}</Table.Td> <Table.Td>{b.name}</Table.Td>
<Table.Td>{b.accountType}</Table.Td> <Table.Td>{b.accountType}</Table.Td>
<Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</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.Tr>
))} ))}
</Table.Tbody> </Table.Tbody>

131
src/app/administrator/home/UserConfiguration.tsx
View File

@@ -12,9 +12,9 @@ export default function UserConfiguration() {
const [showPreviewModal, setShowPreviewModal] = useState(false); const [showPreviewModal, setShowPreviewModal] = useState(false);
const [confirmedPreview, setConfirmedPreview] = useState(false); const [confirmedPreview, setConfirmedPreview] = useState(false);
const [ibEnabled, setIbEnabled] = useState(false); const [ibEnabled, setIbEnabled] = useState(false);
const [ibAccess,setIbAccess] =useState<"read"|"transaction"|"">(""); const [ibAccess, setIbAccess] = useState<"read" | "transaction" | "">("");
const [mbEnabled, setMbEnabled] = useState(false); const [mbEnabled, setMbEnabled] = useState(false);
const [mbAccess,setMbAccess] =useState<"read"|"transaction"|"">(""); const [mbAccess, setMbAccess] = useState<"read" | "transaction" | "">("");
const isValidated = !!userDetails; const isValidated = !!userDetails;
const canSubmit = isValidated && !!savingsAccount && confirmedPreview; const canSubmit = isValidated && !!savingsAccount && confirmedPreview;
@@ -154,64 +154,85 @@ export default function UserConfiguration() {
</Box> </Box>
<Divider label='Rights' size="xs" /> <Divider label='Rights' size="xs" />
<Stack> <Stack gap="sm">
<Group grow> {/* Header row */}
<Box> <Group gap="xl">
<Text fw={500}>Internet Banking</Text> <Box w={150}>
<Group mt="xs"> <Text fw={500}>Services</Text>
<Checkbox
label="Enabled"
checked={ibEnabled}
onChange={(e) => {
setIbEnabled(e.currentTarget.checked);
if (!e.currentTarget.checked) setIbAccess(""); // reset if disabled
}}
/>
<Checkbox
label="Read"
disabled={!ibEnabled}
checked={ibAccess === "read"}
onChange={() => setIbAccess("read")}
/>
<Checkbox
label="Transaction"
disabled={!ibEnabled}
checked={ibAccess === "transaction"}
onChange={() => setIbAccess("transaction")}
/>
</Group>
</Box> </Box>
<Box w={100}>
<Text fw={500}>Enable</Text>
</Box>
<Box w={120}>
<Text fw={500}>Transaction</Text>
</Box>
<Box w={100}>
<Text fw={500}>Read</Text>
</Box>
</Group>
{/* Mobile Banking */} {/* Internet Banking row */}
<Box> <Group gap="xl" align="center">
<Text fw={500}>Mobile Banking</Text> <Box w={150}>
<Group mt="xs"> <Text>Internet Banking</Text>
<Checkbox </Box>
label="Enabled" <Box w={100}>
checked={mbEnabled} <Checkbox
onChange={(e) => { checked={ibEnabled}
setMbEnabled(e.currentTarget.checked); onChange={(e) => {
if (!e.currentTarget.checked) setMbAccess(""); // reset if disabled setIbEnabled(e.currentTarget.checked);
}} if (!e.currentTarget.checked) setIbAccess("");
/> }}
<Checkbox />
label="Read" </Box>
disabled={!mbEnabled} <Box w={120}>
checked={mbAccess === "read"} <Checkbox
onChange={() => setMbAccess("read")} disabled={!ibEnabled}
/> checked={ibAccess === "transaction"}
<Checkbox onChange={() => setIbAccess("transaction")}
label="Transaction" />
disabled={!mbEnabled} </Box>
checked={mbAccess === "transaction"} <Box w={100}>
onChange={() => setMbAccess("transaction")} <Checkbox
/> disabled={!ibEnabled}
</Group> checked={ibAccess === "read"}
onChange={() => setIbAccess("read")}
/>
</Box>
</Group>
{/* Mobile Banking row */}
<Group gap="xl" align="center">
<Box w={150}>
<Text>Mobile Banking</Text>
</Box>
<Box w={100}>
<Checkbox
checked={mbEnabled}
onChange={(e) => {
setMbEnabled(e.currentTarget.checked);
if (!e.currentTarget.checked) setMbAccess("");
}}
/>
</Box>
<Box w={120}>
<Checkbox
disabled={!mbEnabled}
checked={mbAccess === "transaction"}
onChange={() => setMbAccess("transaction")}
/>
</Box>
<Box w={100}>
<Checkbox
disabled={!mbEnabled}
checked={mbAccess === "read"}
onChange={() => setMbAccess("read")}
/>
</Box> </Box>
</Group> </Group>
</Stack> </Stack>
{accountError && ( {accountError && (
<Text color="red" size="sm" mt="xs">{accountError}</Text> <Text c="red" size="sm" mt="xs">{accountError}</Text>
)} )}
</> </>
@@ -229,8 +250,6 @@ export default function UserConfiguration() {
> >
<Stack> <Stack>
<TextInput label="CIF" value={CIF} readOnly disabled /> <TextInput label="CIF" value={CIF} readOnly disabled />
{/* <TextInput label="Internet Banking" value={internetBanking} readOnly disabled />
<TextInput label="Mobile Banking" value={mobileBanking} readOnly disabled /> */}
</Stack> </Stack>
<Group p="right" mt="md"> <Group p="right" mt="md">
<Button variant="default" onClick={() => setShowPreviewModal(false)}>Cancel</Button> <Button variant="default" onClick={() => setShowPreviewModal(false)}>Cancel</Button>

49
src/app/administrator/home/page.tsx
View File

@@ -5,8 +5,8 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import logo from '@/app/image/logo.jpg'; import logo from '@/app/image/logo1.jpg';
import { IconLogout, IconUsers, IconUserScreen } from "@tabler/icons-react"; import { IconLogout, IconPhoneFilled, IconUsers, IconUserScreen } from "@tabler/icons-react";
import UserConfiguration from "./UserConfiguration"; import UserConfiguration from "./UserConfiguration";
export default function Login() { export default function Login() {
@@ -82,33 +82,48 @@ export default function Login() {
if (authorized) { if (authorized) {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%",}}>
{/* Header */} {/* Header */}
<Box style={{ <Box
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, style={{
display: "flex", height: "60px",
justifyContent: "flex-start", position: 'relative',
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)", width: '100%',
// border: "1px solid black" display: "flex",
}}> justifyContent: "flex-start",
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
}}
>
<Image <Image
fit="cover" fit="cover"
src={logo} src={logo}
component={NextImage} component={NextImage}
alt="ebanking" alt="ebanking"
style={{ width: "40%", height: "100%", objectFit: "contain", marginLeft: 0 }} style={{ width: "100%", height: "100%" }}
/> />
<Title
order={2}
style={{
fontFamily: 'Roboto',
position: 'absolute',
top: '30%',
left: '6%',
color: 'White',
transition: "opacity 0.5s ease-in-out",
}}
>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text <Text
style={{ style={{
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
left: '64%', left: '80%',
color: 'white', color: 'white',
textShadow: '1px 1px 2px blue', textShadow: '1px 1px 2px black',
}} }}
> >
{/* <IconBuildingBank/> */} <IconPhoneFilled size={20} /> Toll Free No : 1800-180-8008
Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215
</Text> </Text>
</Box> </Box>
{/* layout and */} {/* layout and */}
@@ -117,13 +132,13 @@ export default function Login() {
<Box <Box
style={{ style={{
width: 220, width: 220,
background:"#ebf5f5ff", background: "#ebf5f5ff",
// background: "linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 30%)", // background: "linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 30%)",
padding: '1rem', padding: '1rem',
borderRight: '1px solid #ccc', borderRight: '1px solid #ccc',
}} }}
> >
<Title order={3} style={{textAlign:'center'}}>Admin Portal</Title> <Title order={3} style={{ textAlign: 'center' }}>Admin Portal</Title>
<Divider my="xs" label="Menu" labelPosition="center" /> <Divider my="xs" label="Menu" labelPosition="center" />
<Stack> <Stack>
<Text td="underline" variant="light" style={{ cursor: 'pointer' }} onClick={() => handleClick('UserConf')}> <Text td="underline" variant="light" style={{ cursor: 'pointer' }} onClick={() => handleClick('UserConf')}>

196
src/app/administrator/login/page.tsx
View File

@@ -5,7 +5,7 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import logo from '@/app/image/logo.jpg'; import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/admin_login.jpg'; import frontPage from '@/app/image/admin_login.jpg';
import { generateCaptcha } from '@/app/captcha'; import { generateCaptcha } from '@/app/captcha';
@@ -93,114 +93,116 @@ export default function Login() {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%" }}>
{/* Header */} {/* Header */}
<Box
component="header"
style={{
width: "100%",
padding: "0.8rem 2rem",
background: "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
color: "white",
boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
position: "sticky",
top: 0,
zIndex: 100,
}}
>
<Group gap="md">
<Image
src={logo}
component={NextImage}
fit="contain"
alt="ebanking"
style={{ width: "60px", height: "auto" }}
/>
<div>
<Title order={3} style={{ fontFamily: "Roboto", color: "white", marginBottom: 2 }}>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text size="xs" c="white" style={{ opacity: 0.85 }}>
Head Office: Dharmshala, Kangra (H.P), Pin: 176215
</Text>
</div>
</Group>
</Box>
{/* Main */}
<Box style={{ <Box style={{
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, flex: 1,
position: "relative",
display: "flex", display: "flex",
justifyContent: "flex-start", justifyContent: "flex-end",
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)", alignItems: "center",
// border: "1px solid black" overflow: "hidden",
background: 'linear-gradient(to right, #48ac64ff, #199444ff)'
}}> }}>
<Box style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image <Image
fit="cover" fit="cover"
src={logo} src={frontPage}
component={NextImage} component={NextImage}
alt="ebanking" alt="ebanking"
style={{ width: "40%", height: "100%", objectFit: "contain", marginLeft: 0 }} style={{ width: "100%", height: "100%" }}
/> />
<Text </Box>
style={{ <Box w={{ base: "100%", md: "50%" }} p="lg">
position: 'absolute', <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 500, margin: "0 auto", height: '70vh', backdropFilter: 'blur(8px)' }}>
top: '50%', {/* @ts-ignore */}
left: '64%', <Title order={3} align='center'>Admin Portal</Title>
color: 'white', <form onSubmit={handleLogin}>
textShadow: '1px 1px 2px blue', <TextInput
}} label="User Name"
> placeholder="Enter your user name"
{/* <IconBuildingBank/> */} value={userName}
Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215 onChange={(e) => setUserName(e.currentTarget.value)}
error={error}
withAsterisk
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Group mt="sm" align="center">
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"}
</Button>
</form>
</Card>
</Box>
</Box>
{/* Footer */}
<Box
component="footer"
style={{
width: "100%",
textAlign: "center",
fontSize: "12px",
}}
>
<Text c='dimmed'>
© 2025 KCC Bank. All rights reserved.
</Text> </Text>
</Box> </Box>
<div>
{/* Main */}
<div style={{
display: "flex", height: "84vh", overflow: "hidden", position: "relative",
background: 'linear-gradient(to right, #48ac64ff, #199444ff)'
}}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
src={frontPage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
</div>
<Box w={{ base: "100%", md: "50%" }} p="lg">
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 500, margin: "0 auto", height: '70vh', backdropFilter: 'blur(8px)' }}>
{/* @ts-ignore */}
<Title order={3} align='center'>Admin Portal</Title>
<form onSubmit={handleLogin}>
<TextInput
label="User Name"
placeholder="Enter your user name"
value={userName}
onChange={(e) => setUserName(e.currentTarget.value)}
error={error}
withAsterisk
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
{/* <Box style={{ textAlign: "right"}}>
<Anchor
style={{ fontSize: "14px", color: "#1c7ed6", cursor: "pointer" }}
// onClick={() => router.push("/ValidateUser")}
>
Forgot Password?
</Anchor>
</Box> */}
<Group mt="sm" align="center">
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"}
</Button>
</form>
</Card>
</Box>
</div>
{/* Footer */}
<Box
component="footer"
style={{
width: "100%",
textAlign: "center",
fontSize: "12px",
}}
>
<Text c='dimmed'>
© 2025 KCC Bank. All rights reserved.
</Text>
</Box>
</div>
</div> </div>
</Providers> </Providers>
); );