Month: January 2024

This is the last week of the internship at Tong Hin company. Before I discuss the tasks I completed, I want to express my deep appreciation to the company for accepting me as a temporary employee. It has been a truly enjoyable experience spending 13 weeks in this company. Now, let me detail the tasks I completed this week.

First of all, I added a function that can display the serial number and allows for adding multiple serial numbers. After a discussion with Mr. Peter, I made some changes to the add serial number functionality. I limited the process to only accept a new serial number that is different from the barcode. If the user adds a redundant serial number to the list, an error will be prompted, and the payment button is disabled.

Next, I implemented the hotkey function in the order page. Hotkey functions are really useful to minimize the usage of the mouse. I used “enter” and “control” as hotkeys to control the input focus point. When I press “enter,” the input will focus on the search item box, and pressing “control” will focus on the quantity box. Additionally, with the help of the pre-defined “tab” button, I can easily change the input focus to different boxes. The “tab” button will make the input focus on the next input area, further minimizing the usage of the mouse.

Additionally, I added an invoice list page to the system. However, the invoice list page does not have the correct API connected as it has not been created yet. Even though the API is not created, I still have a draft idea about what data should be displayed on the invoice list page. After completing the invoice list page and presenting it to the supervisor, he was satisfied with what I have done. Finally, Mr. Peter taught me how to test the API using React testing elements. Since I had no idea how to test the API, he patiently taught me the steps needed to test the function and API. Now, I am more familiar with React testing and should be able to test APIs in my future projects.

In conclusion, I implemented the hotkey function, added, modified, and deleted serial number functions, created the invoice list page, and learned React testing. Once again, I want to express my gratitude to the company for accepting me as a member of this team. I hope that the company will have a bright future and an even better software team.

Last week, following a successful demonstration of LiveChart’s fundamental features, Mr. Peter granted me access to a new repository encompassing contexts and modules for the upcoming task centered around Report Data. Having dedicated previous weeks to research and testing, I began by pulling the repositories and setting up the new module and context. Initially, I focused on creating basic views and view models without implementing complex functionalities. Realizing the need to prioritize completing the context first, I shifted my attention to ensuring the required data could be successfully passed.

After receiving approval from Mr. Peter, I incorporated a new API within the context, with the goal of improving future maintainability. With the context groundwork in place, I then proceeded to implement the first feature for the report data task, employing the CQRS pattern approach. As the end of the week approaches, I need to continue my progress into the following week. My primary focus in the next week will involve creating tests for the featured data and ensuring the seamless transfer of information from the backend to the UI.

This week is the last week I intern in Tong Hin. Continuing modified the category panel, I install the “Chip” react native paper from “mui-material”. These chips are compact elements that can represent inputs, attributes or actions. They can have an icon or avatar on the left and a close button icon on the right. They are typically used to present multiple options, represent attributes active or chosen, present filter options and trigger actions related to primary content. I used the chip function for trigger the options of the category. When a category is selected, there have a close button on the right which can remove the selected category.

On the other hand, I modified some small changes in the item detail panel. First of all, I call the ItemDto from the API to obtain the data for other table. Next, I replace the price with UoM in the UoM table which is the checkbox will be checked which UoM for that item. Thirdly, I move the Barcode to the position that easily seen by user. Lastly, I switch the navigation tab between the Stock and the Record. That’s means, I will display the Stock content for the user first then it will show the sales record when click to the tab. For the other detail panel, I make the date time more readable which separate the date and time with a comma.

In addition, I also modified the pagination for this item page. For the input of the page, I modified the input to be changeable by number. When it is invalid input the page is set to current page. For the previous, I set the previous button to disable when the page is 1. For the next button, I set to disable when the page is equal to total page. I also display the total items beside the pagination which is count the items from the API. For calculating the total pages, I use Math.max to set the minimum pages is 1 not 0 and use Math.ceil to calculate total page equals to total items divided by page size. Then, I make this pagination as a component to implement for Item page, sequence generator page and store page.

When Mr Peter checking my code, he found that I repeat creating the same layout for each page. So, he told me to DRY the layout and he also ask other colleagues to ping my computer to help me testing the page. When I doing the layout, the console there showing a warning said that validateDOMNesting(…): <div> cannot appear as a child of <html>. To solve this issue, I add <meta> and <title> at <head> at the Root Layout there, and for the <body> of the layout which is the part React app will be mounted.

During last day of this week, I did the validation for the sequence and store pages. For the store page, I validate the error when the required input field is blank. For the sequence page, I validate the same thing as store page, and add the checking for the sequence pattern to check the user is input the correct pattern which is start from alphabet then is number with 3 to 6 digits. Finally, I push all my task to server by using git.

