Student Dashboard

[JoshuaTristanWereley]

Develop the student dashboard with the following components:

1. Stats graph representing the student's overall average compared to the class average.
2. Table containing a list of tasks.
3. Calendar widget.
4. List of events for the student.

1. Stats Graph

• [ ] Research and select a graphing library.
• [ ] Create a component for the stats graph.
  • [ ] Fetch student’s overall average and class average data from the backend.
  • [ ] Integrate the selected graphing library.
  • [ ] Display the student's overall average in comparison to the class average.
  • [ ] Add appropriate labels, tooltips, and legends to the graph.
• [ ] Style the graph to match the overall design of the dashboard.

2. Tasks Table

• [ ] Create a component for the tasks table.
  • [ ] Define the table structure.
  • [ ] Fetch the list of tasks from the backend.
  • [ ] Populate the table with the fetched data.
• [ ] Add sorting and filtering functionality to the table.
• [ ] Style the table for a clean and user-friendly appearance.

3. Calendar Widget

• [ ] Research and select a calendar library.
• [ ] Create a component for the calendar widget.
  • [ ] Integrate the selected calendar library.
  • [ ] Fetch calendar events for the student from the backend.
  • [ ] Display the events on the calendar with appropriate details.
• [ ] Add functionality for event interactions.
• [ ] Style the calendar to fit seamlessly into the dashboard.

4. Events List

• [ ] Create a component for the list of events.
  • [ ] Fetch the list of events from the backend.
  • [ ] Display the events in a list format with details such as event name, date, and description.
• [ ] Add functionality to filter and sort the events.
• [ ] Style the events list to align with the dashboard design.

5. Integration and Testing

• [ ] Integrate all the components into the main dashboard page.
• [ ] Ensure data is fetched and displayed correctly for all components.
• [ ] Test the responsiveness of the dashboard on different devices and screen sizes.
• [ ] Perform user testing to ensure the dashboard meets usability standards.

6. Final Touches

• [ ] Optimise the dashboard for performance.
• [ ] Add loading states for data fetching.
• [ ] Implement error handling for failed data fetches.
• [ ] Refactor code for maintainability and readability.
• [ ] Review and finalise styles for a polished look.

8. Deployment

• [ ] Prepare the frontend for deployment.
• [ ] Test the dashboard in a production-like environment.
• [ ] Deploy the updated student dashboard.