integrate ProgressViewModel and WeeklyActivityChartWidget into WeeklyProgressSection and implement navigation to vocabulary_heatmap

app/src/main/java/eu/gaudian/translator/view/home/HomeScreen.kt

@@ -34,15 +34,22 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavHostController
+import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.Screen
+import eu.gaudian.translator.view.vocabulary.widgets.WeeklyActivityChartWidget
+import eu.gaudian.translator.viewmodel.ProgressViewModel
 
 @Composable
 fun HomeScreen(
@@ -81,7 +88,7 @@ fun HomeScreen(
                     contentColor = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
-            item { WeeklyProgressSection() }
+            item { WeeklyProgressSection(navController = navController) }
             item { BottomStatsSection() }
 
             // Bottom padding for edge-to-edge screens
@@ -264,15 +271,22 @@ fun ActionCard(
 }
 
 @Composable
-fun WeeklyProgressSection() {
+fun WeeklyProgressSection(
-    Column {
+    navController: NavHostController,
+    modifier: Modifier = Modifier
+) {
+    val activity = LocalContext.current.findActivity()
+    val viewModel: ProgressViewModel = hiltViewModel(activity)
+    val weeklyActivityStats by viewModel.weeklyActivityStats.collectAsState()
+
+    Column(modifier = modifier) {
         Row(
             modifier = Modifier.fillMaxWidth(),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
             Text(text = "Weekly Progress", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
-            TextButton(onClick = { /* TODO */ }) {
+            TextButton(onClick = { navController.navigate("vocabulary_heatmap") }) {
                 Text("See History")
             }
         }
@@ -280,34 +294,26 @@ fun WeeklyProgressSection() {
         Spacer(modifier = Modifier.height(8.dp))
 
         Card(
-            modifier = Modifier
+            modifier = Modifier.fillMaxWidth(),
-                .fillMaxWidth()
-                .height(200.dp), // Fixed height for dummy chart area
             shape = RoundedCornerShape(20.dp),
             colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
         ) {
-            Column(
+            if (weeklyActivityStats.isEmpty()) {
-                modifier = Modifier
+                Column(
-                    .fillMaxSize()
+                    modifier = Modifier
-                    .padding(16.dp),
+                        .fillMaxWidth()
-                verticalArrangement = Arrangement.Bottom
+                        .padding(16.dp),
-            ) {
+                    verticalArrangement = Arrangement.Center,
-                // Dummy Chart Graph Space
+                    horizontalAlignment = Alignment.CenterHorizontally
-                Spacer(modifier = Modifier.weight(1f))
-
-                // Days row
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween
                 ) {
-                    listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun").forEach { day ->
+                    Text(
-                        Text(
+                        text = "No activity data available",
-                            text = day,
+                        style = MaterialTheme.typography.bodyLarge,
-                            style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
-                            color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                    )
-                        )
-                    }
                 }
+            } else {
+                WeeklyActivityChartWidget(weeklyStats = weeklyActivityStats)
             }
         }
     }