• 2 columns for 1-2 top-level managers
• 3 columns for 3+ top-level managers
• Automatic positioning based on hierarchy depth
• Responsive adjustment for screen sizes

• Direct reports split into left/right columns
• Balanced distribution for readability
• Special handling for single reporters
• Consistent spacing and connectors

• Access through main application navigation
• Navigate to "Organization Chart" or "Employee Hierarchy" section
• System requires organization ID for data isolation
• Hierarchy loads automatically on component mount

• Component receives organization ID as parameter
• Automatically fetches hierarchy data from API
• Loads employee images asynchronously
• Initializes search functionality
• Sets up PDF export capabilities

1. Dispatch fetchEmployeeHierarchyRequest with organizationId
2. Show loading indicator (LoadingFlower component)
3. Receive hierarchical data from API
4. Parse and structure data for visualization
5. Load employee images on-demand
6. Render initial hierarchy view

• Click the blue circular button with chevron-right (▶) icon
• Located at bottom center of employee nodes with reports
• Expands to show direct reports in two-column layout
• Button changes to chevron-down (▼) when expanded

• Click the blue circular button with chevron-down (▼) icon
• Located at bottom center of expanded employee nodes
• Hides all direct reports and their descendants
• Button changes back to chevron-right (▶)

Each employee node shows:

• Profile Image/Initials: Circular avatar with gradient or photo
• Employee Name: Bold text, center-aligned
• Job Title: Below name with colored dot indicator
• Department: With building icon
• Role: With person icon
• Report Count: Number of direct reports with users icon

• Top-level managers displayed in 2 or 3 columns
• Connected to "Organization Chart" header by blue lines
• Horizontal lines connect multiple top-level managers
• Vertical lines connect to their reporter structures

• Direct reports split into left and right columns
• Connected to manager by vertical blue lines
• Horizontal line connects multiple reporters
• Recursive structure for multi-level hierarchy

• Search bar located in top-right header section
• Identified by magnifying glass icon (🔍)
• Placeholder text: "Search employees..."
• Clear button (X) appears when text is entered

1. Click in search bar or use keyboard shortcut (Ctrl+F)
2. Type employee name (partial or full)
3. Search is case-insensitive
4. Results appear in real-time as you type
5. Matching employees highlighted in yellow

• Matching nodes get yellow background (#FEF3C7)
• Orange border (2px #F59E0B) around matching nodes
• Green checkmark badge in top-right corner of node
• Result count displayed below search bar
• Automatically expands hierarchy to show matching employees

When an employee is found:

1. All ancestor nodes (managers above) are expanded
2. The found employee's node is expanded
3. All descendant nodes (reports below) are shown
4. Irrelevant branches remain collapsed
5. View automatically focuses on the result

• Click the X button in search bar
• Or manually delete search text
• Highlights and checkmarks removed
• Hierarchy returns to previous state
• Expanded nodes from search remain expanded

• Click the download icon (📥) button in header
• Located next to search bar
• Button has blue background (#AFE0FF)
• Hover shows "Export to PDF" tooltip
• Spinner appears during export process

1. System automatically expands ALL nodes
2. Creates optimized layout for PDF
3. Scales down elements for better fit
4. Removes interactive elements (buttons)
5. Adds PDF header with title and date
6. Calculates multi-page layout if needed

• Uses html2canvas for screenshot capture
• Uses jsPDF for PDF creation
• Landscape orientation (A4)
• Multi-page support for large hierarchies
• Page numbers added automatically
• Footer with copyright information

Priority order for avatar display:

1. Gradient Initials: If no photo or loading fails
2. Gradient Color: Generated from employee name
3. Initials: First letters of first and last name

• Name: Bold, centered, color varies by level
• Title: With colored dot indicator
  • Top-level: Blue dot, blue text
  • Others: Gray dot, gray text

• Department: With building icon (🏢)
• Role: With person icon (👤)
• Both use gray text and small icons
• Centered alignment

• Report Count: Number of direct reports
• Icon: Users icon (👥)
• Style: Border-top separator, smaller text
• Color: Blue for top-level, gray for others
• Only shown for employees with reports

*12 pastel colors in repeating sequence

12-color pastel sequence (30% opacity):

Colors repeat in sequence based on reporter position

• Position: Absolute, bottom-center of node
• Style: White circle with blue border
• Icons: Chevron-right (▶) / Chevron-down (▼)
• Hover: Light blue background
• Z-index: 30 (above other elements)

• Position: Absolute, top-right corner
• Style: Amber circle with checkmark
• Size: 20px × 20px
• Content: White checkmark (✓)
• Only appears for search matches

• Props: organizationId (required)
• State: expandedNodes, searchTerm, searchResults, columnPositions
• Refs: columnRefs, containerRef, requestedImagesRef
• Effects: Data fetching, search processing, position updates
• Render: Header, search, export button, chart container

• Props: employee, size, className
• Features: Photo loading, gradient fallback, initials
• Size Options: small, medium, large
• Fallback: Gradient based on name hash