enhance: making teacher name options on absence reporting page distinguishable

[superb-sushi]

Problem

There exists staff members with the exact same name, but with different lesson periods. Staff members who report absence on short notice may fail to select the right staff option, potentially reporting absence for the wrong staff (and resulting in relief duties being generated for the wrong lessons).

How to reproduce

1. Navigate to the absence reporting page
2. Select Haslinda binte Yusof. Take note of the periods.
3. Select a different Haslinda binte Yusof. Notice that the periods differ, for the same exact name.

Proposed Solution

Update the dropdown mapper to append the teacher's subjects inline with their name (as there doesn't exist a proper uid that is user-friendly).

Before:

• John Smith
• John Smith

After:

• John Smith (Math, Physics)
• John Smith (Literature, Philosophy, Chemistry)

Todo

• Update the API/Data query fetching the teacher list to include the subjects.
• Refactor the React combobox component to render the name alongside the ID: ${teacher.name} (${teacher.subjects.map(...)}).
• Ensure the dropdown width handles the extra string length without clipping text.