Hello all, this is the last week of my internship at Tong Hin. I started this week’s internship by modifying the table sorting for payment and orders tables. Previously I had sorted the payment and sales order tables by the id. However, I have changed it to sort by the latest date, since Mr. Peter said that most of the users that use our system will prefer seeing the latest order or payment that have been made. So, I changed the “ORDER BY id” statement in these two tables to “ORDER BY datetime DESC”.

Next, I refactor the item API. I have changed the get item list query in item API to query the item list by category id instead of category name. This is because the category name may be duplicate. So, it is better to get the item list by category id. Besides that, I have also changed the get item list query by showing the uom name. Mr. Peter has told me that each item will have one uom. Furthermore, I have also changed the get item by barcode query to show the uom. Moreover, I have also changed the logic for generating random items command to generate one uom for each of the item. 

The next task that I do is to add two functions in item API. These two functions are the function that will be used in the feature of getting sales orders by id. These two private functions are not an API, so I don’t need to add it in the controller in the API project. For the first function which is the get item name and uom by single barcode query, it will return a string that will show the item and uom name by single barcode only. Firstly, I will add a filter that will return the item by the barcode. Then, I will link it to the uom collection in MongoDB in order to retrieve the uom name. Next, I will connect the item name and uom name that is being retrieved in a string and return the string. 

After that, I have done the second function which is to retrieve the item name and uom name list by barcode list query. For this function, I have used the in function for the filter so that it can filter the item based on the barcode list. Then, I will link the item to the uom collection in order to retrieve the uoms for the items. Next, I will connect the item name and uom name that is being retrieved in a string for each of the items and add it to the list of strings. Lastly, I will return the list of strings. Lastly, I have linked this function to the get order by id function in the handler part. I need to set the name and uom name for the dto in this query. Firstly, I will use the function of get item name by barcode list to retrieve the list of strings. Next, for each of the strings in the result list, I will split the string into two parts. The first part is the item name, while the second part is the uom name and set it to the dto.

After finishing these tasks, my internship has ended. During this internship, I have learned a lot about the knowledge of backend programming in order to construct an in-house system for a company. Besides that, I have also learned how to interact more with SQL databases, and MongoDB databases in order to retrieve or update data. I would like to thank you to Mr. Peter and Tong Hin company for giving me such a good opportunity to become an intern in the company. This internship has given me a good impression and it has motivated me to become a better software developer in the future.

Last week, I worked on the payment page. The payment page displays all records of payments made, and users can edit and delete them. This payment page will not be visible to all users, only for specific users. The user can then record all payments and compute revenue. Because the payment page is restricted from all the users, I should implement a regret feature. This is because the cashier may mistakenly make a fake order payment. The cashier can remove the most recent payment on the order page without going to the payment page.

Following that, I resolved the tax and payment problems. Previously, the tax would be calculated in the backend rather than displayed on the order page. So I change some code to make the tax visible on the order page. On the other hand, I used the payment API on the order page to display the remaining amount due by the customer. This is because the payment may be made multiple times on different dates, but the order system will only display the entire order amount, not the remaining balance. The cashier will now know exactly how much money is left to pay.

I also included the upload image capability. The upload image function allows the user to upload payment transactions. Because the order system accepts multiple payment entities, the system requires the receipt as proof. The payment will not be processed if the customer does not submit a proof of the payment. Furthermore, I discovered that the customer page has a difficulty with address billing and address delivery. When I click on the “billing” or “delivery” buttons, the system changes color, and this should not happen more than once. However, if more than one address contains the same information, the color of all “billing” or “delivery” buttons will change. These concerns are connected to backend API issues. I asked other colleagues and asked him to repair the array. Now I should be able to modify the code and resolve the issue.

In conclusion, despite having completed a few tasks over the span of several months, such as constructing a prototype, developing the customer page, order page, payment page, and order list page, I still left several parts unfinished. For example, I had not completed the testing section. I’ll do my best to finish the test within the last week of the internship, and hopefully on schedule.

Last week, I successfully updated the chart upon button click, but encountered a challenge when integrating the region manager code, which prevented the chart from reflecting updated values. After some troubleshooting, I discovered that changing the XAML property from Prism region manager to a local property allowed the chart to update its values appropriately. Upon further testing, I found that using the local approach, where I explicitly set the data context for data binding, provides more direct control and ensures changes are reflected when a command is triggered. However, I still intended to investigate why using ContentControl is not working; there might be something missing in the code.

Moving forward, I aimed to test the chart’s responsiveness and implement date-based data filtering for a more refined display of values. I encountered an issue with the method not working, despite using a simple ‘Linq’ approach and correctly retrieving the data. It turned out to be a simple mistake where my model and JSON date names were not identical. I made the necessary adjustments and the charts was able to work as expected.

The following day, I was assigned a small UI modification to enhance the user experience in my previous task. Towards the end of the week, I successfully modified the UI, ensuring the changes reflected in both the view and view model. As the new week began, my intention was to thoroughly test the UI to ensure no careless bugs would surface.

