diff --git a/src/app/(main)/accounts/layout.tsx b/src/app/(main)/accounts/layout.tsx index b662b48..4f03efe 100644 --- a/src/app/(main)/accounts/layout.tsx +++ b/src/app/(main)/accounts/layout.tsx @@ -1,5 +1,5 @@ "use client"; -import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; +import { Box, Burger, Button, Divider, Drawer, ScrollArea, SegmentedControl, Stack, Text } from '@mantine/core'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; @@ -33,55 +33,62 @@ export default function Layout({ children }: { children: React.ReactNode }) { if (authorized) { return ( - - {/* Desktop Sidebar */} + + {/* ---------------- DESKTOP SIDEBAR ---------------- */} {!isMobile && ( - - - - My Accounts - - + <> + {/* Segmented Tabs */} + + + router.push(value)} + data={links.map((link) => ({ + label: link.label, + value: link.href, + }))} + styles={{ + root: { + backgroundColor: "#e9ecef", + borderRadius: 999, + padding: 4, + }, + control: { + borderRadius: 999, + transition: "0.3s", + }, - - {links.map((link) => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - - + indicator: { + borderRadius: 999, + background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)", + boxShadow: "0 3px 8px rgba(0,0,0,0.15)", + }, + + label: { + fontSize: 13, + padding: "6px 10px", + textAlign: "center", + fontWeight: 600, + color: "#000", + }, + }} + /> + + + )} - {/* Mobile: Burger & Drawer */} + {/* ---------------- MOBILE TOP BAR ---------------- */} {isMobile && ( <> - {/* Top header with burger and title */} - - My Accounts + + Send Money + {/* MOBILE DRAWER */} setDrawerOpened(false)} @@ -103,27 +111,31 @@ export default function Layout({ children }: { children: React.ReactNode }) { overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} styles={{ root: { - backgroundColor: "#e6f5ff", // soft background for drawer - // borderLeft: "4px solid #228be6", - // borderRadius: "8px", + backgroundColor: "#eaf4ff", }, }} > - {/* Logo and Drawer Header */} - - <> - KCCB Logo - - My Accounts - - + {/* Drawer Header */} + + KCCB Logo + + Send Money + - {/* Menu Items */} + {/* Drawer Items */} {links.map((link) => { const isActive = pathname === link.href; @@ -138,22 +150,11 @@ export default function Layout({ children }: { children: React.ReactNode }) { style={{ justifyContent: "flex-start", fontWeight: isActive ? 600 : 400, - textDecoration: isActive ? "underline" : "none", - color: isActive ? "#fff" : "#228be6", - backgroundColor: isActive ? "#228be6" : "#dceeff", + color: isActive ? "#fff" : "#1565c0", + backgroundColor: isActive ? "#1565c0" : "#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"; + transition: "0.2s", }} onClick={() => setDrawerOpened(false)} > @@ -166,9 +167,14 @@ export default function Layout({ children }: { children: React.ReactNode }) { )} - - {/* Content Area */} - + {/* ---------------- CONTENT AREA ---------------- */} + {children} diff --git a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx b/src/app/(main)/beneficiary/add_beneficiary/addBeneficiaryOthers.tsx similarity index 100% rename from src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx rename to src/app/(main)/beneficiary/add_beneficiary/addBeneficiaryOthers.tsx diff --git a/src/app/(main)/funds_transfer/add_beneficiary/page.tsx b/src/app/(main)/beneficiary/add_beneficiary/page.tsx similarity index 100% rename from src/app/(main)/funds_transfer/add_beneficiary/page.tsx rename to src/app/(main)/beneficiary/add_beneficiary/page.tsx diff --git a/src/app/(main)/beneficiary/layout.tsx b/src/app/(main)/beneficiary/layout.tsx new file mode 100644 index 0000000..2d1a54e --- /dev/null +++ b/src/app/(main)/beneficiary/layout.tsx @@ -0,0 +1,182 @@ +"use client"; + +import { + Box, + Stack, + Text, + SegmentedControl, + ScrollArea, + Burger, + Drawer, + Button, +} from "@mantine/core"; + +import Link from "next/link"; +import { usePathname, useRouter } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { useMediaQuery } from "@mantine/hooks"; +import Image from "next/image"; +import logo from "@/app/image/logo1.jpg"; + +export default function Layout({ children }: { children: React.ReactNode }) { + const [authorized, SetAuthorized] = useState(null); + const router = useRouter(); + const pathname = usePathname(); + const isMobile = useMediaQuery("(max-width: 768px)"); + const [drawerOpened, setDrawerOpened] = useState(false); + + /* Beneficiary Options */ + const links = [ + { label: "Add Beneficiary", href: "/beneficiary/add_beneficiary" }, + { label: "View Beneficiary", href: "/beneficiary/view_beneficiary" }, + ]; + + useEffect(() => { + const token = localStorage.getItem("access_token"); + if (!token) { + SetAuthorized(false); + router.push("/login"); + } else { + SetAuthorized(true); + } + }, []); + + if (!authorized) return null; + + return ( + + + {/* ---------------- DESKTOP HEADER ---------------- */} + {!isMobile && ( + <> + {/* Segmented Tabs */} + + + router.push(value)} + data={links.map((link) => ({ + label: link.label, + value: link.href, + }))} + styles={{ + root: { + backgroundColor: "#e9ecef", + borderRadius: 999, + padding: 4, + }, + control: { + borderRadius: 999, + transition: "0.3s", + }, + + indicator: { + borderRadius: 999, + background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)", + boxShadow: "0 3px 8px rgba(0,0,0,0.15)", + }, + + label: { + fontSize: 13, + padding: "6px 10px", + textAlign: "center", + fontWeight: 600, + color: "#000", + }, + }} + /> + + + + )} + + {/* ---------------- MOBILE HEADER ---------------- */} + {isMobile && ( + <> + + setDrawerOpened(true)} + size="sm" + color="white" + /> + + Beneficiary + + + + {/* Drawer for Mobile */} + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} + > + {/* Drawer Header */} + + KCCB Logo + + Beneficiary + + + + {/* Drawer Menu Items */} + + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} + + {/* ---------------- CONTENT BODY ---------------- */} + + {children} + + + ); +} diff --git a/src/app/(main)/funds_transfer/view_beneficiary/page.tsx b/src/app/(main)/beneficiary/view_beneficiary/page.tsx similarity index 100% rename from src/app/(main)/funds_transfer/view_beneficiary/page.tsx rename to src/app/(main)/beneficiary/view_beneficiary/page.tsx diff --git a/src/app/(main)/funds_transfer/layout.tsx b/src/app/(main)/funds_transfer/layout.tsx index 115c329..090099c 100644 --- a/src/app/(main)/funds_transfer/layout.tsx +++ b/src/app/(main)/funds_transfer/layout.tsx @@ -1,12 +1,12 @@ "use client"; -import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; -import { usePathname } from 'next/navigation'; -import Link from 'next/link'; -import React, { useEffect, useState } from 'react'; +import { Box, Burger, Button, Drawer, ScrollArea, SegmentedControl, Stack, Text } from "@mantine/core"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import React, { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import Image from "next/image"; import logo from "@/app/image/logo1.jpg"; -import { useMediaQuery } from '@mantine/hooks'; +import { useMediaQuery } from "@mantine/hooks"; export default function Layout({ children }: { children: React.ReactNode }) { const [authorized, SetAuthorized] = useState(null); @@ -16,163 +16,167 @@ export default function Layout({ children }: { children: React.ReactNode }) { const [drawerOpened, setDrawerOpened] = useState(false); const links = [ - { label: " Quick Pay", href: "/funds_transfer" }, - { label: "Add Beneficiary", href: "/funds_transfer/add_beneficiary" }, - { label: "View Beneficiary ", href: "/funds_transfer/view_beneficiary" }, - { label: "Send to Beneficiary", href: "/funds_transfer/send_beneficiary" }, + { label: "Quick Pay", href: "/funds_transfer" }, + { label: "Bank Transfer", href: "/funds_transfer/send_beneficiary" }, ]; + useEffect(() => { const token = localStorage.getItem("access_token"); if (!token) { SetAuthorized(false); router.push("/login"); - } - else { + } else { SetAuthorized(true); } }, []); - if (authorized) { - return ( - - {/* Desktop Sidebar */} - {!isMobile && ( + if (!authorized) return null; + + return ( + + {/* ---------------- DESKTOP SIDEBAR ---------------- */} + {!isMobile && ( + <> + {/* Segmented Tabs */} + + + router.push(value)} + data={links.map((link) => ({ + label: link.label, + value: link.href, + }))} + styles={{ + root: { + backgroundColor: "#e9ecef", + borderRadius: 999, + padding: 4, + }, + control: { + borderRadius: 999, + transition: "0.3s", + }, + + indicator: { + borderRadius: 999, + background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)", + boxShadow: "0 3px 8px rgba(0,0,0,0.15)", + }, + + label: { + fontSize: 13, + padding: "6px 10px", + textAlign: "center", + fontWeight: 600, + color: "#000", + }, + }} + /> + + + + )} + + {/* ---------------- MOBILE TOP BAR ---------------- */} + {isMobile && ( + <> - - - Send Money - - - - - {links.map((link) => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - + setDrawerOpened(!drawerOpened)} + size="sm" + color="white" + /> + + Send Money + - )} - {/* Mobile: Burger & Drawer */} - {isMobile && ( - <> - {/* Top header with burger and title */} + {/* MOBILE DRAWER */} + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} + styles={{ + root: { + backgroundColor: "#eaf4ff", + }, + }} + > + {/* Drawer Header */} - setDrawerOpened(!drawerOpened)} - size="sm" - color="white" + KCCB Logo - - Send Money + + Send Money - 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 */} - - <> - KCCB Logo - + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} - {/* Menu Items */} - - {links.map((link) => { - const isActive = pathname === link.href; - - return ( - - ); - })} - - - - )} - - - {/* Content Area */} - - {children} - + {/* ---------------- CONTENT AREA ---------------- */} + + {children} - ); - } + + ); } diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index f8f4dce..53a7b21 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useState } from 'react'; -import { Box, Button, Divider, Group, Image, Modal, Popover, Stack, Switch, Text, Title } from '@mantine/core'; -import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconMoon, IconPhoneFilled, IconSettings, IconSun, IconUserCircle } from '@tabler/icons-react'; +import { Anchor, Box, Button, Container, Divider, Group, Image, Modal, Popover, Stack, Switch, Text, Title, Grid } from '@mantine/core'; +import { IconHome, IconLogout, IconMoon, IconSend, IconSettings, IconSun, IconUserCircle, IconUsers, IconWallet } from '@tabler/icons-react'; import Link from 'next/link'; import { useRouter, usePathname } from "next/navigation"; import { Providers } from '../providers'; @@ -181,8 +181,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) const navItems = [ { href: "/home", label: "Home", icon: IconHome }, - { href: "/accounts", label: "Accounts", icon: IconBook }, - { href: "/funds_transfer", label: "Send Money", icon: IconCurrencyRupee }, + { href: "/accounts", label: "Accounts", icon: IconWallet }, + { href: "/funds_transfer", label: "Fund Transfer", icon: IconSend }, + { href: "/beneficiary/add_beneficiary", label: "Beneficiaries", icon: IconUsers }, { href: "/settings", label: "Settings", icon: IconSettings }, ]; @@ -191,7 +192,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - + {/* HEADER */} } - onClick={doLogout} + onClick={handleLogout} > Logout @@ -284,79 +285,78 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* WELCOME + NAV */} - - - - Welcome, {custname ?? null} - - - Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"} - - - - {navItems.map((item) => { - const isActive = pathname.startsWith(item.href); - const Icon = item.icon; - return ( - - - - ); - })} - - {/* - - - - - - Are you sure you want to logout? - - - - + - - */} - - + - + ); + })} + {/* CHILDREN */} - {children} + + {children} + + {/* this model for session logout */} - - {/* FOOTER */} ({ + borderTop: `1px solid `, + backgroundColor: 'rgba(60, 54, 74, 1)', + paddingTop: '2rem', + paddingBottom: '2rem', + })} > - - © 2025 The Kangra Central Co-Operative Bank Ltd. - + + + + + + ebanking + + +
+ + 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. + + + + + + Quick Links + + + + About Us + + + Products & Services + + + Help & Support + + + Terms & Conditions + + + + + + + Contact Us + + + + Phone: +91-1800-1808008 + + + Hours: Mon-Fri 10:00 AM - 4:00 PM + + + Sat 10:00 AM - 2:00 PM + + + + + + ({ + borderTop: `1px solid ` + })} + > + © 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved. | Privacy Policy | + Security + + diff --git a/src/app/(main)/settings/change_login_password/page.tsx b/src/app/(main)/settings/change_login_password/page.tsx index b21343b..4df88aa 100644 --- a/src/app/(main)/settings/change_login_password/page.tsx +++ b/src/app/(main)/settings/change_login_password/page.tsx @@ -58,10 +58,6 @@ export default function ChangePassword() { } } - - - - useEffect(() => { regenerateCaptcha(); }, []); @@ -232,7 +228,7 @@ export default function ChangePassword() { }; return ( - + Change Login Password diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx index 780ab76..41ef6eb 100644 --- a/src/app/(main)/settings/layout.tsx +++ b/src/app/(main)/settings/layout.tsx @@ -1,15 +1,24 @@ "use client"; -import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; -import { usePathname } from 'next/navigation'; -import Link from 'next/link'; -import React, { useEffect, useState } from 'react'; -import { useRouter } from "next/navigation"; -import { useMediaQuery } from '@mantine/hooks'; + +import { + Box, + Stack, + Text, + SegmentedControl, + ScrollArea, + Burger, + Drawer, + Button, +} from "@mantine/core"; +import { usePathname, useRouter } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { useMediaQuery } from "@mantine/hooks"; import Image from "next/image"; import logo from "@/app/image/logo1.jpg"; +import Link from "next/link"; export default function Layout({ children }: { children: React.ReactNode }) { - const [authorized, SetAuthorized] = useState(null); + const [authorized, setAuthorized] = useState(null); const router = useRouter(); const pathname = usePathname(); const isMobile = useMediaQuery("(max-width: 768px)"); @@ -21,159 +30,164 @@ export default function Layout({ children }: { children: React.ReactNode }) { { label: "Change transaction Password", href: "/settings/change_txn_password" }, { label: "Set transaction Password", href: "/settings/set_txn_password" }, { label: "Preferred Name", href: "/settings/user_name" }, - { label: "Set Transaction Limit ", href: "/settings/set_txn_limit" }, - + { label: "Set Transaction Limit", href: "/settings/set_txn_limit" }, ]; + useEffect(() => { const token = localStorage.getItem("access_token"); if (!token) { - SetAuthorized(false); + setAuthorized(false); router.push("/login"); - } - else { - SetAuthorized(true); + } else { + setAuthorized(true); } }, []); - if (authorized) { - return ( - - {/* Desktop Sidebar */} - {!isMobile && ( + if (!authorized) return null; + + return ( + + {/* ---------------- DESKTOP HEADER ---------------- */} + {!isMobile && ( + <> + + + router.push(value)} + data={links.map((link) => ({ + label: link.label, + value: link.href, + }))} + styles={{ + root: { + backgroundColor: "#e9ecef", + borderRadius: 999, + padding: 4, + }, + control: { + borderRadius: 999, + transition: "0.3s", + }, + + indicator: { + borderRadius: 999, + background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)", + boxShadow: "0 3px 8px rgba(0,0,0,0.15)", + }, + + label: { + fontSize: 13, + padding: "6px 10px", + textAlign: "center", + fontWeight: 600, + color: "#000", + }, + }} + /> + + + + )} + + {/* ---------------- MOBILE HEADER ---------------- */} + {isMobile && ( + <> + {/* Mobile Header */} - - - Settings - - - - - {links.map((link) => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - + setDrawerOpened(true)} + size="sm" + color="white" + /> + + Settings + - )} - {/* Mobile: Burger & Drawer */} - {isMobile && ( - <> - {/* Top header with burger and title */} + {/* Mobile Drawer */} + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 2 }} + > - setDrawerOpened(!drawerOpened)} - size="sm" - color="white" + Logo - + Settings - 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 */} - - <> - KCCB Logo - + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} - {/* Menu Items */} - - {links.map((link) => { - const isActive = pathname === link.href; - - return ( - - ); - })} - - - - )} - - - {/* Content Area */} - - {children} - + {/* ---------------- CONTENT AREA ---------------- */} + + {children} - ); - } + + ); } diff --git a/src/app/_themes/KccbTheme.ts b/src/app/_themes/KccbTheme.ts index cbf4c29..7d2c0e7 100644 --- a/src/app/_themes/KccbTheme.ts +++ b/src/app/_themes/KccbTheme.ts @@ -6,6 +6,11 @@ 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 +// ]; + export const KccbTheme = createTheme({ /* Put your mantine theme override here */ diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 4a10d08..4c51977 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -46,7 +46,8 @@ export default function Login() { try { // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile }); - await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" }); + const maskedCIF = CIF?.replace(/.(?=.{3})/g, '*'); + await sendOtp({ type: 'LOGIN_OTP', username: maskedCIF, mobileNumber: "7890544527" }); notifications.show({ color: 'orange', title: 'OTP Required',