From 0cd43f0aea7b1acceda184a678d04bb881e6a1c8 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Mon, 13 Apr 2026 11:30:40 +0900
Subject: [PATCH] feat(adminfront): restore top-right tenant filter buttons in
 new org chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-adds the group tabs ('전체', '한맥엔지니어링', etc.) to the top-right corner to allow users to filter the org chart by root tenant, restoring the lost functionality from the previous multi-tenant upgrade.
---
 .../tenants/routes/TenantOrgChartPage.tsx     | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx b/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
index ed8cbcd3..10500ab1 100644
--- a/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantOrgChartPage.tsx
@@ -91,6 +91,18 @@ export function TenantOrgChartPage() {
     return { rootNodes: roots, usersMap: uMap };
   }, [tenantsQuery.data, usersQuery.data]);
 
+  const [selectedDept, setSelectedDept] = React.useState<string>("전체");
+
+  const depts = React.useMemo(() => {
+    return rootNodes.map((n) => n.name).sort();
+  }, [rootNodes]);
+
+  React.useEffect(() => {
+    if (selectedDept !== "전체" && !depts.includes(selectedDept)) {
+      setSelectedDept("전체");
+    }
+  }, [selectedDept, depts]);
+
   const buildHierarchy = (tNode: TenantNode, depth: number): OrgNode => {
     const slug = tNode.slug.toLowerCase();
     const members = usersMap.get(slug) || [];
@@ -208,6 +220,11 @@ export function TenantOrgChartPage() {
   const totalUniqueUsers =
     usersQuery.data?.items?.filter((u) => u.status === "active").length || 0;
 
+  const targetNodes =
+    selectedDept === "전체"
+      ? rootNodes
+      : rootNodes.filter((n) => n.name === selectedDept);
+
   return (
     <div className="flex flex-col h-[calc(100vh-theme(spacing.32))] bg-slate-50 rounded-xl overflow-hidden shadow-sm border border-slate-200">
       <header className="flex items-center justify-between px-6 py-4 bg-white border-b border-slate-200 shadow-sm z-10 shrink-0">
@@ -220,6 +237,23 @@ export function TenantOrgChartPage() {
           </div>
         </div>
         <div className="flex gap-2 overflow-x-auto max-w-2xl custom-scrollbar pb-1">
+          {["전체", ...depts].map((d) => (
+            <button
+              key={d}
+              type="button"
+              onClick={() => {
+                setSelectedDept(d);
+                setLines([]); // Reset lines during switch
+              }}
+              className={`whitespace-nowrap px-4 py-1.5 text-sm font-semibold rounded-full border transition-colors ${
+                selectedDept === d
+                  ? "bg-slate-800 text-white border-slate-800"
+                  : "bg-white text-slate-600 border-slate-200 hover:bg-slate-100"
+              }`}
+            >
+              {d}
+            </button>
+          ))}
           <div className="ml-2 whitespace-nowrap px-4 py-1.5 bg-blue-50 text-blue-700 font-bold rounded-full border border-blue-200 text-sm flex items-center">
             총 {totalUniqueUsers}명
           </div>
@@ -251,7 +285,7 @@ export function TenantOrgChartPage() {
         </svg>
 
         <div className="flex flex-col gap-16 relative z-10 w-max mx-auto items-center pb-24">
-          {rootNodes.map((tNode) => {
+          {targetNodes.map((tNode) => {
             const orgNode = buildHierarchy(tNode, 0);
             return (
               <div