change login password and change transaction password pages validation add

This commit is contained in:
2025-07-09 12:09:58 +05:30
parent 4b3e89673b
commit 293a7dbea0
4 changed files with 254 additions and 62 deletions

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;