mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
103 lines
5.2 KiB
React
103 lines
5.2 KiB
React
/***********************************************************************************************************************************************************************
|
|
* File Name: AdminAppLayout.jsx
|
|
* Type of Program: Layout Route
|
|
* Description: A Layout designated for Admin End-User.
|
|
* Module: Admin
|
|
* Author: lash0000
|
|
* Date Created: November. 28, 2025
|
|
***********************************************************************************************************************************************************************
|
|
* Change History:
|
|
* DATE AUTHOR LOG NUMBER DESCRIPTION
|
|
* Oct. 10, 2025 lash0000 001 Initial creation - STAR Phase 1 Project
|
|
***********************************************************************************************************************************************************************/
|
|
import { Outlet, useNavigate } from "react-router-dom"
|
|
import { useRef, useEffect } from "react"
|
|
import { useAuth } from "@/contexts/AuthContext"
|
|
import { AdminProvider } from "@/contexts/provider/AdminProvider" // ← add
|
|
|
|
import { TooltipProvider } from "@/components/ui/tooltip"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Toaster } from "sonner"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
import UserMenu from "@/components/generic/UserMenu"
|
|
import NotificationBell from "@/components/generic/NotificationBell"
|
|
import { ROLE_CONFIG } from "@/data/profile.data"
|
|
|
|
const AdminLayout = () => {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const headerRef = useRef(null)
|
|
|
|
const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
|
|
|
|
useEffect(() => {
|
|
if (!headerRef.current) return
|
|
const update = () => {
|
|
document.documentElement.style.setProperty('--navbar-h', `${headerRef.current.offsetHeight}px`)
|
|
}
|
|
update()
|
|
const ro = new ResizeObserver(update)
|
|
ro.observe(headerRef.current)
|
|
return () => ro.disconnect()
|
|
}, [])
|
|
|
|
return (
|
|
<section id="philproperties-admin" className="min-h-screen flex flex-col">
|
|
<TooltipProvider>
|
|
{/* AdminProvider wraps header + body so UserMenu can access ProfileProvider */}
|
|
<AdminProvider>
|
|
<div ref={headerRef} className={cn('fixed top-0 z-50 w-full bg-background border-b')} >
|
|
<div className="w-full flex items-center justify-between xs:px-4 lg:px-5 py-3">
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-40 cursor-pointer" onClick={() => navigate("/")}>
|
|
<img src="/philpro-white.png" alt="Philproperties" className="object-cover dark:hidden" />
|
|
<img src="/philpro-dark.png" alt="Philproperties" className="object-cover hidden dark:block" />
|
|
</div>
|
|
<div>
|
|
<svg
|
|
data-testid="geist-icon"
|
|
height="16"
|
|
width="16"
|
|
viewBox="0 0 16 16"
|
|
strokeLinejoin="round"
|
|
className="xs:hidden sm:block fill-slate-300"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2">
|
|
<Badge variant={role.variant} className="xs:hidden md:block capitalize">
|
|
{role.label}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<NotificationBell />
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main-body" className="bg-slate-100 flex-1 flex flex-col" style={{ paddingTop: 'var(--navbar-h)' }}>
|
|
<Outlet />
|
|
<Toaster position="bottom-right" richColors />
|
|
</div>
|
|
</AdminProvider>
|
|
|
|
{/* Footer sits outside AdminProvider intentionally */}
|
|
<footer className="w-full py-4 px-5 text-right text-sm text-muted-foreground">
|
|
© Philproperties, 2026
|
|
</footer>
|
|
</TooltipProvider>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default AdminLayout
|