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

Merge branch 'dev' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/tomosa.sarkar/IB into settings

Browse Source
This commit is contained in:
nabanita.jana
2025-10-08 10:40:49 +05:30
parent 2f45aba4d1 72b0fa4378
commit 75a4e9199b
15 changed files with 1682 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
TODO.md
View File

@@ -22,6 +22,7 @@
- >view rights - >view rights
- Forget Password - Forget Password
- >For Migration if user not have password - >For Migration if user not have password
- E-mandate
- Make every page responsive

38
instruction.md
View File

@@ -5,14 +5,46 @@
- Download **AWS Session Manager Plugin** - Download **AWS Session Manager Plugin**
- Generate **Key for KCCB** - 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 ## Machine
```bash ```bash
UAT (IB- frontend) : i-0b55435e15425f1c3 UAT (IB- frontend Test) : i-0b55435e15425f1c3
Linux : i-0c850dcf8b85b1447 Linux : i-0c850dcf8b85b1447 (Test)
Prod : i-088e64c3435cb5078 Prod : i-088e64c3435cb5078 (For IB & MB)
``` ```
## 2. Port Forwarding ## 2. Port Forwarding

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

@@ -1,5 +1,5 @@
"use client"; "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 { DateInput } from '@mantine/dates';
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
@@ -8,10 +8,11 @@ import dayjs from 'dayjs';
import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react"; import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react";
import { generatePDF } from "@/app/_components/statement_download/PdfGenerator"; import { generatePDF } from "@/app/_components/statement_download/PdfGenerator";
import { generateCSV } from "@/app/_components/statement_download/CsvGenerator"; import { generateCSV } from "@/app/_components/statement_download/CsvGenerator";
import { useMediaQuery } from "@mantine/hooks";
export default function AccountStatementPage() { export default function AccountStatementPage() {
const pdfRef = useRef<HTMLDivElement>(null); // const pdfRef = useRef<HTMLDivElement>(null);
const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]); const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]);
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null); const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
const [startDate, setStartDate] = useState<Date | null>(null); const [startDate, setStartDate] = useState<Date | null>(null);
@@ -21,6 +22,7 @@ export default function AccountStatementPage() {
const passedAccNo = searchParams.get("accNo"); const passedAccNo = searchParams.get("accNo");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [availableBalance, setAvailableBalance] = useState<string | null>(null); const [availableBalance, setAvailableBalance] = useState<string | null>(null);
const isMobile = useMediaQuery("(max-width: 768px)");
useEffect(() => { useEffect(() => {
const saved = sessionStorage.getItem("accountData"); const saved = sessionStorage.getItem("accountData");
@@ -108,12 +110,12 @@ export default function AccountStatementPage() {
}); });
return; return;
} }
if (end.diff(start, "day") > 90) { if (end.diff(start, "day") > 30) {
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
color: "red", color: "red",
title: "Invalid Date range", 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, autoClose: 4000,
}); });
return; return;
@@ -179,12 +181,16 @@ export default function AccountStatementPage() {
value={startDate} value={startDate}
onChange={setStartDate} onChange={setStartDate}
placeholder="Enter start date" placeholder="Enter start date"
minDate={dayjs("1920-01-01").toDate()}
maxDate={dayjs().toDate()}
/> />
<DateInput <DateInput
label="End Date" label="End Date"
value={endDate} value={endDate}
onChange={setEndDate} onChange={setEndDate}
placeholder="Enter end date" placeholder="Enter end date"
minDate={dayjs("1920-01-01").toDate()}
maxDate={dayjs().toDate()}
/> />
<Button fullWidth mt="md" onClick={handleAccountTransaction}> <Button fullWidth mt="md" onClick={handleAccountTransaction}>
Proceed Proceed
@@ -233,9 +239,19 @@ export default function AccountStatementPage() {
</Group> </Group>
<Divider size="xs" /> <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 }}> <ScrollArea style={{ flex: 1 }}>
{loading ? ( {loading ? (
<Center h="100%"> <Center h="100%">
<Stack align="center" gap="sm"> <Stack align="center" gap="sm">
<Loader size="lg" color="cyan" type="bars" /> <Loader size="lg" color="cyan" type="bars" />
@@ -244,42 +260,70 @@ export default function AccountStatementPage() {
</Center> </Center>
) : transactions.length === 0 ? ( ) : transactions.length === 0 ? (
<p>No transactions found.</p> <p>No transactions found.</p>
) : ( ) : isMobile ? (
<> // ✅ Mobile View – Card Layout
<Text fs="italic" c='#228be6' ta='center'> <Stack gap="sm">
{!startDate && !endDate ? 'Last 5 Transactions' {transactions.map((txn, i) => (
: startDate && endDate ? `Transactions from ${dayjs(startDate).format("DD/MM/YYYY")} to ${dayjs(endDate).format("DD/MM/YYYY")}` <Card key={i} shadow="xs" radius="md" withBorder>
: ""} <Group p="apart">
<Text fw={600} size="sm">
{txn.name || "—"}
</Text> </Text>
<Table style={{ borderCollapse: "collapse", width: '100%' }}> <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>
) : (
// ✅ Desktop View – Table Layout
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
<thead style={{ backgroundColor: "#3385ff" }}> <thead style={{ backgroundColor: "#3385ff" }}>
{/* <tr> <tr>
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Name</th> <th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Name</th>
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Date</th> <th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Date</th>
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Type</th> <th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Amount (₹)</th>
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Amount(₹)</th> <th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Balance (₹)</th>
<th style={{ ...cellStyle, position: 'sticky', textAlign: "left" }}>Available Balance(₹)</th> </tr>
</tr> */}
</thead> </thead>
<tbody style={{ maxHeight: '250px', overflowY: 'auto', width: '100%' }}> <tbody>
{transactions.map((txn, i) => ( {transactions.map((txn, i) => (
<tr key={i}> <tr key={i}>
<td style={{ ...cellStyle, textAlign: "left" }}>{txn.name || "—"}</td> <td style={{ ...cellStyle, textAlign: "left" }}>{txn.name || "—"}</td>
<td style={{ ...cellStyle, textAlign: "left" }}>{txn.date || "—"}</td> <td style={{ ...cellStyle, textAlign: "left" }}>{txn.date || "—"}</td>
{/* <td style={{ ...cellStyle, textAlign: "left" }}>{txn.type}</td> */} <td
<td style={{ ...cellStyle, textAlign: "right", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}> style={{
...cellStyle,
textAlign: "right",
color: txn.type === "DR" ? "#e03131" : "#2f9e44",
}}
>
{parseFloat(txn.amount).toLocaleString("en-IN", { {parseFloat(txn.amount).toLocaleString("en-IN", {
minimumFractionDigits: 2, minimumFractionDigits: 2,
})} <span style={{ fontSize: '10px' }}>{txn.type === "DR" ? "Dr." : "Cr."}</span> })}{" "}
<span style={{ fontSize: "10px" }}>{txn.type === "DR" ? "Dr." : "Cr."}</span>
</td>
<td style={{ ...cellStyle, textAlign: "right", color: "blue", fontSize: "12px" }}>
₹{txn.balance || "—"}
</td> </td>
<td style={{ ...cellStyle, textAlign: "right", color: "blue", fontSize: '12px' }}>₹{txn.balance || "—"}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</Table> </Table>
</>
)} )}
</ScrollArea> </ScrollArea>
</Paper> </Paper>
</Grid.Col > </Grid.Col >
</Grid > </Grid >

135
src/app/(main)/accounts/layout.tsx
View File

@@ -1,18 +1,23 @@
"use client"; "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 { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation"; 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 }) { export default function Layout({ children }: { children: React.ReactNode }) {
const [authorized, SetAuthorized] = useState<boolean | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const isMobile = useMediaQuery("(max-width: 768px)");
const [drawerOpened, setDrawerOpened] = useState(false);
const links = [ const links = [
{ label: "Account Summary", href: "/accounts" }, { 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" }, { label: "Account Details", href: "/accounts/account_details" },
]; ];
useEffect(() => { useEffect(() => {
@@ -28,31 +33,33 @@ export default function Layout({ children }: { children: React.ReactNode }) {
if (authorized) { if (authorized) {
return ( return (
<div style={{ display: "flex", height: '100%' }}> <Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
<div {/* Desktop Sidebar */}
{!isMobile && (
<Box
style={{ style={{
width: "16%", width: "16%",
backgroundColor: '#c5e4f9', backgroundColor: "#c5e4f9",
borderRight: "1px solid #ccc", borderRight: "1px solid #ccc",
}} }}
> >
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}> <Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}> <Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
My Accounts My Accounts
</Text> </Text>
</Stack> </Stack>
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}> <Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
{links.map(link => { {links.map((link) => {
const isActive = pathname === link.href; const isActive = pathname === link.href;
return ( return (
<Text <Text
key={link.href} key={link.href}
component={Link} component={Link}
href={link.href} href={link.href}
c={isActive ? 'darkblue' : 'blue'} c={isActive ? "darkblue" : "blue"}
style={{ style={{
textDecoration: isActive ? 'underline' : 'none', textDecoration: isActive ? "underline" : "none",
fontWeight: isActive ? 600 : 400, fontWeight: isActive ? 600 : 400,
}} }}
> >
@@ -61,12 +68,110 @@ export default function Layout({ children }: { children: React.ReactNode }) {
); );
})} })}
</Stack> </Stack>
</div> </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} {children}
</div> </Box>
</div> </Box>
); );
} }
} }

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

@@ -1,6 +1,7 @@
"use client"; "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 { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ export default function AccountSummary() {
const router = useRouter(); const router = useRouter();
const [authorized, setAuthorized] = useState<boolean | null>(null); const [authorized, setAuthorized] = useState<boolean | null>(null);
const [accountData, setAccountData] = useState<accountData[]>([]); const [accountData, setAccountData] = useState<accountData[]>([]);
const isMobile = useMediaQuery("(max-width: 768px)");
async function FetchAccountDetails() { async function FetchAccountDetails() {
try { try {
@@ -61,7 +63,8 @@ export default function AccountSummary() {
const cellStyle = { const cellStyle = {
border: "1px solid #ccc", border: "1px solid #ccc",
padding: "10px", padding: isMobile ? "8px" : "10px",
fontSize: isMobile ? "13px" : "14px",
}; };
// Filter accounts // Filter accounts
@@ -96,7 +99,7 @@ export default function AccountSummary() {
<Paper shadow="sm" radius="md" p="md" withBorder w="100%" <Paper shadow="sm" radius="md" p="md" withBorder w="100%"
// bg="#97E6B8" // bg="#97E6B8"
> >
<Title order={4} mb="sm"> <Title order={isMobile ? 5 : 4} mb="sm">
{title} {title}
</Title> </Title>
<ScrollArea> <ScrollArea>
@@ -117,25 +120,38 @@ export default function AccountSummary() {
</Paper> </Paper>
); );
if (authorized) { if (!authorized) return null;
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%)"
>
<Title order={3} mb="md">Account Summary</Title>
<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) */} return (
{loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))} <Paper shadow="sm" radius="md" p="md" withBorder>
<Title
order={isMobile ? 4 : 3}
mb="md"
style={{ textAlign: isMobile ? "center" : "left" }}
>
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>
{depositAccounts.length > 0 &&
renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
{loanAccounts.length > 0 &&
renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
</Group> </Group>
)}
<Text mt="sm" size="xs" c="dimmed"> <Text mt="sm" size="xs" c="dimmed">
* Book Balance includes uncleared effects. * Book Balance includes uncleared effects.
</Text> </Text>
</Paper> </Paper>
); );
} }
return null;
}

133
src/app/(main)/funds_transfer/layout.tsx
View File

@@ -1,14 +1,19 @@
"use client"; "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 { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation"; 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 }) { export default function Layout({ children }: { children: React.ReactNode }) {
const [authorized, SetAuthorized] = useState<boolean | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const isMobile = useMediaQuery("(max-width: 768px)");
const [drawerOpened, setDrawerOpened] = useState(false);
const links = [ const links = [
{ label: " Quick Pay", href: "/funds_transfer" }, { label: " Quick Pay", href: "/funds_transfer" },
@@ -29,31 +34,33 @@ export default function Layout({ children }: { children: React.ReactNode }) {
if (authorized) { if (authorized) {
return ( return (
<div style={{ display: "flex", height: '100%' }}> <Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
<div {/* Desktop Sidebar */}
{!isMobile && (
<Box
style={{ style={{
width: "16%", width: "16%",
backgroundColor: '#c5e4f9', backgroundColor: "#c5e4f9",
borderRight: "1px solid #ccc", borderRight: "1px solid #ccc",
}} }}
> >
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}> <Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}> <Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
Send Money Send Money
</Text> </Text>
</Stack> </Stack>
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}> <Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
{links.map(link => { {links.map((link) => {
const isActive = pathname === link.href; const isActive = pathname === link.href;
return ( return (
<Text <Text
key={link.href} key={link.href}
component={Link} component={Link}
href={link.href} href={link.href}
c={isActive ? 'darkblue' : 'blue'} c={isActive ? "darkblue" : "blue"}
style={{ style={{
textDecoration: isActive ? 'underline' : 'none', textDecoration: isActive ? "underline" : "none",
fontWeight: isActive ? 600 : 400, fontWeight: isActive ? 600 : 400,
}} }}
> >
@@ -62,12 +69,110 @@ export default function Layout({ children }: { children: React.ReactNode }) {
); );
})} })}
</Stack> </Stack>
</div> </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} {children}
</div> </Box>
</div> </Box>
); );
} }
} }

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

@@ -266,6 +266,8 @@ export default function QuickPay() {
setOtp(""); setOtp("");
setValidationStatus(null); setValidationStatus(null);
setBeneficiaryName(null); setBeneficiaryName(null);
setTimerActive(false);
setCountdown(180);
} else { } else {
notifications.show({ notifications.show({
title: "Error", title: "Error",
@@ -293,6 +295,8 @@ export default function QuickPay() {
setShowTxnPassword(false); setShowTxnPassword(false);
setShowOtpField(false); setShowOtpField(false);
setIsSubmitting(false); setIsSubmitting(false);
setTimerActive(false);
setCountdown(180);
} }
}; };

323
src/app/(main)/home/page.tsx
View File

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
import { Providers } from "../../providers"; import { Providers } from "../../providers";
import { notifications } from '@mantine/notifications'; import { notifications } from '@mantine/notifications';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useMediaQuery } from '@mantine/hooks';
interface accountData { interface accountData {
stAccountNo: string; stAccountNo: string;
@@ -19,6 +20,7 @@ interface accountData {
export default function Home() { export default function Home() {
const [authorized, SetAuthorized] = useState<boolean | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const router = useRouter(); const router = useRouter();
const isMobile = useMediaQuery("(max-width: 768px)");
const [accountData, SetAccountData] = useState<accountData[]>([]); const [accountData, SetAccountData] = useState<accountData[]>([]);
const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN"); const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || ""); const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
@@ -112,29 +114,62 @@ export default function Home() {
if (authorized) { if (authorized) {
return ( return (
<Providers> <Providers>
<div> <Box p={isMobile ? "8px" : "10px"}>
<Title order={4} style={{ padding: "10px" }}>Accounts Overview</Title> <Title order={4} style={{fontSize: isMobile ? "18px" : "22px" }}>
<Group style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}> Accounts Overview
<IconEye size={20} /> </Title>
<Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance} {/* Show Balance Switch */}
onChange={(event) => setShowBalance(event.currentTarget.checked)} /> <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> </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 */} {/* Deposit Account Card */}
<Paper p="md" radius="md" style={{ <Paper
backgroundColor: '#c1e0f0', width: 350, height: 195, display: 'flex', p="md"
flexDirection: 'column', justifyContent: 'space-between' radius="md"
}}> style={{
<Group gap='xs'> backgroundColor: "#c1e0f0",
<IconBuildingBank size={25} /> width: "100%",
<Text fw={700}>Deposit Account</Text> 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 ? ( {depositAccounts.length > 0 ? (
<Select <Select
data={depositAccounts.map(acc => ({ data={depositAccounts.map((acc) => ({
value: acc.stAccountNo, value: acc.stAccountNo,
label: `${acc.stAccountType}- ${acc.stAccountNo}` label: `${acc.stAccountType}- ${acc.stAccountNo}`,
}))} }))}
value={selectedDA} value={selectedDA}
// @ts-ignore // @ts-ignore
@@ -145,12 +180,172 @@ export default function Home() {
backgroundColor: "white", backgroundColor: "white",
color: "black", color: "black",
marginLeft: 5, 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> </Group>
@@ -158,32 +353,34 @@ export default function Home() {
<> <>
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text> <Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
<Title order={2} mt="md"> <Title order={2} mt="md">
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"} {showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"}
</Title> </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> <Text c="dimmed" mt="md">
<Button fullWidth mt="xs">Apply Now</Button> Apply for a deposit account to get started
</Text>
<Button fullWidth mt="xs">
Apply Now
</Button>
</> </>
)} )}
</Paper> </Paper>
{/* Loan Account Card */} {/* Loan Account Card */}
<Paper p="md" radius="md" style={{ <Paper p="md" radius="md" style={{ backgroundColor: "#c1e0f0", width: 355, height: 195, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
backgroundColor: '#c1e0f0', width: 355, height: 195, display: 'flex', <Group gap="xs">
flexDirection: 'column', justifyContent: 'space-between'
}}
>
<Group gap='xs'>
<IconBuildingBank size={25} /> <IconBuildingBank size={25} />
<Text fw={700}>Loan Account</Text> <Text fw={700}>Loan Account</Text>
{loanAccounts.length > 0 ? ( {loanAccounts.length > 0 ? (
<Select <Select
data={loanAccounts.map(acc => ({ data={loanAccounts.map((acc) => ({
value: acc.stAccountNo, value: acc.stAccountNo,
label: `${acc.stAccountType}- ${acc.stAccountNo}` label: `${acc.stAccountType}- ${acc.stAccountNo}`,
}))} }))}
value={selectedLN} value={selectedLN}
// @ts-ignore // @ts-ignore
@@ -194,12 +391,14 @@ export default function Home() {
backgroundColor: "white", backgroundColor: "white",
color: "black", color: "black",
marginLeft: 30, 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> </Group>
@@ -207,42 +406,60 @@ export default function Home() {
<> <>
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text> <Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
<Title order={2} mt="md"> <Title order={2} mt="md">
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"} {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"}
</Title> </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> <Text c="dimmed" mt="md">
<Button fullWidth mt="xs">Apply Now</Button> Apply for a loan account to get started
</Text>
<Button fullWidth mt="xs">
Apply Now
</Button>
</> </>
)} )}
</Paper> </Paper>
{/* Important Links Card */} {/* Important Links Card */}
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}> <Paper p="md" radius="md" style={{ width: 300, backgroundColor: "#FFFFFF", border: "1px solid grey" }}>
<Title order={5} mb="sm">Quick Links </Title> <Title order={5} mb="sm">
Quick Links
</Title>
<Stack gap="xs"> <Stack gap="xs">
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button> <Button variant="light" color="blue" fullWidth>
<Button variant="light" color="blue" fullWidth>Branch Locator</Button> Loan EMI Calculator
<Button variant="light" color="blue" fullWidth>Customer Care</Button> </Button>
<Button variant="light" color="blue" fullWidth>FAQs</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> </Stack>
</Paper> </Paper>
</Group> </Group>
</div> )}
<div style={{ padding: "20px", display: "flex", justifyContent: "left" }}>
{/* Notes Section */}
<Box style={{ padding: "5px", display: "flex", justifyContent: "left" }}>
<Stack> <Stack>
<Text fw={700}> ** Book Balance includes uncleared effect.</Text> <Text fw={700}> ** Book Balance includes uncleared effect.</Text>
<Text fw={700}> ** Click on the &quot;Show Balance&quot; to display balance for the Deposit and Loan account.</Text> <Text fw={700}> ** Click on the &quot;Show Balance&quot; to display balance for the Deposit and Loan account.</Text>
<Text fw={400} c="red"> ** Your Password will expire in {PassExpiryRemains} days.</Text> <Text fw={400} c="red">
<Text></Text> ** Your Password will expire in {PassExpiryRemains} days.
</Text>
</Stack> </Stack>
</div> </Box>
</div> </Box>
</Providers> </Providers>
); );
} }
return null; return null;
} }

131
src/app/(main)/layout.tsx
View File

@@ -8,7 +8,7 @@ import { Providers } from '../providers';
import logo from '@/app/image/logo1.jpg'; import logo from '@/app/image/logo1.jpg';
import NextImage from 'next/image'; import NextImage from 'next/image';
import { notifications } from '@mantine/notifications'; import { notifications } from '@mantine/notifications';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure, useMediaQuery } from '@mantine/hooks';
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
const router = useRouter(); const router = useRouter();
@@ -16,7 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
const [authorized, SetAuthorized] = useState<boolean | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const [userLastLoginDetails, setUserLastLoginDetails] = useState(null); const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
const [custname, setCustname] = useState<string | null>(null); const [custname, setCustname] = useState<string | null>(null);
const isMobile = useMediaQuery("(max-width: 768px)");
const [opened, { open, close }] = useDisclosure(false); const [opened, { open, close }] = useDisclosure(false);
@@ -167,104 +167,84 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<html lang="en"> <html lang="en">
<body> <body>
<Providers> <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 <Box
style={{ style={{
height: "60px", width: "100%",
position: 'relative',
width: '100%',
display: "flex", display: "flex",
height: "60px",
// flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start", 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%)", background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
position: "relative",
// position: "fixed",
}} }}
> >
<Image {/* Logo */}
fit="cover" <Box style={{ width: isMobile ? "48px" : "65px", height: isMobile ? "50px" : "60px" }}>
src={logo} <Image src={logo} component={NextImage} alt="ebanking" style={{ width: "100%", height: "100%" }} />
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>
</Box> </Box>
<div {/* 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>
{/* WELCOME + NAV */}
<Box
style={{ style={{
flexShrink: 0, flexShrink: 0,
padding: '0.5rem 1rem', padding: isMobile ? "0.5rem" : "0.5rem 1rem",
display: "flex", display: "flex",
justifyContent: 'space-between', flexDirection: isMobile ? "column" : "row",
alignItems: "center", justifyContent: "space-between",
alignItems: isMobile ? "flex-start" : "center",
gap: isMobile ? "0.5rem" : 0,
}} }}
> >
<Stack gap={0} align="flex-start"> <Stack gap={isMobile ? 2 : 0} align={isMobile ? "flex-start" : "flex-start"}>
<Title order={4} style={{ fontFamily: "inter", fontSize: '22px' }}> <Title order={isMobile ? 5 : 4} style={{ fontFamily: "inter", fontSize: isMobile ? "18px" : "22px" }}>
Welcome, {custname ?? null} Welcome, {custname ?? null}
</Title> </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"} Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"}
</Text> </Text>
</Stack> </Stack>
<Group mt="md" gap="sm"> <Group mt={isMobile ? "sm" : "md"} gap="sm" style={{ flexWrap: isMobile ? "wrap" : "nowrap" }}>
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname.startsWith(item.href); const isActive = pathname.startsWith(item.href);
const Icon = item.icon; const Icon = item.icon;
return ( return (
<Link key={item.href} href={item.href}> <Link key={item.href} href={item.href}>
<Button <Button
leftSection={<Icon size={20} />} leftSection={<Icon size={isMobile ? 16 : 20} />}
variant={isActive ? "dark" : "subtle"} variant={isActive ? "dark" : "subtle"}
color={isActive ? "blue" : undefined} color={isActive ? "blue" : undefined}
size={isMobile ? "xs" : "sm"}
> >
{item.label} {item.label}
</Button> </Button>
</Link> </Link>
); );
})} })}
{/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
Logout <Popover opened={opened} onChange={close} position="bottom-end" withArrow shadow="md">
</Button> */}
<Popover
opened={opened}
onChange={close}
position="bottom-end" // 👈 Logout button ke niche right align
withArrow
shadow="md"
>
<Popover.Target> <Popover.Target>
<Button <Button leftSection={<IconLogout size={isMobile ? 16 : 20} />} variant="subtle" size={isMobile ? "xs" : "sm"} onClick={open}>
leftSection={<IconLogout size={20} />}
variant="subtle"
onClick={open}
>
Logout Logout
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>
<Text size="sm" mb="sm"> <Text size="sm" mb="sm">
Are you sure you want to logout? Are you sure you want to logout?
@@ -273,30 +253,31 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<Button variant="default" onClick={close}> <Button variant="default" onClick={close}>
Cancel Cancel
</Button> </Button>
<Button onClick={handleLogout}> <Button onClick={handleLogout}>Logout</Button>
Logout
</Button>
</Group> </Group>
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
</Group> </Group>
</div> </Box>
<Divider size="xs" color='#99c2ff' /> <Divider size="xs" color="#99c2ff" />
<div {/* CHILDREN */}
<Box
style={{ style={{
flex: 1, flex: 1,
overflowY: "auto", overflowY: "auto",
borderTop: '1px solid #ddd', borderTop: "1px solid #ddd",
borderBottom: '1px solid #ddd', borderBottom: "1px solid #ddd",
// padding: isMobile ? "0.5rem" : "1rem",
}} }}
> >
{children} {children}
</div> </Box>
<Divider size="xs" color='blue' /> <Divider size="xs" color="blue" />
{/* FOOTER */}
<Box <Box
style={{ style={{
flexShrink: 0, flexShrink: 0,
@@ -304,14 +285,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
backgroundColor: "#f8f9fa", 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 © 2025 The Kangra Central Co-Operative Bank
</Text> </Text>
</Box> </Box>
</div> </Box>
</Providers> </Providers>
</body> </body>
</html > </html >

131
src/app/(main)/settings/layout.tsx
View File

@@ -1,14 +1,19 @@
"use client"; "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 { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation"; 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 }) { export default function Layout({ children }: { children: React.ReactNode }) {
const [authorized, SetAuthorized] = useState<boolean | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const isMobile = useMediaQuery("(max-width: 768px)");
const [drawerOpened, setDrawerOpened] = useState(false);
const links = [ const links = [
{ label: "View Profile", href: "/settings" }, { label: "View Profile", href: "/settings" },
@@ -30,31 +35,33 @@ export default function Layout({ children }: { children: React.ReactNode }) {
if (authorized) { if (authorized) {
return ( return (
<div style={{ display: "flex", height: '100%' }}> <Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
<div {/* Desktop Sidebar */}
{!isMobile && (
<Box
style={{ style={{
width: "16%", width: "16%",
backgroundColor: '#c5e4f9', backgroundColor: "#c5e4f9",
borderRight: "1px solid #ccc", borderRight: "1px solid #ccc",
}} }}
> >
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}> <Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}> <Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
Settings Settings
</Text> </Text>
</Stack> </Stack>
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}> <Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
{links.map(link => { {links.map((link) => {
const isActive = pathname === link.href; const isActive = pathname === link.href;
return ( return (
<Text <Text
key={link.href} key={link.href}
component={Link} component={Link}
href={link.href} href={link.href}
c={isActive ? 'darkblue' : 'blue'} c={isActive ? "darkblue" : "blue"}
style={{ style={{
textDecoration: isActive ? 'underline' : 'none', textDecoration: isActive ? "underline" : "none",
fontWeight: isActive ? 600 : 400, fontWeight: isActive ? 600 : 400,
}} }}
> >
@@ -63,12 +70,108 @@ export default function Layout({ children }: { children: React.ReactNode }) {
); );
})} })}
</Stack> </Stack>
</div> </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} {children}
</div> </Box>
</div> </Box>
); );
} }
} }

89
src/app/eMandate/login/Login.module.css Normal file
View 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;
}
}

159
src/app/eMandate/login/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState, useEffect, memo, useRef } from "react"; 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 { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@@ -8,6 +8,7 @@ import NextImage from "next/image";
import logo from '@/app/image/logo1.jpg'; import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/EMandate.jpg'; import frontPage from '@/app/image/EMandate.jpg';
import { generateCaptcha } from '@/app/captcha'; import { generateCaptcha } from '@/app/captcha';
import styles from './Login.module.css';
export default function Login() { export default function Login() {
@@ -88,6 +89,7 @@ export default function Login() {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-Login-Type': 'emandate',
}, },
body: JSON.stringify({ body: JSON.stringify({
customerNo: CIF, customerNo: CIF,
@@ -103,33 +105,33 @@ export default function Login() {
message: data?.error || "Internal Server Error", message: data?.error || "Internal Server Error",
autoClose: 5000, autoClose: 5000,
}); });
localStorage.removeItem("access_token"); regenerateCaptcha()
localStorage.removeItem("mandate_token");
localStorage.clear(); localStorage.clear();
sessionStorage.clear(); sessionStorage.clear();
return; return;
} }
setIsLogging(true); setIsLogging(true);
if (response.ok) { if (response.ok) {
console.log(data); // console.log(data);
const token = data.token; const token = data.token;
localStorage.setItem("emandate_token", token); localStorage.setItem("mandate_token", token);
// localStorage.setItem("pswExpiryDate", data.loginPswExpiry); // localStorage.setItem("pswExpiryDate", data.loginPswExpiry);
if (data.FirstTimeLogin === true) { if (data.FirstTimeLogin === true) {
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
color: "red", color: "red",
title: "Error", 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, autoClose: 5000,
}); });
} }
else { else {
router.push("/mandate_page"); router.push("/eMandate/mandate_page");
} }
} }
else { else {
regenerateCaptcha();
setIsLogging(false); setIsLogging(false);
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
@@ -157,58 +159,21 @@ export default function Login() {
{/* Main Screen */} {/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */} {/* Header */}
<Box
style={{ <Box className={styles.header}>
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, <Image src={logo} component={NextImage} fit="contain" alt="ebanking" style={{ width: "60px", height: "auto" }} />
display: "flex", <Box className={styles['header-text']}>
justifyContent: "flex-start", <Title className={styles['desktop-text']} order={4}>THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.</Title>
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", <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>
<Image <Title className={styles['mobile-text']} order={5}>CO-OPERATIVE BANK LTD.</Title>
src={logo} </Box>
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> </Box>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
{/* Movable text */} {/* Movable text */}
<Box <Box
style={{ className={styles['desktop-scroll-text']}
width: "100%",
height: "0.5%",
overflow: "hidden",
whiteSpace: "nowrap",
padding: "8px 0",
}}
> >
<Text <Text
component="span" component="span"
@@ -234,13 +199,17 @@ export default function Login() {
0% { transform: translateX(0%); } 0% { transform: translateX(0%); }
100% { transform: translateX(-100%); } 100% { transform: translateX(-100%); }
} }
@media (max-width: 768px) {
.desktop-scroll-text { display: none; }
}
`} `}
</style> </style>
</Box> </Box>
{/* Main */} {/* Main */}
<div style={{ <Box visibleFrom="md"
style={{
display: "flex", height: "75vh", overflow: "hidden", position: "relative", display: "flex", height: "75vh", overflow: "hidden", position: "relative",
// background: 'linear-gradient(to right, #02081eff, #0a3d91)'
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)' background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
}}> }}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}> <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
@@ -300,7 +269,81 @@ export default function Login() {
</form> </form>
</Card> </Card>
</Box> </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 */} {/* Footer */}
<Box <Box
component="footer" component="footer"

473
src/app/eMandate/mandate_page/page.tsx Normal file
View 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>
);
}

117
src/app/login/page.module.css
View File

@@ -1,62 +1,75 @@
.root { .header {
width: 100vw; position: fixed;
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;
top: 0; top: 0;
z-index: 2; left: 0;
background-color: transparent; width: 100%;
z-index: 100;
display: flex; display: flex;
align-items: center; 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; justify-content: center;
opacity: 0.6; flex: 1;
text-align: left;
}
/* Desktop text */
.desktop-text {
color: white; color: white;
pointer-events: all; font-family: Roboto, sans-serif;
font-size: 1.5rem;
line-height: 1.2;
} }
/* First control is left */ .desktop-address {
.gradient-control:first-of-type { font-family: Roboto, sans-serif;
left: 0; color: white;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); font-size: 0.9rem;
text-shadow: 1px 1px 2px blue;
margin-top: 0.25rem;
} }
/* Last control is right */ /* Mobile styles */
.gradient-control:last-of-type { .mobile-text {
right: 0; color: white;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); 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;
}
} }

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

@@ -5,6 +5,7 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import styles from './page.module.css';
import logo from '@/app/image/logo1.jpg'; import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/ib_front_1.jpg'; import frontPage from '@/app/image/ib_front_1.jpg';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
@@ -12,6 +13,7 @@ import { generateCaptcha } from '@/app/captcha';
import { IconShieldLockFilled } from "@tabler/icons-react"; import { IconShieldLockFilled } from "@tabler/icons-react";
import dayjs from "dayjs"; import dayjs from "dayjs";
export default function Login() { export default function Login() {
const router = useRouter(); const router = useRouter();
const [CIF, SetCIF] = useState(""); const [CIF, SetCIF] = useState("");
@@ -130,6 +132,7 @@ export default function Login() {
message: data?.error || "Internal Server Error", message: data?.error || "Internal Server Error",
autoClose: 5000, autoClose: 5000,
}); });
regenerateCaptcha();
localStorage.removeItem("access_token"); localStorage.removeItem("access_token");
localStorage.clear(); localStorage.clear();
sessionStorage.clear(); sessionStorage.clear();
@@ -169,6 +172,7 @@ export default function Login() {
} }
else { else {
regenerateCaptcha();
setIsLogging(false); setIsLogging(false);
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
@@ -237,7 +241,7 @@ export default function Login() {
}); });
const data = await res.json(); const data = await res.json();
console.log(data) // console.log(data)
if (!res.ok) { if (!res.ok) {
notifications.show({ notifications.show({
color: "red", color: "red",
@@ -330,54 +334,34 @@ export default function Login() {
{/* Main Screen */} {/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */} {/* Header */}
<Box <Box className={styles.header}>
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 <Image
src={logo} src={logo}
component={NextImage} component={NextImage}
fit="contain" fit="contain"
alt="ebanking" alt="ebanking"
style={{ width: "100%", height: "auto", flexShrink: 0 }} style={{ width: "60px", height: "auto" }}
/> />
<Title ref={headerRef} <Box className={styles['header-text']}>
order={2} {/* Desktop */}
style={{ <Title className={styles['desktop-text']} ref={headerRef} order={2}>
fontFamily: 'Roboto',
position: 'absolute',
top: '30%',
left: '7%',
color: 'White',
transition: "opacity 0.5s ease-in-out",
}}
>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title> </Title>
<Text size="sm" c="white" <Text className={styles['desktop-address']} size="xs">
style={{ Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
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> </Text>
{/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
<Tooltip {/* Mobile */}
label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215' <Title className={styles['mobile-text']} order={5}>
position="right" THE KANGRA CENTRAL
withArrow> </Title>
<IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} /> <Title className={styles['mobile-text']} order={5}>
</Tooltip> CO-OPERATIVE BANK LTD.
</Box> */} </Title>
<Text className={styles['mobile-text']} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
</Box>
</Box> </Box>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>