Notification Inbox
🔔 Notifications 3
Unread (3)
Assignment scored — Introduction to TVET Systems
Your assignment "Module 1 Case Study" has been scored. Score: 85/100
2 minutes ago
Course announcement — Electrical Engineering Fundamentals
Reminder: Assignment deadline extended to Friday, 30 May 2026
3 hours ago
Read
Certificate ready — Python for Data Analysis
Congratulations! Your certificate is ready. Download it from your profile page.
Yesterday
New course available — Advanced Welding Techniques
A new course matching your interests has been published.
2 days ago
Open Notification Inbox (UC-NOT.03 scenarios) →
Test User Log Out Prototype
🎬 Simulate:

Notification Inbox

Panel This panel is opened by clicking the 🔔 bell icon in the navigation bar. Shown here as a standalone page for prototype review.

Notifications 3
Unread (3)
Your assignment has been graded
You scored 85/100 on "Business Communication" assignment.
2 hours ago
New course available: "Advanced Excel 2026"
A new course matching your interests has been added to the catalog.
Yesterday
Assignment deadline reminder
Your assignment in "Data Analysis" is due in 2 days.
2 days ago
Read
Certificate issued for "Digital Marketing Basics"
Congratulations! Your certificate is ready to download.
3 days ago
Payment receipt for course purchase
Payment confirmed for "Project Management Fundamentals".
1 week ago

Screen Flow (from flow.puml):

→ select notification → navigate to context page → mark all as read → stays on panel (count → 0) → close panel → exit
📝 Spec notes — UC-NOT.03 / SCR-NOT.06 (fields, actions, requirements)
Identity
  • Screen: SCR-NOT.06 — Notification Inbox (panel)
  • Use case: UC-NOT.03 — View Notification Details
Brief description

Dropdown panel opened from the bell icon — displays in-app notifications sorted newest first, divided into Unread / Read groups. User taps a notification to navigate to relevant context, or taps "Mark all as read" to clear all unread. Panel closes on outside click.

Fields
  • unread_count "Unread count" — number · computed · InAppNotification.is_read · read-only · Header
  • notification_title "Title" — text · InAppNotification.title · read-only · Notification list
  • notification_body_preview "Summary (truncated)" — text · max 100 chars · InAppNotification.body · read-only · Notification list
  • notification_time "Time" — datetime · relative format ("2 minutes ago") · InAppNotification.created_at · read-only · Notification list
  • is_read "Read status" — boolean · InAppNotification.is_read · read-only · Notification list
  • empty_message "Empty state message" — literal "No notifications yet" · visible when notification_count == 0 · Empty state
Actions
  • select_notification "Select notification" — always enabled · marks as read + navigates to context page · triggers UC-NOT.03-M-2
  • mark_all_read "Mark all as read" — enabled when unread_count > 0 · triggers UC-NOT.03-A-2A-1
Additional requirements
  1. Unread items have a visually distinct background color or indicator, clearly differentiated from read items.
  2. Time is displayed in relative format ("2 minutes ago", "Yesterday") rather than absolute timestamp.