M R P Homepage - Copy this Angular, Tailwind Component to your project
Design a homepage with a header, left menu navigation, and a main body for an MRP system. The buttons (such as Financial, HR, IT, Accounting, Planning, Production) are parent node, each parent node will have children nodes, feel free to generate the child nodes and the menu should be displayed as a tree. The left navigation should have a toggle button to open and minimize. When it is collapsed, we should display icons according to the name of the department. When the button is clicked, it will update the main page by adding a new tab. That means there must be a container in the main body that is tab controller to allow user add more tabs into it. There must be a Close button to allow the user to close any tab that they are opening. Each user will be set the role for each parent and child nodes. That means we should have a toolbar under the title for user action like Add, Update, Delete, Generate report or More. These user actions should have icons, and make sure the buttons have the same color, style. When the user clicks on any button on left navigation menu, the buttons will be enabled or disabled accordingly to their defined role. For the parent and child nodes, make sure it's easy for user to recognize the parent of the child node, and the user can open many parent nodes to see the other child nodes. When the current tab is closed, navigate to and select by default the tab that stands before or after the current one.
