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

feat : api integration

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-07-09 16:10:49 +05:30
parent 09d61e556c 293a7dbea0
commit 893dcbc761
4 changed files with 268 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/ChangePassword/page.tsx
View File

@@ -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",

1
src/app/ChangeTxn/CaptchaImage.tsx
View File

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

97
src/app/ChangeTxn/page.tsx
View File

@@ -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 (

170
src/app/FundsTransfer/page.tsx Normal file
View File

@@ -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;