Dashboard & Analytics UI

Relevant source files

The following files were used as context for generating this wiki page:

• app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardScreen.kt
• app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsScreen.kt
• app/src/main/kotlin/com/fathiraz/flowbell/presentation/components/StatisticsDashboardComponent.kt
• app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardViewModel.kt
• app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsViewModel.kt
• app/src/main/kotlin/com/fathiraz/flowbell/presentation/components/ConsistentLayoutComponents.kt

The Dashboard and Analytics UI module provides a comprehensive visualization layer for monitoring notification bridge activities. It serves as the primary operational interface, surfacing real-time statistics, delivery success rates, and historical trends of notifications forwarded to webhooks. The system is divided into two primary views: the Dashboard, focused on immediate system status and recent activity, and Analytics, which offers deeper longitudinal insights into notification patterns and application performance.

The UI is built using Jetpack Compose and follows the MVVM pattern, leveraging StateFlow for real-time updates from local Room database repositories. It integrates with developer tools like Chucker and Beagle to provide visibility into network traffic and application state during debugging.

Sources: README.md, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardScreen.kt:70-120, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsScreen.kt:35-50

Dashboard Architecture & Logic

The Dashboard serves as the home screen, providing a "Bento-style" layout of high-level metrics. It monitors the health of the notification queue and displays recent log entries.

Data Flow and State Management

The DashboardViewModel orchestrates data from three repositories: UserPreferencesRepository, NotificationStatisticsRepository, and NotificationQueueRepository. It exposes a DashboardUiState containing immutable data classes for UI rendering.

Key Dashboard Components

Component	Description	Logic / Source
Statistics Grid	2x2 layout showing Total, Success, Failed, and Pending counts.	DashboardScreen.kt:208-320
Success Rate Card	Primary card displaying delivery percentage with a trending icon.	DashboardScreen.kt:335-365
Queue Health	Visual indicator of system health based on queue size and status.	DashboardScreen.kt:372-402
Notification Trends	Canvas-based custom chart drawing notification volume over time.	DashboardScreen.kt:509-569
Recent Activity	Real-time list of the 5 most recent notification events.	DashboardScreen.kt:434-500

Analytics System

The Analytics module provides a detailed breakdown of notification traffic over extended periods (7, 14, 30, or 90 days). It is designed to identify the most active notification sources and delivery bottlenecks.

Component Interaction

The AnalyticsViewModel combines multiple data streams into a single AnalyticsUiState. It handles events for refreshing data and updating date ranges.

Specialized Visualization Sections

The Analytics screen utilizes several specialized composables for data representation:

• Metric Cards: High-level counters for Total, Success, and Failed webhooks using specific color coding (Blue, Green, Red).
• Success Rate Indicator: A circular progress indicator that changes color (Green, Orange, Red) based on the percentage threshold.
• Daily Trends: A bar-chart representation showing notification activity over the selected time period.
• Hourly Distribution: A vertical bar chart showing activity patterns throughout a 24-hour cycle.
• Status Breakdown: A list showing the distribution of notification statuses (SENT, FAILED, PENDING, PROCESSING).

Sources: app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsScreen.kt:111-133, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsScreen.kt:167-200, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsScreen.kt:246-300

Common UI Components & Theming

Both Dashboard and Analytics rely on a set of standardized UI components defined in ConsistentLayoutComponents.kt and ModernColors.kt to ensure a cohesive experience.

Statistics Data Structures

The following data structures underpin the UI visualizations:

data class AppStatistic(
    val packageName: String,
    val appName: String,
    val notificationCount: Long,
    val successRate: Int
)

data class StatusStatistic(
    val status: String,
    val count: Long,
    val percentage: Int
)

Sources: app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/analytics/AnalyticsViewModel.kt:125-155

Layout Standards

• ModernPageHeader: Standardized title and subtitle area with support for action icons (e.g., Refresh).
• ModernContentSection: A container that provides consistent spacing and section headers for bento-style cards.
• Skeleton Loading: The DashboardSkeleton provides animated placeholders during data fetch operations to improve perceived performance.

Sources: app/src/main/kotlin/com/fathiraz/flowbell/presentation/components/ConsistentLayoutComponents.kt:19-50, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardScreen.kt:795-885

Debugging and Operational Visibility

The Dashboard UI includes conditional elements that appear when isDebugModeEnabled is true in user preferences.

• HTTP Inspector: A shortcut to launch the Chucker UI for inspecting webhook payloads and response headers.
• Debug Menu: A shortcut to launch the Beagle debug drawer for application logs and device info.
• Force Actions: Buttons to manually trigger WorkManager rescheduling or immediate queue processing.

Sources: app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardScreen.kt:113-145, app/src/main/kotlin/com/fathiraz/flowbell/presentation/screens/dashboard/DashboardViewModel.kt:145-160

Summary

The Dashboard & Analytics UI provides a robust monitoring framework for the FlowBell notification bridge. By utilizing real-time reactive streams and a specialized bento-style layout, the system ensures that users have immediate visibility into webhook delivery performance and system health. The integration of trend charts and hourly distributions allows for granular performance analysis, while built-in debug tools facilitate rapid troubleshooting during development.