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

fix: Homepage design

Browse Source 
wip :Integrate quick pay for own bank
wip: Design account page as discussed
This commit is contained in:
Tomosa Sarkar
2025-07-20 11:23:07 +05:30
parent eae989642b
commit 10a3da8949
10 changed files with 200 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(main)/accounts/account_details/page.tsx
View File

@@ -162,7 +162,7 @@ export default function AccountDetails() {
</>
) : (
<Group p="apart">
<Text size="sm" fw={500} c="dimmed">Balance</Text>
<Text size="sm" fw={500} c="dimmed">Available Balance</Text>
<Text size="md" c="green">
₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
minimumFractionDigits: 2,

2
src/app/(main)/accounts/account_statement/accountStatement.tsx
View File

@@ -203,7 +203,7 @@ export default function AccountStatementPage() {
<td style={{ ...cellStyle, textAlign: "left", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}>
{parseFloat(txn.amount).toLocaleString("en-IN", {
minimumFractionDigits: 2,
})}
})} <span style={{fontSize:'10px'}}>{txn.type==="DR"?"Dr.":"Cr."}</span>
</td>
</tr>
))}

5
src/app/(main)/accounts/page.tsx
View File

@@ -105,7 +105,10 @@ export default function AccountSummary() {
<tr style={{ backgroundColor: "#3385ff" }}>
<th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
{title.includes("Deposit Accounts (INR)") ?
(<th style={{ ...cellStyle, textAlign: "right" }}> Credit Book Balance</th>)
: (<th style={{ ...cellStyle, textAlign: "right" }}>Debit Book Balance</th>)}
</tr>
</thead>
<tbody>{rows}</tbody>

0
src/app/(main)/funds_transfer/add_beneficary/page.tsx
View File

20
src/app/(main)/funds_transfer/page.tsx
View File

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from'@/app/OTPGenerator';
import { generateOTP } from '@/app/OTPGenerator';
interface accountData {
stAccountNo: string;
@@ -94,7 +94,7 @@ export default function QuickPay() {
}, [authorized]);
async function handleValidate(){
async function handleValidate() {
if (!selectedAccNo || !beneficiaryAcc ||
!confirmBeneficiaryAcc
) {
@@ -149,7 +149,7 @@ export default function QuickPay() {
}
};
async function handleProceed(){
async function handleProceed() {
if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !beneficiaryType || !amount || !remarks) {
notifications.show({
title: "Validation Error",
@@ -167,6 +167,16 @@ export default function QuickPay() {
});
return;
}
if (parseInt(amount) <= 0) {
notifications.show({
title: "Invalid amount",
message: "Amount Can not be less than Zero",
color: "red",
});
return;
}
if (!showOtpField && !showTxnPassword && !showConfirmModel) {
setConfirmModel(true);
return;
@@ -218,7 +228,7 @@ export default function QuickPay() {
toAccountType: beneficiaryType,
amount: amount,
narration: remarks,
tpassword:txnPassword,
tpassword: txnPassword,
}),
});
const result = await res.json();
@@ -268,7 +278,7 @@ export default function QuickPay() {
<Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
<Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
<Text><strong>Amount:</strong> ₹ {amount}</Text>
<Text><strong>Remarks:</strong> ₹ {remarks}</Text>
<Text><strong>Remarks:</strong> {remarks}</Text>
</Stack>
<Group justify="flex-end" mt="md">
<Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>

BIN
src/app/image/DICGC_image.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 134 KiB

BIN
src/app/image/ib_front_page.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 79 KiB

BIN
src/app/image/objective.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 97 KiB

2
src/app/login/clientCarousel.tsx
View File

@@ -40,7 +40,7 @@ export default function CustomCarousel() {
}, [currentIndex]);
return (
<Box style={{ position: 'relative', width: '60%', overflow: 'hidden',backgroundColor:"white" }}>
<Box style={{ position: 'relative', width: '83%', overflow: 'hidden',backgroundColor:"white" }}>
{/* Scrollable container */}
<Box
ref={scrollRef}

110
src/app/login/page.tsx
View File

@@ -93,6 +93,7 @@ export default function Login() {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box style={{
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
display: "flex",
@@ -121,6 +122,7 @@ export default function Login() {
</Text>
</Box>
<div style={{ marginTop: '10px' }}>
{/* Movable text */}
<Box
style={{
width: "100%",
@@ -157,7 +159,9 @@ export default function Login() {
`}
</style>
</Box>
<div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative" }}>
{/* Main */}
<div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative",
background:'linear-gradient(to right, #02081eff, #0a3d91)' }}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
@@ -167,120 +171,60 @@ export default function Login() {
style={{ width: "100%", height: "100%" }}
/>
</div>
<Card
shadow="lg"
padding="xl"
radius="md"
style={{
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f0f0f0",
borderRadius: 0,
height: "100%",
boxShadow: "0 2px 10px rgba(228, 215, 215, 0.1)",
// border:"1px solid black"
}}
>
<Stack gap="xs" style={{ width: "100%", maxWidth: 480, marginTop: 0 }}>
<Title order={6} style={{ marginLeft: 10, marginBottom: "8px" }}>
<Text fs="italic">Welcome To KCC Bank</Text>
<Text fw={700} style={{ fontSize: "18px", color: "#000066" }}>Internet Banking</Text>
</Title>
<Box
style={{
// width: 370,
marginTop: 0,
// paddingTop: 5,
padding: "10px",
border: "1px solid #e0e0d1",
}}
>
<Flex justify="center" gap="md">
<Box w={{ base: "100%", md: "50%" }} p="lg">
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400,margin: "0 auto",height:'68vh'}}>
<form onSubmit={handleLogin}>
<TextInput
size="md"
label="User ID"
placeholder="Enter your CIF No"
type="text"
inputMode="numeric"
value={CIF}
onInput={(e) => {
const input = e.currentTarget.value.replace(/\D/g, "");
if (input.length <= 11) {
SetCIF(input);
}
if (input.length <= 11) SetCIF(input);
}}
required
error={error}
required
/>
<PasswordInput
label="Password"
size="md"
placeholder="Enter your password"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
required
mt="sm"
/>
<Group mt="xs" align="center" gap="xs" >
<Box
style={{
// padding: "5px",
alignItems: "center",
backgroundColor: "#fff",
fontFamily: "'UnifrakturCook',cursive",
// textDecoration: "line-through",
fontSize: "16px",
userSelect: "none",
display: "flex",
width: "30%"
}}
>
{captcha}
</Box>
<Button variant="outline" size="xs" onClick={regenerateCaptcha}>
Refresh
</Button>
<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"
size="md"
placeholder="Enter above text"
value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
required
mt="sm"
/>
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
{/* Login */}
{isLogging ? "Logging...." : "Login"}
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"}
</Button>
</form>
</Flex>
</Box>
</Stack>
</Card>
{/* </div> */}
</Box>
</div>
<Box style={{
width: "100%",
height: '50vh',
textAlign: "left",
marginTop: 10,
display: "flex",
// border: "1px solid blue"
}}>
{/* Carousel and Notes */}
<Flex direction={{ base: "column", md: "row" }} mt="lg" p="lg">
<Box w={{ base: "100%", md: "60%" }}>
<ClientCarousel />
<Box style={{ width: "40%", textAlign: "center" }}>
</Box>
<Box w={{ base: "100%", md: "40%" }} p="md" style={{ textAlign: "center" }}>
<Title order={2}>Security Notes :</Title>
<br></br>
<Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text>
<br></br>
<Text size="lg" fs="italic">For more information on Products and Services, Please Visit</Text>
<Text c="blue" td="underline">http://www.kccb.in/</Text>
</Box>
<Text mt="sm" size="md">When you Login, Your User Id and Password travels in an encrypted and highly secured mode.</Text>
<Text mt="sm" fs="italic">For more information on Products and Services, Please Visit</Text>
<Anchor> http://www.kccb.in/</Anchor>
</Box>
</Flex>
{/* Footer */}
<Box
component="footer"
style={{