changes : Changes the design of IB
This commit is contained in:
@@ -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,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 (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
{!isMobile && (
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{/* ---------------- 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",
|
||||
},
|
||||
|
||||
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 && (
|
||||
<>
|
||||
{/* Mobile Header */}
|
||||
<Box
|
||||
style={{
|
||||
width: "16%",
|
||||
backgroundColor: "#c5e4f9",
|
||||
borderRight: "1px solid #ccc",
|
||||
backgroundColor: "#228be6",
|
||||
padding: "0.8rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
||||
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
||||
Settings
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(true)}
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={600} c="white">
|
||||
Settings
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
{/* Mobile Drawer */}
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
padding="md"
|
||||
size="75%"
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 2 }}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "1.2rem",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
opened={drawerOpened}
|
||||
onClick={() => setDrawerOpened(!drawerOpened)}
|
||||
size="sm"
|
||||
color="white"
|
||||
<Image
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
<Text fw={700} ml="10px" style={{ color: "#228be6", fontSize: "18px" }}>
|
||||
Settings
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<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
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 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" }}
|
||||
<Stack gap="xs">
|
||||
{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)}
|
||||
>
|
||||
Settings
|
||||
</Text>
|
||||
</>
|
||||
</Box>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Menu Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={link.href}
|
||||
variant="subtle"
|
||||
component={Link}
|
||||
href={link.href}
|
||||
fullWidth
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
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";
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{children}
|
||||
</Box>
|
||||
{/* ---------------- CONTENT AREA ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.8rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user