From f4b1752fe2cc87792b48ce2873c2f15b335c9340 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Thu, 20 Nov 2025 13:45:55 +0530 Subject: [PATCH] fix: Design : add recommended header. --- src/app/(main)/home/page.tsx | 50 +++++------ src/app/(main)/layout.tsx | 159 +++++++++++++++++++++++---------- src/app/(main)/page.module.css | 74 +++++++++++++++ src/app/_util/otp.ts | 4 +- src/app/login/page.module.css | 5 +- src/app/login/page.tsx | 73 ++++++++------- 6 files changed, 256 insertions(+), 109 deletions(-) create mode 100644 src/app/(main)/page.module.css diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx index 92aef9a..f29818f 100644 --- a/src/app/(main)/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -33,31 +33,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 { diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 3ea0134..f8f4dce 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, Text, Title } from '@mantine/core'; -import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-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 Link from 'next/link'; import { useRouter, usePathname } from "next/navigation"; import { Providers } from '../providers'; @@ -10,6 +10,7 @@ import NextImage from 'next/image'; import { notifications } from '@mantine/notifications'; import { useDisclosure, useMediaQuery } from '@mantine/hooks'; import { fetchAndStoreUserName } from '../_util/userdetails'; +import styles from './page.module.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { const router = useRouter(); @@ -20,6 +21,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) const isMobile = useMediaQuery("(max-width: 768px)"); const [sessionModal, setSessionModal] = useState(false); const [countdown, setCountdown] = useState(30); // 30 sec countdown before auto logout + const [darkMode, setDarkMode] = useState(false); + const firstName = custname ? custname.split(" ")[0] : ""; + const [userOpened, setUserOpened] = useState(false); // Manage dropdown visibility const [opened, { open, close }] = useDisclosure(false); @@ -38,28 +42,32 @@ export default function RootLayout({ children }: { children: React.ReactNode }) doLogout() router.push("/login"); } + // Toggle Dark/Light Mode + const toggleDarkMode = () => { + setDarkMode((prevMode) => !prevMode); + }; // 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"); @@ -187,33 +195,92 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* HEADER */} - {/* Logo */} - - ebanking - + + ebanking +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + +
+ + + {/* Dark/Light Mode Toggle using Moon and Sun Icons */} + + {/* */} + + + + + + + + + {custname} + Full Name + + + + {userLastLoginDetails + ? new Date(userLastLoginDetails).toLocaleString() + : "N/A"} + + Last Login + + + + + + + + + - {/* Title & Phone */} - - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Toll Free No : 1800-180-8008 - - {/* WELCOME + NAV */} @@ -255,7 +322,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) ); })} - + {/* - + */} @@ -331,7 +398,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) }} > - © 2025 The Kangra Central Co-Operative Bank Ltd. + © 2025 The Kangra Central Co-Operative Bank Ltd. diff --git a/src/app/(main)/page.module.css b/src/app/(main)/page.module.css new file mode 100644 index 0000000..a7a87ba --- /dev/null +++ b/src/app/(main)/page.module.css @@ -0,0 +1,74 @@ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.8rem 2rem; + 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; + flex: 1; + text-align: left; +} + +.desktop-text { + color: white; + font-family: Roboto, sans-serif; + font-size: 1.5rem; + line-height: 1.2; +} + +.desktop-address { + font-family: Roboto, sans-serif; + color: white; + font-size: 0.9rem; + text-shadow: 1px 1px 2px blue; + margin-top: 0.25rem; +} + +/* Mobile styles */ +.mobile-text { + color: white; + font-family: Roboto, sans-serif; + font-size: 1rem; + line-height: 1.2; + display: none; + text-align: center; +} + +/* Media query for mobile */ +@media screen and (max-width: 768px) { + .header { + justify-content: center; + padding: 0.5rem 0.75rem; + } + + .header-logo { + width: 50px; + margin-bottom: 0.5rem; + } + + .header-text { + text-align: center; + flex-direction: column; + } + + .desktop-text, + .desktop-address { + display: none; + } + + .mobile-text { + display: block; + font-size: 0.9rem; + } +} diff --git a/src/app/_util/otp.ts b/src/app/_util/otp.ts index 7a70463..0e1fc67 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.module.css b/src/app/login/page.module.css index 8255e0f..a7a87ba 100644 --- a/src/app/login/page.module.css +++ b/src/app/login/page.module.css @@ -7,9 +7,9 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem 1rem; + padding: 0.8rem 2rem; background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%); - flex-wrap: wrap; /* allow wrapping on mobile */ + flex-wrap: wrap; /* Allow wrapping on mobile */ } .header-text { @@ -20,7 +20,6 @@ text-align: left; } -/* Desktop text */ .desktop-text { color: white; font-family: Roboto, sans-serif; diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 3f4d0c5..4a10d08 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -45,8 +45,8 @@ export default function Login() { } try { - await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile }); - // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" }); + // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile }); + await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" }); notifications.show({ color: 'orange', title: 'OTP Required', @@ -67,8 +67,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; } } @@ -440,38 +440,45 @@ export default function Login() { )} {/* Main Screen */} -
+
{/* Header */} - - ebanking - - {/* Desktop */} - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 - - - {/* Mobile */} - - THE KANGRA CENTRAL - - - CO-OPERATIVE BANK LTD. - - - Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 - - + + + ebanking +
+ + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + +
+ +
{/* Movable text */}