From c1d0519c09e8ee8273361e078d3fe0091c896c62 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Thu, 27 Nov 2025 18:13:06 +0530 Subject: [PATCH] Fix: design and few function --- .../(main)/accounts/account_details/page.tsx | 2 +- .../account_statement/accountStatement.tsx | 73 +++- src/app/(main)/accounts/layout.tsx | 6 +- src/app/(main)/accounts/page.tsx | 6 +- .../add_beneficiary/addBeneficiaryOthers.tsx | 6 +- src/app/(main)/beneficiary/layout.tsx | 2 +- .../{add_beneficiary => }/page.tsx | 2 +- .../beneficiary/view_beneficiary/page.tsx | 37 +- src/app/(main)/funds_transfer/page.tsx | 6 +- .../funds_transfer/send_beneficiary/page.tsx | 2 +- .../sendBeneficiaryOthers.tsx | 2 +- src/app/(main)/home/page.tsx | 382 +++++++++--------- src/app/(main)/layout.tsx | 300 +++++++------- .../settings/change_txn_password/page.tsx | 2 +- src/app/(main)/settings/page.tsx | 2 +- .../(main)/settings/set_txn_limit/page.tsx | 11 +- .../(main)/settings/set_txn_password/page.tsx | 2 +- src/app/(main)/settings/user_name/page.tsx | 2 +- src/app/ATMLocator/page.tsx | 232 +++++++++++ src/app/BranchLocator/page.tsx | 254 ++++++++++++ src/app/CustomerCare/page.tsx | 243 +++++++++++ src/app/FAQs/page.tsx | 243 +++++++++++ src/app/_themes/KccbTheme.ts | 12 +- src/app/_util/otp.ts | 4 +- src/app/login/page.tsx | 8 +- 25 files changed, 1446 insertions(+), 395 deletions(-) rename src/app/(main)/beneficiary/{add_beneficiary => }/page.tsx (99%) create mode 100644 src/app/ATMLocator/page.tsx create mode 100644 src/app/BranchLocator/page.tsx create mode 100644 src/app/CustomerCare/page.tsx create mode 100644 src/app/FAQs/page.tsx diff --git a/src/app/(main)/accounts/account_details/page.tsx b/src/app/(main)/accounts/account_details/page.tsx index e6d84bc..e7f0795 100644 --- a/src/app/(main)/accounts/account_details/page.tsx +++ b/src/app/(main)/accounts/account_details/page.tsx @@ -108,7 +108,7 @@ export default function AccountDetails() { if (!authorized) return null; return ( - + Account Details diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx index 89e502b..745b085 100644 --- a/src/app/(main)/accounts/account_statement/accountStatement.tsx +++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx @@ -168,7 +168,7 @@ export default function AccountStatementPage() { {/* Left side – form */} - + Account Transactions ['SA', 'SB'].includes(acc.stAccountType)); + const filterSAaccount = data.filter((acc) => ['SA', 'SB','CC','OD','CA'].includes(acc.stAccountType)); setAccountData(filterSAaccount); } } catch { diff --git a/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx b/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx index 6082b0f..b020eec 100644 --- a/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx +++ b/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx @@ -200,7 +200,7 @@ export default function SendToBeneficiaryOthers() { }); const data = await response.json(); if (response.ok && Array.isArray(data)) { - const filterSAaccount = data.filter((acc) => ['SA', 'SB'].includes(acc.stAccountType)); + const filterSAaccount = data.filter((acc) => ['SA', 'SB','CC','OD','CA'].includes(acc.stAccountType)); setAccountData(filterSAaccount); } } catch { diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx index f29818f..da3d576 100644 --- a/src/app/(main)/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -21,6 +21,7 @@ export default function Home() { const [authorized, SetAuthorized] = useState(null); const router = useRouter(); const isMobile = useMediaQuery("(max-width: 768px)"); + const [userName, setUserName] = useState(""); const [accountData, SetAccountData] = useState([]); const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN"); const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || ""); @@ -33,31 +34,31 @@ export default function Home() { const [loadingAccountNo, setLoadingAccountNo] = useState(null); // If back and forward button is clicked - // useEffect(() => { - // window.history.pushState(null, "", window.location.href); - // const handlePopState = () => { - // localStorage.removeItem("access_token"); - // sessionStorage.removeItem("access_token"); - // localStorage.removeItem("remitter_name"); - // localStorage.removeItem("pswExpiryDate"); - // localStorage.clear(); - // sessionStorage.clear(); - // router.push("/login"); - // }; - // const handleBeforeUnload = () => { - // // 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); - // return () => { - // window.removeEventListener("popstate", handlePopState); - // window.addEventListener("beforeunload", handleBeforeUnload); - // }; - // }, []); + useEffect(() => { + window.history.pushState(null, "", window.location.href); + const handlePopState = () => { + localStorage.removeItem("access_token"); + sessionStorage.removeItem("access_token"); + localStorage.removeItem("remitter_name"); + localStorage.removeItem("pswExpiryDate"); + localStorage.clear(); + sessionStorage.clear(); + router.push("/login"); + }; + const handleBeforeUnload = () => { + // 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); + return () => { + window.removeEventListener("popstate", handlePopState); + window.addEventListener("beforeunload", handleBeforeUnload); + }; + }, []); async function handleFetchUserDetails() { try { @@ -66,7 +67,7 @@ export default function Home() { method: 'GET', headers: { 'Content-Type': 'application/json', - "X-Login-Type": "IB", + "X-Login-Type": "IB", 'Authorization': `Bearer ${token}` }, }); @@ -117,6 +118,9 @@ export default function Home() { useEffect(() => { if (authorized) { handleFetchUserDetails(); + const fullName = localStorage.getItem("remitter_name") || "User"; + // const first = fullName.split(" ")[0]; + setUserName(fullName); } }, [authorized]); @@ -124,38 +128,188 @@ export default function Home() { return ( - + + {/* ---------------------- WELCOME CARD ---------------------- */} + <Title + order={2} + style={{ + marginTop: "4px", + fontSize: isMobile ? "20px" : "28px", + fontWeight: 800, + background: "linear-gradient(56deg, rgba(16,114,152,1) 0%, rgba(62,230,132,1) 86%)", + WebkitBackgroundClip: "text", + WebkitTextFillColor: "transparent", + }} + > + Welcome, {userName} + + + {/* -------------------- ACCOUNT OVERVIEW HEADER -------------------- */} + Accounts Overview - {/* Show Balance Switch */} + + + Your accounts at a glance + + + {/* --------------------- SHOW BALANCE TOGGLE ---------------------- */} - + Show Balance + setShowBalance(event.currentTarget.checked)} /> - {/* Cards Section */} - {isMobile ? ( + {/* ----------------------- DESKTOP VIEW ------------------------ */} + {!isMobile && ( + + + {/* ----------------------- DEPOSIT CARD ----------------------- */} + + + + Deposit Account + + ({ + value: acc.stAccountNo, + label: `${acc.stAccountType}- ${acc.stAccountNo}`, + }))} + value={selectedLN} + // @ts-ignore + onChange={setSelectedLN} + size="xs" + styles={{ + input: { backgroundColor: "white", color: "black", marginLeft: 30, width: 140 } + }} + /> + + + {selectedLNData?.stAccountNo} + + + {showBalance + ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` + : "****"} + + + + + + {/* ----------------------- QUICK LINKS ----------------------- */} + + Quick Links + + + + + + + + + + + + )} + + {/* ----------------------- MOBILE VERSION STAYS SAME ----------------------- */} + {isMobile && ( {/* Deposit Account Card */} @@ -262,7 +416,7 @@ export default function Home() { backgroundColor: "white", color: "black", marginLeft: 5, - width: "120px", + width: "150px", }, }} /> @@ -333,157 +487,19 @@ export default function Home() { - ) : ( - - {/* Desktop Cards */} - {/* Deposit Account Card */} - - - - Deposit Account - {depositAccounts.length > 0 ? ( - ({ - value: acc.stAccountNo, - label: `${acc.stAccountType}- ${acc.stAccountNo}`, - }))} - value={selectedLN} - // @ts-ignore - onChange={setSelectedLN} - size="xs" - styles={{ - input: { - backgroundColor: "white", - color: "black", - marginLeft: 30, - width: 140, - }, - }} - /> - ) : ( - - No loan account available - - )} - - - {loanAccounts.length > 0 ? ( - <> - {Number(selectedLNData?.stAccountNo || 0)} - - {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"} - - - - ) : ( - <> - - Apply for a loan account to get started - - - - )} - - - {/* Important Links Card */} - - - Quick Links - - - - - - - - - )} - {/* Notes Section */} - + {/* -------------------- NOTES SECTION (BOTTOM) --------------------- */} + ** Book Balance includes uncleared effect. - ** Click on the "Show Balance" to display balance for the Deposit and Loan account. + ** Click "Show Balance" to display account balances. ** Your Password will expire in {PassExpiryRemains} days. + ); diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 53a7b21..1ab12d8 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -48,26 +48,26 @@ export default function RootLayout({ children }: { children: React.ReactNode }) }; // When reload and click on back then logout - // useEffect(() => { - // // Push fake history state to trap navigation - // window.history.pushState(null, "", window.location.href); - // const handlePopState = () => { - // doLogout(); // logout when back/forward pressed - // }; - // const handleBeforeUnload = (e: BeforeUnloadEvent) => { - // // 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); - // return () => { - // window.removeEventListener("popstate", handlePopState); - // window.addEventListener("beforeunload", handleBeforeUnload); - // }; - // }, []); + useEffect(() => { + // Push fake history state to trap navigation + window.history.pushState(null, "", window.location.href); + const handlePopState = () => { + doLogout(); // logout when back/forward pressed + }; + const handleBeforeUnload = (e: BeforeUnloadEvent) => { + // 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); + return () => { + window.removeEventListener("popstate", handlePopState); + window.addEventListener("beforeunload", handleBeforeUnload); + }; + }, []); useEffect(() => { const token = localStorage.getItem("access_token"); @@ -183,7 +183,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) { href: "/home", label: "Home", icon: IconHome }, { href: "/accounts", label: "Accounts", icon: IconWallet }, { href: "/funds_transfer", label: "Fund Transfer", icon: IconSend }, - { href: "/beneficiary/add_beneficiary", label: "Beneficiaries", icon: IconUsers }, + { href: "/beneficiary", label: "Beneficiaries", icon: IconUsers }, { href: "/settings", label: "Settings", icon: IconSettings }, ]; @@ -200,154 +200,165 @@ export default function RootLayout({ children }: { children: React.ReactNode }) className={styles.header} style={{ width: "100%", - padding: "0.8rem 2rem", + padding: isMobile ? "0.6rem 1rem" : "0.8rem 2rem", background: darkMode - ? "linear-gradient(15deg, rgba(229, 101, 22, 1) 55%, rgba(28, 28, 30, 1) 100%)" // Dark Mode Gradient - : "linear-gradient(deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", // Light Mode Gradient + ? "linear-gradient(15deg, rgba(229, 101, 22, 1) 55%, rgba(28, 28, 30, 1) 100%)" + : "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", alignItems: "center", justifyContent: "space-between", color: "white", boxShadow: "0 2px 6px rgba(0,0,0,0.15)", position: "sticky", top: 0, - zIndex: 100, + zIndex: 200, // ↑ Increased for stability }} > - + ebanking +
- + <Title + order={isMobile ? 4 : 3} + style={{ + fontFamily: "Roboto", + color: "white", + marginBottom: 2, + fontSize: isMobile ? "14px" : "22px", + lineHeight: 1.2, + }} + > THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 - + + {!isMobile && ( + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + )}
- {/* Dark/Light Mode Toggle using Moon and Sun Icons */} - - {/* */} - - + {/* USER BUTTON */} + + + + + + + + + {custname} + Full Name + + + + + {userLastLoginDetails + ? new Date(userLastLoginDetails).toLocaleString() + : "N/A"} + + Last Login + + + + - - - - - - {custname} - Full Name - - - - {userLastLoginDetails - ? new Date(userLastLoginDetails).toLocaleString() - : "N/A"} - - Last Login - - - - - - - - - - + + + - {/* WELCOME + NAV */} + {/* NAVBAR — desktop unchanged, mobile scrollable */} - {navItems.map((item) => { const isActive = pathname.startsWith(item.href); const Icon = item.icon; return ( - + - - + {item.label} - ); })} - {/* CHILDREN */} + {/* CONTENT */} - {/* FOOTER */} + {/* FOOTER (desktop same, mobile stacked) */} ({ - borderTop: `1px solid `, - backgroundColor: 'rgba(60, 54, 74, 1)', - paddingTop: '2rem', - paddingBottom: '2rem', - })} + style={{ + backgroundColor: "rgba(60, 54, 74, 1)", + paddingTop: "2rem", + paddingBottom: "2rem", + color: "white", + }} > - + + ebanking
- - The Kangra Central - + The Kangra Central Co-operative Bank Ltd
- Serving the community since inception. We are committed to providing quality - banking services with personalized care and customer satisfaction. + Serving the community since inception. - - Quick Links - + Quick Links - - About Us - - - Products & Services - - - Help & Support - - - Terms & Conditions - + About Us + Products & Services + Help & Support - - Contact Us - + Contact Us - - Phone: +91-1800-1808008 - - - Hours: Mon-Fri 10:00 AM - 4:00 PM - - - Sat 10:00 AM - 2:00 PM - + Phone: +91-1800-1808008 + Mon–Fri 10 AM – 4 PM + Sat 10 AM – 2 PM + ({ - borderTop: `1px solid ` - })} + style={{ borderTop: "1px solid rgba(255,255,255,0.2)", marginTop: 20, paddingTop: 20 }} > - © 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved. | Privacy Policy | - Security + © 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved. + - + ); + } } diff --git a/src/app/(main)/settings/change_txn_password/page.tsx b/src/app/(main)/settings/change_txn_password/page.tsx index 1c06225..d3d8ad6 100644 --- a/src/app/(main)/settings/change_txn_password/page.tsx +++ b/src/app/(main)/settings/change_txn_password/page.tsx @@ -240,7 +240,7 @@ export default function ChangePassword() { }; return ( - + Change Transaction Password diff --git a/src/app/(main)/settings/page.tsx b/src/app/(main)/settings/page.tsx index b69377e..cbc1453 100644 --- a/src/app/(main)/settings/page.tsx +++ b/src/app/(main)/settings/page.tsx @@ -107,7 +107,7 @@ export default function ViewProfile() { ); return ( - + View Profile diff --git a/src/app/(main)/settings/set_txn_limit/page.tsx b/src/app/(main)/settings/set_txn_limit/page.tsx index b9a2d0b..a13f241 100644 --- a/src/app/(main)/settings/set_txn_limit/page.tsx +++ b/src/app/(main)/settings/set_txn_limit/page.tsx @@ -224,7 +224,7 @@ export default function SetTransactionLimit() { }; return ( - + Set Transaction Limit @@ -237,9 +237,13 @@ export default function SetTransactionLimit() { value={limit} onChange={(e) => { const val = e.currentTarget.value; - // Only allow digits + + // Allow only digits AND max value 500000 if (/^\d*$/.test(val)) { - setLimit(val); + const num = Number(val); + if (num <= 500000) { + setLimit(val); + } } }} leftSection={icon} @@ -247,6 +251,7 @@ export default function SetTransactionLimit() { mb="sm" readOnly={step !== "form"} /> + {dailyLimit !== null ? ( diff --git a/src/app/(main)/settings/set_txn_password/page.tsx b/src/app/(main)/settings/set_txn_password/page.tsx index 5b67132..99cda88 100644 --- a/src/app/(main)/settings/set_txn_password/page.tsx +++ b/src/app/(main)/settings/set_txn_password/page.tsx @@ -240,7 +240,7 @@ export default function ChangePassword() { }; return ( - + Set Transaction Password diff --git a/src/app/(main)/settings/user_name/page.tsx b/src/app/(main)/settings/user_name/page.tsx index 6dfc317..fc29b2c 100644 --- a/src/app/(main)/settings/user_name/page.tsx +++ b/src/app/(main)/settings/user_name/page.tsx @@ -261,7 +261,7 @@ export default function SetPreferredNameSimple() { if (loading) return Loading...; return ( - + Set Preferred Name diff --git a/src/app/ATMLocator/page.tsx b/src/app/ATMLocator/page.tsx new file mode 100644 index 0000000..dda8328 --- /dev/null +++ b/src/app/ATMLocator/page.tsx @@ -0,0 +1,232 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { Box, Button, Group, Stack, Text, Paper, Collapse, Title, Image } from "@mantine/core"; +import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"; +import { useRouter } from "next/navigation"; +import { useMediaQuery } from "@mantine/hooks"; +import NextImage from "next/image"; +import logo from "@/app/image/logo1.jpg"; + +export default function ATMListPage() { + const [atms, setAtms] = useState([]); + const [openedIndex, setOpenedIndex] = useState(null); + const [authorized, setAuthorized] = useState(null); + + const isMobile = useMediaQuery("(max-width: 768px)"); + const router = useRouter(); + + // ✔ Authorization Check + useEffect(() => { + const token = localStorage.getItem("access_token"); + if (!token) { + setAuthorized(false); + router.push("/login"); + } else { + setAuthorized(true); + } + }, []); + + // ✔ Fetch ATM Data + useEffect(() => { + async function fetchData() { + try { + const token = localStorage.getItem("access_token"); + const response = await fetch("/api/atm", { + method: "GET", + headers: { + "Content-Type": "application/json", + "X-Login-Type": "IB", + Authorization: `Bearer ${token}`, + }, + }); + + const result = await response.json(); + + const list = Array.isArray(result) + ? result + : Array.isArray(result.data) + ? result.data + : []; + + setAtms(list); + } catch (error) { + console.error("ATM list API error:", error); + setAtms([]); + } + } + + if (authorized) fetchData(); + }, [authorized]); + + // Wait until auth is checked + if (authorized === null) return null; + + const toggleRow = (index: number) => { + setOpenedIndex((prev) => (prev === index ? null : index)); + }; + + return ( + + {/* HEADER */} + + + ebanking +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + {!isMobile && ( + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + )} +
+ + + + {/* SECOND FIXED BAR */} + + + List of Available ATMs + + + + + + {/* SCROLLABLE CONTENT */} + + + {atms.map((atm: any, index: number) => { + const isOpen = openedIndex === index; + + return ( + + + + {atm.name} + + + + + + {/* ATM Extra Info */} + + + + ATM Name: {atm.name} + + + + Availability: 24x7 + + + + Type: Cash Withdrawal Only + + + + Status:{" "} + Active + + + + + ); + })} + + + + {/* FOOTER */} + + + © 2025 KCC Bank. All rights reserved. + + + + ); +} diff --git a/src/app/BranchLocator/page.tsx b/src/app/BranchLocator/page.tsx new file mode 100644 index 0000000..b4dcd74 --- /dev/null +++ b/src/app/BranchLocator/page.tsx @@ -0,0 +1,254 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { Box, Button, Group, Stack, Text, Paper, Collapse, Title, Image } from "@mantine/core"; +import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"; +import NextImage from 'next/image'; +import logo from '@/app/image/logo1.jpg'; +import { useRouter } from "next/navigation"; +import { useMediaQuery } from "@mantine/hooks"; + +export default function BranchListPage() { + const [branches, setBranches] = useState([]); + const [openedIndex, setOpenedIndex] = useState(null); + const [authorized, SetAuthorized] = useState(null); + const isMobile = useMediaQuery("(max-width: 768px)"); + const router = useRouter(); + + // Fetch branch API + useEffect(() => { + async function fetchData() { + try { + const token = localStorage.getItem("access_token"); + const response = await fetch('api/branch', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + "X-Login-Type": "IB", + 'Authorization': `Bearer ${token}` + }, + }); + const result = await response.json(); + + // Handle any response shape + const list = + Array.isArray(result) ? result : + Array.isArray(result.data) ? result.data : + Array.isArray(result.branches) ? result.branches : + []; + + setBranches(list); + } catch (error) { + console.error("Error fetching branches:", error); + setBranches([]); + } + } + + fetchData(); + }, []); + + useEffect(() => { + const token = localStorage.getItem("access_token"); + if (!token) { + SetAuthorized(false); + router.push("/login"); + } + else { + SetAuthorized(true); + } + }, []); + + + const toggleRow = (index: number) => { + setOpenedIndex((prev) => (prev === index ? null : index)); + }; + + if (authorized === null) { + return null; // Prevent rendering until check is done + } + return ( + + {/* HEADER */} + + + ebanking +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + {!isMobile && ( + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + )} +
+ + + + {/* SECOND FIXED BAR */} + + + List of Branches + + + + + + {/* SCROLLABLE CONTENT */} + + + {branches.map((branch: any, index: number) => { + const isOpen = openedIndex === index; + + return ( + + + + {branch.branch_name} + + + + + + + + + Branch Code: {branch.branch_code} + + + + Zone: {branch.zone} + + + + Tehsil: {branch.tehsil} + + + + Block: {branch.block} + + + + District: {branch.distt_name} + + + + Pincode: {branch.pincode} + + + + + Telephone: + {" "} + + {branch.telephone_no} + + + + + + ); + })} + + + + {/* FOOTER */} + + + © 2025 KCC Bank. All rights reserved. + + + + ); + +} diff --git a/src/app/CustomerCare/page.tsx b/src/app/CustomerCare/page.tsx new file mode 100644 index 0000000..13a1fa8 --- /dev/null +++ b/src/app/CustomerCare/page.tsx @@ -0,0 +1,243 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { + Box, + Button, + Group, + Stack, + Text, + Paper, + Title, + Image, +} from "@mantine/core"; +import { IconMail, IconPhone, IconChevronLeft } from "@tabler/icons-react"; +import { useMediaQuery } from "@mantine/hooks"; +import { useRouter } from "next/navigation"; +import NextImage from "next/image"; +import logo from "@/app/image/logo1.jpg"; + +export default function EnquiryPage() { + const isMobile = useMediaQuery("(max-width: 768px)"); + const router = useRouter(); + + // FAKE CONTACT LIST — replace with your API if needed + const contacts = [ + { + title: "Chairman", + email: "chairman@kccb.in", + phone: "01892-222677", + }, + { + title: "Managing Director", + email: "md@kccb.in", + phone: "01892-224960", + }, + { + title: "General Manager (West)", + email: "gmw@kccb.in", + phone: "01892-223280", + }, + { + title: "General Manager (North)", + email: "gmn@kccb.in", + phone: "01892-224607", + }, + ]; + + return ( + + {/* HEADER */} + + router.back()} + /> + + + ebanking + +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + {!isMobile && ( + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + )} +
+ + + + {/* SECOND BAR */} + + + Customer Care + + + + + + {/* BODY CONTENT */} + + + {/* Complaint Form */} + + Complaint Form + + + + {/* Key Contacts Title */} + + Key Contacts + + + {/* 2-COLUMN GRID */} + + {contacts.map((contact, index) => ( + + + {contact.title} + + + + + {contact.email} + + + + + {contact.phone} + + + ))} + + + + + {/* FOOTER */} + + + © 2025 KCC Bank. All rights reserved. + + + + ); +} diff --git a/src/app/FAQs/page.tsx b/src/app/FAQs/page.tsx new file mode 100644 index 0000000..61f2a69 --- /dev/null +++ b/src/app/FAQs/page.tsx @@ -0,0 +1,243 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { + Box, + Button, + Group, + Stack, + Text, + Paper, + Collapse, + Title, + Image, +} from "@mantine/core"; +import { IconChevronLeft, IconChevronDown, IconChevronUp } from "@tabler/icons-react"; +import { useMediaQuery } from "@mantine/hooks"; +import { useRouter } from "next/navigation"; +import NextImage from "next/image"; +import logo from "@/app/image/logo1.jpg"; + +export default function FAQPage() { + const isMobile = useMediaQuery("(max-width: 768px)"); + const router = useRouter(); + const [openedIndex, setOpenedIndex] = useState(null); + + const toggleRow = (index: number) => { + setOpenedIndex((prev) => (prev === index ? null : index)); + }; + + // FAQ DATA + const faqs = [ + { + question: "How do I log in to the Internet Banking portal?", + answer: + "Open the login page and enter your User ID and Password. You may also be required to verify using an OTP sent to your registered mobile number.", + }, + { + question: "Is my banking information secure on this app?", + answer: + "Yes. All transactions are fully encrypted. We use multi-factor authentication, secure session management, and industry-standard protection mechanisms.", + }, + { + question: "How can I check my account balance?", + answer: + "Go to the Accounts section after logging in. All your linked accounts and available balances will be displayed instantly.", + }, + { + question: "Can I transfer money to other bank accounts?", + answer: + "Yes. You can transfer funds using NEFT, RTGS, IMPS, or within-bank transfers. Add a beneficiary before initiating a transfer.", + }, + { + question: "How do I view my transaction history?", + answer: + "Open the 'Account Statement' or 'Transactions' tab. You can filter by date, download a PDF.", + }, + // { + // question: "What should I do if I forget my Internet Banking password?", + // answer: + // "Use the 'Forgot Password' option on the login page and follow the steps to reset your password using OTP verification.", + // }, + { + question: "How do I update my mobile number or email ID?", + answer: + "You can update your contact details by visiting your nearest branch.", + }, + { + question: "What should I do if my account gets locked?", + answer: + "Your account may lock after multiple incorrect login attempts. To unlock your Internet Banking access, please visit your nearest KCC Bank branch or contact customer care.", + }, + ]; + + return ( + + {/* HEADER */} + + router.back()} + /> + + + ebanking + +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + {!isMobile && ( + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + )} +
+ + + + {/* SECOND BAR */} + + + Frequently Asked Questions + + + + + + {/* BODY CONTENT */} + + + + {faqs.map((item, index) => { + const isOpen = openedIndex === index; + + return ( + + {/* QUESTION */} + toggleRow(index)} + > + + {item.question} + + + {isOpen ? ( + + ) : ( + + )} + + + {/* ANSWER */} + + + {item.answer} + + + + ); + })} + + + + + {/* FOOTER */} + + + © 2025 KCC Bank. All rights reserved. + + + + ); +} diff --git a/src/app/_themes/KccbTheme.ts b/src/app/_themes/KccbTheme.ts index 7d2c0e7..35f5c92 100644 --- a/src/app/_themes/KccbTheme.ts +++ b/src/app/_themes/KccbTheme.ts @@ -2,14 +2,14 @@ import { MantineColorsTuple, createTheme } from "@mantine/core"; -const KccbColors: MantineColorsTuple = [ - "#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5", - "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1" -]; // const KccbColors: MantineColorsTuple = [ -// "#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#66bb6a", // Lighter greens -// "#4caf50", "#43a047", "#388e3c", "#2c6f2c", "#1b5e20" // Darker greens +// "#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5", +// "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1" // ]; +const KccbColors: MantineColorsTuple = [ + "#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#66bb6a", // Lighter greens + "#4caf50", "#43a047", "#388e3c", "#2c6f2c", "#1b5e20" // Darker greens +]; export const KccbTheme = createTheme({ diff --git a/src/app/_util/otp.ts b/src/app/_util/otp.ts index 0e1fc67..7a70463 100644 --- a/src/app/_util/otp.ts +++ b/src/app/_util/otp.ts @@ -14,8 +14,8 @@ interface SendOtpPayload { } function getStoredMobileNumber(): string { - // const mobileNumber = localStorage.getItem('remitter_mobile_no'); - const mobileNumber = "7890544527"; + const mobileNumber = localStorage.getItem('remitter_mobile_no'); + // const mobileNumber = "7890544527"; if (!mobileNumber) throw new Error('Mobile number not found.'); return mobileNumber; } diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 4c51977..46fa1fc 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -45,9 +45,9 @@ export default function Login() { } try { - // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile }); const maskedCIF = CIF?.replace(/.(?=.{3})/g, '*'); - await sendOtp({ type: 'LOGIN_OTP', username: maskedCIF, mobileNumber: "7890544527" }); + await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile }); + // await sendOtp({ type: 'LOGIN_OTP', username: maskedCIF, mobileNumber: "7890544527" }); notifications.show({ color: 'orange', title: 'OTP Required', @@ -68,8 +68,8 @@ export default function Login() { async function handleVerifyOtp(mobile?: string) { try { if (mobile) { - // await verifyLoginOtp(otp, mobile); - await verifyLoginOtp(otp, '7890544527'); + await verifyLoginOtp(otp, mobile); + // await verifyLoginOtp(otp, '7890544527'); return true; } }