chore(docs, design-system, ping-service): integrate SQLDelight with KMP, refine design-system components, and enhance logging

- Added a comprehensive guide for SQLDelight integration in Kotlin Multiplatform, covering setup for Android, iOS, desktop, and web platforms. - Introduced `DashboardCard` and `DenseButton` to the design system, focusing on enterprise-grade usability and visual consistency. - Enhanced `PingViewModel` with structured logging (`LogEntry`) functionality for better debugging and traceability across API calls. - Updated `AppTheme` with a refined color palette, typography, and shapes to align with enterprise UI standards. - Extended Koin integration and modularized database setup for smoother dependency injection and code reuse.
2026-01-24 00:39:31 +01:00
parent f774d686a4
commit f71bfb292b
11 changed files with 1287 additions and 247 deletions
@@ -1,140 +1,297 @@
 package at.mocode.ping.feature.presentation

-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import at.mocode.frontend.core.designsystem.components.DashboardCard
+import at.mocode.frontend.core.designsystem.components.DenseButton
+import at.mocode.frontend.core.designsystem.theme.Dimens
+
+// --- Refactored PingScreen using Design System ---

-@OptIn(ExperimentalMaterial3Api::class)
@Composable
 fun PingScreen(
-  viewModel: PingViewModel,
-  onBack: () -> Unit = {}
+    viewModel: PingViewModel,
+    onBack: () -> Unit = {}
 ) {
-  val uiState = viewModel.uiState
-  val scrollState = rememberScrollState()
+    val uiState = viewModel.uiState

-  Scaffold(
-    topBar = {
-      TopAppBar(
-        title = { Text("Ping Service") },
-        navigationIcon = {
-          IconButton(onClick = onBack) {
-            Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Zurück")
-          }
-        }
-      )
-    }
-  ) { paddingValues ->
+    // Wir nutzen jetzt das globale Theme (Hintergrund kommt vom Theme)
    Column(
-      modifier = Modifier
-        .fillMaxSize()
-        .padding(paddingValues)
-        .padding(16.dp)
-        .verticalScroll(scrollState),
-      verticalArrangement = Arrangement.spacedBy(16.dp)
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+            .padding(Dimens.SpacingS) // Globales Spacing
    ) {
-      if (uiState.isLoading || uiState.isSyncing) {
-        CircularProgressIndicator()
-      }
+        // 1. Header
+        PingHeader(
+            onBack = onBack,
+            isSyncing = uiState.isSyncing,
+            isLoading = uiState.isLoading
+        )

-      if (uiState.errorMessage != null) {
-        Card(modifier = Modifier.fillMaxWidth()) {
-          Column(modifier = Modifier.padding(16.dp)) {
-            Text(
-              text = "Error",
-              style = MaterialTheme.typography.titleMedium,
-              color = MaterialTheme.colorScheme.error
-            )
-            Text(text = uiState.errorMessage)
-            Button(onClick = { viewModel.clearError() }) {
-              Text("Clear")
+        Spacer(Modifier.height(Dimens.SpacingS))
+
+        // 2. Main Dashboard Area (Split View)
+        Row(modifier = Modifier.weight(1f)) {
+            // Left Panel: Controls & Status Grid (60%)
+            Column(
+                modifier = Modifier
+                    .weight(0.6f)
+                    .fillMaxHeight()
+                    .padding(end = Dimens.SpacingS)
+            ) {
+                ActionToolbar(viewModel)
+                Spacer(Modifier.height(Dimens.SpacingS))
+                StatusGrid(uiState)
            }
-          }
-        }
-      }

-      if (uiState.lastSyncResult != null) {
-        Card(modifier = Modifier.fillMaxWidth()) {
-          Column(modifier = Modifier.padding(16.dp)) {
-            Text(
-              text = "Sync Status",
-              style = MaterialTheme.typography.titleMedium,
-              color = MaterialTheme.colorScheme.primary
-            )
-            Text(text = uiState.lastSyncResult)
-          }
+            // Right Panel: Terminal Log (40%)
+            // Hier nutzen wir bewusst einen dunklen "Terminal"-Look, unabhängig vom Theme
+            DashboardCard(
+                modifier = Modifier
+                    .weight(0.4f)
+                    .fillMaxHeight()
+            ) {
+                LogHeader(onClear = { viewModel.clearLogs() })
+                LogConsole(uiState.logs)
+            }
        }
-      }

-      Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        Button(onClick = { viewModel.performSimplePing() }) {
-          Text("Simple Ping")
-        }
-        Button(onClick = { viewModel.performEnhancedPing() }) {
-          Text("Enhanced Ping")
-        }
-      }
+        Spacer(Modifier.height(Dimens.SpacingXS))

-      Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        Button(onClick = { viewModel.performHealthCheck() }) {
-          Text("Health Check")
-        }
-        Button(onClick = { viewModel.performSecurePing() }) {
-          Text("Secure Ping")
-        }
-      }
-
-      Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        Button(onClick = { viewModel.triggerSync() }) {
-          Text("Sync Now")
-        }
-      }
-
-      if (uiState.simplePingResponse != null) {
-        Card(modifier = Modifier.fillMaxWidth()) {
-          Column(modifier = Modifier.padding(16.dp)) {
-            Text("Simple / Secure Ping Response:", style = MaterialTheme.typography.titleMedium)
-            Text("Status: ${uiState.simplePingResponse.status}")
-            Text("Service: ${uiState.simplePingResponse.service}")
-            Text("Timestamp: ${uiState.simplePingResponse.timestamp}")
-          }
-        }
-      }
-
-      if (uiState.enhancedPingResponse != null) {
-        Card(modifier = Modifier.fillMaxWidth()) {
-          Column(modifier = Modifier.padding(16.dp)) {
-            Text("Enhanced Ping Response:", style = MaterialTheme.typography.titleMedium)
-            Text("Status: ${uiState.enhancedPingResponse.status}")
-            Text("Timestamp: ${uiState.enhancedPingResponse.timestamp}")
-            Text("Circuit Breaker: ${uiState.enhancedPingResponse.circuitBreakerState}")
-            Text("Response Time: ${uiState.enhancedPingResponse.responseTime}ms")
-          }
-        }
-      }
-
-      if (uiState.healthResponse != null) {
-        Card(modifier = Modifier.fillMaxWidth()) {
-          Column(modifier = Modifier.padding(16.dp)) {
-            Text("Health Response:", style = MaterialTheme.typography.titleMedium)
-            Text("Status: ${uiState.healthResponse.status}")
-            Text("Healthy: ${uiState.healthResponse.healthy}")
-            Text("Service: ${uiState.healthResponse.service}")
-          }
-        }
-      }
+        // 3. Footer
+        PingStatusBar(uiState.lastSyncResult)
+    }
+}
+
+@Composable
+private fun PingHeader(
+    onBack: () -> Unit,
+    isSyncing: Boolean,
+    isLoading: Boolean
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.fillMaxWidth().height(40.dp)
+    ) {
+        IconButton(onClick = onBack) {
+            Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back", tint = MaterialTheme.colorScheme.onBackground)
+        }
+        Text(
+            "PING SERVICE // DASHBOARD",
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier.weight(1f).padding(start = Dimens.SpacingS)
+        )
+
+        if (isLoading) {
+            StatusBadge("BUSY", Color(0xFFFFA000)) // Amber
+            Spacer(Modifier.width(Dimens.SpacingS))
+        }
+
+        if (isSyncing) {
+            StatusBadge("SYNCING", MaterialTheme.colorScheme.primary)
+            Spacer(Modifier.width(Dimens.SpacingS))
+            CircularProgressIndicator(
+                modifier = Modifier.size(16.dp),
+                strokeWidth = 2.dp,
+                color = MaterialTheme.colorScheme.primary
+            )
+        } else {
+            StatusBadge("IDLE", Color(0xFF388E3C)) // Green
+        }
+    }
+}
+
+@Composable
+private fun StatusBadge(text: String, color: Color) {
+    Surface(
+        color = color.copy(alpha = 0.1f),
+        contentColor = color,
+        shape = MaterialTheme.shapes.small,
+        border = androidx.compose.foundation.BorderStroke(1.dp, color)
+    ) {
+        Text(
+            text = text,
+            style = MaterialTheme.typography.labelSmall,
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp)
+        )
+    }
+}
+
+@Composable
+private fun ActionToolbar(viewModel: PingViewModel) {
+    // Wrap buttons to avoid overflow on small screens
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingXS)
+    ) {
+        DenseButton(text = "Simple", onClick = { viewModel.performSimplePing() })
+        DenseButton(text = "Enhanced", onClick = { viewModel.performEnhancedPing() })
+        DenseButton(text = "Secure", onClick = { viewModel.performSecurePing() })
+        DenseButton(text = "Health", onClick = { viewModel.performHealthCheck() })
+        DenseButton(
+            text = "Sync",
+            onClick = { viewModel.triggerSync() },
+            containerColor = MaterialTheme.colorScheme.secondary
+        )
+    }
+}
+
+@Composable
+private fun StatusGrid(uiState: PingUiState) {
+    Column(verticalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) {
+        // Row 1
+        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) {
+            DashboardCard(modifier = Modifier.weight(1f)) {
+                StatusHeader("SIMPLE / SECURE PING")
+                if (uiState.simplePingResponse != null) {
+                    KeyValueRow("Status", uiState.simplePingResponse.status)
+                    KeyValueRow("Service", uiState.simplePingResponse.service)
+                    KeyValueRow("Time", uiState.simplePingResponse.timestamp)
+                } else {
+                    EmptyStateText()
+                }
+            }
+
+            DashboardCard(modifier = Modifier.weight(1f)) {
+                StatusHeader("HEALTH CHECK")
+                if (uiState.healthResponse != null) {
+                    KeyValueRow("Status", uiState.healthResponse.status)
+                    KeyValueRow("Healthy", uiState.healthResponse.healthy.toString())
+                    KeyValueRow("Service", uiState.healthResponse.service)
+                } else {
+                    EmptyStateText()
+                }
+            }
+        }
+
+        // Row 2
+        DashboardCard(modifier = Modifier.fillMaxWidth()) {
+            StatusHeader("ENHANCED PING (RESILIENCE)")
+            if (uiState.enhancedPingResponse != null) {
+                Row(modifier = Modifier.fillMaxWidth()) {
+                    Column(modifier = Modifier.weight(1f)) {
+                        KeyValueRow("Status", uiState.enhancedPingResponse.status)
+                        KeyValueRow("Timestamp", uiState.enhancedPingResponse.timestamp)
+                    }
+                    Column(modifier = Modifier.weight(1f)) {
+                        KeyValueRow("Circuit Breaker", uiState.enhancedPingResponse.circuitBreakerState)
+                        KeyValueRow("Latency", "${uiState.enhancedPingResponse.responseTime}ms")
+                    }
+                }
+            } else {
+                EmptyStateText()
+            }
+        }
+    }
+}
+
+@Composable
+private fun StatusHeader(title: String) {
+    Text(
+        text = title,
+        style = MaterialTheme.typography.labelSmall,
+        color = MaterialTheme.colorScheme.primary,
+        fontWeight = FontWeight.Bold,
+        modifier = Modifier.padding(bottom = Dimens.SpacingXS)
+    )
+    HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant, thickness = 1.dp)
+    Spacer(Modifier.height(Dimens.SpacingXS))
+}
+
+@Composable
+private fun EmptyStateText() {
+    Text("No Data", style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant)
+}
+
+@Composable
+private fun KeyValueRow(key: String, value: String) {
+    Row(modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp)) {
+        Text(
+            text = "$key:",
+            modifier = Modifier.width(100.dp),
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+        Text(
+            text = value,
+            style = MaterialTheme.typography.bodySmall,
+            fontWeight = FontWeight.Medium,
+            color = MaterialTheme.colorScheme.onSurface
+        )
+    }
+}
+
+// --- Log Components (Terminal Style - intentionally distinct) ---
+
+@Composable
+private fun LogHeader(onClear: () -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(bottom = Dimens.SpacingXS),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text("EVENT LOG", style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Bold)
+        TextButton(
+            onClick = onClear,
+            contentPadding = PaddingValues(0.dp),
+            modifier = Modifier.height(24.dp)
+        ) {
+            Text("CLEAR", style = MaterialTheme.typography.labelSmall)
+        }
+    }
+}
+
+@Composable
+private fun LogConsole(logs: List<LogEntry>) {
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFF1E1E1E)) // Always dark for terminal
+            .padding(Dimens.SpacingXS),
+        reverseLayout = false
+    ) {
+        items(logs) { log ->
+            val color = if (log.isError) Color(0xFFFF5555) else Color(0xFF55FF55)
+            Text(
+                text = "[${log.timestamp}] [${log.source}] ${log.message}",
+                color = color,
+                fontSize = 11.sp,
+                fontFamily = FontFamily.Monospace,
+                lineHeight = 14.sp
+            )
+        }
+    }
+}
+
+@Composable
+private fun PingStatusBar(lastSync: String?) {
+    Surface(
+        color = MaterialTheme.colorScheme.primaryContainer,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Text(
+            text = lastSync ?: "Ready",
+            style = MaterialTheme.typography.labelSmall,
+            color = MaterialTheme.colorScheme.onPrimaryContainer,
+            modifier = Modifier.padding(horizontal = Dimens.SpacingS, vertical = 2.dp)
+        )
    }
-  }
 }
@@ -11,9 +11,17 @@ import at.mocode.ping.api.PingApi
 import at.mocode.ping.api.PingResponse
 import at.mocode.ping.feature.domain.PingSyncService
 import kotlinx.coroutines.launch
+import kotlin.time.Clock
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime

+data class LogEntry(
+    val timestamp: String,
+    val source: String,
+    val message: String,
+    val isError: Boolean = false
+)
+
 data class PingUiState(
  val isLoading: Boolean = false,
  val simplePingResponse: PingResponse? = null,
@@ -21,7 +29,8 @@ data class PingUiState(
  val healthResponse: HealthResponse? = null,
  val errorMessage: String? = null,
  val isSyncing: Boolean = false,
-  val lastSyncResult: String? = null
+  val lastSyncResult: String? = null,
+  val logs: List<LogEntry> = emptyList()
 )

 class PingViewModel(
@@ -32,98 +41,108 @@ class PingViewModel(
  var uiState by mutableStateOf(PingUiState())
    private set

+  private fun addLog(source: String, message: String, isError: Boolean = false) {
+    val now = Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+    val timeString = "${now.hour.toString().padStart(2, '0')}:${now.minute.toString().padStart(2, '0')}:${now.second.toString().padStart(2, '0')}"
+    val entry = LogEntry(timeString, source, message, isError)
+    uiState = uiState.copy(logs = listOf(entry) + uiState.logs) // Prepend for newest first
+  }
+
  fun performSimplePing() {
    viewModelScope.launch {
-      uiState = uiState.copy(isLoading = true, errorMessage = null)
+      uiState = uiState.copy(isLoading = true)
+      addLog("SimplePing", "Sending request...")
      try {
        val response = apiClient.simplePing()
        uiState = uiState.copy(
          isLoading = false,
          simplePingResponse = response
        )
+        addLog("SimplePing", "Success: ${response.status} from ${response.service}")
      } catch (e: Exception) {
-        uiState = uiState.copy(
-          isLoading = false,
-          errorMessage = "Simple ping failed: ${e.message}"
-        )
+        uiState = uiState.copy(isLoading = false)
+        addLog("SimplePing", "Failed: ${e.message}", isError = true)
      }
    }
  }

  fun performEnhancedPing(simulate: Boolean = false) {
    viewModelScope.launch {
-      uiState = uiState.copy(isLoading = true, errorMessage = null)
+      uiState = uiState.copy(isLoading = true)
+      addLog("EnhancedPing", "Sending request (simulate=$simulate)...")
      try {
        val response = apiClient.enhancedPing(simulate)
        uiState = uiState.copy(
          isLoading = false,
          enhancedPingResponse = response
        )
+        addLog("EnhancedPing", "Success: CB=${response.circuitBreakerState}, Time=${response.responseTime}ms")
      } catch (e: Exception) {
-        uiState = uiState.copy(
-          isLoading = false,
-          errorMessage = "Enhanced ping failed: ${e.message}"
-        )
+        uiState = uiState.copy(isLoading = false)
+        addLog("EnhancedPing", "Failed: ${e.message}", isError = true)
      }
    }
  }

  fun performHealthCheck() {
    viewModelScope.launch {
-      uiState = uiState.copy(isLoading = true, errorMessage = null)
+      uiState = uiState.copy(isLoading = true)
+      addLog("HealthCheck", "Checking system health...")
      try {
        val response = apiClient.healthCheck()
        uiState = uiState.copy(
          isLoading = false,
          healthResponse = response
        )
+        addLog("HealthCheck", "Status: ${response.status}, Healthy: ${response.healthy}")
      } catch (e: Exception) {
-        uiState = uiState.copy(
-          isLoading = false,
-          errorMessage = "Health check failed: ${e.message}"
-        )
+        uiState = uiState.copy(isLoading = false)
+        addLog("HealthCheck", "Failed: ${e.message}", isError = true)
      }
    }
  }

  fun performSecurePing() {
    viewModelScope.launch {
-      uiState = uiState.copy(isLoading = true, errorMessage = null)
+      uiState = uiState.copy(isLoading = true)
+      addLog("SecurePing", "Sending authenticated request...")
      try {
        val response = apiClient.securePing()
        uiState = uiState.copy(
          isLoading = false,
          simplePingResponse = response
        )
+        addLog("SecurePing", "Success: Authorized access granted.")
      } catch (e: Exception) {
-        uiState = uiState.copy(
-          isLoading = false,
-          errorMessage = "Secure ping failed: ${e.message}"
-        )
+        uiState = uiState.copy(isLoading = false)
+        addLog("SecurePing", "Access Denied/Error: ${e.message}", isError = true)
      }
    }
  }

  fun triggerSync() {
    viewModelScope.launch {
-      uiState = uiState.copy(isSyncing = true, errorMessage = null)
+      uiState = uiState.copy(isSyncing = true)
+      addLog("Sync", "Starting delta sync...")
      try {
        syncService.syncPings()
-        // Use kotlin.time.Clock explicitly to avoid ambiguity and deprecation issues
-        val now = kotlin.time.Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+        val now = Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
        uiState = uiState.copy(
          isSyncing = false,
          lastSyncResult = "Sync successful at $now"
        )
+        addLog("Sync", "Sync completed successfully.")
      } catch (e: Exception) {
-        uiState = uiState.copy(
-          isSyncing = false,
-          errorMessage = "Sync failed: ${e.message}"
-        )
+        uiState = uiState.copy(isSyncing = false)
+        addLog("Sync", "Sync failed: ${e.message}", isError = true)
      }
    }
  }

+  fun clearLogs() {
+    uiState = uiState.copy(logs = emptyList())
+  }
+
  fun clearError() {
    uiState = uiState.copy(errorMessage = null)
  }