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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user