fix: Homepage design
wip :Integrate quick pay for own bank wip: Design account page as discussed
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 97 KiB |
@@ -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}
|
||||
|
||||
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user