Organization Chart Upload - 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: Employee Name, Division, Skill Set, Supervisor. 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). add a Skill set dropdown as filter. add two buttons 'Employee Hierarchy: on click Build a hierarchical data structure from the parsed data. Render the structure as a flowchart (organization chart Employee Hierarchy). on 'Skill set' dropdown selection with skill, Re Render the structure as a flowchart (organization chart Employee Hierarchy) displaying only selected skill set employes at last levels where supervisor should remain as it is to display proper hierarchy ✅ 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+ angular material for flow chart,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 Organizational Hierarchy Application Breakdown: 1. File Upload Mechanism: Implemented a drag and drop file upload interface Supports only .xlsx file format Provides visual feedback during file selection Includes error handling for invalid file types Utilizes Angular Reactive Forms for file management 2. Data Processing: Uses SheetJS (XLSX) to parse Excel files Converts Excel data into a structured Employee interface Validates uploaded data to ensure correct format Creates a mapping of employees and their hierarchical relationships Generates a multi level hierarchy based on supervisor subordinate connections 3. Skill Set Filtering: Extracts unique skill sets from employee data Provides a dropdown to filter employees by skill Dynamically re renders organization chart based on selected skill Maintains hierarchical structure during filtering 4. Visualization: Renders organization chart as a multi level flex layout Displays employee details including name, division, and skills Provides hover effects and responsive design Uses semantic HTML for improved accessibility Additional Suggestions: Implement export functionality for the generated hierarchy Add search functionality for employees