change login password and change transaction password pages validation add

src/app/ChangePassword/page.tsx

@@ -5,14 +5,13 @@ import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";
-import myImage from '@/app/image/ebanking.jpg';
+import logo from '@/app/image/logo.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import dynamic from 'next/dynamic';
 import RegistrationTimeline from '../_components/timeline/RegistrationTimeline';
 import CaptchaImage from './CaptchaImage'; // adjust path if needed
 
-
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
-
 
 
 function generateCaptcha(length = 6) {
@@ -30,6 +29,15 @@ export default function Changeloginpwd() {
 
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+
+
+  //const [loginVisible, setLoginVisible] = useState(false);
+  const [confirmVisible, setConfirmVisible] = useState(false);
+
+  // const toggleLoginVisibility = () => setLoginVisible((v) => !v);
+  const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+
+
   const [error, setError] = useState("");
 
   const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
@@ -41,14 +49,7 @@ export default function Changeloginpwd() {
 
 
 
-  // useEffect(() => {
-  //   setCaptcha(generateCaptcha());
-  // }, []);
 
-  // const regenerateCaptcha = () => {
-  //   setCaptcha(generateCaptcha());
-  //   setInputCaptcha("");
-  // };
 
   useEffect(() => {
     generateCaptcha();
@@ -68,11 +69,16 @@ export default function Changeloginpwd() {
   return (
     <Providers>
       <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
-        <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
+        <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%)"
+        }}>
           <Image
             // radius="md"
             fit="cover"
-            src={myImage}
+            src={logo}
             component={NextImage}
             alt="ebanking"
             style={{ width: "100%", height: "100%" }}
@@ -101,17 +107,33 @@ export default function Changeloginpwd() {
                     onCut={(e) => e.preventDefault()}
                   />
 
+
                   <PasswordInput
+                    mt="md"
                     label="Confirm Login Password"
                     placeholder="Enter your password"
                     required
                     id="confirmPassword"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.currentTarget.value)}
+                    type={confirmVisible ? 'text' : 'password'}
+                    rightSection={
+                      <button
+                        type="button"
+                        onClick={toggleConfirmVisibility}
+                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
+                      >
+                        {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
+                      </button>
+                    }
                     onCopy={(e) => e.preventDefault()}
                     onPaste={(e) => e.preventDefault()}
                     onCut={(e) => e.preventDefault()}
-
                   />
 
+
+
+
                   {/* CAPTCHA */}
                   <div style={{ marginTop: 20 }}>
                     <label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
@@ -220,3 +242,7 @@ export default function Changeloginpwd() {
     </Providers >
   );
 }
+function setConfirmVisible(arg0: (v: any) => boolean) {
+  throw new Error("Function not implemented.");
+}
+

src/app/ChangeTxn/CaptchaImage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
+
 const CaptchaImage = ({ text }: { text: string }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 

src/app/ChangeTxn/page.tsx

@@ -5,10 +5,11 @@ import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";
-import myImage from '@/app/image/ebanking.jpg';
+import logo from '@/app/image/logo.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import dynamic from 'next/dynamic';
 import CaptchaImage from './CaptchaImage';
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 function generateCaptcha(length = 6) {
     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -20,6 +21,15 @@ export default function Changetransactionpwd() {
     const [error, setError] = useState<string | null>(null);
     const [CIF, SetCIF] = useState("");
     const [psw, SetPsw] = useState("");
+
+
+    //const [loginVisible, setLoginVisible] = useState(false);
+    const [confirmVisible, setConfirmVisible] = useState(false);
+
+    // const toggleLoginVisibility = () => setLoginVisible((v) => !v);
+    const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+
+
     const [captcha, setCaptcha] = useState("");
     const [inputCaptcha, setInputCaptcha] = useState("");
     const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
@@ -93,63 +103,23 @@ export default function Changetransactionpwd() {
     return (
         <Providers>
             <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
-                <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
+                <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%)"
+                }}>
                     <Image
                         // radius="md"
                         fit="cover"
-                        src={myImage}
+                        src={logo}
                         component={NextImage}
                         alt="ebanking"
                         style={{ width: "100%", height: "100%" }}
                     />
                 </Box>
                 <div style={{ marginTop: '10px' }}>
-                    {/* <div style={{ display: "flex", height: "70vh", overflow: "hidden", position: "relative" }}>
-            <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
-              <Image
-                fit="cover"
-                src={changePwdImage}
-                component={NextImage}
-                alt="ebanking"
-                style={{ width: "100%", height: "100%" }}
-              />
-            </div>
-            <Card p="xl">
-              <Title order={3}
-                // @ts-ignore
-                align="center" mb="md">Change User Login Password</Title>
-              <form>
-                <PasswordInput
-                  label="Login Password"
-                  placeholder="Enter your password"
-                  required
-                />
-                <PasswordInput
-                  label="Confirm Login Password"
-                  placeholder="Enter your password"
-                  required
-                />
-                <Button fullWidth mt="sm" color="blue"  >
-                  Set
-                </Button>
-              </form>
 
-              <br></br>
-              <Box
-                style={{
-                  flex: 1,
-                  borderLeft: '1px solid #ccc',
-                  paddingLeft: 16,
-                  minHeight: 90,
-
-                }}
-              >
-                <Text size="sm">
-                  <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
-                </Text>
-              </Box>
-            </Card>
-          </div> */}
                     <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
                         <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
                         <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
@@ -167,7 +137,7 @@ export default function Changetransactionpwd() {
                                         onPaste={(e) => e.preventDefault()}
                                         onCut={(e) => e.preventDefault()}
                                     />
-                                    <PasswordInput
+                                    {/* <PasswordInput
                                         label="Confirm Transaction Password"
                                         placeholder="Enter your password"
                                         required
@@ -175,7 +145,32 @@ export default function Changetransactionpwd() {
                                         onCopy={(e) => e.preventDefault()}
                                         onPaste={(e) => e.preventDefault()}
                                         onCut={(e) => e.preventDefault()}
+                                    /> */}
+                                    <PasswordInput
+                                        mt="md"
+                                        label="Confirm Login Password"
+                                        placeholder="Enter your password"
+                                        required
+                                        id="confirmPassword"
+                                        value={psw}
+                                        onChange={(e) => SetPsw(e.currentTarget.value)}
+                                        type={confirmVisible ? 'text' : 'password'}
+                                        rightSection={
+                                            <button
+                                                type="button"
+                                                onClick={toggleConfirmVisibility}
+                                                style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
+                                            >
+                                                {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
+                                            </button>
+                                        }
+                                        onCopy={(e) => e.preventDefault()}
+                                        onPaste={(e) => e.preventDefault()}
+                                        onCut={(e) => e.preventDefault()}
                                     />
+
+
+
                                     {/* <Button fullWidth mt="sm" color="blue" onClick={() => {
                                         router.push("/login")
                                     }} >

src/app/FundsTransfer/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import React from 'react';
+import { Card, Button, Grid, Title, Text, Container, Box, Image } from '@mantine/core';
+import NextImage from "next/image";
+import logo from "@/app/image/logo.jpg";
+
+import { IconBan, IconRefresh, IconExchange, IconCreditCard, IconBuildingBank, IconMobiledata, IconWallet, IconTransferIn } from '@tabler/icons-react';
+import { IconLogout } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+
+
+
+const options = [
+    {
+        title: 'Transfer within the bank',
+        subtitle: '₹1 to ₹25 Lacs per day',
+    },
+    {
+        title: 'IMPS P2A - Instant Transfer',
+        subtitle: '365 days, 24x7',
+    },
+    {
+        title: 'Transfer to other bank (NEFT)',
+        subtitle: 'Also for Credit Cards',
+    },
+    {
+        title: 'Transfer to other bank (RTGS)',
+        subtitle: '₹2 Lacs to ₹25 Lacs per day',
+    },
+    {
+        title: 'IMPS P2P - Instant Transfer',
+        subtitle: '(IMPS: Mobile No.)',
+    },
+
+];
+
+
+interface TransactionOptionProps {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+}
+
+const TransactionOption: React.FC<TransactionOptionProps> = ({ title, description, icon }) => (
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+        <Grid align="center" justify="center" gutter="sm">
+            <Grid.Col span={12} style={{ textAlign: 'center' }}>
+                {icon}
+            </Grid.Col>
+            <Grid.Col span={12} style={{ textAlign: 'center' }}>
+                <Title order={4}>{title}</Title>
+                <Text size="sm" mt="xs">{description}</Text>
+                <Button fullWidth mt="md" variant="light">Go</Button>
+            </Grid.Col>
+        </Grid>
+    </Card>
+);
+
+const FundsTransferPage: React.FC = () => {
+
+    const router = useRouter();
+    
+    async function handleLogout(e: React.FormEvent) {
+        e.preventDefault();
+        localStorage.removeItem("access_token");
+        router.push("/login")
+    }
+
+    return (
+        <div style={{ backgroundColor: "#c1e0f0", width: "100%", height: "100%", paddingTop: "5%" }}>
+            <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%)"
+            }}>
+                <Image
+                    // radius="md"
+                    fit="cover"
+                    src={logo}
+                    component={NextImage}
+                    alt="ebanking"
+                    style={{ width: "100%", height: "100%" }}
+                />
+                <Button style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '90%',
+                    color: 'white',
+                    textShadow: '1px 1px 2px black',
+                    fontSize: "20px"
+                }}
+                    leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
+            </Box>
+            <div style={{ marginTop: '10px' }}>
+                <Box mt="lg" p="xl">
+                    {/* @ts-ignore */}
+                    <Title order={2} align="center" mb="md">Select Transaction Type</Title>
+                    <Grid gutter="lg">
+                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+                            <TransactionOption
+                                title="Transfer within the bank"
+                                description="(Re. 1 to Rs. 25 Lacs per day)"
+                                //icon={<IconBan size={40} stroke={1.5} />}
+                                icon={<IconTransferIn size={40} stroke={1.5} />}
+                            />
+                        </Grid.Col>
+
+                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+                            <TransactionOption
+                                title="IMPS P2A - Instant Transfer"
+                                description="(365 days, 24X7) (Re. 1 to Rs. 25 Lacs)"
+                                icon={<IconExchange size={40} stroke={1.5} />}
+                            />
+                        </Grid.Col>
+
+                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+                            <TransactionOption
+                                title="Transfer to other bank (NEFT)"
+                                description="(Also for Credit Cards Payment)"
+                                icon={<IconCreditCard size={40} stroke={1.5} />}
+                            />
+                        </Grid.Col>
+
+                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+                            <TransactionOption
+                                title="Transfer to other bank (RTGS)"
+                                description="(Rs. 2 Lacs to Rs. 25 Lacs per day)"
+                                icon={<IconBuildingBank size={40} stroke={1.5} />}
+                            />
+                        </Grid.Col>
+
+                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+                            <TransactionOption
+                                title="IMPS P2P - Instant Transfer"
+                                description="(365 days, 24X7) (IMPS: Mobile No.)"
+                                icon={<IconMobiledata size={40} stroke={1.5} />}
+                            />
+                        </Grid.Col>
+
+
+                    </Grid>
+                </Box>
+
+                <Box
+                    component="footer"
+                    style={{
+                        width: "100%",
+                        textAlign: "center",
+                        padding: "10px 0",
+                        bottom: 0,
+                        left: 0,
+                        zIndex: 1000,
+                        fontSize: "14px",
+                    }}
+                >
+                    <Text>
+                        © 2025 KCC Bank. All rights reserved. {" "}
+
+                    </Text>
+                </Box>
+            </div>
+
+        </div>
+    );
+};
+
+export default FundsTransferPage;