Developing Multi-Section Page

Monday, February 10 2025 –Last week, I moved on to a new feature that functions similarly to an existing system. To maintain consistency, I designed its UI to follow the same structure. This page consists of five distinct sections.

The first section displays a list, where selecting a specific item reveals another list of line items associated with it. Users can then click on a line item to execute the main function of the page.

Given the complexity of having five sections, I decided to separate them into individual components and work on them one by one. The first section handles the main list, the second displays detailed data for a selected item, and the third presents the line items related to that selection. The fourth and fifth sections show additional details related to the selected line item.

While working on this, I also made minor improvements to a previously developed feature. A button was added to set a status that triggers the new feature. On the detail page, I introduced logic to ensure that certain buttons are only clickable in view mode and hidden in edit mode to prevent accidental actions after making changes.

By the end of the week, I had completed three sections, with two remaining to be finished this week.