Alerts

Header Section

Located at the top of the page with key information and actions:

• Page Title: "Alerts" with notification bell icon
• Description: "Alerts History" subtitle
• Search Bar: Quick search across all alert fields
• Action Buttons: Export (permission-based), Refresh, and Filters toggle (permission-based)

Mobile Layout: Header elements stack vertically with icon and title on first row, action buttons on second row.

Desktop Layout: All elements in a single horizontal row with right-aligned actions.

Alert List Area

Central content area displaying alerts:

• Desktop View: Data table with columns for all alert details (width > 1024px)
• Mobile/Tablet View: Card-based layout for easy scrolling (width ≤ 1024px)
• Loading State: Progress indicator during data fetch
• Empty State: Helpful message when no alerts match filters

Filter Panel (Right Sidebar)

Slide-out panel accessible via Filters button:

• Animation: Smooth 300ms slide-in from right side
• Width: 300px fixed width with scroll
• Sections: Period (date range) and Devices filters
• Actions: Reset and Apply buttons at bottom
• Permission Required: canFilterAlerts() permission needed to access

Pagination Bar

Bottom bar with navigation controls:

• Alert Counter: "Showing X-Y of Z alerts"
• Rows Per Page: Dropdown selector (10, 25, 50, 100)
• Page Navigation: First, Previous, Page Numbers, Next, Last buttons
• Persistent Preference: Rows per page selection saved for future sessions

Search Bar Functionality

The search bar provides instant, full-text search across alert data:

• Searchable Fields: Alert messages, device names, event types, descriptions
• Real-Time Search: Results update as you type
• Case Insensitive: Search works regardless of letter casing
• Partial Matching: Find alerts with partial information

Search Examples:

• Type "offline" to find all device offline alerts
• Type "payment" to find payment-related notifications
• Type "Terminal 3" to find alerts from that specific device
• Type "error" to find all error-level alerts

Action Buttons

• Export Button: Download current filtered results to Excel spreadsheet (requires canExportReports permission)
• Refresh Button: Reload alert data to see latest notifications
• Filters Button: Toggle the advanced filter panel open/closed (requires canFilterAlerts permission)

Button Display:

• Desktop: Text buttons with icons (e.g., "Export", "Refresh", "Filters")
• Mobile/Tablet: Icon-only buttons for space efficiency

Start Date & End Date

Filter alerts by when they occurred:

• Start Date: Beginning of date range (inclusive)
• End Date: End of date range (inclusive)
• Date Picker: Calendar interface for easy date selection
• Date Range: From 2020 to current date
• Auto-Adjustment: If end date is before start date, they automatically swap

How to Use:

1. Tap/click on "Start Date" field to open calendar
2. Select your desired start date
3. Tap/click on "End Date" field to open calendar
4. Select your desired end date
5. Click "Apply" to filter alerts

Date Display Format

Dates are displayed in DD/MM/YYYY format:

• Example: 20/12/2025 (December 20, 2025)
• Not Defined: Shows when no date is selected
• Calendar Icon: Visual indicator that field opens date picker

Common Date Range Scenarios

Use Cases:

• Today's Alerts: Set both start and end date to today
• Last Week: Set start date to 7 days ago, end date to today
• Specific Day: Set both dates to the same day
• Month View: Set start date to first of month, end date to last of month
• All Future: Set start date to specific date, leave end date blank

Multi-Select Device Filter

Select one or multiple devices to filter alerts:

• Device List: Automatically populated from devices that have generated alerts
• Multi-Selection: Select multiple devices simultaneously
• Device Icon: Visual device indicator for each item
• Quick Selection: Dropdown interface for easy device selection
• Clear Selection: Remove individual devices by clicking X on selected item

How Device Filtering Works

1. Open the filter panel by clicking Filters button
2. Scroll to "Devices" section
3. Click the device dropdown to see available devices
4. Select one or more devices from the list
5. Selected devices appear as chips/badges
6. Click "Apply" to filter alerts
7. Results show only alerts from selected devices

Device Filter Use Cases

• Device Troubleshooting: Select a specific device to view all its alerts and identify issues
• Zone Monitoring: Select all devices in a specific zone to monitor that area
• Device Comparison: Select multiple devices to compare their alert patterns
• Maintenance Planning: Identify devices generating frequent alerts for maintenance scheduling
• New Device Monitoring: Track alerts from recently installed devices

Desktop Table View

Display Breakpoint: Screen width > 1024px

Full data table with columns for comprehensive alert information:

Mobile/Tablet Card View

Display Breakpoint: Screen width ≤ 1024px

Alerts displayed as cards for touch-friendly navigation:

• Card Header: Alert type and timestamp
• Device Info: Device name with icon
• Alert Message: Description text with severity indicator
• Status Badge: Color-coded status indicator
• Tap to Expand: View full details and available actions
• Swipe Actions: Quick access to common operations

Loading & Empty States

• Loading State: Circular progress indicator with "Loading alerts..." message
• Empty State: Friendly message when no alerts match current filters
• Error State: Clear error message with option to retry
• Auto-Refresh: Consider enabling auto-refresh for real-time monitoring

Alert Information

The detail view displays complete alert information:

• Alert ID: Unique identifier for reference and tracking
• Timestamp: Exact date and time when alert was generated
• Alert Type: Category and severity level (Info, Warning, Error, Critical)
• Device Information: Name, location, type, and current status
• Event Description: Detailed message explaining what triggered the alert
• Alert Status: Current state (New, Acknowledged, In Progress, Resolved)
• Related Events: Connected alerts or events from same device
• Action History: Timeline of actions taken on this alert
• Technical Details: Error codes, system messages, diagnostic information

Alert Severity Levels

• ● Info: Informational notifications (system updates, routine events)
• ● Warning: Potential issues requiring attention (low battery, maintenance due)
• ● Error: Problems affecting functionality (device offline, payment failure)
• ● Critical: Severe issues requiring immediate action (system failure, security breach)

Available Actions

Actions available depend on alert type and user permissions:

• Acknowledge: Mark alert as seen and under review
• Assign: Assign alert to specific team member for resolution
• Add Note: Attach internal notes about investigation or resolution
• Resolve: Mark alert as resolved with resolution details
• View Device: Navigate to device details page
• Create Ticket: Generate support ticket for complex issues
• Silence: Temporarily suppress similar alerts from same device
• Export Details: Download alert information as PDF or JSON

Related Information

Access related records directly from alert details:

• Device History: View complete device event log and maintenance records
• Similar Alerts: Find other alerts from same device or type
• Device Configuration: Check device settings and parameters
• Zone Information: View zone details if alert is location-specific
• System Health: Check overall system status and metrics

Export Process

1. Apply desired filters to narrow down alert set (optional)
2. Click the "Export" button in the header area
3. System generates Excel file with current filter criteria
4. Excel save dialog appears with download progress
5. Choose location and save the file to your computer

File Format: .xlsx (Excel 2007+)
Naming Convention: alerts_export_[timestamp].xlsx
Permission Required: canExportReports() permission needed

Exported Data Columns

The Excel file includes comprehensive alert data:

• Alert ID
• Date & Time
• Alert Type/Category
• Severity Level
• Device Name
• Device Type
• Device Location/Zone
• Alert Message
• Event Description
• Status (New, Acknowledged, Resolved)
• Acknowledged By (username)
• Acknowledged Date
• Resolved By (username)
• Resolved Date
• Resolution Notes
• Technical Details
• Error Codes

Export Best Practices

• Filter First: Apply filters before exporting to get exactly the data you need
• Date Range Limits: Use reasonable date ranges to avoid very large files
• Regular Exports: Export weekly alert data for record-keeping and analysis
• Device-Specific Reports: Export alerts by device for maintenance planning
• Compliance Documentation: Export critical alerts for audit trails
• File Organization: Name and organize exported files systematically
• Data Security: Store exported files securely as they contain system information

Rows Per Page

Customize how many alerts display per page:

• 10 rows: Quick loading, more pages to navigate
• 25 rows: Balanced view (typical default)
• 50 rows: Fewer page changes, more scrolling
• 100 rows: Maximum records per page

Persistence: Your selection is saved to preferences and applied automatically in future sessions.

Page Navigation

Multiple ways to navigate between pages:

• First Page: Jump to page 1 (|◄ button)
• Previous: Go back one page (◄ button)
• Page Numbers: Click specific page number to jump directly
• Next: Advance one page (► button)
• Last Page: Jump to final page (►| button)

Current Page: Highlighted page number shows your current position.
Max Pages: System supports up to 99,999,999 pages

Alert Counter

The counter displays your current position:

Format: "Showing X-Y of Z alerts"

• X: First alert number on current page
• Y: Last alert number on current page
• Z: Total alerts matching current filters

Example: "Showing 26-50 of 247 alerts" means you're on page 2 with 25 rows per page, viewing alerts 26 through 50 out of 247 total.

Daily Alert Monitoring

• Review new alerts each morning to identify urgent issues
• Set date filter to "Today" to see current day activity
• Acknowledge critical alerts immediately to alert your team
• Check for patterns in alert frequency that might indicate systemic issues
• Verify that resolved alerts are properly closed
• Monitor device offline alerts for connectivity problems

Alert Response Strategy

• Critical Alerts: Respond within 15 minutes, investigate immediately
• Error Alerts: Respond within 1 hour, plan resolution
• Warning Alerts: Review within 4 hours, schedule maintenance
• Info Alerts: Review daily, document for records
• Always add resolution notes when closing alerts
• Escalate repeated alerts from same device to management

Device Maintenance Planning

• Filter by device to review its complete alert history
• Export device-specific alerts for maintenance reports
• Track alert frequency to identify devices needing service
• Use date range filters to compare device performance over time
• Document recurring issues in device maintenance logs
• Schedule preventive maintenance based on alert patterns

Reporting and Compliance

• Export weekly alert summaries for management reports
• Filter critical alerts for compliance documentation
• Maintain alert exports for audit trails (retain 12+ months)
• Use date range filters to generate monthly reports
• Track alert resolution times for SLA compliance
• Document system downtime using offline device alerts

Efficient Searching and Filtering

• Use specific search terms for faster results (device names, error codes)
• Combine date range with device filters for targeted troubleshooting
• Save frequently used filter combinations as browser bookmarks
• Use search to find specific error messages or codes
• Filter by recent dates first when investigating current issues
• Clear filters between different investigation tasks

Performance Optimization

• Use date range filters to limit result sets for faster loading
• Adjust rows per page based on your connection speed
• Export large datasets rather than scrolling through many pages
• Apply filters before searching to narrow results
• Refresh page periodically to ensure you're viewing latest alerts
• Close filter panel when not in use for better screen real estate