[64] Most Expensive Categories Fix

sdk/src/qa/java/br/com/tick/sdk/repositories/FakeUserRepository.kt

@@ -17,6 +17,7 @@ class FakeUserRepository: UserRepository {
     }
 
     override fun getUser() = user
+
     override suspend fun setInitialUser() {
         user.tryEmit(User.initial())
     }

ui/src/main/java/br/com/tick/ui/core/TeiraNavigationDrawer.kt

@@ -1,7 +1,13 @@
 package br.com.tick.ui.core
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.DismissibleDrawerSheet
 import androidx.compose.material3.DismissibleNavigationDrawer
 import androidx.compose.material3.DrawerState
@@ -13,13 +19,16 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavBackStackEntry
 import br.com.tick.ui.NavigationItem
 import br.com.tick.ui.R
 import br.com.tick.ui.theme.spacing
+import br.com.tick.ui.theme.textStyle
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 
@@ -31,7 +40,6 @@ fun TeiraNavigationDrawer(
     navigateToRoute: (NavigationItem) -> Unit,
     content: @Composable () -> Unit
 ) {
-    val coroutineScope = rememberCoroutineScope()
 
     val currentRoute = navBackStackEntry?.destination?.route
 
@@ -42,60 +50,73 @@ fun TeiraNavigationDrawer(
                 drawerContainerColor = MaterialTheme.colorScheme.surface,
                 drawerContentColor = MaterialTheme.colorScheme.onSurface
             ) {
-                Spacer(modifier = Modifier.height(MaterialTheme.spacing.large))
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = NavigationItem.Settings.iconResource),
-                    text = stringResource(id = NavigationItem.Settings.titleResource),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = currentRoute == NavigationItem.Settings.route
-                ) {
-                    navigateToRoute(NavigationItem.Settings)
-                }
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = NavigationItem.Wallet.iconResource),
-                    text = stringResource(id = NavigationItem.Wallet.titleResource),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = currentRoute == NavigationItem.Wallet.route
+                Column(
+                    modifier = Modifier.fillMaxSize().padding(MaterialTheme.spacing.large),
+                    verticalArrangement = Arrangement.SpaceBetween
                 ) {
-                    navigateToRoute(NavigationItem.Wallet)
+                    Column {
+                        Text(
+                            modifier = Modifier.padding(MaterialTheme.spacing.large),
+                            text = stringResource(id = R.string.app_name),
+                            style = MaterialTheme.textStyle.h1extra,
+                            color = MaterialTheme.colorScheme.tertiary
+                        )
+                        Spacer(modifier = Modifier.height(MaterialTheme.spacing.large))
+                        TeiraNavigationDrawerItem(
+                            drawerState = drawerState,
+                            painter = painterResource(id = NavigationItem.Settings.iconResource),
+                            text = stringResource(id = NavigationItem.Settings.titleResource),
+                            isCurrentRoute = currentRoute == NavigationItem.Settings.route
+                        ) {
+                            navigateToRoute(NavigationItem.Settings)
+                        }
+                        TeiraNavigationDrawerItem(
+                            drawerState = drawerState,
+                            painter = painterResource(id = NavigationItem.Wallet.iconResource),
+                            text = stringResource(id = NavigationItem.Wallet.titleResource),
+                            isCurrentRoute = currentRoute == NavigationItem.Wallet.route
+                        ) {
+                            navigateToRoute(NavigationItem.Wallet)
+                        }
+                        TeiraNavigationDrawerItem(
+                            drawerState = drawerState,
+                            painter = painterResource(id = NavigationItem.Analysis.iconResource),
+                            text = stringResource(id = NavigationItem.Analysis.titleResource),
+                            isCurrentRoute = currentRoute == NavigationItem.Analysis.route
+                        ) {
+                            navigateToRoute(NavigationItem.Analysis)
+                        }
+                        Spacer(
+                            modifier = Modifier
+                                .padding(horizontal = MaterialTheme.spacing.medium, vertical = MaterialTheme.spacing.small)
+                                .fillMaxWidth()
+                                .height(0.5.dp)
+                                .background(MaterialTheme.colorScheme.tertiary)
+                        )
+                        TeiraNavigationDrawerItem(
+                            drawerState = drawerState,
+                            painter = painterResource(id = NavigationItem.History.iconResource),
+                            text = stringResource(id = NavigationItem.History.titleResource),
+                            isCurrentRoute = currentRoute == NavigationItem.History.route
+                        ) {
+                            navigateToRoute(NavigationItem.History)
+                        }
+                        TeiraNavigationDrawerItem(
+                            drawerState = drawerState,
+                            painter = painterResource(id = NavigationItem.Expense.iconResource),
+                            text = stringResource(id = NavigationItem.Expense.titleResource),
+                            isCurrentRoute = currentRoute == NavigationItem.Expense.route
+                        ) {
+                            navigateToParentRoute(NavigationItem.Expense)
+                        }
+                    }
+                    TeiraNavigationDrawerItem(
+                        drawerState = drawerState,
+                        painter = painterResource(id = R.drawable.ic_clear),
+                        text = stringResource(id = R.string.generic_close),
+                        isCurrentRoute = false
+                    )
                 }
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = NavigationItem.Analysis.iconResource),
-                    text = stringResource(id = NavigationItem.Analysis.titleResource),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = currentRoute == NavigationItem.Analysis.route
-                ) {
-                    navigateToRoute(NavigationItem.Analysis)
-                }
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = NavigationItem.History.iconResource),
-                    text = stringResource(id = NavigationItem.History.titleResource),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = currentRoute == NavigationItem.History.route
-                ) {
-                    navigateToRoute(NavigationItem.History)
-                }
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = NavigationItem.Expense.iconResource),
-                    text = stringResource(id = NavigationItem.Expense.titleResource),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = currentRoute == NavigationItem.Expense.route
-                ) {
-                    navigateToParentRoute(NavigationItem.Expense)
-                }
-                Spacer(modifier = Modifier.height(MaterialTheme.spacing.extraLarge))
-                TeiraNavigationDrawerItem(
-                    drawerState = drawerState,
-                    painter = painterResource(id = R.drawable.ic_clear),
-                    text = stringResource(id = R.string.generic_close),
-                    coroutineScope = coroutineScope,
-                    isCurrentRoute = false
-                )
             }
         },
         content = content
