tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes : Changes the design of IB

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-11-24 18:07:06 +05:30
parent f4b1752fe2
commit 7460157b46
11 changed files with 724 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/app/(main)/beneficiary/layout.tsx Normal file
View 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 >
);
}