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"> <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"> <Text size="md" c="green">
₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", { ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
minimumFractionDigits: 2, 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" }}> <td style={{ ...cellStyle, textAlign: "left", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}>
{parseFloat(txn.amount).toLocaleString("en-IN", { {parseFloat(txn.amount).toLocaleString("en-IN", {
minimumFractionDigits: 2, minimumFractionDigits: 2,
})} })} <span style={{fontSize:'10px'}}>{txn.type==="DR"?"Dr.":"Cr."}</span>
</td> </td>
</tr> </tr>
))} ))}

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

@@ -105,7 +105,10 @@ export default function AccountSummary() {
<tr style={{ backgroundColor: "#3385ff" }}> <tr style={{ backgroundColor: "#3385ff" }}>
<th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th> <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Account No.</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> </tr>
</thead> </thead>
<tbody>{rows}</tbody> <tbody>{rows}</tbody>

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

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

@@ -167,6 +167,16 @@ export default function QuickPay() {
}); });
return; 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) { if (!showOtpField && !showTxnPassword && !showConfirmModel) {
setConfirmModel(true); setConfirmModel(true);
return; return;
@@ -268,7 +278,7 @@ export default function QuickPay() {
<Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text> <Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
<Text><strong>Payee Name:</strong> {beneficiaryName}</Text> <Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
<Text><strong>Amount:</strong> ₹ {amount}</Text> <Text><strong>Amount:</strong> ₹ {amount}</Text>
<Text><strong>Remarks:</strong> ₹ {remarks}</Text> <Text><strong>Remarks:</strong> {remarks}</Text>
</Stack> </Stack>
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button> <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]); }, [currentIndex]);
return ( return (
<Box style={{ position: 'relative', width: '60%', overflow: 'hidden',backgroundColor:"white" }}> <Box style={{ position: 'relative', width: '83%', overflow: 'hidden',backgroundColor:"white" }}>
{/* Scrollable container */} {/* Scrollable container */}
<Box <Box
ref={scrollRef} ref={scrollRef}

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

@@ -93,6 +93,7 @@ export default function Login() {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box style={{ <Box style={{
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
display: "flex", display: "flex",
@@ -121,6 +122,7 @@ export default function Login() {
</Text> </Text>
</Box> </Box>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
{/* Movable text */}
<Box <Box
style={{ style={{
width: "100%", width: "100%",
@@ -157,7 +159,9 @@ export default function Login() {
`} `}
</style> </style>
</Box> </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" }}> <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image <Image
fit="cover" fit="cover"
@@ -167,120 +171,60 @@ export default function Login() {
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
/> />
</div> </div>
<Card <Box w={{ base: "100%", md: "50%" }} p="lg">
shadow="lg" <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400,margin: "0 auto",height:'68vh'}}>
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">
<form onSubmit={handleLogin}> <form onSubmit={handleLogin}>
<TextInput <TextInput
size="md"
label="User ID" label="User ID"
placeholder="Enter your CIF No" placeholder="Enter your CIF No"
type="text"
inputMode="numeric"
value={CIF} value={CIF}
onInput={(e) => { onInput={(e) => {
const input = e.currentTarget.value.replace(/\D/g, ""); const input = e.currentTarget.value.replace(/\D/g, "");
if (input.length <= 11) { if (input.length <= 11) SetCIF(input);
SetCIF(input);
}
}} }}
required
error={error} error={error}
required
/> />
<PasswordInput <PasswordInput
label="Password" label="Password"
size="md"
placeholder="Enter your password" placeholder="Enter your password"
value={psw} value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)} onChange={(e) => SetPsw(e.currentTarget.value)}
required required
mt="sm"
/> />
<Group mt="xs" align="center" gap="xs" > <Group mt="sm" align="center">
<Box <Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
style={{ <Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
// 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> </Group>
<TextInput <TextInput
label="Enter CAPTCHA" label="Enter CAPTCHA"
size="md"
placeholder="Enter above text" placeholder="Enter above text"
value={inputCaptcha} value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)} onChange={(e) => setInputCaptcha(e.currentTarget.value)}
required required
mt="sm"
/> />
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md"> <Button type="submit" fullWidth mt="md" disabled={isLogging}>
{/* Login */} {isLogging ? "Logging..." : "Login"}
{isLogging ? "Logging...." : "Login"}
</Button> </Button>
</form> </form>
</Flex>
</Box>
</Stack>
</Card> </Card>
{/* </div> */} </Box>
</div> </div>
<Box style={{ {/* Carousel and Notes */}
width: "100%", <Flex direction={{ base: "column", md: "row" }} mt="lg" p="lg">
height: '50vh', <Box w={{ base: "100%", md: "60%" }}>
textAlign: "left",
marginTop: 10,
display: "flex",
// border: "1px solid blue"
}}>
<ClientCarousel /> <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> <Title order={2}>Security Notes :</Title>
<br></br> <Text mt="sm" size="md">When you Login, Your User Id and Password travels in an encrypted and highly secured mode.</Text>
<Text size="lg">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>
<br></br> <Anchor> http://www.kccb.in/</Anchor>
<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>
</Box> </Box>
</Flex>
{/* Footer */}
<Box <Box
component="footer" component="footer"
style={{ style={{