feat: Progress Report Tool

[tunny17]

What does this PR do?

Fixes #313

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] Chore (refactoring code, technical debt, workflow improvements)
• [ ] Enhancement (small improvements)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change adds a new database migration
• [ ] This change requires a documentation update

How should this be tested?

• Go to the /free-tools on the landing page & click on progress report

Checklist

Required

• [x] Filled out the "How to test" section in this PR
• [x] Self-reviewed my own code
• [x] Commented on my code in hard-to-understand bits
• [ ] Ran pnpm build
• [x] Checked for warnings, there are none
• [x] Removed all console.logs
• [ ] Merged the latest changes from main onto my branch with git pull origin main
• [ ] My changes don't cause any responsiveness issues

Appreciated

• [ ] If a UI change was made: Added a screen recording or screenshots to this PR
• [ ] Updated the ClassroomIO Docs if changes were necessary

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cio-cloud	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 5:14am
cio-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 5:14am
cio-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 5:14am

[github-actions[bot]]

Thank you for following the naming conventions for pull request titles! 🙏

[rotimi-best]

UI improvements

1. Hide Generate progress report on desktop

2. When the user clicks download, show a loading state but changing the text to Loading...

3. Disable download until all fields are filled.

[rotimi-best]

@tunny17

UX improvements:

• [x] On mobile download doesn't work and I understand why, because you are downloading using $nodeStore which isn't rendered on mobile. Rendering from the dom directly can lead to many inconsistencies where on different screensizes the background image can look different because the width is different - I can send images if you need better understanding.

My recommendation would be that when the user clicks download, you render the container with a width of 550px but it shouldn't be visible to the user and then make sure it can be downloaded. This way both on mobile or any desktop you can make sure that the image is consistent.

• [x] Please remove the gray circle on the progress, the progress doesn't look like the preview. Instead of using a progress bar, please implement it with a html/css to match the design

• [x] Facebook doesn't work

• [x] The text font is not the same as in the design