Fix the structure of the website

[ABagram]

Header

1. Current Date, Time, Academic Period No., Week No. (Latter two variables are obtained by comparing the current date to all dates entered by the user for the schedule regarding the academic period.)
2. Upcoming class (same day only)
3. No. of assignments to be submitted for today ### Sidebar Menu

Last two should be configurable (i.e. user should be able to choose whether to make it visible or hidden).

Tabs

To be accessible via the dockable (i.e. minimize/ expand) sidebar dropdown menu.

1. Home - This should show every crucial information related to the current period.
   • Live Weekly Calendar. The canvas element should look similar to that of Google Calendar (refer to the image below).

- Requirements list (table/ card view)

Note

Period refers to semester/ trimester/ quarter depending on the selected choice.

2. Program Overview
   • There should be a progress bar that shows how close the student is to reaching the total number of units required.

Overview

Course Code	Course Section	Professor	Grade	Units

3. Program Flowchart - Each period has its own table with the following details:

   Course Code	Course Title	Units	Pre-requisites	Notes

   and Total Number of Units

   There should be a way for users to know which courses are ready to be enlisted for the succeeding period, so course offering period might be essential.

   For a more ergonomic user experience, there should be an option that allows users to toggle the order of courses (Alphabetical Ascending, Date Added) in that table.

[ABagram]

Academic periods should be in tabs so that users can easily switch between them. Under each academic period, users must be able see the week table, courses list, as well as requirements list. There should be an option for the latter, so that they could filter out completed requirements.

[ABagram]

UI of tasks lists should be modern. Instead of a table, it should be like a card or give users different options to view it.

Users should be able to filter the tasks list, only retaining the ongoing requirements AND/OR view only the requirements for specific courses.
By default, requirements marked as done should be automatically hidden after status change.

Users should be able to view a diagram version of their curriculum/ academic flowchart. This will allow them to see their curriculum audit in a more visual way.

[ABagram]

Account for possibility that user drops or withdraws a certain subject. In that case, under term taken, it should say the academic period when it was taken, next to it is if they have passed/failed/ dropped.