feat: Add mentor performance page for team leads #721
feat: Add mentor performance page for team leads #721dhinesh-kumar-m wants to merge 2 commits intoassigned-mentorsfrom
Conversation
dhinesh-kumar-m
commented
Jan 20, 2026
dhinesh-kumar-m
commented
- Introduced a new page for team leads to view mentor performance, including academic and review metrics.
- Created separate components for academic and review performance tables, displaying relevant data such as attendance, average ratings, and total reviews.
- Implemented a filter group for enhanced search functionality and navigation.
- Updated the team lead menu to include a link to the new mentor performance page.
- Enhanced the layout and design for improved user experience and consistency across the dashboard.
- Introduced a new page for team leads to view mentor performance, including academic and review metrics. - Created separate components for academic and review performance tables, displaying relevant data such as attendance, average ratings, and total reviews. - Implemented a filter group for enhanced search functionality and navigation. - Updated the team lead menu to include a link to the new mentor performance page. - Enhanced the layout and design for improved user experience and consistency across the dashboard.
- Updated the performance overview HTML to improve the layout and design, including a new header section for "Top Performers." - Added a link to view full reports, enhancing navigation for team leads. - Improved the structure of the navigation tab for better usability and visual clarity.
Summary of ChangesHello @dhinesh-kumar-m, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the team lead dashboard by introducing a comprehensive 'Mentor Performance' page. This new feature provides team leads with a centralized view of mentor effectiveness, broken down into academic and review-based metrics. The implementation includes new data structures, dedicated UI components for displaying and filtering this information, and updates to the navigation menu for easy access, ultimately empowering team leads with better insights into mentor contributions. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new mentor performance page for team leads, complete with academic and review metrics tables. The implementation is well-structured into separate components. However, I've identified a few high-severity issues related to accessibility and data correctness in the new table components. Specifically, there are duplicated HTML IDs which will cause issues, and a bug in displaying mentor ranks that will show incorrect data when tables are sorted. I've also noted some minor code quality improvements for duplicated CSS classes. Please address the high-severity issues to ensure the page functions correctly and is accessible.
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Rank | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col" class="w-40"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Mentor | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
|
|
||
| <th scope="col" class="min-w-40"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Batches Handled | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
|
|
||
| <th scope="col" class="min-w-40"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Student Attendance % | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
|
|
||
| <th scope="col" class="min-w-40"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Average Student Score % | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> |
There was a problem hiding this comment.
The id="hs-pro-eptai" is used for all sortable column header buttons in this table. Element IDs must be unique within an HTML document. This duplication will cause issues with accessibility and JavaScript functionality.
Please assign a unique ID to each button. For example:
academic-sort-rankacademic-sort-mentoracademic-sort-batches
This will also allow you to correctly pass the column_id to the table_sort.html partial, which is currently not being done.
| <circle cx="12" cy="8" r="6" /> | ||
| </svg> | ||
| {% else %} | ||
| <span class="text-sm text-stone-800 dark:text-white ms-1">#{{loop.index}}</span> |
There was a problem hiding this comment.
The rank is being displayed using loop.index. This is incorrect because if the data is sorted by any other column, loop.index will not reflect the mentor's actual rank. You should use performer.rank to display the correct rank.
<span class="text-sm text-stone-800 dark:text-white ms-1">#{{performer.rank}}</span>
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Rank | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col" class="w-40"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Mentor | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
|
|
||
| </th> | ||
|
|
||
| <th scope="col" class="min-w-36"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Average Rating | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
|
|
||
| <th scope="col" class="min-w-36"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| Total Reviews | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
|
|
||
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| 5 Stars | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| 4 Stars | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| 3 Stars | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| 2 Stars | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> | ||
| <th scope="col"> | ||
| <!-- Sort Dropdown --> | ||
| <div class="hs-dropdown relative inline-flex w-full cursor-pointer"> | ||
| <button id="hs-pro-eptai" type="button" | ||
| class="px-4 py-2.5 text-start w-full flex items-center gap-x-1 text-sm font-normal text-stone-500 focus:outline-hidden focus:bg-stone-100 dark:text-neutral-500 dark:focus:bg-neutral-700" | ||
| aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> | ||
| 1 Star | ||
| <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | ||
| viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="m7 15 5 5 5-5" /> | ||
| <path d="m7 9 5-5 5 5" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {% include 'src/simba/partials/dropdowns/table_sort.html' %} | ||
| </div> | ||
| <!-- End Sort Dropdown --> | ||
| </th> |
There was a problem hiding this comment.
The id="hs-pro-eptai" is used for all sortable column header buttons in this table. Element IDs must be unique within an HTML document. This duplication will cause issues with accessibility and JavaScript functionality.
Please assign a unique ID to each button. For example:
review-sort-rankreview-sort-mentorreview-sort-rating
This will also allow you to correctly pass the column_id to the table_sort.html partial, which is currently not being done.
| <circle cx="12" cy="8" r="6" /> | ||
| </svg> | ||
| {% else %} | ||
| <span class="text-sm text-stone-800 dark:text-white ms-1">#{{loop.index}}</span> |
There was a problem hiding this comment.
The rank is being displayed using loop.index. This is incorrect because if the data is sorted by any other column, loop.index will not reflect the mentor's actual rank. You should use performer.rank to display the correct rank.
<span class="text-sm text-stone-800 dark:text-white ms-1">#{{performer.rank}}</span>
| <tbody class="divide-y divide-stone-200 dark:divide-neutral-700"> | ||
| {% for performer in review_performance %} | ||
| <tr> | ||
| <td class="size-px whitespace-nowrap px-4 py-1 px-4 py-4 text-start"> |
There was a problem hiding this comment.
The px-4 class is duplicated in this td element. You can remove one of them to clean up the code.
<td class="size-px whitespace-nowrap py-4 text-start px-4">
| <span class="text-sm text-stone-800 dark:text-white ms-1">#{{loop.index}}</span> | ||
| {% endif %} | ||
| </td> | ||
| <td class="size-px whitespace-nowrap px-4 py-1 px-4 py-1"> |
There was a problem hiding this comment.
The px-4 py-1 classes are duplicated in this td element. You can remove the duplicate to clean up the code.
<td class="size-px whitespace-nowrap px-4 py-1">
1 participant
