changes : Changes the design of IB
This commit is contained in:
@@ -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 })
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>
|
||||
<Box style={{ backgroundColor: "#e6ffff", minHeight: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||
<Box style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<Box
|
||||
@@ -202,7 +203,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
padding: "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(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", // Light Mode Gradient
|
||||
: "linear-gradient(deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", // Light Mode Gradient
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
color: "white",
|
||||
@@ -272,7 +273,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
|
||||
<Button
|
||||
leftSection={<IconLogout size={18} />}
|
||||
onClick={doLogout}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
@@ -284,79 +285,78 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
</Box>
|
||||
|
||||
{/* WELCOME + NAV */}
|
||||
<Box
|
||||
<Group
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
padding: isMobile ? "0.5rem" : "0.5rem 1rem",
|
||||
display: "flex",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: isMobile ? "flex-start" : "center",
|
||||
gap: isMobile ? "0.5rem" : 0,
|
||||
// padding: "0.8rem",
|
||||
background: "#d3f3bcff",
|
||||
// borderRadius: 8,
|
||||
boxShadow: "0 6px 6px rgba(0,0,0,0.06)",
|
||||
position:'sticky',
|
||||
top: 85,
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
<Stack gap={isMobile ? 2 : 0} align={isMobile ? "flex-start" : "flex-start"}>
|
||||
<Title order={isMobile ? 5 : 4} style={{ fontFamily: "inter", fontSize: isMobile ? "18px" : "22px" }}>
|
||||
Welcome, {custname ?? null}
|
||||
</Title>
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: isMobile ? "11px" : "13px" }}>
|
||||
Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Group mt={isMobile ? "sm" : "md"} gap="sm" style={{ flexWrap: isMobile ? "wrap" : "nowrap" }}>
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<Button
|
||||
leftSection={<Icon size={isMobile ? 16 : 20} />}
|
||||
variant={isActive ? "dark" : "subtle"}
|
||||
color={isActive ? "blue" : undefined}
|
||||
size={isMobile ? "xs" : "sm"}
|
||||
>
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<Group
|
||||
gap={8}
|
||||
style={{
|
||||
padding: "12px 24px",
|
||||
// borderRadius: 10,
|
||||
width: "100%",
|
||||
transition: "0.2s ease",
|
||||
background: isActive ? "rgba(50, 159, 81, 1)" : "transparent",
|
||||
color: isActive ? "#10a44bff" : "#3b3b3b",
|
||||
fontWeight: isActive ? 600 : 500,
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
color={isActive ? "#0f100fea" : "#3b3b3b"}
|
||||
/>
|
||||
|
||||
<Text size="sm" c='black' fw={500}>
|
||||
{item.label}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* <Popover opened={opened} onChange={close} position="bottom-end" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button leftSection={<IconLogout size={isMobile ? 16 : 20} />} variant="subtle" size={isMobile ? "xs" : "sm"} onClick={open}>
|
||||
Logout
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Text size="sm" mb="sm">
|
||||
Are you sure you want to logout?
|
||||
</Text>
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button variant="default" onClick={close}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleLogout}>Logout</Button>
|
||||
</Text>
|
||||
</Group>
|
||||
</Popover.Dropdown>
|
||||
</Popover> */}
|
||||
</Group>
|
||||
</Box>
|
||||
</Link>
|
||||
|
||||
<Divider size="xs" color="#99c2ff" />
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
|
||||
{/* CHILDREN */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
borderTop: "1px solid #ddd",
|
||||
borderBottom: "1px solid #ddd",
|
||||
// padding: isMobile ? "0.5rem" : "1rem",
|
||||
backgroundColor: "#f5f7fa",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<Box
|
||||
style={{
|
||||
// maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
background: "white",
|
||||
padding: "1.8rem",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
|
||||
minHeight: "75vh",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* this model for session logout */}
|
||||
<Modal
|
||||
opened={sessionModal}
|
||||
@@ -384,22 +384,111 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Divider size="xs" color="blue" />
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
// padding: isMobile ? "0.25rem" : "0.5rem",
|
||||
}}
|
||||
component="footer"
|
||||
style={(theme) => ({
|
||||
borderTop: `1px solid `,
|
||||
backgroundColor: 'rgba(60, 54, 74, 1)',
|
||||
paddingTop: '2rem',
|
||||
paddingBottom: '2rem',
|
||||
})}
|
||||
>
|
||||
<Text c="dimmed" size={isMobile ? "xs" : "sm"}>
|
||||
© 2025 The Kangra Central Co-Operative Bank Ltd.
|
||||
</Text>
|
||||
<Container size="xl">
|
||||
<Grid>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Group mb="md">
|
||||
<Box
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
background: 'linear-gradient(135deg, #16a34a 0%, #10b981 100%)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="cover" // This ensures the image covers the circle
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover", // Ensures the logo covers the whole circular area
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
The Kangra Central
|
||||
</Text>
|
||||
<Text size="xs">Co-operative Bank Ltd</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
Serving the community since inception. We are committed to providing quality
|
||||
banking services with personalized care and customer satisfaction.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Text size="sm" fw={500} mb="md">
|
||||
Quick Links
|
||||
</Text>
|
||||
<Stack gap="xs">
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
About Us
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Products & Services
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Help & Support
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Terms & Conditions
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Text size="sm" fw={500} mb="md">
|
||||
Contact Us
|
||||
</Text>
|
||||
<Stack gap="xs">
|
||||
<Text size="sm" c="dimmed">
|
||||
Phone: +91-1800-1808008
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Hours: Mon-Fri 10:00 AM - 4:00 PM
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Sat 10:00 AM - 2:00 PM
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Text
|
||||
size="sm"
|
||||
c="dimmed"
|
||||
ta="center"
|
||||
// mt="xl"
|
||||
// pt="xl"
|
||||
style={(theme) => ({
|
||||
borderTop: `1px solid `
|
||||
})}
|
||||
>
|
||||
© 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved. | Privacy Policy |
|
||||
Security
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
</Providers>
|
||||
|
||||
Reference in New Issue
Block a user