Context
A button labeled “Candidates” opens the modal.
The modal shows a list of candidates (scrollable if long).
Clicking on a candidate expands a drawer-like card downward directly under their name (accordion style).
The drawer displays:
Total votes received
Grouped breakdown:
by Year Level
under each year, show Course
under each course, show Track
each Track shows the vote count
Requirements
The modal must:
Use clean, modern components
Be responsive
Prevent background scroll when open
Allow only one candidate drawer open at a time (collapses others)
Each candidate entry includes:
Full name
Optional tag for their position or party
Clickable to expand
Inside the drawer:
Show “Total Votes: X”
Then a grouped structure:
sql
Copy
Edit
2nd Year
→ BSCS
→ Web Dev — 10 votes
→ Data Science — 7 votes
3rd Year
→ BSIT
→ Network — 5 votes
Optional: include subtle animation for drawer expansion
Use soft shadows, clean borders, and avoid heavy color saturation. Maintain visual hierarchy through font weight and indentation. Ensure vote counts are emphasized but not oversized.