From 78c0fa6e959dd442a3387d4e0fa63c6e563956de Mon Sep 17 00:00:00 2001
From: "tomosa.sarkar" <tomosa.sarkar@tcs.com>
Date: Fri, 29 Aug 2025 17:11:44 +0530
Subject: [PATCH] refactor: unified transaction url. feat: modify admin pages.

---
 package.json                                  |  12 +-
 .../account_statement/accountStatement.tsx    |   4 +-
 src/app/(main)/funds_transfer/page.tsx        |  15 +-
 .../funds_transfer/send_beneficiary/page.tsx  |  23 +-
 .../sendBeneficiaryOthers.tsx                 | 347 +++++++++++-------
 .../funds_transfer/view_beneficiary/page.tsx  |  45 ++-
 .../administrator/home/UserConfiguration.tsx  | 131 ++++---
 src/app/administrator/home/page.tsx           |  49 ++-
 src/app/administrator/login/page.tsx          | 196 +++++-----
 9 files changed, 501 insertions(+), 321 deletions(-)

diff --git a/package.json b/package.json
index 1b1b5aa..783ea3a 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mantine/carousel": "^7.4.0",
+    "@mantine/carousel": "^7.11.1",
     "@mantine/charts": "^7.11.1",
-    "@mantine/core": "^7.8.1",
-    "@mantine/dates": "^7.8.1",
-    "@mantine/form": "^7.11.0",
-    "@mantine/hooks": "^7.8.1",
-    "@mantine/notifications": "^7.8.1",
+    "@mantine/core": "^7.11.1",
+    "@mantine/dates": "^7.11.1",
+    "@mantine/form": "^7.11.1",
+    "@mantine/hooks": "^7.11.1",
+    "@mantine/notifications": "^7.11.1",
     "@tabler/icons-react": "^3.28.1",
     "@tanstack/react-query": "^5.32.0",
     "axios": "^1.6.8",
diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx
index b00c6b0..21b8ff5 100644
--- a/src/app/(main)/accounts/account_statement/accountStatement.tsx
+++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx
@@ -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 }}>
diff --git a/src/app/(main)/funds_transfer/page.tsx b/src/app/(main)/funds_transfer/page.tsx
index 94d68d2..10bddfc 100644
--- a/src/app/(main)/funds_transfer/page.tsx
+++ b/src/app/(main)/funds_transfer/page.tsx
@@ -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>
diff --git a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx
index 4461afc..d0952ca 100644
--- a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx
+++ b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx
@@ -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>
                 ) : (
diff --git a/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx b/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
index 7d7cdb2..a0dd871 100644
--- a/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
+++ b/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
@@ -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 >
+            )}
         </>
     );
 }
