Organizational Hierarchy Tree - Copy this Angular, Css Component to your project
Role: Assume you're a senior frontend software engineer building an Angular based POC. Objective: Create a web application to display the hierarchy of an organization as a pictorial flowchart (like an org chart). The top level supervisor (e.g., CEO) should be at the top, and the hierarchy should be built based on employee supervisor relationships. Input: The application should accept only Excel files (.xlsx format). The Excel file will have the following columns: EmpID Employee Name Supervisor Name Assume Employee Name is unique (you can map on that for hierarchy). Features: ✅ File upload field that: Accepts only Excel files. Validates file type before parsing. ✅ On successful upload: Parse the Excel data using SheetJS (xlsx package). Build a hierarchical data structure from the parsed data. Render the structure as a flowchart (organization chart). ✅ The chart must: Be clear and visually represent parent child (supervisor subordinate) relationships. Look similar to the attached image (tree layout with departments, workers, etc.). Tech Stack: Angular 16+ SheetJS (xlsx) for reading Excel files GoJS, ngx org chart, OrgChart.js, or D3.js for hierarchical visualization Angular Material or Bootstrap for UI (optional) Expected Output: An interactive or static organization chart rendered in the browser that visually represents the reporting structure from the uploaded Excel file. Tree structure should be clearer with horizontal and vertical lines