@@ -107,10 +128,11 @@ private fun TeiraNavigationDrawerItem(
     drawerState: DrawerState,
     painter: Painter,
     text: String,
-    coroutineScope: CoroutineScope,
     isCurrentRoute: Boolean,
     onDrawerItemClick: (() -> Unit)? = null
 ) {
+    val coroutineScope = rememberCoroutineScope()
+
     NavigationDrawerItem(
         icon = {
             Icon(painter = painter, contentDescription = null)

ui/src/main/java/br/com/tick/ui/screens/analysis/AnalysisScreen.kt

@@ -26,12 +26,12 @@ fun AnalysisScreen() {
             MostExpensiveCategory(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(top = MaterialTheme.spacing.large)
+                    .padding(top = MaterialTheme.spacing.small)
             )
             FinancialHealthComposable(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(top = MaterialTheme.spacing.large)
+                    .padding(top = MaterialTheme.spacing.small)
             )
         }
     }

ui/src/main/java/br/com/tick/ui/screens/analysis/FinancialHealth.kt

@@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.hilt.navigation.compose.hiltViewModel
+import br.com.tick.sdk.domain.CurrencyFormat
 import br.com.tick.ui.R
 import br.com.tick.ui.core.TeiraNoAvailableDataState
 import br.com.tick.ui.screens.analysis.states.FinancialHealth

ui/src/main/java/br/com/tick/ui/screens/analysis/MostExpensiveCategory.kt

@@ -1,10 +1,14 @@
 package br.com.tick.ui.screens.analysis
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
@@ -23,8 +27,10 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
+import br.com.tick.sdk.domain.CurrencyFormat
 import br.com.tick.ui.R
 import br.com.tick.ui.core.TeiraNoAvailableDataState
+import br.com.tick.ui.extensions.getLabelResource
 import br.com.tick.ui.screens.analysis.models.MostExpensiveCategory
 import br.com.tick.ui.screens.analysis.states.MostExpensiveCategoriesStates
 import br.com.tick.ui.screens.analysis.viewmodels.AnalysisScreenViewModel
@@ -38,10 +44,11 @@ fun MostExpensiveCategory(
 ) {
     val mostExpensiveCategoriesStates by viewModel.mostExpenseCategoryList
         .collectAsState(initial = MostExpensiveCategoriesStates.NoDataAvailable)
+    val currency by viewModel.currency.collectAsState()
 
     Column(modifier = modifier.fillMaxWidth()) {
         when (val state = mostExpensiveCategoriesStates) {
-            is MostExpensiveCategoriesStates.Full -> MostExpensiveCategoryBody(modifier, state)
+            is MostExpensiveCategoriesStates.Full -> MostExpensiveCategoryBody(modifier, currency, state)
             MostExpensiveCategoriesStates.NoDataAvailable -> TeiraNoAvailableDataState(modifier)
         }
     }
@@ -50,6 +57,7 @@ fun MostExpensiveCategory(
 @Composable
 private fun MostExpensiveCategoryBody(
     modifier: Modifier = Modifier,
+    currencyFormat: CurrencyFormat,
     mostExpensiveCategoriesState: MostExpensiveCategoriesStates.Full
 ) {
     Column(modifier = modifier.fillMaxWidth()) {
@@ -59,17 +67,21 @@ private fun MostExpensiveCategoryBody(
             style = MaterialTheme.textStyle.h2
         )
         Row(
-            modifier = modifier.fillMaxWidth().padding(top = MaterialTheme.spacing.medium),
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(top = MaterialTheme.spacing.medium),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
             mostExpensiveCategoriesState.mostExpensiveCategories.forEach { mostExpensiveCategory ->
                 val categoryCardColor = mostExpensiveCategory.color?.let {
                     Color(it)
-                } ?: MaterialTheme.colorScheme.secondary
+                } ?: MaterialTheme.colorScheme.surface
+
+                val currencyLabel = stringResource(id = currencyFormat.getLabelResource())
 
                 CategoryCard(
                     label = mostExpensiveCategory.categoryName,
-                    subLabel = mostExpensiveCategory.amount.toString(),
+                    subLabel = "$currencyLabel${mostExpensiveCategory.amount}",
                     color = categoryCardColor
                 )
             }
@@ -83,7 +95,7 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
         modifier = modifier
             .size(80.dp)
             .padding(MaterialTheme.spacing.smallest),
-        colors = CardDefaults.cardColors(containerColor = color)
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
     ) {
         Column(
             modifier = Modifier.fillMaxSize(),
@@ -93,15 +105,24 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
             Text(
                 text = label,
                 style = MaterialTheme.textStyle.h2bold,
-                color = MaterialTheme.colorScheme.onSecondary,
+                color = MaterialTheme.colorScheme.onTertiary,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
             Text(
                 text = subLabel,
-                style = MaterialTheme.textStyle.h3small,
-                color = MaterialTheme.colorScheme.onSecondary
+                style = MaterialTheme.textStyle.h3,
+                color = MaterialTheme.colorScheme.onTertiary
             )
+            Box(modifier = Modifier.fillMaxSize()) {
+                Spacer(
+                    modifier = Modifier
+                        .height(6.dp)
+                        .background(color)
+                        .align(Alignment.BottomCenter)
+                        .fillMaxWidth()
+                )
+            }
         }
     }
 }
@@ -110,6 +131,7 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
 @Composable
 fun MostExpensiveCategoryBodyPreview() {
     MostExpensiveCategoryBody(
+        currencyFormat = CurrencyFormat.EURO,
         mostExpensiveCategoriesState = MostExpensiveCategoriesStates.Full(
             listOf(MostExpensiveCategory("Test", Color.Red.toArgb(), 56.0))
         )

ui/src/main/java/br/com/tick/ui/screens/analysis/states/MostExpensiveCategoriesStates.kt

@@ -13,7 +13,7 @@ sealed class MostExpensiveCategoriesStates {
                 Full(
                     mostExpensiveCategories
                         .sortedByDescending { it.amount }
-                        .take(5)
+                        .take(4)
                 )
             }
         }