From 984adcfa62b5ef20f7bf6630f873688626f7337d Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Mon, 13 Apr 2026 10:38:04 +0900
Subject: [PATCH] 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.
---
 .../src/components/layout/AppLayout.tsx       | 62 ++++++++++++++-----
 .../tenants/routes/TenantListPage.tsx         |  6 --
 .../tenants/routes/TenantOrgChartPage.tsx     |  2 +-
 adminfront/src/locales/en.toml                |  1 +
 adminfront/src/locales/ko.toml                |  1 +
 adminfront/src/locales/template.toml          |  1 +
 locales/en.toml                               |  1 +
 locales/ko.toml                               |  2 +
 locales/template.toml                         |  2 +
 9 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/adminfront/src/components/layout/AppLayout.tsx b/adminfront/src/components/layout/AppLayout.tsx
index f82e6ea7..927f75b0 100644
--- a/adminfront/src/components/layout/AppLayout.tsx
+++ b/adminfront/src/components/layout/AppLayout.tsx
@@ -7,6 +7,7 @@ import {
   LayoutDashboard,
   LogOut,
   Moon,
+  Network,
   NotebookTabs,
   ShieldHalf,
   Sun,
@@ -105,6 +106,11 @@ function AppLayout() {
         to: "/tenants",
         icon: Building2,
       });
+      filteredItems.splice(2, 0, {
+        label: "ui.admin.nav.org_chart",
+        to: "/tenants/org-chart",
+        icon: Network,
+      });
     } else if (isTenantAdmin || manageableCount > 0) {
       if (manageableCount <= 1 && profile?.tenantId) {
         filteredItems.splice(1, 0, {
@@ -119,6 +125,18 @@ function AppLayout() {
           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;
@@ -418,23 +436,33 @@ function AppLayout() {
         </div>
         <nav className="px-2 pb-4 md:px-3 md:pb-8">
           <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>
-            ))}
+            {navItems.map(({ label, to, icon: Icon }) => {
+              const isOrgChart = location.pathname === "/tenants/org-chart";
+              const isTenantsRoot = to === "/tenants";
+              const isCustomActive = isTenantsRoot 
+                ? (location.pathname.startsWith("/tenants") && !isOrgChart)
+                : to === "/" 
+                  ? location.pathname === "/"
+                  : location.pathname.startsWith(to);
+
+              return (
+                <NavLink
+                  key={to}
+                  to={to}
+                  className={() =>
+                    [
+                      "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 className="border-t border-border/50 px-3 pt-4">
diff --git a/adminfront/src/features/tenants/routes/TenantListPage.tsx b/adminfront/src/features/tenants/routes/TenantListPage.tsx
index c9372f30..745e2b35 100644
--- a/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantListPage.tsx
@@ -216,12 +216,6 @@ function TenantListPage() {
             />
           </RoleGuard>
 
-          <Button asChild variant="outline" className="gap-2">
-            <Link to="/tenants/org-chart">
-              {t("ui.admin.tenants.view_org_chart", "전체 조직도 보기")}
-            </Link>
-          </Button>
-
           <Button
             variant="outline"
             onClick={() => query.refetch()}
diff --git a/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx b/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
index cd4a307a..e2d44d18 100644
--- a/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
@@ -217,7 +217,7 @@ export function TenantOrgChartPage() {
             </Link>
           </Button>
           <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>
diff --git a/adminfront/src/locales/en.toml b/adminfront/src/locales/en.toml
index 91bc9c18..6606c70f 100644
--- a/adminfront/src/locales/en.toml
+++ b/adminfront/src/locales/en.toml
@@ -828,6 +828,7 @@ plane = "ADMIN PLANE"
 subtitle = "Manage your organization"
 
 [ui.admin.nav]
+org_chart = "Org Chart"
 api_keys = "API Keys"
 audit_logs = "Audit Logs"
 auth_guard = "Auth Guard"
diff --git a/adminfront/src/locales/ko.toml b/adminfront/src/locales/ko.toml
index 50a58e65..092c2f13 100644
--- a/adminfront/src/locales/ko.toml
+++ b/adminfront/src/locales/ko.toml
@@ -830,6 +830,7 @@ plane = "ADMIN PLANE"
 subtitle = "Manage your organization"
 
 [ui.admin.nav]
+org_chart = "조직도"
 api_keys = "API 키"
 audit_logs = "감사 로그"
 auth_guard = "인증 가드"
diff --git a/adminfront/src/locales/template.toml b/adminfront/src/locales/template.toml
index 9a882dcd..aa3f3e74 100644
--- a/adminfront/src/locales/template.toml
+++ b/adminfront/src/locales/template.toml
@@ -829,6 +829,7 @@ plane = ""
 subtitle = ""
 
 [ui.admin.nav]
+org_chart = ""
 api_keys = ""
 audit_logs = ""
 auth_guard = ""
diff --git a/locales/en.toml b/locales/en.toml
index 97f5d68a..5fb0d6fe 100644
--- a/locales/en.toml
+++ b/locales/en.toml
@@ -963,6 +963,7 @@ plane = "Admin Plane"
 subtitle = "Manage tenants, policies, and operators"
 
 [ui.admin.nav]
+org_chart = "Org Chart"
 api_keys = "API Keys"
 audit_logs = "Audit Logs"
 auth_guard = "Auth Guard"
diff --git a/locales/ko.toml b/locales/ko.toml
index 948f90b3..55bcbd9f 100644
--- a/locales/ko.toml
+++ b/locales/ko.toml
@@ -296,6 +296,7 @@ plane = "Admin Plane"
 subtitle = "관리 및 정책 운영"
 
 [ui.admin.nav]
+org_chart = "조직도"
 api_keys = "API 키"
 audit_logs = "감사 로그"
 auth_guard = "인증 가드"
@@ -1362,6 +1363,7 @@ plane = "Admin Plane"
 subtitle = "관리 및 정책 운영"
 
 [ui.admin.nav]
+org_chart = "조직도"
 api_keys = "API 키"
 audit_logs = "감사 로그"
 auth_guard = "인증 가드"
diff --git a/locales/template.toml b/locales/template.toml
index e400961b..93634bfe 100644
--- a/locales/template.toml
+++ b/locales/template.toml
@@ -171,6 +171,7 @@ plane = ""
 subtitle = ""
 
 [ui.admin.nav]
+org_chart = ""
 api_keys = ""
 audit_logs = ""
 auth_guard = ""
@@ -1237,6 +1238,7 @@ plane = ""
 subtitle = ""
 
 [ui.admin.nav]
+org_chart = ""
 api_keys = ""
 audit_logs = ""
 auth_guard = ""