This week, I began by reworking the item API to include the image path and uom name property to the item list dto in order to obtain the item list query. This is crucial because in order to query the item list, the frontend developer requires these properties. Additionally, when I query the item list using the search name as the basis, I also change the regex options. I’ve added the option which tells the item list query to disregard any whitespace users may have inadvertently entered.

In addition, I eliminate some superfluous DTO that is not really needed when querying item data for barcodes, as this will make the results easier for frontend developers to read. I’ve also introduced more properties, which contains the more sub-properties. In addition, I have updated the item detail dto with the UomName attribute.

Mr. Peter discovered that after looking over my code, I needed to add the uom functionality to the item API. This is so that it can remember the uom that is being made or added to each thing. I need to know the uom that is within every object. Thus, I’ve added a capability to uom that allows you to obtain uom details or lists by id. Since there would be differences in subprice for each uom, I have further included the subprice attribute for each uom.

In order to verify the requirement that the entity id and barcode cannot exist more than once, I have finally refactored the item entity API code. In order to prevent the database from returning an error each time a user adds a new item entity with the same barcode and entity ID, I inserted the unique complex key when I created the item entity table.

This week, I started doing the “Item” page which will using the API. First of all, I modified the style of the “Item” page, I was using the style in the past few weeks before when I was creating the page by using mock data. Then, I convert the CSS style to the Tailwind CSS style too to ensure it is using the first priority style that I want. After calling the API, I use the “useDidMountEffect() function instead of using useEffect() function to display the item list. When the user clicked one of the Item box, it will display the item details.

Besides that, I also modified the function by implementing Regex. This will change the UI implementation to be more user friendly. When there is no matching for the input value, it will prompt out a message “No items match the search criteria”.

At the end of the week, I display the Pricing panel which consist of the multiple properties from the data. When the user clicked to the “Price” button, it will pop out the detail panel. On the other hand, I also create a “Search Category” button beside the search bar to let the user search the category. Inside the category panel, I separate the main category by using bold font and different color comparing to their child category. Each child will leave some left space to let the user know which category is parent or child. However, this category function I haven’t modify the function which will able to filter the item box according to it’s category.

At the onset of the previous week, I was notified about a bug in the UI of a feature I had previously implemented. Upon investigation, I uncovered three bugs demanding my immediate attention. The initial issue surfaced in the backend, specifically in the pagination of the entity list, which displayed inaccurate pages when users applied filters due to a misconfigured logic. A minor adjustment rectified this, ensuring accurate pagination details.

The subsequent backend bug pertained to the logic governing an update feature for the same entity. While all previous tests, including the update logic, had passed successfully, I overlooked a condition where the update involved adding more than one new contact. Identifying the source of the bug, I invested time in refining the logic to incorporate this new condition without unnecessarily complicating the existing structure.

The final bug resided in the UI and required a slight modification of the code. Following resolution, I conducted a new test specifically targeting the previously overlooked condition, as advised by Mr. Peter. Subsequently, I returned to my ongoing task which is the report data module. My primary objective for the week was to enable the LiveChart-implemented chart to dynamically update its values and display the latest data. Although successful in updating the chart upon button click, integrating the region manager code posed a challenge, preventing the chart from reflecting updated values.

Addressing this issue will be my foremost priority in the upcoming week. Additionally, I aim to enhance the chart’s responsiveness and implement date-based data filtering for a more refined display of values.

Merry Christmas and a Happy New Year! Despite the fact that last week was a holiday mood week, I still completed a few tasks. First, I finished the payment prompt page. This page will allow the user to enter the payment amount and other data. Initially, I intended to include a numeric keypad within the prompt page, but I discovered that there was no suitable plugin that could be installed in my code. As a result, I converted the numeric keypad to a variety of buttons. These buttons allow the user to increase the payment amount by 10, 20, 50, or 100 MYR. If the user wished to enter a more precise figure, such as 30.50 MYR, they had to use the keyboard.

Second, I’d included an invoicing page. After the invoice number is generated, the sales order cannot be modified. If the consumer wishes to add or delete an item from the sales order, they must cancel the order and generate a new one. However, I do not believe this is friendly to the user; the user should be allowed to make changes to the sales order even after the invoice has been generated. As a result, I’ll ask Mr Peter after that.

Third, I had added a page for item selection to the order page. The user will be able to view and search for items by name, and then add them to the sales order. To insert the item, the user will be able to either scan the item or manually type the name. As a result, I no longer need to use dummy data to generate the sales order. Finally, I went over the code I wrote and updated some of it. I discovered that several of my codes were redundant and can be removed. My code is now shorter and clearer, making it easier for other software developers to look through.

Finally, the order page is practically finished, with only minor testing and functionality remaining. These minor features will be implemented during the coming week, and I will try to test my code.