Organisation Unit Tree

1"use client";
2
3import type React from "react";
4
5import { useCallback, useEffect, useState, useMemo } from "react";
6import { Input } from "@/components/ui/input";
7import { Badge } from "@/components/ui/badge";
8import { Card, CardContent } from "@/components/ui/card";
9import { Button } from "@/components/ui/button";
10import { Loader2, Search, Users, ChevronDown, ChevronRight, X } from "lucide-react";
11import { cn } from "@/lib/utils";
12
13/**
14 * Interface for tree node data structure
15 */
16export interface TreeNode {
17  /** Unique identifier for the node */
18  id: string;
19  /** Display name of the node */
20  name: string;
21  /** Hierarchical level (0 = root) */
22  level?: number;
23  /** Parent node ID, null for root nodes */
24  parentId?: string | null;
25  /** Child nodes array */
26  children?: TreeNode[];
27  /** Indicates if node has children (for lazy loading) */
28  hasChildren?: boolean;
29  /** Loading state for lazy loading */
30  isLoading?: boolean;
31  /** Whether children have been loaded */
32  isLoaded?: boolean;
33  /** Allow additional properties */
34  [key: string]: any;
35}
36
37/**
38 * Props for the OrganizationTree component
39 */
40export interface OrganizationTreeProps {
41  /** Tree data array */
42  data: TreeNode[];
43  /** Callback when selection changes */
44  onSelectionChange?: (selectedNodes: TreeNode[], selectedIds: string[]) => void;
45  /** Callback when search term changes */
46  onSearchChange?: (searchTerm: string) => void;
47  /** Initially selected node IDs */
48  initialSelected?: string[];
49  /** Enable single selection mode */
50  singleSelection?: boolean;
51  /** Show search and controls */
52  showControls?: boolean;
53  /** Show selection statistics */
54  showStats?: boolean;
55  /** Array of enabled node IDs (others will be disabled) */
56  enabledNodeIds?: string[];
57  /** Restrict selection to specific level */
58  restrictSelectionToLevel?: number;
59  /** Enable lazy loading of children */
60  enableLazyLoading?: boolean;
61  /** Function to load children for a node */
62  onLoadChildren?: (nodeId: string) => Promise<TreeNode[]>;
63  /** Additional CSS classes */
64  className?: string;
65  /** Initially expanded node IDs */
66  initiallyExpanded?: string[];
67  /** Custom placeholder text for search */
68  searchPlaceholder?: string;
69}
70
71/**
72 * Internal node state for rendering
73 */
74interface NodeState {
75  isExpanded: boolean;
76  isSelected: boolean;
77  isHighlighted: boolean;
78  isSearchMatch: boolean;
79  isDisabled: boolean;
80}
81// … truncated