feat : api integration

src/app/ChangePassword/page.tsx

@@ -85,7 +85,7 @@ export default function ChangeLoginPwd() {
     });
     const data = await response.json();
     if (response.ok) {
-      // console.log(data);
+      console.log(data);
       notifications.show({
         withBorder: true,
         color: "green",

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,15 +5,31 @@ 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 CaptchaImage from './CaptchaImage';
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 export default function ChangeTransactionPwd() {
     const router = useRouter();
+<<<<<<< HEAD
     const [authorized, SetAuthorized] = useState<boolean | null>(null);
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
+=======
+    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);
+
+
+>>>>>>> 293a7dbea0766fdf05804199800c4e3fd9174507
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState('');
     const [captchaError, setCaptchaError] = useState('');
@@ -107,6 +123,7 @@ export default function ChangeTransactionPwd() {
         }
     }
 
+<<<<<<< HEAD
     useEffect(() => {
         const token = localStorage.getItem("access_token");
         if (!token) {
@@ -117,6 +134,84 @@ export default function ChangeTransactionPwd() {
             SetAuthorized(true);
         }
     }, []);
+=======
+    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,
+                    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%" }}
+                    />
+                </Box>
+                <div style={{ marginTop: '10px' }}>
+
+                    <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" }}>
+                            <Card p="xl" w="35vw">
+                                <Title order={3}
+                                    // @ts-ignore
+                                    align="center" mb="md">Set Transaction Password</Title>
+                                <form>
+                                    <PasswordInput
+                                        label="Transaction Password"
+                                        placeholder="Enter your password"
+                                        required
+                                        id="loginPassword"
+                                        onCopy={(e) => e.preventDefault()}
+                                        onPaste={(e) => e.preventDefault()}
+                                        onCut={(e) => e.preventDefault()}
+                                    />
+                                    {/* <PasswordInput
+                                        label="Confirm Transaction Password"
+                                        placeholder="Enter your password"
+                                        required
+                                        id="confirmPassword"
+                                        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")
+                                    }} >
+                                        Set
+                                    </Button> */}
+>>>>>>> 293a7dbea0766fdf05804199800c4e3fd9174507
 
     if (authorized) {
         return (

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;