Notifications

Real-time · Alerts · Preferences

Notification Management

The notification system provides real-time communication through a comprehensive workflow that includes notification creation, delivery tracking, preference management, and user interaction. Built with Laravel Echo for real-time updates and featuring a drawer-based interface for seamless user experience.

Real-time delivery

Instant notifications via WebSocket connections.

Preference controls

User-specific notification type management.

Multi-type support

Todos, assignments, reminders, and system alerts.

Key Features

Core notification capabilities.

🔔

Real-time Notifications

WebSocket-based instant delivery via Laravel Echo.

📱

Drawer Interface

Slide-out notification panel with tabs and actions.

⚙️

Preference Management

User-specific notification type controls.

📊

Read/Unread Status

Track notification status with bulk actions.

�️

Delete Management

Individual or bulk notification deletion.

🔄

Auto-refresh

Automatic updates on new notifications.

Notification Workflow

Complete notification lifecycle.

1️⃣

Event Trigger

System events (todo assignment, completion, due dates) trigger notification creation in Laravel backend.

2️⃣

Database Storage

Notifications stored in database_notifications table with user association and metadata.

3️⃣

Real-time Broadcast

Laravel Echo broadcasts notifications to private channels: company-user.[userId].

4️⃣

Frontend Reception

React hook useCompanyNotifications receives and processes notifications in real-time.

5️⃣

UI Update

Notification drawer updates with badge count, new items, and automatic refresh.

6️⃣

User Interaction

Users can mark as read, delete, or manage preferences through the interface.

Notification Types

Supported notification categories.

✅

Todo Assigned

When a todo is assigned to a user by another team member.

🎉

Todo Completed

When a todo task is marked as completed by assignee.

⏰

Due Date Reminder

Automated reminders for approaching todo due dates.

📢

System Alerts

General system notifications and announcements.

Notifications Management Overview

Visual guide to notification management features.

This video demonstrates the complete notification workflow including real-time delivery, drawer interface, preference management, and notification interactions like marking as read and deletion.

API Endpoints

Available notification API routes.

Method	Endpoint	Description
`GET`	`/api/company/notifications`	Get all notifications with pagination
`GET`	`/api/company/notifications/unread`	Get unread notifications only
`GET`	`/api/company/notifications/unread-count`	Get unread notifications count
`PATCH`	`/api/company/notifications/[id]/read`	Mark specific notification as read
`PATCH`	`/api/company/notifications/read-all`	Mark all notifications as read
`DELETE`	`/api/company/notifications/[id]`	Delete specific notification
`DELETE`	`/api/company/notifications`	Delete all notifications
`GET`	`/api/company/notification-preferences`	Get user notification preferences
`PUT`	`/api/company/notification-preferences`	Update notification preferences

Frontend Components

Key React components and hooks.

Component	Purpose	Key Features
`NotificationsDrawer`	Main notification UI component	Slide-out panel, tabs, badge count, bulk actions
`useCompanyNotifications`	Custom React hook	Real-time updates, API calls, state management
`AccountNotifications`	Settings page component	Preference management, form controls
`NotificationItem`	Individual notification display	Read/unread status, actions, formatting

Data Structure

Notification data format and fields.

Field	Type	Description
`id`	string	Unique notification identifier
`type`	string	Notification type (todo_assigned, todo_completed, etc.)
`title`	string	Formatted notification message (HTML)
`isUnRead`	boolean	Read/unread status
`createdAt`	string	Creation timestamp
`meta`	object	Additional metadata (todoId, navigationPath)

Best Practices

Notification management guidelines.

Practice	Recommendation
Real-time Connection	Maintain stable WebSocket connection for instant updates
Preference Management	Allow users to control notification types per their needs
Performance Optimization	Use pagination for large notification datasets
Error Handling	Implement graceful fallback for connection failures
Data Privacy	Ensure notifications respect user privacy settings

Troubleshooting

Common issues and solutions.

Issue	Fix
Notifications not appearing	Check WebSocket connection and user authentication
Real-time updates not working	Verify Laravel Echo configuration and channel subscription
Preferences not saving	Check API endpoints and user permissions
Badge count not updating	Ensure unread count API is called after notification changes
Drawer not opening	Check component state management and event handlers