Merge branch 'dev' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/tomosa.sarkar/IB into settings
This commit is contained in:
3
TODO.md
3
TODO.md
@@ -22,6 +22,7 @@
|
||||
- >view rights
|
||||
- Forget Password
|
||||
- >For Migration if user not have password
|
||||
|
||||
- E-mandate
|
||||
- Make every page responsive
|
||||
|
||||
|
||||
|
||||
@@ -5,14 +5,46 @@
|
||||
- Download **AWS Session Manager Plugin**
|
||||
- Generate **Key for KCCB**
|
||||
|
||||
____________________________________________________________
|
||||
### Production: (Run in systemctl)
|
||||
- cd /etc/systemd/system
|
||||
<!-- IB is the service name -->
|
||||
- vi IB.service
|
||||
```
|
||||
[Unit]
|
||||
Description= Internet Banking Frontened Application in Node
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
# Use absolute path for node or npm
|
||||
User=ib
|
||||
Group=ib
|
||||
ExecStart=/usr/bin/npm start
|
||||
WorkingDirectory=/home/ib/IB
|
||||
Restart=on-failure
|
||||
RestartSec=5
|
||||
Environment=NODE_ENV=production
|
||||
Environment=PORT=3000
|
||||
SuccessExitStatus=143
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
|
||||
<All value are changed as per domain>
|
||||
```
|
||||
- sudo systemctl status IB
|
||||
- sudo systemctl start IB
|
||||
- sudo systemctl stop IB
|
||||
- sudo systemctl restart IB
|
||||
|
||||
---
|
||||
|
||||
## Machine
|
||||
```bash
|
||||
|
||||
UAT (IB- frontend) : i-0b55435e15425f1c3
|
||||
Linux : i-0c850dcf8b85b1447
|
||||
Prod : i-088e64c3435cb5078
|
||||
UAT (IB- frontend Test) : i-0b55435e15425f1c3
|
||||
Linux : i-0c850dcf8b85b1447 (Test)
|
||||
Prod : i-088e64c3435cb5078 (For IB & MB)
|
||||
```
|
||||
|
||||
## 2. Port Forwarding
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group } from "@mantine/core";
|
||||
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card } from "@mantine/core";
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
@@ -8,10 +8,11 @@ import dayjs from 'dayjs';
|
||||
import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react";
|
||||
import { generatePDF } from "@/app/_components/statement_download/PdfGenerator";
|
||||
import { generateCSV } from "@/app/_components/statement_download/CsvGenerator";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
|
||||
export default function AccountStatementPage() {
|
||||
|
||||
const pdfRef = useRef<HTMLDivElement>(null);
|
||||
// const pdfRef = useRef<HTMLDivElement>(null);
|
||||
const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
||||
const [startDate, setStartDate] = useState<Date | null>(null);
|
||||
@@ -21,6 +22,7 @@ export default function AccountStatementPage() {
|
||||
const passedAccNo = searchParams.get("accNo");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [availableBalance, setAvailableBalance] = useState<string | null>(null);
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
useEffect(() => {
|
||||
const saved = sessionStorage.getItem("accountData");
|
||||
@@ -108,12 +110,12 @@ export default function AccountStatementPage() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (end.diff(start, "day") > 90) {
|
||||
if (end.diff(start, "day") > 30) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Invalid Date range",
|
||||
message: "End date must be within 90 days from start date",
|
||||
message: "End date must be within 30 days from start date",
|
||||
autoClose: 4000,
|
||||
});
|
||||
return;
|
||||
@@ -179,12 +181,16 @@ export default function AccountStatementPage() {
|
||||
value={startDate}
|
||||
onChange={setStartDate}
|
||||
placeholder="Enter start date"
|
||||
minDate={dayjs("1920-01-01").toDate()}
|
||||
maxDate={dayjs().toDate()}
|
||||
/>
|
||||
<DateInput
|
||||
label="End Date"
|
||||
value={endDate}
|
||||
onChange={setEndDate}
|
||||
placeholder="Enter end date"
|
||||
minDate={dayjs("1920-01-01").toDate()}
|
||||
maxDate={dayjs().toDate()}
|
||||
/>
|
||||
<Button fullWidth mt="md" onClick={handleAccountTransaction}>
|
||||
Proceed
|
||||
@@ -233,9 +239,19 @@ export default function AccountStatementPage() {
|
||||
</Group>
|
||||
|
||||
<Divider size="xs" />
|
||||
{(startDate && endDate) && (
|
||||
<Text fs="italic" c="#228be6" ta="center">
|
||||
Transactions from {dayjs(startDate).format("DD/MM/YYYY")} to {dayjs(endDate).format("DD/MM/YYYY")}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(!startDate && !endDate && transactions.length > 0) && (
|
||||
<Text fs="italic" c="#228be6" ta="center">
|
||||
Last 5 Transactions
|
||||
</Text>
|
||||
)}
|
||||
<ScrollArea style={{ flex: 1 }}>
|
||||
{loading ? (
|
||||
|
||||
<Center h="100%">
|
||||
<Stack align="center" gap="sm">
|
||||
<Loader size="lg" color="cyan" type="bars" />
|
||||
@@ -244,42 +260,70 @@ export default function AccountStatementPage() {
|
||||
</Center>
|
||||
) : transactions.length === 0 ? (
|
||||
<p>No transactions found.</p>
|
||||
) : isMobile ? (
|
||||
// ✅ Mobile View – Card Layout
|
||||
<Stack gap="sm">
|
||||
{transactions.map((txn, i) => (
|
||||
<Card key={i} shadow="xs" radius="md" withBorder>
|
||||
<Group p="apart">
|
||||
<Text fw={600} size="sm">
|
||||
{txn.name || "—"}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{txn.date || "—"}
|
||||
</Text>
|
||||
</Group>
|
||||
<Divider my="xs" />
|
||||
<Group p="apart">
|
||||
<Text size="sm" c={txn.type === "DR" ? "red" : "green"}>
|
||||
₹{parseFloat(txn.amount).toLocaleString("en-IN", { minimumFractionDigits: 2 })}{" "}
|
||||
<span style={{ fontSize: 11 }}>{txn.type === "DR" ? "Dr." : "Cr."}</span>
|
||||
</Text>
|
||||
<Text size="xs" c="blue">
|
||||
Bal: ₹{txn.balance || "—"}
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<>
|
||||
<Text fs="italic" c='#228be6' ta='center'>
|
||||
{!startDate && !endDate ? 'Last 5 Transactions'
|
||||
: startDate && endDate ? `Transactions from ${dayjs(startDate).format("DD/MM/YYYY")} to ${dayjs(endDate).format("DD/MM/YYYY")}`
|
||||
: ""}
|
||||
</Text>
|
||||
<Table style={{ borderCollapse: "collapse", width: '100%' }}>
|
||||
<thead style={{ backgroundColor: "#3385ff" }}>
|
||||
{/* <tr>
|
||||
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Name</th>
|
||||
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Date</th>
|
||||
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Type</th>
|
||||
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Amount(₹)</th>
|
||||
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Available Balance(₹)</th>
|
||||
</tr> */}
|
||||
</thead>
|
||||
<tbody style={{ maxHeight: '250px', overflowY: 'auto', width: '100%' }}>
|
||||
{transactions.map((txn, i) => (
|
||||
<tr key={i}>
|
||||
<td style={{ ...cellStyle, textAlign: "left" }}> {txn.name || "—"}</td>
|
||||
<td style={{ ...cellStyle, textAlign: "left" }}>{txn.date || "—"}</td>
|
||||
{/* <td style={{ ...cellStyle, textAlign: "left" }}>{txn.type}</td> */}
|
||||
<td style={{ ...cellStyle, textAlign: "right", 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>
|
||||
<td style={{ ...cellStyle, textAlign: "right", color: "blue", fontSize: '12px' }}>₹{txn.balance || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</>
|
||||
// ✅ Desktop View – Table Layout
|
||||
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
|
||||
<thead style={{ backgroundColor: "#3385ff" }}>
|
||||
<tr>
|
||||
<th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Name</th>
|
||||
<th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Date</th>
|
||||
<th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Amount (₹)</th>
|
||||
<th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Balance (₹)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((txn, i) => (
|
||||
<tr key={i}>
|
||||
<td style={{ ...cellStyle, textAlign: "left" }}>{txn.name || "—"}</td>
|
||||
<td style={{ ...cellStyle, textAlign: "left" }}>{txn.date || "—"}</td>
|
||||
<td
|
||||
style={{
|
||||
...cellStyle,
|
||||
textAlign: "right",
|
||||
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>
|
||||
<td style={{ ...cellStyle, textAlign: "right", color: "blue", fontSize: "12px" }}>
|
||||
₹{txn.balance || "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
</Paper>
|
||||
</Grid.Col >
|
||||
</Grid >
|
||||
|
||||
@@ -1,18 +1,23 @@
|
||||
"use client";
|
||||
import { Divider, Stack, Text } from '@mantine/core';
|
||||
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import Image from "next/image";
|
||||
import logo from "@/app/image/logo1.jpg";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const [drawerOpened, setDrawerOpened] = useState(false);
|
||||
|
||||
const links = [
|
||||
{ label: "Account Summary", href: "/accounts" },
|
||||
{ label: "Statement of Account", href: "/accounts/account_statement" },
|
||||
{ label: "Account Statement ", href: "/accounts/account_statement" },
|
||||
{ label: "Account Details", href: "/accounts/account_details" },
|
||||
];
|
||||
useEffect(() => {
|
||||
@@ -28,45 +33,145 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<div style={{ display: "flex", height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: '#c5e4f9',
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
|
||||
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
|
||||
My Accounts
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
My Accounts
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
|
||||
{links.map(link => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? 'darkblue' : 'blue'}
|
||||
style={{
|
||||
textDecoration: isActive ? 'underline' : 'none',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</div>
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1, padding: '1rem' }}>
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(!drawerOpened)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
My Accounts
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
padding="md"
|
||||
size="75%"
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
||||
styles={{
|
||||
root: {
|
||||
backgroundColor: "#e6f5ff", // soft background for drawer
|
||||
// borderLeft: "4px solid #228be6",
|
||||
// borderRadius: "8px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Logo and Drawer Header */}
|
||||
<Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
|
||||
<>
|
||||
<Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
|
||||
<Text
|
||||
fw={700}
|
||||
ml="10px"
|
||||
style={{ fontSize: "18px", color: "#228be6" }}
|
||||
>
|
||||
My Accounts
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
variant="subtle"
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
color: isActive ? "#fff" : "#228be6",
|
||||
backgroundColor: isActive ? "#228be6" : "#dceeff",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
transition: "0.3s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = "#228be6";
|
||||
target.style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
|
||||
target.style.color = isActive ? "#fff" : "#228be6";
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
|
||||
import { Group, Paper, ScrollArea, Stack, Table, Text, Title } from "@mantine/core";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
@@ -16,6 +17,7 @@ export default function AccountSummary() {
|
||||
const router = useRouter();
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const [accountData, setAccountData] = useState<accountData[]>([]);
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
async function FetchAccountDetails() {
|
||||
try {
|
||||
@@ -61,7 +63,8 @@ export default function AccountSummary() {
|
||||
|
||||
const cellStyle = {
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
padding: isMobile ? "8px" : "10px",
|
||||
fontSize: isMobile ? "13px" : "14px",
|
||||
};
|
||||
|
||||
// Filter accounts
|
||||
@@ -96,7 +99,7 @@ export default function AccountSummary() {
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder w="100%"
|
||||
// bg="#97E6B8"
|
||||
>
|
||||
<Title order={4} mb="sm">
|
||||
<Title order={isMobile ? 5 : 4} mb="sm">
|
||||
{title}
|
||||
</Title>
|
||||
<ScrollArea>
|
||||
@@ -117,25 +120,38 @@ export default function AccountSummary() {
|
||||
</Paper>
|
||||
);
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}
|
||||
// bg="linear-gradient(90deg,rgba(195, 218, 227, 1) 0%, rgba(151, 230, 184, 1) 50%)"
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder>
|
||||
<Title
|
||||
order={isMobile ? 4 : 3}
|
||||
mb="md"
|
||||
style={{ textAlign: isMobile ? "center" : "left" }}
|
||||
>
|
||||
<Title order={3} mb="md">Account Summary</Title>
|
||||
Account Summary
|
||||
</Title>
|
||||
|
||||
{/* ✅ Responsive layout: Group for desktop, Stack for mobile */}
|
||||
{isMobile ? (
|
||||
<Stack gap="md">
|
||||
{depositAccounts.length > 0 &&
|
||||
renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
|
||||
{loanAccounts.length > 0 &&
|
||||
renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Group align="flex-start" grow>
|
||||
{/* Left table for Deposit Accounts */}
|
||||
{depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
|
||||
|
||||
{/* Right table for Loan Accounts (only shown if available) */}
|
||||
{loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
|
||||
{depositAccounts.length > 0 &&
|
||||
renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
|
||||
{loanAccounts.length > 0 &&
|
||||
renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
|
||||
</Group>
|
||||
<Text mt="sm" size="xs" c="dimmed">
|
||||
* Book Balance includes uncleared effects.
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
)}
|
||||
|
||||
return null;
|
||||
<Text mt="sm" size="xs" c="dimmed">
|
||||
* Book Balance includes uncleared effects.
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
"use client";
|
||||
import { Divider, Stack, Text } from '@mantine/core';
|
||||
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import logo from "@/app/image/logo1.jpg";
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const [drawerOpened, setDrawerOpened] = useState(false);
|
||||
|
||||
const links = [
|
||||
{ label: " Quick Pay", href: "/funds_transfer" },
|
||||
@@ -29,45 +34,145 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<div style={{ display: "flex", height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: '#c5e4f9',
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
|
||||
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
|
||||
{links.map(link => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? 'darkblue' : 'blue'}
|
||||
style={{
|
||||
textDecoration: isActive ? 'underline' : 'none',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</div>
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1, padding: '1rem' }}>
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(!drawerOpened)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
Send Money
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
padding="md"
|
||||
size="75%"
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
||||
styles={{
|
||||
root: {
|
||||
backgroundColor: "#e6f5ff", // soft background for drawer
|
||||
// borderLeft: "4px solid #228be6",
|
||||
// borderRadius: "8px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Logo and Drawer Header */}
|
||||
<Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
|
||||
<>
|
||||
<Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
|
||||
<Text
|
||||
fw={700}
|
||||
ml="10px"
|
||||
style={{ fontSize: "18px", color: "#228be6" }}
|
||||
>
|
||||
Send Money
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
variant="subtle"
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
color: isActive ? "#fff" : "#228be6",
|
||||
backgroundColor: isActive ? "#228be6" : "#dceeff",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
transition: "0.3s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = "#228be6";
|
||||
target.style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
|
||||
target.style.color = isActive ? "#fff" : "#228be6";
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,6 +266,8 @@ export default function QuickPay() {
|
||||
setOtp("");
|
||||
setValidationStatus(null);
|
||||
setBeneficiaryName(null);
|
||||
setTimerActive(false);
|
||||
setCountdown(180);
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
@@ -293,6 +295,8 @@ export default function QuickPay() {
|
||||
setShowTxnPassword(false);
|
||||
setShowOtpField(false);
|
||||
setIsSubmitting(false);
|
||||
setTimerActive(false);
|
||||
setCountdown(180);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
|
||||
import { Providers } from "../../providers";
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
|
||||
interface accountData {
|
||||
stAccountNo: string;
|
||||
@@ -19,6 +20,7 @@ interface accountData {
|
||||
export default function Home() {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const [accountData, SetAccountData] = useState<accountData[]>([]);
|
||||
const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
|
||||
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
|
||||
@@ -27,7 +29,7 @@ export default function Home() {
|
||||
const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
|
||||
const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
|
||||
const [showBalance, setShowBalance] = useState(false);
|
||||
const PassExpiryRemains =(dayjs(localStorage.getItem("pswExpiryDate"))).diff(dayjs(),"day")
|
||||
const PassExpiryRemains = (dayjs(localStorage.getItem("pswExpiryDate"))).diff(dayjs(), "day")
|
||||
|
||||
// If back and forward button is clicked
|
||||
useEffect(() => {
|
||||
@@ -42,11 +44,11 @@ export default function Home() {
|
||||
router.push("/login");
|
||||
};
|
||||
const handleBeforeUnload = () => {
|
||||
// logout on tab close / refresh
|
||||
localStorage.removeItem("access_token");
|
||||
sessionStorage.removeItem("access_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
// logout on tab close / refresh
|
||||
localStorage.removeItem("access_token");
|
||||
sessionStorage.removeItem("access_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
};
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
@@ -112,29 +114,62 @@ export default function Home() {
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div>
|
||||
<Title order={4} style={{ padding: "10px" }}>Accounts Overview</Title>
|
||||
<Group style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}>
|
||||
<IconEye size={20} />
|
||||
<Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
|
||||
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
||||
<Box p={isMobile ? "8px" : "10px"}>
|
||||
<Title order={4} style={{fontSize: isMobile ? "18px" : "22px" }}>
|
||||
Accounts Overview
|
||||
</Title>
|
||||
|
||||
{/* Show Balance Switch */}
|
||||
<Group
|
||||
style={{
|
||||
flex: 1,
|
||||
// padding: isMobile ? "5px" : "10px 10px 4px 10px",
|
||||
marginLeft: isMobile ? 0 : "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
height: "auto",
|
||||
gap: isMobile ? 5 : 10,
|
||||
}}
|
||||
>
|
||||
<IconEye size={isMobile ? 16 : 20} />
|
||||
<Text fw={700} style={{ fontFamily: "inter", fontSize: isMobile ? "14px" : "17px" }}>
|
||||
Show Balance
|
||||
</Text>
|
||||
<Switch
|
||||
size={isMobile ? "sm" : "md"}
|
||||
onLabel="ON"
|
||||
offLabel="OFF"
|
||||
checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)}
|
||||
/>
|
||||
</Group>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '15px' }}>
|
||||
<Group grow gap="xl">
|
||||
|
||||
{/* Cards Section */}
|
||||
{isMobile ? (
|
||||
<Stack gap="md" style={{ width: "100%", marginTop: "10px" }}>
|
||||
{/* Deposit Account Card */}
|
||||
<Paper p="md" radius="md" style={{
|
||||
backgroundColor: '#c1e0f0', width: 350, height: 195, display: 'flex',
|
||||
flexDirection: 'column', justifyContent: 'space-between'
|
||||
}}>
|
||||
<Group gap='xs'>
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Deposit Account</Text>
|
||||
<Paper
|
||||
p="md"
|
||||
radius="md"
|
||||
style={{
|
||||
backgroundColor: "#c1e0f0",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={20} />
|
||||
<Text fw={700} style={{ fontSize: "14px" }}>
|
||||
Deposit Account
|
||||
</Text>
|
||||
{depositAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={depositAccounts.map(acc => ({
|
||||
data={depositAccounts.map((acc) => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`,
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
@@ -145,12 +180,172 @@ export default function Home() {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: 140
|
||||
}
|
||||
width: "120px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">No deposit account available</Text>
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No deposit account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{depositAccounts.length > 0 ? (
|
||||
<>
|
||||
<Text c="dimmed" style={{ fontSize: "12px" }}>
|
||||
{Number(selectedDAData?.stAccountNo || 0)}
|
||||
</Text>
|
||||
<Title order={4} mt="md">
|
||||
{showBalance
|
||||
? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString("en-IN")}`
|
||||
: "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>
|
||||
Get Statement
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a deposit account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Loan Account Card */}
|
||||
<Paper
|
||||
p="md"
|
||||
radius="md"
|
||||
style={{
|
||||
backgroundColor: "#c1e0f0",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={20} />
|
||||
<Text fw={700} style={{ fontSize: "14px" }}>
|
||||
Loan Account
|
||||
</Text>
|
||||
{loanAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={loanAccounts.map((acc) => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`,
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedLN}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: "120px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No loan account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{loanAccounts.length > 0 ? (
|
||||
<>
|
||||
<Text c="dimmed" style={{ fontSize: "12px" }}>
|
||||
{Number(selectedLNData?.stAccountNo || 0)}
|
||||
</Text>
|
||||
<Title order={4} mt="md">
|
||||
{showBalance
|
||||
? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}`
|
||||
: "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>
|
||||
Get Statement
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a loan account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Important Links Card */}
|
||||
<Paper
|
||||
p="md"
|
||||
radius="md"
|
||||
style={{
|
||||
width: "100%",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid grey",
|
||||
}}
|
||||
>
|
||||
<Title order={5} mb="sm">
|
||||
Quick Links
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Loan EMI Calculator
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Branch Locator
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Customer Care
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
FAQs
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
) : (
|
||||
<Group grow gap="md" style={{ width: "100%", marginTop: "10px" }}>
|
||||
{/* Desktop Cards */}
|
||||
{/* Deposit Account Card */}
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: "#c1e0f0", width: 350, height: 195, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Deposit Account</Text>
|
||||
{depositAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={depositAccounts.map((acc) => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`,
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedDA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: 140,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No deposit account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
@@ -158,32 +353,34 @@ export default function Home() {
|
||||
<>
|
||||
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>Get Statement</Button>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>
|
||||
Get Statement
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">Apply for a deposit account to get started</Text>
|
||||
<Button fullWidth mt="xs">Apply Now</Button>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a deposit account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Loan Account Card */}
|
||||
<Paper p="md" radius="md" style={{
|
||||
backgroundColor: '#c1e0f0', width: 355, height: 195, display: 'flex',
|
||||
flexDirection: 'column', justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Group gap='xs'>
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: "#c1e0f0", width: 355, height: 195, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Loan Account</Text>
|
||||
{loanAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={loanAccounts.map(acc => ({
|
||||
data={loanAccounts.map((acc) => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`,
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
@@ -194,12 +391,14 @@ export default function Home() {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 30,
|
||||
width: 140
|
||||
}
|
||||
width: 140,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">No loan account available</Text>
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No loan account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
@@ -207,42 +406,60 @@ export default function Home() {
|
||||
<>
|
||||
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>Get Statement</Button>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>
|
||||
Get Statement
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">Apply for a loan account to get started</Text>
|
||||
<Button fullWidth mt="xs">Apply Now</Button>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a loan account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Important Links Card */}
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
|
||||
<Title order={5} mb="sm">Quick Links </Title>
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: "#FFFFFF", border: "1px solid grey" }}>
|
||||
<Title order={5} mb="sm">
|
||||
Quick Links
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Customer Care</Button>
|
||||
<Button variant="light" color="blue" fullWidth>FAQs</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Loan EMI Calculator
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Branch Locator
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
Customer Care
|
||||
</Button>
|
||||
<Button variant="light" color="blue" fullWidth>
|
||||
FAQs
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</div>
|
||||
<div style={{ padding: "20px", display: "flex", justifyContent: "left" }}>
|
||||
)}
|
||||
|
||||
{/* Notes Section */}
|
||||
<Box style={{ padding: "5px", display: "flex", justifyContent: "left" }}>
|
||||
<Stack>
|
||||
<Text fw={700}> ** Book Balance includes uncleared effect.</Text>
|
||||
<Text fw={700}> ** Click on the "Show Balance"to display balance for the Deposit and Loan account.</Text>
|
||||
<Text fw={400} c="red"> ** Your Password will expire in {PassExpiryRemains} days.</Text>
|
||||
<Text></Text>
|
||||
<Text fw={700}> ** Click on the "Show Balance" to display balance for the Deposit and Loan account.</Text>
|
||||
<Text fw={400} c="red">
|
||||
** Your Password will expire in {PassExpiryRemains} days.
|
||||
</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import { Providers } from '../providers';
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import NextImage from 'next/image';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -16,7 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
|
||||
const [custname, setCustname] = useState<string | null>(null);
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
@@ -167,104 +167,84 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#e6ffff", height: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||
<Box style={{ backgroundColor: "#e6ffff", minHeight: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<Box
|
||||
style={{
|
||||
height: "60px",
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
height: "60px",
|
||||
// flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
// padding: isMobile ? "0.5rem" : "0.5rem 1rem",
|
||||
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
position: "relative",
|
||||
// position: "fixed",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '6%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '80%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px black',
|
||||
}}
|
||||
>
|
||||
<IconPhoneFilled size={20} /> Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
{/* Logo */}
|
||||
<Box style={{ width: isMobile ? "48px" : "65px", height: isMobile ? "50px" : "60px" }}>
|
||||
<Image src={logo} component={NextImage} alt="ebanking" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
|
||||
{/* Title & Phone */}
|
||||
<Stack gap={isMobile ? 2 : 0} style={{ flex: 1, textAlign: isMobile ? "center" : "left", marginLeft: isMobile ? 0 : "1rem" }}>
|
||||
<Title order={isMobile ? 5 : 2} style={{ color: "white", fontFamily: "Roboto", lineHeight: 1.2 }}>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text style={{ color: "white", fontSize: isMobile ? "0.8rem" : "0.9rem", textShadow: "1px 1px 2px black" }}>
|
||||
<IconPhoneFilled size={isMobile ? 16 : 20} /> Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<div
|
||||
{/* WELCOME + NAV */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
padding: '0.5rem 1rem',
|
||||
padding: isMobile ? "0.5rem" : "0.5rem 1rem",
|
||||
display: "flex",
|
||||
justifyContent: 'space-between',
|
||||
alignItems: "center",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: isMobile ? "flex-start" : "center",
|
||||
gap: isMobile ? "0.5rem" : 0,
|
||||
}}
|
||||
>
|
||||
<Stack gap={0} align="flex-start">
|
||||
<Title order={4} style={{ fontFamily: "inter", fontSize: '22px' }}>
|
||||
<Stack gap={isMobile ? 2 : 0} align={isMobile ? "flex-start" : "flex-start"}>
|
||||
<Title order={isMobile ? 5 : 4} style={{ fontFamily: "inter", fontSize: isMobile ? "18px" : "22px" }}>
|
||||
Welcome, {custname ?? null}
|
||||
</Title>
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '13px' }}>
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: isMobile ? "11px" : "13px" }}>
|
||||
Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Group mt="md" gap="sm">
|
||||
<Group mt={isMobile ? "sm" : "md"} gap="sm" style={{ flexWrap: isMobile ? "wrap" : "nowrap" }}>
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<Button
|
||||
leftSection={<Icon size={20} />}
|
||||
leftSection={<Icon size={isMobile ? 16 : 20} />}
|
||||
variant={isActive ? "dark" : "subtle"}
|
||||
color={isActive ? "blue" : undefined}
|
||||
size={isMobile ? "xs" : "sm"}
|
||||
>
|
||||
{item.label}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
{/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button> */}
|
||||
<Popover
|
||||
opened={opened}
|
||||
onChange={close}
|
||||
position="bottom-end" // 👈 Logout button ke niche right align
|
||||
withArrow
|
||||
shadow="md"
|
||||
>
|
||||
|
||||
<Popover opened={opened} onChange={close} position="bottom-end" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button
|
||||
leftSection={<IconLogout size={20} />}
|
||||
variant="subtle"
|
||||
onClick={open}
|
||||
>
|
||||
<Button leftSection={<IconLogout size={isMobile ? 16 : 20} />} variant="subtle" size={isMobile ? "xs" : "sm"} onClick={open}>
|
||||
Logout
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<Text size="sm" mb="sm">
|
||||
Are you sure you want to logout?
|
||||
@@ -273,30 +253,31 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<Button variant="default" onClick={close}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Button onClick={handleLogout}>Logout</Button>
|
||||
</Group>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Divider size="xs" color='#99c2ff' />
|
||||
<Divider size="xs" color="#99c2ff" />
|
||||
|
||||
<div
|
||||
{/* CHILDREN */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
borderTop: '1px solid #ddd',
|
||||
borderBottom: '1px solid #ddd',
|
||||
borderTop: "1px solid #ddd",
|
||||
borderBottom: "1px solid #ddd",
|
||||
// padding: isMobile ? "0.5rem" : "1rem",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Divider size="xs" color='blue' />
|
||||
<Divider size="xs" color="blue" />
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
@@ -304,14 +285,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
// padding: isMobile ? "0.25rem" : "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
<Text c="dimmed" size={isMobile ? "xs" : "sm"}>
|
||||
© 2025 The Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
</Providers>
|
||||
</body>
|
||||
</html >
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
"use client";
|
||||
import { Divider, Stack, Text } from '@mantine/core';
|
||||
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import Image from "next/image";
|
||||
import logo from "@/app/image/logo1.jpg";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const [drawerOpened, setDrawerOpened] = useState(false);
|
||||
|
||||
const links = [
|
||||
{ label: "View Profile", href: "/settings" },
|
||||
@@ -30,45 +35,143 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<div style={{ display: "flex", height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: '#c5e4f9',
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
|
||||
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
|
||||
Settings
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
Settings
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
|
||||
{links.map(link => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? 'darkblue' : 'blue'}
|
||||
style={{
|
||||
textDecoration: isActive ? 'underline' : 'none',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</div>
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1, padding: '1rem' }}>
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(!drawerOpened)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
Settings
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
padding="md"
|
||||
size="75%"
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
||||
styles={{
|
||||
root: {
|
||||
backgroundColor: "#e6f5ff", // soft background for drawer
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Logo and Drawer Header */}
|
||||
<Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
|
||||
<>
|
||||
<Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
|
||||
<Text
|
||||
fw={700}
|
||||
ml="10px"
|
||||
style={{ fontSize: "18px", color: "#228be6" }}
|
||||
>
|
||||
Settings
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
variant="subtle"
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
color: isActive ? "#fff" : "#228be6",
|
||||
backgroundColor: isActive ? "#228be6" : "#dceeff",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
transition: "0.3s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = "#228be6";
|
||||
target.style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as unknown as HTMLElement;
|
||||
target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
|
||||
target.style.color = isActive ? "#fff" : "#228be6";
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
89
src/app/eMandate/login/Login.module.css
Normal file
89
src/app/eMandate/login/Login.module.css
Normal file
@@ -0,0 +1,89 @@
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%);
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Desktop header text */
|
||||
.desktop-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-text {
|
||||
color: white;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Movable scrolling text - desktop only */
|
||||
.desktop-scroll-text {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.desktop-scroll-text span {
|
||||
display: inline-block;
|
||||
padding-left: 100%;
|
||||
animation: scroll-left 60s linear infinite;
|
||||
font-weight: bold;
|
||||
color: #004d99;
|
||||
}
|
||||
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
/* Main Login Section */
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 75vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-image {
|
||||
flex: 1 1 400px;
|
||||
min-width: 300px;
|
||||
height: 400px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
flex: 1 1 300px;
|
||||
min-width: 280px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* Responsive - Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.desktop-text { display: none; }
|
||||
.mobile-text { display: block; }
|
||||
|
||||
.desktop-scroll-text { display: none; }
|
||||
|
||||
.login-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-image {
|
||||
height: 250px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect, memo, useRef } from "react";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal } from "@mantine/core";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal, Stack } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -8,6 +8,7 @@ import NextImage from "next/image";
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import frontPage from '@/app/image/EMandate.jpg';
|
||||
import { generateCaptcha } from '@/app/captcha';
|
||||
import styles from './Login.module.css';
|
||||
|
||||
|
||||
export default function Login() {
|
||||
@@ -88,6 +89,7 @@ export default function Login() {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Login-Type': 'emandate',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
customerNo: CIF,
|
||||
@@ -103,33 +105,33 @@ export default function Login() {
|
||||
message: data?.error || "Internal Server Error",
|
||||
autoClose: 5000,
|
||||
});
|
||||
localStorage.removeItem("access_token");
|
||||
regenerateCaptcha()
|
||||
localStorage.removeItem("mandate_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
return;
|
||||
|
||||
}
|
||||
setIsLogging(true);
|
||||
if (response.ok) {
|
||||
console.log(data);
|
||||
// console.log(data);
|
||||
const token = data.token;
|
||||
localStorage.setItem("emandate_token", token);
|
||||
localStorage.setItem("mandate_token", token);
|
||||
// localStorage.setItem("pswExpiryDate", data.loginPswExpiry);
|
||||
if (data.FirstTimeLogin === true) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Error",
|
||||
message: "Please set your credential into Internet Banking before login.",
|
||||
message: "Please go to Internet Banking, set your credentials, and then try logging in here again.",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
else {
|
||||
router.push("/mandate_page");
|
||||
router.push("/eMandate/mandate_page");
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
regenerateCaptcha();
|
||||
setIsLogging(false);
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
@@ -157,58 +159,21 @@ export default function Login() {
|
||||
{/* Main Screen */}
|
||||
<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",
|
||||
justifyContent: "flex-start",
|
||||
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "auto", flexShrink: 0 }}
|
||||
/>
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '7%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text size="sm" c="white"
|
||||
style={{
|
||||
backgroundColor: '#1f1f14',
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '59%',
|
||||
left: '72%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px blue',
|
||||
}}
|
||||
>
|
||||
Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
|
||||
</Text>
|
||||
|
||||
<Box className={styles.header}>
|
||||
<Image src={logo} component={NextImage} fit="contain" alt="ebanking" style={{ width: "60px", height: "auto" }} />
|
||||
<Box className={styles['header-text']}>
|
||||
<Title className={styles['desktop-text']} order={4}>THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.</Title>
|
||||
<Text className={styles['desktop-text']} size="xs">Head Office: Dharmshala, District Kangra (H.P), Pin: 176215</Text>
|
||||
<Title className={styles['mobile-text']} order={5}>THE KANGRA CENTRAL</Title>
|
||||
<Title className={styles['mobile-text']} order={5}>CO-OPERATIVE BANK LTD.</Title>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
{/* Movable text */}
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "0.5%",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "8px 0",
|
||||
}}
|
||||
className={styles['desktop-scroll-text']}
|
||||
>
|
||||
<Text
|
||||
component="span"
|
||||
@@ -230,19 +195,23 @@ export default function Login() {
|
||||
</Text>
|
||||
<style>
|
||||
{`
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
`}
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.desktop-scroll-text { display: none; }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Box>
|
||||
|
||||
{/* Main */}
|
||||
<div style={{
|
||||
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
||||
// background: 'linear-gradient(to right, #02081eff, #0a3d91)'
|
||||
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
|
||||
}}>
|
||||
<Box visibleFrom="md"
|
||||
style={{
|
||||
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
||||
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
|
||||
}}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
|
||||
<Image
|
||||
fit="cover"
|
||||
@@ -300,7 +269,81 @@ export default function Login() {
|
||||
</form>
|
||||
</Card>
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Mobile layout */}
|
||||
<Box
|
||||
hiddenFrom="md"
|
||||
style={{
|
||||
marginTop: "25%",
|
||||
padding: "1rem",
|
||||
background: "linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)",
|
||||
minHeight: "80vh",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Card shadow="md" padding="lg" radius="md" style={{ width: "100%" }}>
|
||||
<form onSubmit={handleMandateLogin}>
|
||||
<Text ta="center" fw={700} style={{ fontSize: "16px" }}>
|
||||
E-Mandate Login
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
label="User ID"
|
||||
placeholder="Enter your CIF No"
|
||||
value={CIF}
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 11) SetCIF(input);
|
||||
}}
|
||||
withAsterisk
|
||||
mt="sm"
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
mt="sm"
|
||||
/>
|
||||
|
||||
<Group mt="sm" align="center" grow>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
fontSize: "16px",
|
||||
textDecoration: "line-through",
|
||||
padding: "4px 8px",
|
||||
fontFamily: "cursive",
|
||||
}}
|
||||
>
|
||||
{captcha}
|
||||
</Box>
|
||||
<Button size="xs" variant="light" onClick={regenerateCaptcha}>
|
||||
Refresh
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
mt="sm"
|
||||
/>
|
||||
|
||||
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
|
||||
{isLogging ? "Logging..." : "Login"}
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
<Box
|
||||
component="footer"
|
||||
|
||||
473
src/app/eMandate/mandate_page/page.tsx
Normal file
473
src/app/eMandate/mandate_page/page.tsx
Normal file
@@ -0,0 +1,473 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Text,
|
||||
Title,
|
||||
Box,
|
||||
Image,
|
||||
Card,
|
||||
Checkbox,
|
||||
Button,
|
||||
Group,
|
||||
Grid,
|
||||
Container,
|
||||
ActionIcon,
|
||||
Divider,
|
||||
Modal,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NextImage from "next/image";
|
||||
import logo from "@/app/image/logo1.jpg";
|
||||
import { IconLogout, IconX } from "@tabler/icons-react";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
|
||||
type Mandate = {
|
||||
id: string;
|
||||
category: string;
|
||||
amount: number;
|
||||
maxAmount: number;
|
||||
name: string;
|
||||
frequency: string;
|
||||
firstCollection: string;
|
||||
finalCollection: string;
|
||||
};
|
||||
|
||||
const MandateCard = ({
|
||||
mandate,
|
||||
onAction,
|
||||
}: {
|
||||
mandate: Mandate;
|
||||
onAction: (id: string, action: "accept" | "reject") => void;
|
||||
}) => {
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
|
||||
const handleClick = (action: "accept" | "reject") => {
|
||||
if (!agreed) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
icon: <IconX size={18} />,
|
||||
color: "red",
|
||||
title: "Error",
|
||||
message:
|
||||
"Please agree to the debit of mandate processing charges first.",
|
||||
autoClose: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
onAction(mandate.id, action);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card shadow="sm" radius="md" p="lg" withBorder>
|
||||
<Text fw={600}>{mandate.category}</Text>
|
||||
<Text size="sm" mt="xs">
|
||||
Amount: ₹{mandate.amount}
|
||||
</Text>
|
||||
<Text size="sm">Max Amount: ₹{mandate.maxAmount}</Text>
|
||||
<Text size="sm">Name: {mandate.name}</Text>
|
||||
<Text size="sm">Frequency: {mandate.frequency}</Text>
|
||||
<Text size="sm">First Collection: {mandate.firstCollection}</Text>
|
||||
<Text size="sm">Final Collection: {mandate.finalCollection}</Text>
|
||||
|
||||
<Checkbox
|
||||
mt="md"
|
||||
label="I agree for the debit of mandate processing charges"
|
||||
checked={agreed}
|
||||
onChange={(e) => setAgreed(e.currentTarget.checked)}
|
||||
/>
|
||||
|
||||
<Group mt="md" grow>
|
||||
<Button variant="outline" color="red" onClick={() => handleClick("reject")}>
|
||||
Reject
|
||||
</Button>
|
||||
<Button color="green" onClick={() => handleClick("accept")}>
|
||||
Accept
|
||||
</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default function MandatePage() {
|
||||
const router = useRouter();
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const [custname, setCustname] = useState<string | null>(null);
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
// OTP Modal states
|
||||
const [otpModalOpen, setOtpModalOpen] = useState(false);
|
||||
const [otp, setOtp] = useState("");
|
||||
const [pendingAction, setPendingAction] = useState<{ id: string; action: "accept" | "reject" } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("mandate_token");
|
||||
if (!token) {
|
||||
setAuthorized(false);
|
||||
router.push("/eMandate/login");
|
||||
} else {
|
||||
setAuthorized(true);
|
||||
handleFetchUserName();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("mandate_token");
|
||||
localStorage.removeItem("user_name");
|
||||
localStorage.removeItem("userMobNo");
|
||||
router.push("/eMandate/login");
|
||||
};
|
||||
|
||||
const handleFetchUserName = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("mandate_token");
|
||||
const response = await fetch("/api/customer", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (!response.ok) throw new Error();
|
||||
const data = await response.json();
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
const name = data[0].custname;
|
||||
const mobileNumber = data[0].mobileno;
|
||||
localStorage.setItem("user_name", name);
|
||||
localStorage.setItem("userMobNo", mobileNumber);
|
||||
setCustname(name);
|
||||
}
|
||||
} catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Please try again later",
|
||||
message: "Unable to Fetch, Please try again later",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Dummy mandates
|
||||
const [mandates] = useState<Mandate[]>([
|
||||
{
|
||||
id: "1",
|
||||
category: "Insurance Premium",
|
||||
amount: 11743,
|
||||
maxAmount: 11743,
|
||||
name: "LIFE INSURANCE CORPORATION",
|
||||
frequency: "YEAR",
|
||||
firstCollection: "2025-09-20",
|
||||
finalCollection: "2038-03-28",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
category: "Loan EMI",
|
||||
amount: 8500,
|
||||
maxAmount: 8500,
|
||||
name: "XYZ BANK",
|
||||
frequency: "MONTH",
|
||||
firstCollection: "2025-10-01",
|
||||
finalCollection: "2030-10-01",
|
||||
},
|
||||
]);
|
||||
|
||||
// STEP 1: When Accept/Reject pressed → call send OTP API
|
||||
const handleMandateAction = async (id: string, action: "accept" | "reject") => {
|
||||
try {
|
||||
const response = await fetch("/api/otp/send", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
mobileNumber: localStorage.getItem("userMobNo"),
|
||||
type: 'EMandate'
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
console.log(data)
|
||||
if (!response.ok) throw new Error("Failed to send OTP");
|
||||
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "green",
|
||||
title: "OTP Sent",
|
||||
message: "An OTP has been sent to your registered mobile number.",
|
||||
autoClose: 4000,
|
||||
});
|
||||
|
||||
setPendingAction({ id, action });
|
||||
setOtp("");
|
||||
setOtpModalOpen(true);
|
||||
} catch (err) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Error",
|
||||
message: "Failed to send OTP. Please try again.",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Resend OTP
|
||||
const handleResendOtp = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/otp/send", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
mobileNumber: localStorage.getItem("userMobNo"),
|
||||
type: "EMandate",
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to resend OTP");
|
||||
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "blue",
|
||||
title: "OTP Resent",
|
||||
message: "A new OTP has been sent to your registered mobile number.",
|
||||
autoClose: 4000,
|
||||
});
|
||||
} catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Error",
|
||||
message: "Failed to resend OTP. Please try again.",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// STEP 2: Verify OTP and complete action
|
||||
const handleOtpSubmit = async () => {
|
||||
if (!otp) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Invalid Input",
|
||||
message: "Please enter OTP before proceed",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
if (!pendingAction) return;
|
||||
try {
|
||||
const response = await fetch(`/api/otp/verify?mobileNumber=${localStorage.getItem("userMobNo")}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
otp: otp,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Invalid OTP");
|
||||
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "green",
|
||||
title: "Success",
|
||||
message: `Mandate ${pendingAction.action}ed successfully!`,
|
||||
autoClose: 4000,
|
||||
});
|
||||
|
||||
setOtpModalOpen(false);
|
||||
setPendingAction(null);
|
||||
} catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Error",
|
||||
message: "Invalid OTP. Please try again.",
|
||||
autoClose: 4000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#f8f9fa",
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<Box
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "70px",
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: isMobile ? "0 0.5rem" : "0 1.5rem",
|
||||
background:
|
||||
"linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}
|
||||
>
|
||||
<Box style={{ display: "flex", alignItems: "center", flex: 1, minWidth: 0 }}>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: isMobile ? "45px" : "70px",
|
||||
height: isMobile ? "45px" : "70px",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
{!isMobile && (
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
marginLeft: "1rem",
|
||||
color: "white",
|
||||
fontSize: "1.2rem",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{isMobile ? (
|
||||
<ActionIcon variant="subtle" color="white" size="lg" onClick={handleLogout} title="Logout">
|
||||
<IconLogout size={26} stroke={1.5} />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="white"
|
||||
size="md"
|
||||
onClick={handleLogout}
|
||||
leftSection={<span style={{ fontSize: "14px", fontWeight: 500 }}>LOGOUT</span>}
|
||||
rightSection={<IconLogout size={25} stroke={1.5} />}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* WELCOME BAR */}
|
||||
<Box
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "70px",
|
||||
left: 0,
|
||||
width: "100%",
|
||||
padding: "0.3rem 1rem",
|
||||
backgroundColor: "#e6ffff",
|
||||
zIndex: 90,
|
||||
}}
|
||||
>
|
||||
<Text fw={500} style={{ fontFamily: "inter", fontSize: "20px" }}>
|
||||
Welcome, {custname ?? ""}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed" style={{ marginBottom: "4px" }}>
|
||||
Last logged in at {new Date().toLocaleString()}
|
||||
</Text>
|
||||
<Title order={4} ta="center" style={{ margin: 0 }}>
|
||||
KCCB E-Mandate
|
||||
</Title>
|
||||
<Divider size="xs" color="#99c2ff" />
|
||||
</Box>
|
||||
|
||||
{/* CONTENT */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
marginTop: "160px",
|
||||
marginBottom: "40px",
|
||||
backgroundColor: "#e6ffff",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<Container size="lg">
|
||||
<Grid>
|
||||
{mandates.map((mandate) => (
|
||||
<Grid.Col span={{ base: 12, sm: 6 }} key={mandate.id}>
|
||||
<MandateCard mandate={mandate} onAction={handleMandateAction} />
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box
|
||||
style={{
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "40px",
|
||||
backgroundColor: "#f8f9fa",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 The Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* OTP MODAL */}
|
||||
<Modal opened={otpModalOpen} onClose={() => setOtpModalOpen(false)} title="OTP Verification" centered>
|
||||
<Text mb="sm" size="sm" ta="center" c="green">An OTP has been sent to your registered mobile number.</Text>
|
||||
<TextInput
|
||||
label="OTP"
|
||||
placeholder="Enter OTP"
|
||||
value={otp}
|
||||
withAsterisk
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 6) setOtp(input);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text mt="md" size="xs" c="dimmed">
|
||||
If you did not receive the OTP in SMS, you can{" "}
|
||||
<Text
|
||||
span
|
||||
c="blue"
|
||||
td="underline"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={handleResendOtp}
|
||||
>
|
||||
click here to resend the SMS
|
||||
</Text>
|
||||
.
|
||||
</Text>
|
||||
<Group mt="md" grow>
|
||||
<Button color="gray" onClick={() => setOtpModalOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button color="green" onClick={handleOtpSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +1,75 @@
|
||||
.root {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
}
|
||||
|
||||
|
||||
.mobileImage {
|
||||
@media (min-width: 48em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.desktopImage {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@media (max-width: 47.99em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-wrapper {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gradient-control {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: transparent;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%);
|
||||
flex-wrap: wrap; /* allow wrapping on mobile */
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
opacity: 0.6;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Desktop text */
|
||||
.desktop-text {
|
||||
color: white;
|
||||
pointer-events: all;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* First control is left */
|
||||
.gradient-control:first-of-type {
|
||||
left: 0;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
||||
|
||||
.desktop-address {
|
||||
font-family: Roboto, sans-serif;
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
text-shadow: 1px 1px 2px blue;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Last control is right */
|
||||
.gradient-control:last-of-type {
|
||||
right: 0;
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
||||
|
||||
/* Mobile styles */
|
||||
.mobile-text {
|
||||
color: white;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Media query for mobile */
|
||||
@media screen and (max-width: 768px) {
|
||||
.header {
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 50px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.desktop-text,
|
||||
.desktop-address {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-text {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { notifications } from "@mantine/notifications";
|
||||
import { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NextImage from "next/image";
|
||||
import styles from './page.module.css';
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import frontPage from '@/app/image/ib_front_1.jpg';
|
||||
import dynamic from 'next/dynamic';
|
||||
@@ -12,6 +13,7 @@ import { generateCaptcha } from '@/app/captcha';
|
||||
import { IconShieldLockFilled } from "@tabler/icons-react";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
export default function Login() {
|
||||
const router = useRouter();
|
||||
const [CIF, SetCIF] = useState("");
|
||||
@@ -130,6 +132,7 @@ export default function Login() {
|
||||
message: data?.error || "Internal Server Error",
|
||||
autoClose: 5000,
|
||||
});
|
||||
regenerateCaptcha();
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
@@ -169,6 +172,7 @@ export default function Login() {
|
||||
|
||||
}
|
||||
else {
|
||||
regenerateCaptcha();
|
||||
setIsLogging(false);
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
@@ -237,7 +241,7 @@ export default function Login() {
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
console.log(data)
|
||||
// console.log(data)
|
||||
if (!res.ok) {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
@@ -330,54 +334,34 @@ export default function Login() {
|
||||
{/* Main Screen */}
|
||||
<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",
|
||||
justifyContent: "flex-start",
|
||||
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}>
|
||||
<Box className={styles.header}>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "auto", flexShrink: 0 }}
|
||||
style={{ width: "60px", height: "auto" }}
|
||||
/>
|
||||
<Title ref={headerRef}
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '7%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text size="sm" c="white"
|
||||
style={{
|
||||
backgroundColor: '#1f1f14',
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '59%',
|
||||
left: '72%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px blue',
|
||||
}}
|
||||
>
|
||||
Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
|
||||
</Text>
|
||||
{/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
|
||||
<Tooltip
|
||||
label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215'
|
||||
position="right"
|
||||
withArrow>
|
||||
<IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} />
|
||||
</Tooltip>
|
||||
</Box> */}
|
||||
<Box className={styles['header-text']}>
|
||||
{/* Desktop */}
|
||||
<Title className={styles['desktop-text']} ref={headerRef} order={2}>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text className={styles['desktop-address']} size="xs">
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
|
||||
{/* Mobile */}
|
||||
<Title className={styles['mobile-text']} order={5}>
|
||||
THE KANGRA CENTRAL
|
||||
</Title>
|
||||
<Title className={styles['mobile-text']} order={5}>
|
||||
CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text className={styles['mobile-text']} size="xs">
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
|
||||
Reference in New Issue
Block a user