forked from baron/baron-sso
795 lines
26 KiB
TypeScript
795 lines
26 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,
|
|
readShellTheme,
|
|
type ShellSidebarNavItem,
|
|
type ShellTranslator,
|
|
shellLayoutClasses,
|
|
writeShellSessionExpiryEnabled,
|
|
} from "../../../../common/shell";
|
|
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";
|
|
import RoleSwitcher from "./RoleSwitcher";
|
|
|
|
const LOCALE_CHANGED_EVENT = "baron_locale_changed";
|
|
const DEV_ROLE_CHANGED_EVENT = "baron_dev_role_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.api_keys",
|
|
labelFallback: "API Keys",
|
|
to: "/api-keys",
|
|
icon: Key,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.audit_logs",
|
|
labelFallback: "Audit Logs",
|
|
to: "/audit-logs",
|
|
icon: NotebookTabs,
|
|
},
|
|
{
|
|
labelKey: "ui.admin.nav.auth_guard",
|
|
labelFallback: "Auth Guard",
|
|
to: "/auth",
|
|
icon: KeyRound,
|
|
},
|
|
];
|
|
|
|
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 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 isDevRoleOverrideEnabled =
|
|
import.meta.env.MODE === "development" ||
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true;
|
|
const isMockRoleEnabled =
|
|
isDevRoleOverrideEnabled &&
|
|
window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
|
|
const mockRoleOverride = isMockRoleEnabled
|
|
? window.localStorage.getItem("X-Mock-Role")
|
|
: null;
|
|
const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
|
|
const [isProfileOpen, setIsProfileOpen] = useState(false);
|
|
const [, setDevelopmentRenderRevision] = useState(0);
|
|
const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() =>
|
|
readShellSessionExpiryEnabled(!isDevelopmentRuntime),
|
|
);
|
|
const {
|
|
data: profile,
|
|
isLoading: isProfileLoading,
|
|
error: profileError,
|
|
} = 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 = mockRoleOverride || profile?.role;
|
|
|
|
const isSuperAdmin = isTest || isSuperAdminRole(effectiveRole);
|
|
const isTenantAdmin = effectiveRole === "tenant_admin";
|
|
const manageableCount = profile?.manageableTenants?.length ?? 0;
|
|
const orgfrontUrl = buildAuthenticatedOrgChartUrl(
|
|
import.meta.env.ORGFRONT_URL || "http://localhost:5175",
|
|
{ includeInternal: true },
|
|
);
|
|
|
|
const filteredItems = items.filter((item) => {
|
|
if (isTest) return true;
|
|
if (item.to === "/api-keys") return isSuperAdmin;
|
|
return true;
|
|
});
|
|
|
|
if (isSuperAdmin) {
|
|
filteredItems.splice(1, 0, {
|
|
labelKey: "ui.admin.nav.tenants",
|
|
labelFallback: "Tenants",
|
|
to: "/tenants",
|
|
icon: Building2,
|
|
});
|
|
filteredItems.splice(2, 0, {
|
|
labelKey: "ui.admin.nav.org_chart",
|
|
labelFallback: "Org Chart",
|
|
to: orgfrontUrl,
|
|
icon: Network,
|
|
isExternal: true,
|
|
});
|
|
filteredItems.splice(4, 0, {
|
|
labelKey: "ui.admin.nav.user_projection",
|
|
labelFallback: "User Projection",
|
|
to: "/system/projections/users",
|
|
icon: Database,
|
|
});
|
|
filteredItems.splice(5, 0, {
|
|
labelKey: "ui.admin.nav.data_integrity",
|
|
labelFallback: "Data Integrity",
|
|
to: "/system/data-integrity",
|
|
icon: ShieldCheck,
|
|
});
|
|
} else if (isTenantAdmin || manageableCount > 0) {
|
|
if (manageableCount <= 1 && profile?.tenantId) {
|
|
filteredItems.splice(1, 0, {
|
|
labelKey: "ui.admin.nav.my_tenant",
|
|
labelFallback: "My Tenant",
|
|
to: `/tenants/${profile.tenantId}`,
|
|
icon: Building2,
|
|
});
|
|
} else if (manageableCount > 1) {
|
|
filteredItems.splice(1, 0, {
|
|
labelKey: "ui.admin.nav.tenants",
|
|
labelFallback: "Tenants",
|
|
to: "/tenants",
|
|
icon: Building2,
|
|
});
|
|
}
|
|
filteredItems.splice(
|
|
manageableCount <= 1 && profile?.tenantId ? 2 : 2,
|
|
0,
|
|
{
|
|
labelKey: "ui.admin.nav.org_chart",
|
|
labelFallback: "Org Chart",
|
|
to: orgfrontUrl,
|
|
icon: Network,
|
|
isExternal: true,
|
|
},
|
|
);
|
|
} else {
|
|
// 일반 사용자(Tenant Member)도 조직도 메뉴를 볼 수 있도록 추가합니다.
|
|
filteredItems.splice(1, 0, {
|
|
labelKey: "ui.admin.nav.org_chart",
|
|
labelFallback: "Org Chart",
|
|
to: orgfrontUrl,
|
|
icon: Network,
|
|
isExternal: true,
|
|
});
|
|
}
|
|
|
|
return filteredItems;
|
|
}, [mockRoleOverride, 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 = () => {
|
|
setDevelopmentRenderRevision((value) => value + 1);
|
|
};
|
|
|
|
window.addEventListener(LOCALE_CHANGED_EVENT, rerenderDevelopmentShell);
|
|
window.addEventListener(DEV_ROLE_CHANGED_EVENT, rerenderDevelopmentShell);
|
|
|
|
return () => {
|
|
window.removeEventListener(
|
|
LOCALE_CHANGED_EVENT,
|
|
rerenderDevelopmentShell,
|
|
);
|
|
window.removeEventListener(
|
|
DEV_ROLE_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 = mockRoleOverride || profile?.role || "user";
|
|
const handleSessionExpiryToggle = () => {
|
|
setIsSessionExpiryEnabled((prev) => {
|
|
const next = !prev;
|
|
writeShellSessionExpiryEnabled(next);
|
|
return next;
|
|
});
|
|
};
|
|
const sidebarNavContent = (
|
|
<div className={shellLayoutClasses.navList}>
|
|
{navItems.map((item) => {
|
|
const { labelKey, labelFallback, to, icon: Icon, isExternal } = item;
|
|
|
|
if (isExternal) {
|
|
return (
|
|
<a
|
|
key={to}
|
|
href={to}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={[
|
|
shellLayoutClasses.navItemBase,
|
|
shellLayoutClasses.navItemIdle,
|
|
].join(" ")}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{t(labelKey, labelFallback)}</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={item.end ?? to === "/"}
|
|
className={({ isActive }) =>
|
|
[
|
|
shellLayoutClasses.navItemBase,
|
|
item.isActive !== undefined
|
|
? item.isActive
|
|
? shellLayoutClasses.navItemActive
|
|
: shellLayoutClasses.navItemIdle
|
|
: isActive
|
|
? shellLayoutClasses.navItemActive
|
|
: shellLayoutClasses.navItemIdle,
|
|
].join(" ")
|
|
}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{t(labelKey, labelFallback)}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
const sidebarFooterContent = (
|
|
<div className="border-t border-border/50 px-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className={shellLayoutClasses.logoutButton}
|
|
>
|
|
<LogOut size={18} />
|
|
<span>{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={shellLayoutClasses.root}>
|
|
<AppSidebar
|
|
brandLabel={t("ui.admin.brand", "Baron 로그인")}
|
|
brandTitle={t("ui.admin.title", "Admin Control")}
|
|
brandIcon={<ShieldHalf size={20} />}
|
|
navContent={sidebarNavContent}
|
|
footerContent={sidebarFooterContent}
|
|
/>
|
|
|
|
<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 />
|
|
</main>
|
|
<RoleSwitcher />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppLayout;
|