Update UI and add additional info to Learner Reports pages

[LianaHarris360]

Summary

This pull request updates the UI for the the Reports pages at reports/ReportsLearnerReportPage.vue and reports/ReportsLearnerListPage.vue.

• Adds header slot to ReportsHeader.vue and class title + placeholder KSelect filter to reports/ReportsLearnerListPage.vue
• Changes the main header in reports/ReportsLearnerReportPage.vue to align with the design specifications in Figma, ensuring it has a more dashboard-like appearance, uses a basic grid that stacks the header elements for mobile responsiveness.
• Implements + integrates a "Lessons Completed" section into the user interface, including the necessary calculations.
• Seperates the header within the ReportsLearnerActivityPage and ReportsLearnerReportPage, without makign changes to the "Lessons Assigned / Quizzes Assigned" sections.

Updated ReportsLearnerListPage:

Updated ReportsLearnerActivityPage:

Updated ReportsLearnerReportPage:

References

Closes #12679

Reviewer guidance

1. Create a class and lesson and assign learner(s)
2. Navigate to the Reports > Learners tab and ensure the UI changes match the (Figma specs)
3. Select a learner to open the ReportsLearnerReportPage and ensure the new header elements are responsive + the calculations for "lessons completed" are correct.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0.dev0_git.20241008210556.pex
Windows Installer (EXE)	kolibri-0.18.0.dev0+git.20241008210556-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0.dev0+git.20241008210556-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0.dev0+git.20241008210556.dmg
Android Package (APK)	kolibri-0.18.0.dev0+git.20241008210556-0.1.4-debug.apk
TAR file	kolibri-0.18.0.dev0+git.20241008210556.tar.gz
WHL file	kolibri-0.18.0.dev0+git.20241008210556-py2.py3-none-any.whl

[marcellamaki]

Nice work, Liana! This looks great