We're working with community non-profits who have a Host Home or empty bedrooms initiative to develop a workflow management tool to make the process scalable (across all providers), reduce institutional bias, and effectively capture data.
Made the Sections tab sections.tsx\intakeProfile\index.tsxinProgressIcon.tsxlockedIcon.tsx
Added styling based on the status of the section task useStatusStyling.tsx
Added styling to nav buttons and made them responsive
Nav buttons work for moving throughout the form
Cleaned up files by removing application Context wrapper along with old sections component \guestApplicationFormGuestApplicationSchema.ts
Rationale behind the changes?
Styling for the status is set with the intent of when a user's profile is pulled and compared to fieldGroups, they'll have incorporated data on the status of each task which will then render the type of styling.
Since we are now using IntakeProfile to control the profile form, the previous context approach and related files were removed.
Basic functionality for the nav buttons to allow navigating the form. Currently, the only option I found is obtaining the index of the current groupID and moving to the next index item on the fieldGroup object. I am open to any other approaches to this, but it is functional as is.
Testing done for these changes
Changing the status on the sections tab between the 4 options of complete | incomplete | locked | partial
Testing on mobile, desktop, and tablet view to check layout and button responsiveness.
Tested the buttons by going back and forth including trying to get out of bounds on the first and last item
What did you learn or can share that is new?(optional)
Being able to use breakpoints on MUI. This is an easy way to make an application responsive based on the screen view size.
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are appliedVisuals after changes are applied
Closes #684
What changes did you make?
sections.tsx\intakeProfile\index.tsxinProgressIcon.tsxlockedIcon.tsxuseStatusStyling.tsx\guestApplicationFormGuestApplicationSchema.tsRationale behind the changes?
fieldGroups, they'll have incorporated data on the status of each task which will then render the type of styling.IntakeProfileto control the profile form, the previous context approach and related files were removed.Testing done for these changes
complete | incomplete | locked | partialWhat did you learn or can share that is new?(optional)
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are applied
Visuals after changes are applied