Last week was all about having solid error handling for the system and validation for the Voiceflow files. Now that we have those key parts finished, we can focus on writing all the developer facing documentation and iterating on our UI.
<aside> 🎯 **What are we looking to achieve?
2. Document business logic and produce first package We need to ensure that all our code is properly documented with inline documentation and comments. This week we aim to make a start on this with our business logic. We also need to move and reimplement some functionalities into our first separate package for Voiceflow diagram conversion.
3. Write up initial report website content With the course deadline just a few weeks away, it's time we started making and putting content on our report website.
</aside>
We recently showed our frontend to our client and TA, and received feedback regarding possible improvements that can be made to the UI for a better user experience. This week we implemented a number of these changes to the UI.
To start, we removed our initial home page and made 'Manage Bots' the first page upon login. We felt that the home page was unnecessary and inconvenient to the user. For this, we added a button to the manage page to deploy a new bot - this leads to the usual upload and deployment stages.
The second (and largest) task was replacing the list of bots with a table of bots on the manage page. This was done to give the user more control and better visualisation of the bots they deploy onto phone numbers. It features headers for bot name, the associated phone number, the date modified, as well as further options for each bot (change phone number and delete bot).
We make use of a public library called [react-table](<https://react-table.tanstack.com>) which has lots of customisable options to display data. At the top, there is a search bar to search for a bot using data from any field. The name, phone number, and date modified columns can be clicked to sort by that field (ascending and descending).
For the new edit and delete buttons:
