# Notifications

## Purpose
Notifications provides a comprehensive notification management system. It allows administrators to send, schedule, and manage notifications to different user groups (Admin, Merchant, Agent). The page includes notification creation, history tracking, and priority management.

## Components
- Page header with icon and title
- Statistics cards (4 metrics)
- Send Notification form
- Notification history data table
- Create Notification modal
- Schedule Notification modal
- Business Rules section

## Header
- **Title**: "Notification Management"
- **Subtitle**: "Send and manage system notifications"
- **Page Icon**: Blue background with bell icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Sent | `totalSent` | All notifications sent |
| Read Rate | `readRate` | Percentage read |
| Unread | `unreadCount` | Unread notifications |
| Scheduled | `scheduledCount` | Scheduled notifications |

## Filters
| Filter | Type | Options |
|--------|------|---------|
| Type | select | Info, Warning, Success, Error |
| Target | select | All, Admin, Merchant, Agent |
| Priority | select | Low, Medium, High |

## Search
- **Placeholder**: "Search notifications..."
- **Searches**: Title, message content

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Send Notification | Send immediately | Form |
| Schedule | Schedule for later | Form |
| Delete | Delete selected | Action bar |
| Mark as Read | Mark selected as read | Action bar |
| Filter | Apply filters | Filter bar |

## Forms

### Send Notification Form
| Field | ID | Type | Required | Options |
|-------|-----|------|----------|---------|
| Title | `notifTitle` | text | Yes | — |
| Message | `notifMessage` | textarea | Yes | — |
| Type | `notifType` | select | Yes | Info, Warning, Success, Error |
| Target | `notifTarget` | select | Yes | All, Admin, Merchant, Agent |
| Priority | `notifPriority` | select | Yes | Low, Medium, High |

### Schedule Notification Modal
| Field | ID | Type | Required |
|-------|-----|------|----------|
| Schedule Date | `scheduleDate` | date | Yes |
| Schedule Time | `scheduleTime` | time | Yes |

## Tables

### Notification History Table
| Column | Description |
|--------|-------------|
| ID | Notification identifier |
| Title | Notification title |
| Type | Notification type (Info, Warning, Success, Error) |
| Target | Target audience |
| Status | Read/Unread status |
| Date | Sent date |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| View | View notification details | Eye |
| Delete | Delete notification | Trash |
| Mark as Read | Mark as read | Check |

## Workflow
1. Admin navigates to Notifications page
2. Views statistics cards showing notification counts
3. Fills in notification form (title, message, type, target, priority)
4. Can send immediately or schedule for later
5. Views notification history in table
6. Can mark notifications as read
7. Can delete notifications
8. Can filter by type, target, priority
9. Can search notifications by content

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `notifications` | Notifications | Page title |
| `notification_management` | Send and manage system notifications | Subtitle |
| `create_notification` | Create Notification | Form title |
| `title` | Title | Field label |
| `message` | Message | Field label |
| `type` | Type | Field label |
| `target` | Target | Field label |
| `priority` | Priority | Field label |
| `send_notification` | Send Notification | Button text |
| `schedule` | Schedule | Button text |
| `delete` | Delete | Button text |
| `mark_as_read` | Mark as Read | Button text |
| `filter` | Filter | Button text |
| `total_sent` | Total Sent | Stat label |
| `read_rate` | Read Rate | Stat label |
| `unread` | Unread | Stat label |
| `scheduled` | Scheduled | Stat label |
| `id` | ID | Column |
| `status` | Status | Column |
| `date` | Date | Column |
| `actions` | Actions | Column |
| `info` | Info | Type |
| `warning` | Warning | Type |
| `success` | Success | Type |
| `error` | Error | Type |
| `all` | All | Target |
| `admin` | Admin | Target |
| `merchant` | Merchant | Target |
| `agent` | Agent | Target |
| `low` | Low | Priority |
| `medium` | Medium | Priority |
| `high` | High | Priority |
| `notification_history` | Notification History | Section title |
| `notification_broadcast` | Broadcast to all users | Feature |
| `schedule_for_later` | Schedule for Later | Modal title |

## Responsive Requirements

### Desktop (≥1024px)
- 4-column statistics grid
- Side-by-side form and table
- Full-width table

### Tablet (768px–1023px)
- 2-column statistics grid
- Stacked form and table
- Horizontally scrollable table

### Mobile (<768px)
- 2-column statistics grid
- Full-width stacked layout
- Horizontally scrollable table

## API Dependency
- **Notifications API**: GET `/api/notifications` — List notifications
- **Send Notification**: POST `/api/notifications` — Send notification
- **Schedule Notification**: POST `/api/notifications/schedule` — Schedule notification
- **Delete Notification**: DELETE `/api/notifications/:id` — Delete notification
- **Mark as Read**: PUT `/api/notifications/:id/read` — Mark as read
- **Batch Delete**: POST `/api/notifications/batch-delete` — Delete multiple