- {navItems.map(({ label, to, icon: Icon }) => {
+ {navItems.map((item: NavItem) => {
+ const { label, to, icon: Icon, isExternal } = item;
const isOrgChart = location.pathname === "/tenants/org-chart";
const isTenantsRoot = to === "/tenants";
const isCustomActive = isTenantsRoot
@@ -449,6 +460,21 @@ function AppLayout() {
? location.pathname === "/"
: location.pathname.startsWith(to);
+ if (isExternal) {
+ return (
+
+
+ {t(label, label)}
+
+ );
+ }
+
return (
(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() };
- }
-
- const uMap = new Map();
-
- // Process users to map them to multiple tenants if applicable
- for (const u of usersQuery.data.items) {
- if (u.status !== "active") continue;
-
- // Extract all associated tenant slugs
- const slugs = new Set();
-
- 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());
- }
- }
- }
-
- // Add user to all matching slugs in the map
- for (const slug of slugs) {
- const list = uMap.get(slug) || [];
- // Prevent duplicate user references in the same list
- 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("전체");
-
- 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));
-
- // Calculate recursive total users instead of simple tenant count to account for actual mapped members
- 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) {
- // Horizontal fork for Level 0 -> Level 1
- 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 {
- // Vertical spine for Level >= 1 -> Level >= 2
- const spineX = pRect.left + 32 - rect.left + scrollLeft; // 32px indent from parent's left edge
- const py = pRect.bottom - rect.top + scrollTop;
- const cx = cRect.left - rect.left + scrollLeft; // Child's left edge
- const cy = cRect.top + 24 - rect.top + scrollTop; // Middle of child's header
-
- 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 _forceTrigger = rootNodes.length + usersMap.size;
- 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 (
- 로딩 중...
- );
- }
-
- // Count unique users across the fetched payload
- const totalUniqueUsers =
- usersQuery.data?.items?.filter((u) => u.status === "active").length || 0;
-
- const targetNodes =
- selectedDept === "전체"
- ? rootNodes
- : rootNodes.filter((n) => n.name === selectedDept);
-
- return (
-
-
-
-
-
-
-
- {targetNodes.map((tNode) => {
- const orgNode = buildHierarchy(tNode, 0);
- return (
-
-
-
- );
- })}
-
-
-
-
-
-
- {!collapsed && membersToShow.length > 0 && (
-
- {membersToShow.map((m) => (
-
- ))}
-
- )}
-
- {!collapsed && embedChildren && (
-
- {node.children.map((child) => {
- const childMembers = [...child.members].sort(
- (a, b) => getRankWeight(a) - getRankWeight(b),
- );
- return (
-
-
- {child.name}
-
- ({child.totalCount || child.members.length})
-
-
- {childMembers.length > 0 && (
-
- {childMembers.map((m) => (
-
- ))}
-
- )}
-
- );
- })}
-
- )}
-
-
- {!collapsed && !embedChildren && node.children.length > 0 && (
-
- {node.children.map((c) => (
-
- ))}
-
- )}
-
-
-
-
- {member.name}
-
- {member.position && member.position !== roleBadge && (
-
- {member.position}
-
- )}
-
- {roleBadge && (
-
- {roleBadge}
-
- )}
-
-