Passing Details and History Table Completion

Monday, February 17 2025 – Continuing from last week’s progress, I had 2 sections remaining out of 5 to complete. The 4th and 5th sections focused on item details, where the user clicks on an item from a list, and the remaining related details are displayed in the other two sections.

I began with the 4th section by drafting the UI layout, including the text boxes and buttons. Since there was a lot of data to be shown, I spent time optimizing the available space and sorting the elements as efficiently as possible. As this was a component, one crucial piece of data was passed from the parent component. Using that data, I requested details from the API and passed them to the respective text boxes. There were several buttons in this section, and once I confirmed the data was passed correctly, I implemented the functionality for each button. One additional button didn’t require an API call; instead, it calculated a value based on the current information and displayed it, saving the user from doing the math themselves.

Moving to the last section, it was a table displaying the data history, so no additional functionality was needed. My focus was purely on designing the table to fit the available space as efficiently as possible. I created mock data to test the UI and identify any potential bugs.

Next, I revisited the previous feature, where additional data needed to be displayed. While making these changes, I improved the UI by adding a “view” and “edit” mode, helping users distinguish between the two and preventing them from making unsaved changes.

By the end of the week, both features were completed, though I still need to perform testing and clean up the code before pushing the changes.

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.

Enhancing Filter Functionality and Merging Create/Edit Pages

Monday, January 27 2025 – Continuing from the previous week, I worked on the same features and focused on completing the filter section. Initially, the filters triggered an automatic refresh whenever the user clicked or typed anything. However, this behavior was modified so that filtering and searching only occur when the user explicitly clicks the search button.

Later, Mr. Peter pointed out that having separate pages for creating and editing items meant any changes made to the create page would need to be duplicated in the edit page, which is not an efficient approach. To streamline the process, I merged both pages by introducing a useState hook to determine the mode. If no data for a specific ID is passed, the page operates in create mode, showing relevant sections only for creation. Otherwise, it switches to edit mode.

By the end of the week, I had made significant progress on this feature and was ready to move on to the next one, though additional checks were needed to ensure error-free functionality.

Overcoming Challenges in Continuing Midway Code Development

Monday, January 21 2025 – Last week, I worked on continuing a feature that was partially completed in a project nearing its deadline. Initially, I spent some time understanding the code handed over to me. Unlike my previous project, which involved straightforward functions, this one required me to dive deep into the feature’s implementation. I needed to fully comprehend and familiarize myself with the code before making meaningful progress.

The partially completed code presented challenges, it often gave the impression of functionality when, in reality, it was incomplete. Only after thoroughly dissecting and understanding the logic was I able to proceed with developing the intended feature. With clarity on the existing code, I began by building the “Create Form” page.

This form differed from a previous “Create” page I had worked on. Previously, clicking the “Create” button redirects users to a new page. However, the previous developer for this project had designed it to open as a pop-up, avoiding a full page reload. While implementing this feature, I learned to develop a pop-up page and a dropdown menu by referring to an existing dropdown in the project. I also created a line item table component, with its UI modeled after the existing system.

Throughout the week, I gained valuable insights by working on this feature, adopting new perspectives on development and system design. By the end of the week, I successfully completed the “Create” and “Edit” pages. However, the filters for the list page still require adjustments, which I plan to tackle next week.

A Week of Bug Fixes, UI Enhancements, and Transitioning Responsibilities

Monday, January 13 2025 – Last week, my primary focus was on resolving bugs in previously developed features, particularly within the report section of our project. Initially, I conducted several rounds of testing directly through the user interface but couldn’t replicate the specific bugs that had been reported. Later, Mr. Peter pinpointed the exact scenario where the bug could be reproduced. With this insight, I quickly identified the issue in the logic calculation and implemented a minor fix in the code.

While addressing this, I took the opportunity to perform thorough testing to ensure the fixes were robust and bug-free. Additionally, I made minor improvements to the UI for better functionality. Similarly, in another part of the codebase, I resolved a similar pattern of errors using a comparable approach.

Towards the end of the week, Mr. Peter assigned me a new task: continuing work on a project that was nearing completion for a specific feature. This project had been primarily handled by an intern who was in the final week of his internship. Recognizing the importance of a smooth transition, I quickly familiarized myself with the project structure and codebase. I took full advantage of the remaining time with the intern, asking as many questions as possible to gain insights and ensure I could handle the project tasks independently moving forward.