diff --git a/src/app/(main)/funds_transfer/view_beneficiary/page.tsx b/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
index a9685f0..3c275e0 100644
--- a/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
+++ b/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
@@ -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>
diff --git a/src/app/administrator/home/UserConfiguration.tsx b/src/app/administrator/home/UserConfiguration.tsx
index d280f74..f09a2e6 100644
--- a/src/app/administrator/home/UserConfiguration.tsx
+++ b/src/app/administrator/home/UserConfiguration.tsx
@@ -12,9 +12,9 @@ export default function UserConfiguration() {
   const [showPreviewModal, setShowPreviewModal] = useState(false);
   const [confirmedPreview, setConfirmedPreview] = 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 [mbAccess,setMbAccess] =useState<"read"|"transaction"|"">("");
+  const [mbAccess, setMbAccess] = useState<"read" | "transaction" | "">("");
   const isValidated = !!userDetails;
   const canSubmit = isValidated && !!savingsAccount && confirmedPreview;
 
@@ -154,64 +154,85 @@ export default function UserConfiguration() {
           </Box>
 
           <Divider label='Rights' size="xs" />
-          <Stack>
-            <Group grow>
-              <Box>
-                <Text fw={500}>Internet Banking</Text>
-                <Group mt="xs">
-                  <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>
+          <Stack gap="sm">
+            {/* Header row */}
+            <Group gap="xl">
+              <Box w={150}>
+                <Text fw={500}>Services</Text>
               </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 */}
-              <Box>
-                <Text fw={500}>Mobile Banking</Text>
-                <Group mt="xs">
-                  <Checkbox
-                    label="Enabled"
-                    checked={mbEnabled}
-                    onChange={(e) => {
-                      setMbEnabled(e.currentTarget.checked);
-                      if (!e.currentTarget.checked) setMbAccess(""); // reset if disabled
-                    }}
-                  />
-                  <Checkbox
-                    label="Read"
-                    disabled={!mbEnabled}
-                    checked={mbAccess === "read"}
-                    onChange={() => setMbAccess("read")}
-                  />
-                  <Checkbox
-                    label="Transaction"
-                    disabled={!mbEnabled}
-                    checked={mbAccess === "transaction"}
-                    onChange={() => setMbAccess("transaction")}
-                  />
-                </Group>
+            {/* Internet Banking row */}
+            <Group gap="xl" align="center">
+              <Box w={150}>
+                <Text>Internet Banking</Text>
+              </Box>
+              <Box w={100}>
+                <Checkbox
+                  checked={ibEnabled}
+                  onChange={(e) => {
+                    setIbEnabled(e.currentTarget.checked);
+                    if (!e.currentTarget.checked) setIbAccess("");
+                  }}
+                />
+              </Box>
+              <Box w={120}>
+                <Checkbox
+                  disabled={!ibEnabled}
+                  checked={ibAccess === "transaction"}
+                  onChange={() => setIbAccess("transaction")}
+                />
+              </Box>
+              <Box w={100}>
+                <Checkbox
+                  disabled={!ibEnabled}
+                  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>
             </Group>
           </Stack>
           {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>
           <TextInput label="CIF" value={CIF} readOnly disabled />
-          {/* <TextInput label="Internet Banking" value={internetBanking} readOnly disabled />
-          <TextInput label="Mobile Banking" value={mobileBanking} readOnly disabled /> */}
         </Stack>
         <Group p="right" mt="md">
           <Button variant="default" onClick={() => setShowPreviewModal(false)}>Cancel</Button>
diff --git a/src/app/administrator/home/page.tsx b/src/app/administrator/home/page.tsx
index 8a7ccb5..bdb8b38 100644
--- a/src/app/administrator/home/page.tsx
+++ b/src/app/administrator/home/page.tsx
@@ -5,8 +5,8 @@ import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";
-import logo from '@/app/image/logo.jpg';
-import { IconLogout, IconUsers, IconUserScreen } from "@tabler/icons-react";
+import logo from '@/app/image/logo1.jpg';
+import { IconLogout, IconPhoneFilled, IconUsers, IconUserScreen } from "@tabler/icons-react";
 import UserConfiguration from "./UserConfiguration";
 
 export default function Login() {
@@ -82,33 +82,48 @@ export default function Login() {
     if (authorized) {
         return (
             <Providers>
-                <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%", paddingTop: "5%" }}>
+                <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%",}}>
                     {/* Header */}
-                    <Box style={{
-                        position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
-                        display: "flex",
-                        justifyContent: "flex-start",
-                        background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
-                        // border: "1px solid black"
-                    }}>
+                    <Box
+                        style={{
+                            height: "60px",
+                            position: 'relative',
+                            width: '100%',
+                            display: "flex",
+                            justifyContent: "flex-start",
+                            background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
+                        }}
+                    >
                         <Image
                             fit="cover"
                             src={logo}
                             component={NextImage}
                             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
                             style={{
                                 position: 'absolute',
                                 top: '50%',
-                                left: '64%',
+                                left: '80%',
                                 color: 'white',
-                                textShadow: '1px 1px 2px blue',
+                                textShadow: '1px 1px 2px black',
                             }}
                         >
-                            {/* <IconBuildingBank/> */}
-                            Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215
+                            <IconPhoneFilled size={20} /> Toll Free No : 1800-180-8008
                         </Text>
                     </Box>
                     {/* layout and */}
@@ -117,13 +132,13 @@ export default function Login() {
                         <Box
                             style={{
                                 width: 220,
-                                background:"#ebf5f5ff",
+                                background: "#ebf5f5ff",
                                 // background: "linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 30%)",
                                 padding: '1rem',
                                 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" />
                             <Stack>
                                 <Text td="underline" variant="light" style={{ cursor: 'pointer' }} onClick={() => handleClick('UserConf')}>
diff --git a/src/app/administrator/login/page.tsx b/src/app/administrator/login/page.tsx
index 63ff00a..b95363b 100644
--- a/src/app/administrator/login/page.tsx
+++ b/src/app/administrator/login/page.tsx
@@ -5,7 +5,7 @@ import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 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 { generateCaptcha } from '@/app/captcha';
 
@@ -93,114 +93,116 @@ export default function Login() {
 
     return (
         <Providers>
-            <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%", paddingTop: "5%" }}>
+            <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100%" }}>
                 {/* 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={{
-                    position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
+                    flex: 1,
+                    position: "relative",
                     display: "flex",
-                    justifyContent: "flex-start",
-                    background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
-                    // border: "1px solid black"
+                    justifyContent: "flex-end",
+                    alignItems: "center",
+                    overflow: "hidden",
+                    background: 'linear-gradient(to right, #48ac64ff, #199444ff)'
                 }}>
+                    <Box style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
                     <Image
                         fit="cover"
-                        src={logo}
+                        src={frontPage}
                         component={NextImage}
                         alt="ebanking"
-                        style={{ width: "40%", height: "100%", objectFit: "contain", marginLeft: 0 }}
+                        style={{ width: "100%", height: "100%" }}
                     />
-                    <Text
-                        style={{
-                            position: 'absolute',
-                            top: '50%',
-                            left: '64%',
-                            color: 'white',
-                            textShadow: '1px 1px 2px blue',
-                        }}
-                    >
-                        {/* <IconBuildingBank/> */}
-                        Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215
+                    </Box>
+                    <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"
+                                />
+                                <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>
                 </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>
         </Providers>
     );