🎬 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 course submission has been approved
Congratulations! "Introduction to Digital Marketing" has been approved and published.
New learner registration request
A new learner has submitted a registration request for your institution.
Assignment submission deadline approaching
Reminder: assignment deadline for "Data Analysis Fundamentals" is in 2 days.
Read
Course "Advanced Excel" has been published
The course is now available in the catalog for learners to enroll.
Security login from new device
A login was recorded from a new device. If this wasn't you, please change your password.
Screen Flow (from flow.puml):
→ select notification → navigate to context page
→ mark all as read → stays on panel
→ 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 · Headernotification_title"Title" — text ·InAppNotification.title· read-only · Notification listnotification_body_preview"Summary (truncated)" — text · max 100 chars ·InAppNotification.body· read-only · Notification listnotification_time"Time" — datetime · relative format ("2 minutes ago") ·InAppNotification.created_at· read-only · Notification listis_read"Read status" — boolean ·InAppNotification.is_read· read-only · Notification listempty_message"Empty state message" — text · 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-2mark_all_read"Mark all as read" — enabled when unread_count > 0 · triggers UC-NOT.03-A-2A-1
Additional requirements
- Unread items have a visually distinct background color or indicator, clearly differentiated from read items.
- Time is displayed in relative format ("2 minutes ago", "Yesterday") rather than absolute timestamp.