Cleaning Audit Tool
What is the cleaning Audit Tool? 馃
Cleaning Audit Tool is an auditing app that I made for a hospital located in the western suburbs of Victoria state, Australia.
The hospital had cancelled their subscription to a 3rd party auditing web software and wanted their own app developed.
Coming out of coding bootcamp, this was a great opportunity to practice and expand my web development skills.
How I built it - tech stack
They gave me the freedom to use my choice of the tech stack which turned out to be:
路 Material UI for Front End - Pre built components such as the radio buttons for multi choice options and date pickers were needed to speed up the development time.
路 Mssql and Sequelize ORM for Backend - the dev team there used Mssql, and with my MongoDB experience I thought it best to use an ORM (Sequelize)
路 UseForm Hook for forms - UseForm hook was a very convenient package that helped with the complex form submissions.
路 Redux for state management - Redux was used in this app for user privilege management. The app had 'task roles', so redux was used to manage that.
路 Deployment - all apps were deployed with docker on Azure as an App Service.
App preview
1. Functional Area Search
The user will need to search up the functional area - this is simply a collection of rooms to audit
They will filter, starting from the campus, followed by buildings, floors and then finally the functional area
They will press the 'Submit' button, which will become enabled as soon as all the fields are selected
2. Room Select
The user will see a list of rooms
The room number and room name is shown
The 'Add Room' button will lead to a page to add a new room
Clicking one of these room cards will direct user to a single room page
( See #3 )
3. Single Room
This single room page is showing all the areas we must audit ( here we only see 5 )
These elements the user sees are the criteria for the audit
The 'N/A' button will make it so user does not have to audit the element, but that is a very critical feature and only admins have this privilege
Pressing one of these elements will lead to the sub elements / audit prompts
( See #4 )
4. Room Audit Prompt
The audit prompts are given three options, "YES", "NO" and "N/A"
Only by pressing the 'NO' button does the extended collapsible form open
5. Audit Form
The user will fill the form with the values given in the dropdowns
Photo is added by sending files to a Microsoft Power Automate server and a url link to the photo is returned
Photo preview is shown, the bin icon will delete the photo from local save
6. Room Audited
Once all the elements and sub elements are audited, the rooms become disabled (Blue room card)
(See slide 2)
Rooms are locked from further audit, until the next audit date which is displayed
The user will press the submit functional area and a summary information card is shown
The user can go back to the audit page ( See #1 ) or goto the Action Plan ( See #7 )
7. Admin Grid View
The Action Plan view shows all the elements that had failed the audit, meaning at the audit form fill out ( See #5 ), auditor had pressed 'NO'
Currently the view is in Grid View but user can see it in Card View ( See #9 )
User can export the failed audits into CSV ( See #8 )
The 'Column Setting' tab controls which fields the user wants to see
They must press 'Save Settings' so the app remembers it next time
8. Export CSV View
Pressing the 'Export CSV' ( See #7 ) will export all the failed audits in a similar view to the grid view
All the column settings changes will also be reflected here
9. Admin Card View and sign off
Pressing the items in card view is convenient as it shows more information with the drawer component
There is a sign off section at the button to sign off on failed audits that have been corrected
User can leave or not leave a comment, then simply sign off and the item will be taken off the failed audit view