ECON1220-1E finishes at 12:20, not 12:50 which is displayed in the detail view.

This is beyond a 'quick prototype' now, it is literally a soup of spaghetti code.
Very hard to add features, therefore rewriting the program is required.

The followings are the items to be done:

• Rewrite the current codes, improve modularity and documentation, separate logics & data structures from the React code.
• Add a tab view to store different timetable for class planning, allow user to set name for the tab, maintain backward compatibility to the .xlsx file format.
• Associate tab with sem, so each time the tab is opened the corresponding sem is auto selected.

Example:

Course A: 10/10/2022 - 12/10/2022; 08:30 - 18:20; Mon, Tue, Wed;
Course B: 17/10/2022 - 28/11/2022; 15:30 - 17:20; Mon;

Timetable show 15:30 - 17:20; Mon; as conflicted

A solution should be proposed to alleviate the conflict problem.
Preferably a user friendly feature that requires minimal manual interaction to resolve the problem.

The TimeSlotData.processTimetable function may be too inefficient.
In addition, it is frequently called.
The lag caused by it is especially noticable when the cursor hovers over the course lists, where it has to be called every time it changes the hovered course.

A solution could be separating the processing into small pieces, and only update the required fields.
Such as separate the processing of selected and hovered courses.
And also only provide information to the processing function of which course is removed and added, so that the process can be lighter.