forked from baron/baron-sso
846 lines
29 KiB
TypeScript
846 lines
29 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
Building2,
|
|
ChevronDown,
|
|
Database,
|
|
Key,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Moon,
|
|
Network,
|
|
NotebookTabs,
|
|
ShieldCheck,
|
|
ShieldHalf,
|
|
Sun,
|
|
User as UserIcon,
|
|
Users,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import {
|
|
AppSidebar,
|
|
applyShellTheme,
|
|
buildShellProfileSummary,
|
|
buildShellSessionStatus,
|
|
readShellSessionExpiryEnabled,
|
|
readShellSidebarCollapsed,
|
|
readShellTheme,
|
|
type ShellSidebarNavItem,
|
|
type ShellTranslator,
|
|
shellLayoutClasses,
|
|
writeShellSessionExpiryEnabled,
|
|
writeShellSidebarCollapsed,
|
|
} from "../../../../common/shell";
|
|
import { canAccessWorksmobile } from "../../features/tenants/routes/worksmobileAccess";
|
|
import { buildAuthenticatedOrgChartUrl } from "../../features/users/orgChartPicker";
|
|
import { fetchMe } from "../../lib/adminApi";
|
|
import { debugLog } from "../../lib/debugLog";
|
|
import { t } from "../../lib/i18n";
|
|
import { isSuperAdminRole } from "../../lib/roles";
|
|
import {
|
|
shouldAttemptSlidingSessionRenew,
|
|
shouldAttemptUnlimitedSessionRenew,
|
|
} from "../../lib/sessionSliding";
|
|
import LanguageSelector from "../common/LanguageSelector";
|
|
|
|
const LOCALE_CHANGED_EVENT = "baron_locale_changed";
|
|
|
|
const staticNavItems: ShellSidebarNavItem[] = [
|
|
{
|
|
labelKey: "ui.admin.nav.overview",
|
|
labelFallback: "Overview",
|
|
to: "/",
|
|
icon: LayoutDashboard,
|
|
end: true,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.users",
|
|
labelFallback: "Users",
|
|
to: "/users",
|
|
icon: Users,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.permissions_direct",
|
|
labelFallback: "권한 부여",
|
|
to: "/permissions-direct",
|
|
icon: ShieldCheck,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.auth_guard",
|
|
labelFallback: "Auth Guard",
|
|
to: "/auth",
|
|
icon: KeyRound,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.api_keys",
|
|
labelFallback: "API Keys",
|
|
to: "/api-keys",
|
|
icon: Key,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.audit_logs",
|
|
labelFallback: "Audit Logs",
|
|
to: "/audit-logs",
|
|
icon: NotebookTabs,
|
|
},
|
|
];
|
|
|
|
type SessionStatusProps = {
|
|
expiresAtSec?: number | null;
|
|
t: ShellTranslator;
|
|
};
|
|
|
|
function useSessionStatus({ expiresAtSec, t }: SessionStatusProps) {
|
|
const [nowMs, setNowMs] = useState(() => Date.now());
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => {
|
|
setNowMs(Date.now());
|
|
}, 1000);
|
|
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
return buildShellSessionStatus({ expiresAtSec, nowMs, t });
|
|
}
|
|
|
|
function SessionStatusBadge(props: SessionStatusProps) {
|
|
const sessionStatus = useSessionStatus(props);
|
|
|
|
return (
|
|
<span
|
|
className={[
|
|
shellLayoutClasses.sessionBadge,
|
|
sessionStatus.toneClass,
|
|
].join(" ")}
|
|
>
|
|
{sessionStatus.text}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function SessionStatusText(props: SessionStatusProps) {
|
|
const sessionStatus = useSessionStatus(props);
|
|
|
|
return <>{sessionStatus.text}</>;
|
|
}
|
|
|
|
function LineWorksNavIcon({ size = 18 }: { size?: number | string }) {
|
|
const iconSize = typeof size === "number" ? size : Number.parseFloat(size);
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
data-testid="worksmobile-nav-icon"
|
|
width={Number.isFinite(iconSize) ? iconSize : size}
|
|
height={Number.isFinite(iconSize) ? iconSize : size}
|
|
viewBox="0 0 30 30"
|
|
fill="none"
|
|
className="shrink-0 text-current"
|
|
>
|
|
<path
|
|
d="M9.01667 23.2633H12.3633C12.4481 23.2637 12.5307 23.2363 12.5985 23.1853C12.6663 23.1344 12.7156 23.0627 12.7389 22.9811L17.0489 8.12111C17.0658 8.06285 17.0689 8.00146 17.058 7.9418C17.047 7.88214 17.0224 7.82583 16.986 7.77733C16.9495 7.72883 16.9023 7.68947 16.8481 7.66236C16.7938 7.63525 16.734 7.62112 16.6733 7.62111H13.3267C13.2419 7.62113 13.1595 7.64866 13.0918 7.69955C13.0241 7.75045 12.9747 7.82196 12.9511 7.90333L8.64222 22.7633C8.62512 22.8215 8.62182 22.8829 8.63258 22.9425C8.64334 23.0022 8.66787 23.0586 8.70422 23.1071C8.74057 23.1556 8.78773 23.195 8.84197 23.2222C8.89621 23.2493 8.95603 23.2634 9.01667 23.2633Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M18.0122 23.2633H21.3589C21.4436 23.2633 21.526 23.2358 21.5938 23.1849C21.6615 23.134 21.7109 23.0625 21.7344 22.9811L26.0433 8.12111C26.0602 8.06285 26.0633 8.00146 26.0524 7.9418C26.0415 7.88214 26.0168 7.82583 25.9804 7.77733C25.944 7.72883 25.8968 7.68947 25.8425 7.66236C25.7883 7.63525 25.7284 7.62112 25.6678 7.62111H22.3211C22.2364 7.62131 22.1541 7.64891 22.0864 7.69977C22.0187 7.75064 21.9693 7.82205 21.9456 7.90333L17.6367 22.7633C17.6195 22.8216 17.6163 22.8831 17.6271 22.9428C17.6379 23.0026 17.6625 23.059 17.699 23.1076C17.7355 23.1561 17.7828 23.1955 17.8372 23.2225C17.8915 23.2496 17.9515 23.2635 18.0122 23.2633Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M12.3633 23.2633H8.64222C8.55741 23.2637 8.47481 23.2363 8.40701 23.1853C8.33921 23.1344 8.28993 23.0627 8.26666 22.9811L3.95666 8.12111C3.93977 8.06285 3.93667 8.00146 3.94759 7.9418C3.95851 7.88214 3.98316 7.82583 4.01959 7.77733C4.05602 7.72883 4.10322 7.68947 4.15748 7.66236C4.21174 7.63525 4.27156 7.62112 4.33222 7.62111H8.05444C8.13911 7.62131 8.22145 7.64891 8.28915 7.69977C8.35684 7.75064 8.40625 7.82205 8.43 7.90333L12.7389 22.7633C12.756 22.8216 12.7593 22.8831 12.7485 22.9428C12.7377 23.0026 12.713 23.059 12.6765 23.1076C12.6401 23.1561 12.5928 23.1955 12.5384 23.2225C12.484 23.2496 12.4241 23.2635 12.3633 23.2633Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M21.3589 23.2633H17.6367C17.5519 23.2637 17.4693 23.2363 17.4015 23.1853C17.3337 23.1344 17.2844 23.0627 17.2611 22.9811L12.9511 8.12111C12.9342 8.06285 12.9311 8.00146 12.942 7.9418C12.953 7.88214 12.9776 7.82583 13.014 7.77733C13.0505 7.72883 13.0977 7.68947 13.1519 7.66236C13.2062 7.63525 13.266 7.62112 13.3267 7.62111H17.0489C17.1336 7.62113 17.216 7.64866 17.2838 7.69955C17.3515 7.75045 17.4009 7.82196 17.4244 7.90333L21.7344 22.7633C21.7513 22.8216 21.7544 22.883 21.7435 22.9426C21.7326 23.0023 21.7079 23.0586 21.6715 23.1071C21.6351 23.1556 21.5879 23.195 21.5336 23.2221C21.4794 23.2492 21.4195 23.2633 21.3589 23.2633Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function AppLayout() {
|
|
const auth = useAuth();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const profileMenuRef = useRef<HTMLDivElement>(null);
|
|
const isRenewInFlightRef = useRef(false);
|
|
const lastRenewAttemptAtRef = useRef(0);
|
|
const lastVisitedRouteRef = useRef<string | null>(null);
|
|
const isDevelopmentRuntime = import.meta.env.MODE === "development";
|
|
const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
|
|
const [isProfileOpen, setIsProfileOpen] = useState(false);
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() =>
|
|
readShellSidebarCollapsed(false),
|
|
);
|
|
const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() =>
|
|
readShellSessionExpiryEnabled(!isDevelopmentRuntime),
|
|
);
|
|
const { data: profile } = useQuery({
|
|
queryKey: ["me"],
|
|
queryFn: async () => {
|
|
debugLog("[AppLayout] Fetching profile...");
|
|
try {
|
|
const data = await fetchMe();
|
|
debugLog("[AppLayout] Profile fetched successfully:", data.email);
|
|
return data;
|
|
} catch (err) {
|
|
console.error("[AppLayout] Failed to fetch profile:", err);
|
|
throw err;
|
|
}
|
|
},
|
|
enabled:
|
|
(auth.isAuthenticated && !auth.isLoading) ||
|
|
import.meta.env.MODE === "development" ||
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true,
|
|
});
|
|
|
|
const navItems = React.useMemo<ShellSidebarNavItem[]>(() => {
|
|
const items = [...staticNavItems];
|
|
const _isTest =
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true;
|
|
const effectiveRole = profile?.role;
|
|
|
|
const isSuperAdmin = isSuperAdminRole(effectiveRole);
|
|
const _manageableCount = profile?.manageableTenants?.length ?? 0;
|
|
const showWorksmobile = canAccessWorksmobile({
|
|
...profile,
|
|
role: effectiveRole ?? profile?.role,
|
|
});
|
|
const orgfrontUrl = buildAuthenticatedOrgChartUrl(
|
|
import.meta.env.ORGFRONT_URL || "http://localhost:5175",
|
|
{ includeInternal: true },
|
|
);
|
|
|
|
// Splice optional menus in a standard order
|
|
items.splice(1, 0, {
|
|
labelKey: "ui.admin.nav.tenants",
|
|
labelFallback: "Tenants",
|
|
to: "/tenants",
|
|
icon: Building2,
|
|
});
|
|
items.splice(2, 0, {
|
|
labelKey: "ui.admin.nav.org_chart",
|
|
labelFallback: "Org Chart",
|
|
to: orgfrontUrl,
|
|
icon: Network,
|
|
isExternal: true,
|
|
});
|
|
items.splice(3, 0, {
|
|
labelKey: "ui.admin.nav.worksmobile",
|
|
labelFallback: "Worksmobile",
|
|
to: "/worksmobile",
|
|
icon: LineWorksNavIcon,
|
|
});
|
|
items.splice(4, 0, {
|
|
labelKey: "ui.admin.nav.ory_ssot",
|
|
labelFallback: "Ory SSOT System",
|
|
to: "/system/ory-ssot",
|
|
icon: Database,
|
|
});
|
|
items.splice(5, 0, {
|
|
labelKey: "ui.admin.nav.data_integrity",
|
|
labelFallback: "Data Integrity",
|
|
to: "/system/data-integrity",
|
|
icon: ShieldCheck,
|
|
});
|
|
|
|
const permissions = profile?.systemPermissions;
|
|
|
|
return items.filter((item) => {
|
|
// Super Admin ALWAYS bypasses and gets full access to everything
|
|
if (isSuperAdmin) {
|
|
if (item.to === "/worksmobile") return showWorksmobile;
|
|
return true;
|
|
}
|
|
|
|
// For others, check their fine-grained systemPermissions
|
|
if (!permissions) return false;
|
|
|
|
if (item.to === "/") return permissions.overview;
|
|
if (item.to === "/users") return permissions.users;
|
|
if (item.to === "/auth") return permissions.auth_guard;
|
|
if (item.to === "/api-keys") return permissions.api_keys;
|
|
if (item.to === "/audit-logs") return permissions.audit_logs;
|
|
if (item.to === "/permissions-direct") return false;
|
|
if (item.to === "/tenants") return permissions.tenants;
|
|
if (item.to === orgfrontUrl) return permissions.org_chart;
|
|
if (item.to === "/worksmobile")
|
|
return permissions.worksmobile;
|
|
if (item.to === "/system/ory-ssot") return permissions.ory_ssot;
|
|
if (item.to === "/system/data-integrity")
|
|
return permissions.data_integrity;
|
|
|
|
return true;
|
|
});
|
|
}, [profile]);
|
|
|
|
const handleLogout = () => {
|
|
if (
|
|
window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
|
|
) {
|
|
window.localStorage.removeItem("admin_session");
|
|
auth.removeUser();
|
|
navigate("/login");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const isTest =
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true;
|
|
|
|
debugLog("[AppLayout] Auth state check:", {
|
|
isLoading: auth.isLoading,
|
|
isAuthenticated: auth.isAuthenticated,
|
|
isTest,
|
|
});
|
|
|
|
if (!auth.isLoading && !auth.isAuthenticated && !isTest) {
|
|
console.warn("[AppLayout] Not authenticated, redirecting to /login");
|
|
navigate("/login");
|
|
}
|
|
}, [auth.isLoading, auth.isAuthenticated, navigate]);
|
|
|
|
useEffect(() => {
|
|
if (auth.user?.access_token) {
|
|
window.localStorage.setItem("admin_session", auth.user.access_token);
|
|
}
|
|
}, [auth.user]);
|
|
|
|
useEffect(() => {
|
|
applyShellTheme(theme);
|
|
}, [theme]);
|
|
|
|
useEffect(() => {
|
|
if (!isDevelopmentRuntime) {
|
|
return;
|
|
}
|
|
|
|
const rerenderDevelopmentShell = () => {
|
|
// Re-render when locale changes
|
|
};
|
|
|
|
window.addEventListener(LOCALE_CHANGED_EVENT, rerenderDevelopmentShell);
|
|
|
|
return () => {
|
|
window.removeEventListener(
|
|
LOCALE_CHANGED_EVENT,
|
|
rerenderDevelopmentShell,
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
profileMenuRef.current &&
|
|
!profileMenuRef.current.contains(event.target as Node)
|
|
) {
|
|
setIsProfileOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const maybeRenewSession = async () => {
|
|
const now = Date.now();
|
|
if (
|
|
!shouldAttemptSlidingSessionRenew({
|
|
expiresAtSec: auth.user?.expires_at,
|
|
nowMs: now,
|
|
isEnabled: isSessionExpiryEnabled,
|
|
isAuthenticated: auth.isAuthenticated,
|
|
isLoading: auth.isLoading,
|
|
isRenewInFlight: isRenewInFlightRef.current,
|
|
lastAttemptAtMs: lastRenewAttemptAtRef.current,
|
|
})
|
|
) {
|
|
return;
|
|
}
|
|
|
|
isRenewInFlightRef.current = true;
|
|
lastRenewAttemptAtRef.current = now;
|
|
|
|
try {
|
|
await auth.signinSilent();
|
|
} catch (error) {
|
|
console.error("세션 자동 연장에 실패했습니다.", error);
|
|
} finally {
|
|
isRenewInFlightRef.current = false;
|
|
}
|
|
};
|
|
|
|
const handleUserAction = () => {
|
|
void maybeRenewSession();
|
|
};
|
|
|
|
window.addEventListener("pointerdown", handleUserAction);
|
|
window.addEventListener("keydown", handleUserAction);
|
|
|
|
return () => {
|
|
window.removeEventListener("pointerdown", handleUserAction);
|
|
window.removeEventListener("keydown", handleUserAction);
|
|
};
|
|
}, [
|
|
auth,
|
|
auth.isAuthenticated,
|
|
auth.isLoading,
|
|
auth.user?.expires_at,
|
|
isSessionExpiryEnabled,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (isDevelopmentRuntime) {
|
|
return;
|
|
}
|
|
|
|
const maybeKeepSessionAlive = async () => {
|
|
const now = Date.now();
|
|
if (
|
|
!shouldAttemptUnlimitedSessionRenew({
|
|
expiresAtSec: auth.user?.expires_at,
|
|
nowMs: now,
|
|
isEnabled: isSessionExpiryEnabled,
|
|
isAuthenticated: auth.isAuthenticated,
|
|
isLoading: auth.isLoading,
|
|
isRenewInFlight: isRenewInFlightRef.current,
|
|
lastAttemptAtMs: lastRenewAttemptAtRef.current,
|
|
})
|
|
) {
|
|
return;
|
|
}
|
|
|
|
isRenewInFlightRef.current = true;
|
|
lastRenewAttemptAtRef.current = now;
|
|
|
|
try {
|
|
await auth.signinSilent();
|
|
} catch (error) {
|
|
console.error("세션 무제한 유지 갱신에 실패했습니다.", error);
|
|
} finally {
|
|
isRenewInFlightRef.current = false;
|
|
}
|
|
};
|
|
|
|
const timer = window.setInterval(() => {
|
|
void maybeKeepSessionAlive();
|
|
}, 30_000);
|
|
|
|
void maybeKeepSessionAlive();
|
|
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [
|
|
auth,
|
|
auth.isAuthenticated,
|
|
auth.isLoading,
|
|
auth.user?.expires_at,
|
|
isSessionExpiryEnabled,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const routeKey = `${location.pathname}${location.search}${location.hash}`;
|
|
if (lastVisitedRouteRef.current === null) {
|
|
lastVisitedRouteRef.current = routeKey;
|
|
return;
|
|
}
|
|
|
|
if (lastVisitedRouteRef.current === routeKey) {
|
|
return;
|
|
}
|
|
|
|
lastVisitedRouteRef.current = routeKey;
|
|
|
|
const now = Date.now();
|
|
if (
|
|
!shouldAttemptSlidingSessionRenew({
|
|
expiresAtSec: auth.user?.expires_at,
|
|
nowMs: now,
|
|
isEnabled: isSessionExpiryEnabled,
|
|
isAuthenticated: auth.isAuthenticated,
|
|
isLoading: auth.isLoading,
|
|
isRenewInFlight: isRenewInFlightRef.current,
|
|
lastAttemptAtMs: lastRenewAttemptAtRef.current,
|
|
})
|
|
) {
|
|
return;
|
|
}
|
|
|
|
isRenewInFlightRef.current = true;
|
|
lastRenewAttemptAtRef.current = now;
|
|
|
|
void auth
|
|
.signinSilent()
|
|
.catch((error) => {
|
|
console.error("세션 자동 연장에 실패했습니다.", error);
|
|
})
|
|
.finally(() => {
|
|
isRenewInFlightRef.current = false;
|
|
});
|
|
}, [
|
|
auth,
|
|
auth.isAuthenticated,
|
|
auth.isLoading,
|
|
auth.user?.expires_at,
|
|
isSessionExpiryEnabled,
|
|
location.hash,
|
|
location.pathname,
|
|
location.search,
|
|
]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
|
};
|
|
|
|
const profileSummary = buildShellProfileSummary({
|
|
profileName:
|
|
profile?.name ||
|
|
auth.user?.profile.name?.toString() ||
|
|
auth.user?.profile.preferred_username?.toString(),
|
|
profileEmail: profile?.email || auth.user?.profile.email?.toString(),
|
|
fallbackName: t("ui.shell.profile.unknown_name", "Unknown User"),
|
|
fallbackEmail: t("ui.shell.profile.unknown_email", "unknown@example.com"),
|
|
});
|
|
const profileRoleKey = profile?.role || "user";
|
|
const handleSessionExpiryToggle = () => {
|
|
setIsSessionExpiryEnabled((prev) => {
|
|
const next = !prev;
|
|
writeShellSessionExpiryEnabled(next);
|
|
return next;
|
|
});
|
|
};
|
|
const handleSidebarToggle = () => {
|
|
setIsSidebarCollapsed((prev) => {
|
|
const next = !prev;
|
|
writeShellSidebarCollapsed(next);
|
|
return next;
|
|
});
|
|
};
|
|
const sidebarNavContent = (
|
|
<div className={shellLayoutClasses.navList}>
|
|
{navItems.map((item) => {
|
|
const { labelKey, labelFallback, to, icon: Icon, isExternal } = item;
|
|
const label = t(labelKey, labelFallback);
|
|
|
|
if (isExternal) {
|
|
return (
|
|
<a
|
|
key={to}
|
|
href={to}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={[
|
|
shellLayoutClasses.navItemBase,
|
|
isSidebarCollapsed
|
|
? shellLayoutClasses.navItemBaseCollapsed
|
|
: "",
|
|
shellLayoutClasses.navItemIdle,
|
|
].join(" ")}
|
|
title={label}
|
|
aria-label={label}
|
|
>
|
|
<Icon size={18} />
|
|
<span className={isSidebarCollapsed ? "sr-only" : ""}>
|
|
{label}
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={item.end ?? to === "/"}
|
|
className={({ isActive }) =>
|
|
[
|
|
shellLayoutClasses.navItemBase,
|
|
isSidebarCollapsed
|
|
? shellLayoutClasses.navItemBaseCollapsed
|
|
: "",
|
|
item.isActive !== undefined
|
|
? item.isActive
|
|
? shellLayoutClasses.navItemActive
|
|
: shellLayoutClasses.navItemIdle
|
|
: isActive
|
|
? shellLayoutClasses.navItemActive
|
|
: shellLayoutClasses.navItemIdle,
|
|
].join(" ")
|
|
}
|
|
title={label}
|
|
aria-label={label}
|
|
>
|
|
<Icon size={18} />
|
|
<span className={isSidebarCollapsed ? "sr-only" : ""}>{label}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
const sidebarFooterContent = (
|
|
<div className="border-t border-border/50 px-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className={
|
|
isSidebarCollapsed
|
|
? shellLayoutClasses.logoutButtonCollapsed
|
|
: shellLayoutClasses.logoutButton
|
|
}
|
|
title={t("ui.shell.nav.logout", "Logout")}
|
|
>
|
|
<LogOut size={18} />
|
|
<span className={isSidebarCollapsed ? "sr-only" : ""}>
|
|
{t("ui.shell.nav.logout", "Logout")}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
if (auth.isLoading) {
|
|
return (
|
|
<div className="flex h-screen items-center justify-center bg-background">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary/30 border-t-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
isSidebarCollapsed
|
|
? shellLayoutClasses.rootCollapsed
|
|
: shellLayoutClasses.root
|
|
}
|
|
>
|
|
<AppSidebar
|
|
brandLabel={t("ui.admin.brand", "Baron 로그인")}
|
|
brandTitle={t("ui.admin.title", "Admin Control")}
|
|
brandIcon={<ShieldHalf size={20} />}
|
|
navContent={sidebarNavContent}
|
|
footerContent={sidebarFooterContent}
|
|
collapsed={isSidebarCollapsed}
|
|
onToggleCollapsed={handleSidebarToggle}
|
|
collapseLabel={t("ui.shell.sidebar.collapse", "사이드바 접기")}
|
|
expandLabel={t("ui.shell.sidebar.expand", "사이드바 펼치기")}
|
|
/>
|
|
|
|
<div className={shellLayoutClasses.contentWide}>
|
|
<header className={shellLayoutClasses.headerElevated}>
|
|
<div className={shellLayoutClasses.headerInner}>
|
|
<div className={shellLayoutClasses.headerTitleWrap}>
|
|
<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("ui.admin.header.subtitle", "Manage your organization")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className={shellLayoutClasses.headerActions}>
|
|
<LanguageSelector />
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
className={shellLayoutClasses.actionButton}
|
|
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>
|
|
{isSessionExpiryEnabled ? (
|
|
<SessionStatusBadge
|
|
expiresAtSec={auth.user?.expires_at}
|
|
t={t}
|
|
/>
|
|
) : null}
|
|
<div className="relative" ref={profileMenuRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsProfileOpen((prev) => !prev)}
|
|
className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
|
|
aria-haspopup="menu"
|
|
aria-expanded={isProfileOpen}
|
|
aria-label={t("ui.shell.profile.menu_aria", "계정 메뉴 열기")}
|
|
>
|
|
<div className={shellLayoutClasses.profileInitial}>
|
|
{profileSummary.initial}
|
|
</div>
|
|
<div className="hidden min-w-0 text-left md:block">
|
|
<p className="truncate text-xs font-medium text-foreground">
|
|
{profileSummary.name}
|
|
</p>
|
|
<p className="truncate text-[11px] text-muted-foreground">
|
|
{profileSummary.email}
|
|
</p>
|
|
</div>
|
|
<ChevronDown
|
|
size={14}
|
|
className={`transition-transform duration-200 ${isProfileOpen ? "rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
|
|
{isProfileOpen ? (
|
|
<div role="menu" className={shellLayoutClasses.profileMenu}>
|
|
<p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
|
|
{t("ui.shell.profile.menu_title", "Account")}
|
|
</p>
|
|
<div className={shellLayoutClasses.profileCard}>
|
|
<div>
|
|
<p className="truncate text-sm font-semibold text-foreground">
|
|
{profileSummary.name}
|
|
</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{profileSummary.email}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center pt-1">
|
|
<span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
|
|
{t(
|
|
`ui.shell.role.${profileRoleKey}`,
|
|
profileRoleKey.toUpperCase(),
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={shellLayoutClasses.settingsCard}>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{t(
|
|
"ui.shell.session.auto_extend",
|
|
"세션 만료 관리",
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{isSessionExpiryEnabled ? (
|
|
<SessionStatusText
|
|
expiresAtSec={auth.user?.expires_at}
|
|
t={t}
|
|
/>
|
|
) : (
|
|
t(
|
|
"ui.shell.session.disabled",
|
|
"세션 만료 비활성화",
|
|
)
|
|
)}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={isSessionExpiryEnabled}
|
|
onClick={handleSessionExpiryToggle}
|
|
className={[
|
|
"relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition",
|
|
isSessionExpiryEnabled ? "bg-primary" : "bg-muted",
|
|
].join(" ")}
|
|
>
|
|
<span
|
|
className={[
|
|
"inline-block h-5 w-5 rounded-full bg-white transition",
|
|
isSessionExpiryEnabled
|
|
? "translate-x-5"
|
|
: "translate-x-1",
|
|
].join(" ")}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{profile?.manageableTenants &&
|
|
profile.manageableTenants.length > 0 ? (
|
|
<div className="mt-2 rounded-lg border border-border px-3 py-3">
|
|
<p className="mb-2 text-xs uppercase tracking-[0.16em] text-muted-foreground">
|
|
{t(
|
|
"ui.admin.profile.manageable_tenants",
|
|
"Manageable Tenants",
|
|
)}
|
|
</p>
|
|
<div className="max-h-40 space-y-1 overflow-y-auto pr-1">
|
|
{profile.manageableTenants.map((tenant) => (
|
|
<button
|
|
key={tenant.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
navigate(`/tenants/${tenant.id}`);
|
|
}}
|
|
className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition hover:bg-muted/20"
|
|
>
|
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
|
|
{tenant.type === "USER_GROUP" ? (
|
|
<Users size={13} />
|
|
) : (
|
|
<Building2 size={13} />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-medium">
|
|
{tenant.name}
|
|
</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{tenant.slug}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
navigate(
|
|
`/users/${profile?.id || auth.user?.profile.sub}`,
|
|
);
|
|
}}
|
|
className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
|
|
>
|
|
<UserIcon size={16} className="text-muted-foreground" />
|
|
<span>{t("ui.shell.nav.profile", "내 정보")}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
handleLogout();
|
|
}}
|
|
className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<LogOut size={16} />
|
|
<span>{t("ui.shell.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className={shellLayoutClasses.mainMinWidth}>
|
|
<Outlet context={isSidebarCollapsed} />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppLayout;
|