forked from baron/baron-sso
chan
948dc2236b
This commit includes: - Added SharedLink data model and Keto-bypassed public API for orgchart view - Configured 'orgfront' as a new OAuth2 client in hydra - Applied MH Dashboard premium beige theme to OrgChart - Implemented user lookup fallback to company code
437 lines
15 KiB
TypeScript
437 lines
15 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { ChevronLeft } from "lucide-react";
|
|
import * as React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Button } from "../../../components/ui/button";
|
|
import {
|
|
type UserSummary,
|
|
fetchTenants,
|
|
fetchUsers,
|
|
} from "../../../lib/adminApi";
|
|
import { t } from "../../../lib/i18n";
|
|
import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
|
|
|
|
interface OrgNode {
|
|
id: string;
|
|
name: string;
|
|
level: number;
|
|
members: UserSummary[];
|
|
children: OrgNode[];
|
|
totalCount?: number;
|
|
companyCode?: string;
|
|
type?: string;
|
|
}
|
|
|
|
export function TenantOrgChartPage() {
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
const [lines, setLines] = React.useState<
|
|
{
|
|
x1: number;
|
|
y1: number;
|
|
x2: number;
|
|
y2: number;
|
|
key: string;
|
|
path: string;
|
|
}[]
|
|
>([]);
|
|
const [svgSize, setSvgSize] = React.useState({ width: 0, height: 0 });
|
|
|
|
const tenantsQuery = useQuery({
|
|
queryKey: ["tenants-full-tree-v2"],
|
|
queryFn: () => fetchTenants(10000, 0),
|
|
});
|
|
|
|
const usersQuery = useQuery({
|
|
queryKey: ["users", { limit: 5000, offset: 0 }],
|
|
queryFn: () => fetchUsers(5000, 0),
|
|
});
|
|
|
|
const { rootNodes, usersMap } = React.useMemo(() => {
|
|
if (!tenantsQuery.data?.items || !usersQuery.data?.items) {
|
|
return { rootNodes: [], usersMap: new Map<string, UserSummary[]>() };
|
|
}
|
|
|
|
const uMap = new Map<string, UserSummary[]>();
|
|
|
|
for (const u of usersQuery.data.items) {
|
|
if (u.status !== "active") continue;
|
|
|
|
const slugs = new Set<string>();
|
|
const primarySlug = u.tenantSlug?.toLowerCase() || u.companyCode?.toLowerCase() || "";
|
|
if (primarySlug) slugs.add(primarySlug);
|
|
|
|
if (u.joinedTenants && Array.isArray(u.joinedTenants)) {
|
|
for (const jt of u.joinedTenants) {
|
|
if (jt.slug) slugs.add(jt.slug.toLowerCase());
|
|
}
|
|
}
|
|
|
|
for (const slug of slugs) {
|
|
const list = uMap.get(slug) || [];
|
|
if (!list.some((existing) => existing.id === u.id)) {
|
|
list.push(u);
|
|
}
|
|
uMap.set(slug, list);
|
|
}
|
|
}
|
|
|
|
const allTenants = tenantsQuery.data.items;
|
|
const { subTree: roots } = buildTenantFullTree(allTenants);
|
|
|
|
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) || [];
|
|
const children = tNode.children.map((c) => buildHierarchy(c, depth + 1));
|
|
|
|
let recursiveTotal = members.length;
|
|
for (const child of children) {
|
|
recursiveTotal += child.totalCount || 0;
|
|
}
|
|
|
|
return {
|
|
id: tNode.id,
|
|
name: tNode.name,
|
|
level: depth,
|
|
members,
|
|
children,
|
|
totalCount: recursiveTotal,
|
|
companyCode: slug,
|
|
type: tNode.type,
|
|
};
|
|
};
|
|
|
|
const drawLines = React.useCallback(() => {
|
|
if (!containerRef.current) return;
|
|
const container = containerRef.current;
|
|
const rect = container.getBoundingClientRect();
|
|
const scrollTop = container.scrollTop;
|
|
const scrollLeft = container.scrollLeft;
|
|
const childBoxes = container.querySelectorAll("[data-parent]");
|
|
const newLines: {
|
|
x1: number;
|
|
y1: number;
|
|
x2: number;
|
|
y2: number;
|
|
key: string;
|
|
path: string;
|
|
}[] = [];
|
|
|
|
for (const box of Array.from(childBoxes)) {
|
|
const parentId = box.getAttribute("data-parent");
|
|
if (!parentId) continue;
|
|
const parent = document.getElementById(parentId);
|
|
if (!parent) continue;
|
|
|
|
const pRect = parent.getBoundingClientRect();
|
|
const cRect = box.getBoundingClientRect();
|
|
|
|
if (pRect.width === 0 || cRect.width === 0) continue;
|
|
|
|
const parentLevel = Number.parseInt(parent.getAttribute("data-level") || "0", 10);
|
|
|
|
if (parentLevel === 0) {
|
|
const px = pRect.left + pRect.width / 2 - rect.left + scrollLeft;
|
|
const py = pRect.bottom - rect.top + scrollTop;
|
|
const cx = cRect.left + cRect.width / 2 - rect.left + scrollLeft;
|
|
const cy = cRect.top - rect.top + scrollTop;
|
|
const midY = py + (cy - py) / 2;
|
|
|
|
newLines.push({
|
|
key: `${parentId}->${box.id}`,
|
|
x1: px,
|
|
y1: py,
|
|
x2: cx,
|
|
y2: cy,
|
|
path: `M ${px} ${py} L ${px} ${midY} L ${cx} ${midY} L ${cx} ${cy}`,
|
|
});
|
|
} else {
|
|
const spineX = pRect.left + 24 - rect.left + scrollLeft;
|
|
const py = pRect.bottom - rect.top + scrollTop;
|
|
const cx = cRect.left - rect.left + scrollLeft;
|
|
const cy = cRect.top + 20 - rect.top + scrollTop;
|
|
|
|
newLines.push({
|
|
key: `${parentId}->${box.id}`,
|
|
x1: spineX,
|
|
y1: py,
|
|
x2: cx,
|
|
y2: cy,
|
|
path: `M ${spineX} ${py} L ${spineX} ${cy} L ${cx} ${cy}`,
|
|
});
|
|
}
|
|
}
|
|
|
|
setLines(newLines);
|
|
setSvgSize({
|
|
width: Math.max(container.scrollWidth, rect.width),
|
|
height: Math.max(container.scrollHeight, rect.height),
|
|
});
|
|
}, []);
|
|
|
|
React.useLayoutEffect(() => {
|
|
const timeout = setTimeout(drawLines, 150);
|
|
window.addEventListener("resize", drawLines);
|
|
return () => {
|
|
clearTimeout(timeout);
|
|
window.removeEventListener("resize", drawLines);
|
|
};
|
|
}, [drawLines, rootNodes.length, usersMap.size]);
|
|
|
|
if (tenantsQuery.isLoading || usersQuery.isLoading) {
|
|
return (
|
|
<div className="p-8 text-center text-muted-foreground">로딩 중...</div>
|
|
);
|
|
}
|
|
|
|
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-[#f6efe6] rounded-xl overflow-hidden shadow-sm border border-[#e0d5c1]">
|
|
<header className="flex flex-col sm:flex-row items-start sm:items-center justify-between px-6 py-4 bg-[linear-gradient(145deg,rgba(10,42,34,0.98)_0%,rgba(15,58,47,0.98)_52%,rgba(26,86,69,0.98)_100%)] border-b border-[#f2c484]/30 z-10 shrink-0">
|
|
<div className="flex flex-col gap-1 mb-4 sm:mb-0">
|
|
<p className="text-[#f2c484] text-xs font-bold uppercase tracking-wider">MH Dashboard</p>
|
|
<h2 className="text-xl font-black text-[#f7f0e4]">조직 현황</h2>
|
|
</div>
|
|
<div className="flex items-center gap-2 overflow-x-auto max-w-full custom-scrollbar">
|
|
{["전체", ...depts].map((d) => (
|
|
<button
|
|
key={d}
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedDept(d);
|
|
setLines([]);
|
|
}}
|
|
className={`whitespace-nowrap px-4 py-2 text-xs font-bold rounded-full transition-all border ${
|
|
selectedDept === d
|
|
? "bg-[linear-gradient(180deg,rgba(255,253,248,0.98),rgba(245,235,221,0.94))] text-[#0a2a22] border-[#f2c484]/40 shadow-sm"
|
|
: "bg-white/10 text-[#f7f0e4]/70 border-[#f2c484]/30 hover:text-[#f7f0e4] hover:border-[#f2c484]/50"
|
|
}`}
|
|
>
|
|
{d}
|
|
</button>
|
|
))}
|
|
<div className="ml-2 whitespace-nowrap px-4 py-2 bg-[#f2c484]/10 text-[#f2c484] font-black rounded-full border border-[#f2c484]/30 text-xs shadow-sm">
|
|
총 {totalUniqueUsers}명
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
className="flex-1 overflow-auto relative p-8 md:p-12"
|
|
style={{
|
|
background: "radial-gradient(circle at top left, rgba(214, 138, 58, 0.08), transparent 24%), radial-gradient(circle at top right, rgba(47, 153, 115, 0.05), transparent 20%), linear-gradient(180deg, rgba(246, 239, 230, 0.98), rgba(241, 234, 223, 0.96))"
|
|
}}
|
|
ref={containerRef}
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
className="absolute top-0 left-0 pointer-events-none z-0"
|
|
style={{
|
|
width: svgSize.width ? `${svgSize.width}px` : "100%",
|
|
height: svgSize.height ? `${svgSize.height}px` : "100%",
|
|
}}
|
|
>
|
|
{lines.map((l) => (
|
|
<path
|
|
key={l.key}
|
|
d={l.path}
|
|
stroke="#bca58a"
|
|
strokeWidth="1.5"
|
|
fill="none"
|
|
strokeLinejoin="round"
|
|
/>
|
|
))}
|
|
</svg>
|
|
|
|
<div className="flex flex-col gap-16 relative z-10 w-max mx-auto items-center pb-32">
|
|
{targetNodes.map((tNode) => {
|
|
const orgNode = buildHierarchy(tNode, 0);
|
|
return (
|
|
<div key={orgNode.id} className="flex flex-col items-center w-full">
|
|
<OrgNodeView node={orgNode} parentId={null} onToggle={drawLines} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --------------------- Node Rendering --------------------- //
|
|
|
|
const ROLE_ORDER = [
|
|
"사장",
|
|
"부사장",
|
|
"전무",
|
|
"상무",
|
|
"이사",
|
|
"수석",
|
|
"책임",
|
|
"선임",
|
|
"주임",
|
|
"사원",
|
|
];
|
|
|
|
function getRankWeight(u: UserSummary) {
|
|
const role = u.position || "";
|
|
let idx = ROLE_ORDER.indexOf(role);
|
|
if (idx === -1) idx = 99;
|
|
const isLeader = u.position?.endsWith("장") || u.jobTitle?.endsWith("장");
|
|
return (isLeader ? -100 : 0) + idx;
|
|
}
|
|
|
|
function OrgNodeView({
|
|
node,
|
|
parentId,
|
|
onToggle,
|
|
}: {
|
|
node: OrgNode;
|
|
parentId: string | null;
|
|
onToggle: () => void;
|
|
}) {
|
|
const [collapsed, setCollapsed] = React.useState(false);
|
|
const myId = `node-${node.level}-${node.id}`;
|
|
|
|
const toggle = () => {
|
|
setCollapsed(!collapsed);
|
|
setTimeout(onToggle, 100);
|
|
};
|
|
|
|
const membersToShow = [...node.members].sort((a, b) => getRankWeight(a) - getRankWeight(b));
|
|
const isVerticalChildren = node.level >= 1;
|
|
const isVerticallyStacked = node.level >= 1;
|
|
|
|
const embedChildren =
|
|
node.children.length > 0 && node.children.every((c) => c.children.length === 0);
|
|
|
|
// Determine header color based on level
|
|
const headerBgClass = node.level === 0 ? "bg-[#0a2a22]" : "bg-[#2f5547]";
|
|
|
|
return (
|
|
<div className={`flex flex-col ${isVerticallyStacked ? "items-start w-full" : "items-center"} mb-4`}>
|
|
<div
|
|
id={myId}
|
|
data-parent={parentId || undefined}
|
|
data-level={node.level}
|
|
className={`bg-white border border-[#e0d5c1] rounded-[10px] shadow-sm flex flex-col transition-all shrink-0 ${collapsed ? "opacity-80 scale-[0.98]" : ""}`}
|
|
style={{ width: "fit-content", minWidth: "320px", maxWidth: "400px" }}
|
|
>
|
|
<button
|
|
type="button"
|
|
className={`${headerBgClass} text-white px-4 py-3 font-black flex justify-center items-center gap-2 cursor-pointer select-none outline-none w-full text-center ${
|
|
node.level === 0 ? "text-[17px]" : "text-[15px]"
|
|
} ${membersToShow.length > 0 || embedChildren ? "rounded-t-[9px]" : "rounded-[9px]"}`}
|
|
onClick={toggle}
|
|
>
|
|
<span>{node.name}</span>
|
|
<span className="text-white/60 font-semibold text-xs bg-black/20 px-2 py-0.5 rounded-full">
|
|
{node.totalCount || node.members.length}
|
|
</span>
|
|
</button>
|
|
|
|
{!collapsed && membersToShow.length > 0 && (
|
|
<div className="p-3 grid grid-cols-2 gap-2 w-full">
|
|
{membersToShow.map((m) => (
|
|
<MemberCard key={m.id} member={m} companyCode={node.companyCode} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!collapsed && embedChildren && (
|
|
<div className="flex flex-col gap-3 p-3 pt-0 w-full">
|
|
{node.children.map((child) => {
|
|
const childMembers = [...child.members].sort((a, b) => getRankWeight(a) - getRankWeight(b));
|
|
return (
|
|
<div
|
|
key={child.id}
|
|
className="bg-[#f8f9fa] border border-[#e5e7eb] rounded-[8px] flex flex-col w-full overflow-hidden"
|
|
>
|
|
<div className="bg-[#7b93ab] text-white text-[13px] font-bold px-3 py-1.5 flex justify-between items-center">
|
|
<span>{child.name}</span>
|
|
<span className="bg-black/10 px-1.5 py-0.5 rounded text-[11px] font-medium">{child.totalCount || child.members.length}</span>
|
|
</div>
|
|
{childMembers.length > 0 && (
|
|
<div className="grid grid-cols-2 gap-2 p-2 w-full">
|
|
{childMembers.map((m) => (
|
|
<MemberCard key={m.id} member={m} companyCode={child.companyCode} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!collapsed && !embedChildren && node.children.length > 0 && (
|
|
<div className={`flex ${isVerticalChildren ? "flex-col items-start pl-8 gap-8 w-full" : "flex-row gap-12 justify-center items-start"} relative mt-4`}>
|
|
{node.children.map((c) => (
|
|
<OrgNodeView key={c.id} node={c} parentId={myId} onToggle={onToggle} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MemberCard({
|
|
member,
|
|
companyCode,
|
|
}: { member: UserSummary; companyCode?: string }) {
|
|
const coColor = (() => {
|
|
const c = (companyCode || member.companyCode || "").toLowerCase();
|
|
if (c.includes("hanmac")) return "border-l-[#ef4444]";
|
|
if (c.includes("saman")) return "border-l-[#ffb366]";
|
|
if (c.includes("ptc")) return "border-l-[#a855f7]";
|
|
if (c.includes("baron")) return "border-l-[#3b82f6]";
|
|
return "border-l-slate-400";
|
|
})();
|
|
|
|
const roleBadge = member.jobTitle && member.jobTitle !== member.position
|
|
? member.jobTitle
|
|
: member.position?.endsWith("장")
|
|
? member.position
|
|
: null;
|
|
|
|
return (
|
|
<div className={`flex flex-col px-2.5 py-2 rounded-[4px] border border-[#e5e7eb] bg-white border-l-[4px] w-full transition-transform hover:-translate-y-[2px] hover:shadow-md cursor-pointer ${coColor}`}>
|
|
<div className="flex items-center justify-between min-w-0 w-full mb-1">
|
|
<div className="flex items-baseline gap-1 truncate shrink-0">
|
|
<span className="font-black text-[12px] text-[#334155] whitespace-nowrap">
|
|
{member.name}
|
|
</span>
|
|
{roleBadge && (
|
|
<span className="text-[#2f5547] text-[9px] font-extrabold ml-1 truncate">
|
|
{roleBadge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center min-w-0 w-full">
|
|
<span className="text-[#94a3b8] text-[9px] font-medium truncate">
|
|
{member.position || "사원"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|