85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { NavLink, Outlet } from "react-router-dom";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
|
|
const navItems = [
|
|
{ to: "/dashboard", label: "Dashboard", end: true },
|
|
{ to: "/dashboard/bookings", label: "Bookings" },
|
|
{ to: "/dashboard/listings", label: "Listings" },
|
|
{ to: "/dashboard/analytics", label: "Analytics" },
|
|
{ to: "/dashboard/settings", label: "Settings" },
|
|
];
|
|
|
|
export function AdminLayout() {
|
|
const { user, signOut } = useAuth();
|
|
const business = user?.vendor_profile?.business_name ?? "Vendor";
|
|
const initial = (user?.first_name?.[0] || user?.email?.[0] || "V").toUpperCase();
|
|
|
|
return (
|
|
<div className="admin-shell">
|
|
<aside className="admin-sidebar" aria-label="Vendor navigation">
|
|
<div className="admin-sidebar-brand">
|
|
<span className="admin-sidebar-logo" aria-hidden />
|
|
<div>
|
|
<div className="admin-sidebar-title">WaterTrekk Admin</div>
|
|
<div className="admin-sidebar-sub">Vendor console</div>
|
|
</div>
|
|
</div>
|
|
<nav className="admin-sidebar-nav">
|
|
{navItems.map(({ to, label, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) =>
|
|
`admin-nav-item${isActive ? " admin-nav-item--active" : ""}`
|
|
}
|
|
>
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<div className="admin-sidebar-footer">
|
|
<NavLink to="/" className="admin-back-link">
|
|
← Back to site
|
|
</NavLink>
|
|
</div>
|
|
</aside>
|
|
<div className="admin-main-wrap">
|
|
<header className="admin-topbar">
|
|
<div className="admin-topbar-search-wrap">
|
|
<label className="visually-hidden" htmlFor="admin-search">
|
|
Search
|
|
</label>
|
|
<input
|
|
id="admin-search"
|
|
type="search"
|
|
className="admin-topbar-search"
|
|
placeholder="Search bookings, guests…"
|
|
/>
|
|
</div>
|
|
<div className="admin-topbar-actions">
|
|
<button type="button" className="admin-icon-btn" aria-label="Notifications">
|
|
<span className="admin-bell" aria-hidden />
|
|
</button>
|
|
<div className="admin-user-chip">
|
|
<span className="admin-user-avatar" aria-hidden>
|
|
{initial}
|
|
</span>
|
|
<div className="admin-user-meta">
|
|
<span className="admin-user-name">{business}</span>
|
|
<span className="admin-user-role">{user?.email}</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" className="admin-btn admin-btn--ghost admin-sign-out" onClick={() => signOut()}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main className="admin-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|