1
0
forked from baron/baron-sso

feat(adminfront): restore top-right tenant filter buttons in new org chart

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.
This commit is contained in:
2026-04-13 11:30:40 +09:00
parent 9ff49230fc
commit 0cd43f0aea

View File

@@ -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