forked from baron/baron-sso
200 lines
7.3 KiB
TypeScript
200 lines
7.3 KiB
TypeScript
import {
|
|
BadgeCheck,
|
|
Building2,
|
|
Key,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
LayoutGrid,
|
|
LogOut,
|
|
Moon,
|
|
NotebookTabs,
|
|
Rocket,
|
|
ShieldHalf,
|
|
Sun,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { t } from "../../lib/i18n";
|
|
import RoleSwitcher from "./RoleSwitcher";
|
|
|
|
const navItems = [
|
|
{ label: "ui.admin.nav.overview", to: "/", icon: LayoutDashboard },
|
|
{
|
|
label: "ui.admin.nav.tenant_dashboard",
|
|
to: "/dashboard",
|
|
icon: ShieldHalf,
|
|
},
|
|
{
|
|
label: "ui.admin.nav.tenant_groups",
|
|
to: "/tenant-groups",
|
|
icon: LayoutGrid,
|
|
},
|
|
{ label: "ui.admin.nav.tenants", to: "/tenants", icon: Building2 },
|
|
{ label: "ui.admin.nav.users", to: "/users", icon: Users },
|
|
{ label: "ui.admin.nav.api_keys", to: "/api-keys", icon: Key },
|
|
{ label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
|
|
{ label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
|
|
];
|
|
function AppLayout() {
|
|
const navigate = useNavigate();
|
|
const [theme, setTheme] = useState<"light" | "dark">(() => {
|
|
const stored = window.localStorage.getItem("admin_theme");
|
|
return stored === "dark" ? "dark" : "light";
|
|
});
|
|
|
|
const handleLogout = () => {
|
|
if (
|
|
window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
|
|
) {
|
|
window.localStorage.removeItem("admin_session");
|
|
navigate("/login");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const session = window.localStorage.getItem("admin_session");
|
|
if (!session) {
|
|
navigate("/login");
|
|
}
|
|
}, [navigate]);
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
root.classList.remove("light", "dark");
|
|
if (theme === "light") {
|
|
root.classList.add("light");
|
|
} else {
|
|
root.classList.add("dark");
|
|
}
|
|
window.localStorage.setItem("admin_theme", theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
|
};
|
|
|
|
return (
|
|
<div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
|
|
<aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
|
|
<div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
|
|
<div className="flex items-center gap-3 md:flex-col md:items-start">
|
|
<div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
|
|
<ShieldHalf size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
|
{t("ui.admin.brand", "Baron 로그인")}
|
|
</p>
|
|
<h1 className="text-lg font-semibold">
|
|
{t("ui.admin.title", "Admin Control")}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
|
|
<BadgeCheck size={14} />
|
|
{t("msg.admin.scope_admin", "Scoped to /admin")}
|
|
</div>
|
|
</div>
|
|
<nav className="px-2 pb-4 md:px-3 md:pb-8 h-[calc(100vh-200px)] flex flex-col justify-between">
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
|
|
<span className="rounded-full border border-border px-3 py-1">
|
|
{t("msg.admin.idp_env_prod", "IDP env: prod")}
|
|
</span>
|
|
<span className="rounded-full border border-border px-3 py-1">
|
|
{t("msg.admin.tenant_headers", "Tenant-aware headers")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{navItems.map(({ label, to, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
[
|
|
"flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
|
|
isActive
|
|
? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
|
|
: "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
|
|
].join(" ")
|
|
}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{t(label, label)}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-3 pt-4 border-t border-border/50">
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<LogOut size={18} />
|
|
<span>{t("ui.admin.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div className="hidden space-y-2 px-5 pb-6 text-xs text-[var(--color-muted)] md:block">
|
|
{" "}
|
|
<p>
|
|
{t(
|
|
"msg.admin.notice.scope",
|
|
"관리 기능은 /admin 네임스페이스에서만 노출합니다.",
|
|
)}
|
|
</p>
|
|
<p>
|
|
{t(
|
|
"msg.admin.notice.idp_policy",
|
|
"IDP 관리 키는 서버 내부 래핑 API로만 사용하며, 감사·레이트리밋을 기본 적용합니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="relative">
|
|
<header className="sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur">
|
|
<div className="flex items-center justify-between px-5 py-4 md:px-8">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
|
|
{t("ui.admin.header.plane", "Admin Plane")}
|
|
</p>
|
|
<span className="text-lg font-semibold">
|
|
{t(
|
|
"msg.admin.header.subtitle",
|
|
"Tenant isolation & least privilege by default",
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
|
|
aria-label={t("ui.common.theme_toggle", "테마 전환")}
|
|
>
|
|
{theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
|
|
{theme === "light"
|
|
? t("ui.common.theme_light", "Light")
|
|
: t("ui.common.theme_dark", "Dark")}
|
|
</button>
|
|
<span className="rounded-full border border-border px-3 py-2 text-muted-foreground">
|
|
{t("msg.admin.session_ttl", "Session TTL: 15m admin")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="px-5 py-6 md:px-10 md:py-10">
|
|
<Outlet />
|
|
</main>
|
|
<RoleSwitcher />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppLayout;
|