forked from baron/baron-sso
feat(adminfront): add org chart to sidebar navigation
Adds the Organization Chart tab to the main sidebar for all users. Removes the 'View Org Chart' button from the Tenant List page. Enhances active state logic for nested routes.
This commit is contained in:
@@ -7,6 +7,7 @@ import {
|
|||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
LogOut,
|
LogOut,
|
||||||
Moon,
|
Moon,
|
||||||
|
Network,
|
||||||
NotebookTabs,
|
NotebookTabs,
|
||||||
ShieldHalf,
|
ShieldHalf,
|
||||||
Sun,
|
Sun,
|
||||||
@@ -105,6 +106,11 @@ function AppLayout() {
|
|||||||
to: "/tenants",
|
to: "/tenants",
|
||||||
icon: Building2,
|
icon: Building2,
|
||||||
});
|
});
|
||||||
|
filteredItems.splice(2, 0, {
|
||||||
|
label: "ui.admin.nav.org_chart",
|
||||||
|
to: "/tenants/org-chart",
|
||||||
|
icon: Network,
|
||||||
|
});
|
||||||
} else if (isTenantAdmin || manageableCount > 0) {
|
} else if (isTenantAdmin || manageableCount > 0) {
|
||||||
if (manageableCount <= 1 && profile?.tenantId) {
|
if (manageableCount <= 1 && profile?.tenantId) {
|
||||||
filteredItems.splice(1, 0, {
|
filteredItems.splice(1, 0, {
|
||||||
@@ -119,6 +125,18 @@ function AppLayout() {
|
|||||||
icon: Building2,
|
icon: Building2,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
filteredItems.splice(manageableCount <= 1 && profile?.tenantId ? 2 : 2, 0, {
|
||||||
|
label: "ui.admin.nav.org_chart",
|
||||||
|
to: "/tenants/org-chart",
|
||||||
|
icon: Network,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 일반 사용자(Tenant Member)도 조직도 메뉴를 볼 수 있도록 추가합니다.
|
||||||
|
filteredItems.splice(1, 0, {
|
||||||
|
label: "ui.admin.nav.org_chart",
|
||||||
|
to: "/tenants/org-chart",
|
||||||
|
icon: Network,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return filteredItems;
|
return filteredItems;
|
||||||
@@ -418,23 +436,33 @@ function AppLayout() {
|
|||||||
</div>
|
</div>
|
||||||
<nav className="px-2 pb-4 md:px-3 md:pb-8">
|
<nav className="px-2 pb-4 md:px-3 md:pb-8">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
{navItems.map(({ label, to, icon: Icon }) => (
|
{navItems.map(({ label, to, icon: Icon }) => {
|
||||||
<NavLink
|
const isOrgChart = location.pathname === "/tenants/org-chart";
|
||||||
key={to}
|
const isTenantsRoot = to === "/tenants";
|
||||||
to={to}
|
const isCustomActive = isTenantsRoot
|
||||||
className={({ isActive }) =>
|
? (location.pathname.startsWith("/tenants") && !isOrgChart)
|
||||||
[
|
: to === "/"
|
||||||
"flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
|
? location.pathname === "/"
|
||||||
isActive
|
: location.pathname.startsWith(to);
|
||||||
? "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",
|
return (
|
||||||
].join(" ")
|
<NavLink
|
||||||
}
|
key={to}
|
||||||
>
|
to={to}
|
||||||
<Icon size={18} />
|
className={() =>
|
||||||
<span>{t(label, label)}</span>
|
[
|
||||||
</NavLink>
|
"flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
|
||||||
))}
|
isCustomActive
|
||||||
|
? "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="border-t border-border/50 px-3 pt-4">
|
<div className="border-t border-border/50 px-3 pt-4">
|
||||||
|
|||||||
@@ -216,12 +216,6 @@ function TenantListPage() {
|
|||||||
/>
|
/>
|
||||||
</RoleGuard>
|
</RoleGuard>
|
||||||
|
|
||||||
<Button asChild variant="outline" className="gap-2">
|
|
||||||
<Link to="/tenants/org-chart">
|
|
||||||
{t("ui.admin.tenants.view_org_chart", "전체 조직도 보기")}
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => query.refetch()}
|
onClick={() => query.refetch()}
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ export function TenantOrgChartPage() {
|
|||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-bold text-slate-800">통합 조직도</h2>
|
<h2 className="text-xl font-bold text-slate-800">조직도</h2>
|
||||||
<p className="text-xs text-slate-500">
|
<p className="text-xs text-slate-500">
|
||||||
조직 구조를 효율적인 세로 계층형으로 시각화합니다.
|
조직 구조를 효율적인 세로 계층형으로 시각화합니다.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -828,6 +828,7 @@ plane = "ADMIN PLANE"
|
|||||||
subtitle = "Manage your organization"
|
subtitle = "Manage your organization"
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = "Org Chart"
|
||||||
api_keys = "API Keys"
|
api_keys = "API Keys"
|
||||||
audit_logs = "Audit Logs"
|
audit_logs = "Audit Logs"
|
||||||
auth_guard = "Auth Guard"
|
auth_guard = "Auth Guard"
|
||||||
|
|||||||
@@ -830,6 +830,7 @@ plane = "ADMIN PLANE"
|
|||||||
subtitle = "Manage your organization"
|
subtitle = "Manage your organization"
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = "조직도"
|
||||||
api_keys = "API 키"
|
api_keys = "API 키"
|
||||||
audit_logs = "감사 로그"
|
audit_logs = "감사 로그"
|
||||||
auth_guard = "인증 가드"
|
auth_guard = "인증 가드"
|
||||||
|
|||||||
@@ -829,6 +829,7 @@ plane = ""
|
|||||||
subtitle = ""
|
subtitle = ""
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = ""
|
||||||
api_keys = ""
|
api_keys = ""
|
||||||
audit_logs = ""
|
audit_logs = ""
|
||||||
auth_guard = ""
|
auth_guard = ""
|
||||||
|
|||||||
@@ -963,6 +963,7 @@ plane = "Admin Plane"
|
|||||||
subtitle = "Manage tenants, policies, and operators"
|
subtitle = "Manage tenants, policies, and operators"
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = "Org Chart"
|
||||||
api_keys = "API Keys"
|
api_keys = "API Keys"
|
||||||
audit_logs = "Audit Logs"
|
audit_logs = "Audit Logs"
|
||||||
auth_guard = "Auth Guard"
|
auth_guard = "Auth Guard"
|
||||||
|
|||||||
@@ -296,6 +296,7 @@ plane = "Admin Plane"
|
|||||||
subtitle = "관리 및 정책 운영"
|
subtitle = "관리 및 정책 운영"
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = "조직도"
|
||||||
api_keys = "API 키"
|
api_keys = "API 키"
|
||||||
audit_logs = "감사 로그"
|
audit_logs = "감사 로그"
|
||||||
auth_guard = "인증 가드"
|
auth_guard = "인증 가드"
|
||||||
@@ -1362,6 +1363,7 @@ plane = "Admin Plane"
|
|||||||
subtitle = "관리 및 정책 운영"
|
subtitle = "관리 및 정책 운영"
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = "조직도"
|
||||||
api_keys = "API 키"
|
api_keys = "API 키"
|
||||||
audit_logs = "감사 로그"
|
audit_logs = "감사 로그"
|
||||||
auth_guard = "인증 가드"
|
auth_guard = "인증 가드"
|
||||||
|
|||||||
@@ -171,6 +171,7 @@ plane = ""
|
|||||||
subtitle = ""
|
subtitle = ""
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = ""
|
||||||
api_keys = ""
|
api_keys = ""
|
||||||
audit_logs = ""
|
audit_logs = ""
|
||||||
auth_guard = ""
|
auth_guard = ""
|
||||||
@@ -1237,6 +1238,7 @@ plane = ""
|
|||||||
subtitle = ""
|
subtitle = ""
|
||||||
|
|
||||||
[ui.admin.nav]
|
[ui.admin.nav]
|
||||||
|
org_chart = ""
|
||||||
api_keys = ""
|
api_keys = ""
|
||||||
audit_logs = ""
|
audit_logs = ""
|
||||||
auth_guard = ""
|
auth_guard = ""
|
||||||
|
|||||||
Reference in New Issue
Block a user