Notification Centre

Notification Centre

The Notification Centre is accessible from every page via the bell icon in the application header. It provides a quick-glance dropdown for recent alerts and a full-page view for managing your complete notification history.

Bell Icon States

State	Icon	Meaning
No unread	mdi-bell-outline	All notifications have been read or archived
Has unread	mdi-bell (filled)	One or more unread notifications exist; badge shows count (max 99+)
Urgent	mdi-bell-ring	At least one urgent or high-priority notification is pending

Bell Animations

• Pulse — Triggers on new notification arrival. The icon scales from 1 to 1.2, back to 1, then to 1.1, and returns to 1 over a 1-second duration.
• Shake — Triggers on urgent notification arrival. The icon rotates between -10 and +10 degrees over a 600-millisecond duration.

Dropdown Panel

Clicking the bell opens a dropdown panel with four tabs, each representing a notification category. Each tab displays a coloured unread badge when it contains unread items.

Tab	Icon	Badge Colour	Content
System	mdi-bullhorn	Info blue	Platform broadcasts, maintenance, security notices
Community	mdi-account-group	Purple	Forum activity, roadmap updates, community mentions
Business	mdi-briefcase	Primary blue (#1976D2)	Project, equipment, invoice, crew, warehouse, repair alerts
Connect	mdi-handshake	Teal	Marketplace connections, reviews, boost notifications

Individual Notification Anatomy

Each notification item in the dropdown displays the following elements:

• Avatar — A 40px circular avatar coloured by notification type (blue for business, purple for community, teal for connect, info blue for system)
• Title — Bold text summarising the event (e.g. "Invoice #1042 Paid")
• Subtitle — Up to two lines of detail text, truncated with ellipsis if longer
• Timestamp — Relative time (e.g. "3 minutes ago", "2 hours ago")
• Priority badge — Shown only for urgent or high priority notifications; uses error red for urgent and warning amber for high

Notification Actions

Each notification in the dropdown supports the following actions via a three-dot menu:

• Mark as read / Mark as unread — Toggle the read state; unread items display a 3px primary-coloured left border and a light background tint
• Archive — Move the notification to the Archived tab (not available for Community or Connect notifications)
• Delete — Permanently remove the notification (soft delete)

Dropdown Limits

The dropdown shows a maximum of 10 items per tab. A "View All Notifications" link appears in the footer, navigating to the full Notifications page at /notifications.

Full Notifications Page

The /notifications page mirrors the dropdown layout but adds the following features:

• Archived tab — A fifth tab that displays all previously archived notifications
• Stats cards — Four summary cards at the top of the page showing System count, Community count, Business count, and Total Unread (displayed in error red)
• All / Unread toggle — Filter between all notifications and unread-only within each tab
• Sort options — Newest First, Oldest First, Unread First, Priority (urgent and high appear at the top)
• Pagination — Business notifications are paginated for performance; other tabs load in full
• Mark All as Read — Bulk action button to clear all unread notifications in the active tab

Unread Highlighting

Unread notifications are visually distinguished from read items with two cues:

1. A 3px left border in the primary colour (#1976D2)
2. A light background tint to differentiate from the standard white background

Real-Time Updates

New notifications arrive instantly via WebSocket (Laravel Reverb). When a new notification is received:

1. The bell icon updates its state and plays the appropriate animation (pulse or shake).
2. The unread badge count increments.
3. The notification appears at the top of the relevant tab if the dropdown is open.
4. A desktop notification is shown if the user has granted browser notification permission and the desktop channel is enabled.