changes : Changes the design of IB
This commit is contained in:
@@ -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 (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>
|
||||
{/* ---------------- DESKTOP SIDEBAR ---------------- */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
My Accounts
|
||||
</Text>
|
||||
</Stack>
|
||||
<>
|
||||
{/* Segmented Tabs */}
|
||||
<Box mb="1rem">
|
||||
<ScrollArea type="never" offsetScrollbars>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={pathname}
|
||||
onChange={(value) => 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",
|
||||
},
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{/* ---------------- MOBILE TOP BAR ---------------- */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
background: "linear-gradient(135deg, #1e88e5 0%, #1565c0 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.7rem 1rem",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
@@ -90,11 +97,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
My Accounts
|
||||
<Text fw={600} c="white">
|
||||
Send Money
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* MOBILE DRAWER */}
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => 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 */}
|
||||
<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" }}
|
||||
{/* Drawer Header */}
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
My Accounts
|
||||
<Image
|
||||
src={logo}
|
||||
alt="KCCB Logo"
|
||||
width={45}
|
||||
height={45}
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={700} ml="10px" style={{ fontSize: "19px", color: "#1565c0" }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
{/* Drawer Items */}
|
||||
<Stack gap="sm">
|
||||
{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 */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{/* ---------------- CONTENT AREA ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.5rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
182
src/app/(main)/beneficiary/layout.tsx
Normal file
182
src/app/(main)/beneficiary/layout.tsx
Normal file
@@ -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<boolean | null>(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 (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>
|
||||
|
||||
{/* ---------------- DESKTOP HEADER ---------------- */}
|
||||
{!isMobile && (
|
||||
<>
|
||||
{/* Segmented Tabs */}
|
||||
<Box mb="1rem">
|
||||
<ScrollArea type="never" offsetScrollbars>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={pathname}
|
||||
onChange={(value) => 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",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---------------- MOBILE HEADER ---------------- */}
|
||||
{isMobile && (
|
||||
<>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
padding: "0.8rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(true)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={600} c="white">
|
||||
Beneficiary
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Drawer for Mobile */}
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
padding="md"
|
||||
size="75%"
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
||||
>
|
||||
{/* 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={{ color: "#228be6", fontSize: "18px" }}>
|
||||
Beneficiary
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Drawer Menu Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
variant="light"
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
backgroundColor: isActive ? "#228be6" : "#e2efff",
|
||||
color: isActive ? "#fff" : "#1b69c7",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
borderRadius: 10,
|
||||
padding: "10px",
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---------------- CONTENT BODY ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.8rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box >
|
||||
);
|
||||
}
|
||||
@@ -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<boolean | null>(null);
|
||||
@@ -16,73 +16,79 @@ 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 (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</Stack>
|
||||
if (!authorized) return null;
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>
|
||||
{/* ---------------- DESKTOP SIDEBAR ---------------- */}
|
||||
{!isMobile && (
|
||||
<>
|
||||
{/* Segmented Tabs */}
|
||||
<Box mb="1rem">
|
||||
<ScrollArea type="never" offsetScrollbars>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={pathname}
|
||||
onChange={(value) => 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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{/* ---------------- MOBILE TOP BAR ---------------- */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
background: "linear-gradient(135deg, #1e88e5 0%, #1565c0 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.7rem 1rem",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
@@ -91,11 +97,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
<Text fw={600} c="white">
|
||||
Send Money
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* MOBILE DRAWER */}
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
@@ -104,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 */}
|
||||
<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" }}
|
||||
{/* Drawer Header */}
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
alt="KCCB Logo"
|
||||
width={45}
|
||||
height={45}
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={700} ml="10px" style={{ fontSize: "19px", color: "#1565c0" }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
{/* Drawer Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
@@ -139,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)}
|
||||
>
|
||||
@@ -167,12 +167,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{/* ---------------- CONTENT AREA ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.5rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"}
|
||||
<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>
|
||||
</Text>
|
||||
</Group>
|
||||
</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>
|
||||
</Group>
|
||||
</Popover.Dropdown>
|
||||
</Popover> */}
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
<Divider size="xs" color="#99c2ff" />
|
||||
|
||||
{/* 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",
|
||||
}}
|
||||
>
|
||||
<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
|
||||
component="footer"
|
||||
style={(theme) => ({
|
||||
borderTop: `1px solid `,
|
||||
backgroundColor: 'rgba(60, 54, 74, 1)',
|
||||
paddingTop: '2rem',
|
||||
paddingBottom: '2rem',
|
||||
})}
|
||||
>
|
||||
<Container size="xl">
|
||||
<Grid>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Group mb="md">
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
// padding: isMobile ? "0.25rem" : "0.5rem",
|
||||
width: 40,
|
||||
height: 40,
|
||||
background: 'linear-gradient(135deg, #16a34a 0%, #10b981 100%)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size={isMobile ? "xs" : "sm"}>
|
||||
© 2025 The Kangra Central Co-Operative Bank Ltd.
|
||||
<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>
|
||||
|
||||
@@ -58,10 +58,6 @@ export default function ChangePassword() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
regenerateCaptcha();
|
||||
}, []);
|
||||
@@ -232,7 +228,7 @@ export default function ChangePassword() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={3} mb="sm">
|
||||
Change Login Password
|
||||
</Title>
|
||||
|
||||
@@ -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<boolean | null>(null);
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
@@ -21,68 +30,81 @@ 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) {
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
Settings
|
||||
</Text>
|
||||
</Stack>
|
||||
{/* ---------------- DESKTOP HEADER ---------------- */}
|
||||
{!isMobile && (
|
||||
<>
|
||||
<Box mb="1rem">
|
||||
<ScrollArea type="never" offsetScrollbars>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={pathname}
|
||||
onChange={(value) => 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",
|
||||
},
|
||||
|
||||
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Text
|
||||
key={link.href}
|
||||
component={Link}
|
||||
href={link.href}
|
||||
c={isActive ? "darkblue" : "blue"}
|
||||
style={{
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{/* ---------------- MOBILE HEADER ---------------- */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
{/* Mobile Header */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
padding: "0.8rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
@@ -90,72 +112,60 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(!drawerOpened)}
|
||||
onClick={() => setDrawerOpened(true)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
<Text fw={600} c="white">
|
||||
Settings
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
<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
|
||||
},
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 2 }}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "1.2rem",
|
||||
}}
|
||||
>
|
||||
{/* 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" }}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={700} ml="10px" style={{ color: "#228be6", fontSize: "18px" }}>
|
||||
Settings
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
<Stack gap="sm">
|
||||
<Stack gap="xs">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
variant="subtle"
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
variant="light"
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
backgroundColor: isActive ? "#228be6" : "#e2efff",
|
||||
color: isActive ? "#fff" : "#1b69c7",
|
||||
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";
|
||||
borderRadius: 10,
|
||||
padding: "10px",
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
@@ -168,12 +178,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{/* ---------------- CONTENT AREA ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.8rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user