Update Learner Reports pages to have additional information and updated UI

[marcellamaki]

Overview

For our information architecture restructuring, we are going to be "squishing together" some of our current pages and components to move us to a different page naming system and organization.

Prerequisites

• Run Kolibri or kolibri-demo locally to get familiar with the current state of the UX/UI

Diff - current state vs new state

Reports: Learners List	Learner Report

These two views, the "learner list" preview of reports, and the individual lesson report, will both be updated with some small modifications:

Reports: Learners List	Learner Report

Tasks

Update the Reports pages at reports/ReportsLearnerReportPage.vue and reports/ReportsLearnerListPage.vue

On reports/ReportsLearnerListPage.vue

• When on this page, the header should be "Learners" instead of reports
• Add class title at the top of the UI
• Add a placeholder KSelect for filtering recipients (i.e. filter by group); this is used across pages and will be implemented separately to do the actual filtering

On reports/ReportsLearnerReportPage.vue

• Update the main header so that the UI is updated to align with the figma and has the more "dashboard" like appearance. (Please refer to the figma directly for precise sizing/spacing, alignment, etc.
• "Lessons completed" is not currently displayed, and adding this - both the UI of it and the calculation, is new and in-scope for the issue
• Use a basic grid that stacks these header elements for mobile responsiveness
• Separate this "header" from the "reports/activity" tabs below, but for now, do not make changes to the "Lessons Assigned / Quizzes Assigned" with separate formats and no "Activity Tabs" (this needs design clarification, and can be done in a follow up issue)

Acceptance Criteria

• tasks above are completed
• All UI adjustments to be aligned to the new spec (i.e. adding top/bottom borders for table rows for readability, updating or removing strings and titles, etc.)

Out of scope

• Removing the KTabsPanel or updating the main navigation titles
• implementing "filter by recipients"
• implementing an "export as CSV" option (either building the export function, or adding the button, this needs design clarification, and can be done in a follow up issue)