Implemented Account Filters in Bottom Sheet (Saving Account, Loan Account, Share Account) (#2994)

Author: WizCoderr

core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/component/MifosBottomSheet.kt

@@ -13,6 +13,7 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -22,7 +23,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.arkivanov.essenty.backhandler.BackCallback
 import kotlinx.coroutines.launch
@@ -54,7 +54,7 @@ fun MifosBottomSheet(
 
     AnimatedVisibility(visible = showBottomSheet) {
         ModalBottomSheet(
-            containerColor = Color.White,
+            containerColor = MaterialTheme.colorScheme.surface,
             onDismissRequest = {
                 showBottomSheet = false
                 dismissSheet()

feature/accounts/src/commonMain/composeResources/values/strings.xml

@@ -14,6 +14,10 @@
     <string name="feature_loan_account_title">Loan Accounts</string>
     <string name="feature_saving_account_title">Saving Accounts</string>
     <string name="feature_share_account_title">Share Accounts</string>
+
+    <string name="feature_accounts_filter_status">Status</string>
+    <string name="feature_accounts_filter_type">Type</string>
+
 <!--    Loan Account Filters-->
 
     <string name="feature_loan_account_filter_active">Active</string>

feature/accounts/src/commonMain/kotlin/org/mifos/mobile/feature/accounts/accounts/AccountsScreen.kt

@@ -22,22 +22,21 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import mifos_mobile.feature.accounts.generated.resources.Res
-import mifos_mobile.feature.accounts.generated.resources.feature_account_title
+import mifos_mobile.feature.accounts.generated.resources.feature_accounts_filter_status
+import mifos_mobile.feature.accounts.generated.resources.feature_accounts_filter_type
 import mifos_mobile.feature.accounts.generated.resources.feature_loan_account_title
 import mifos_mobile.feature.accounts.generated.resources.feature_saving_account_title
 import mifos_mobile.feature.accounts.generated.resources.feature_share_account_title
 import org.jetbrains.compose.resources.stringResource
 import org.koin.compose.viewmodel.koinViewModel
 import org.mifos.mobile.core.designsystem.component.BasicDialogState
 import org.mifos.mobile.core.designsystem.component.MifosBasicDialog
+import org.mifos.mobile.core.designsystem.component.MifosBottomSheet
 import org.mifos.mobile.core.designsystem.component.MifosElevatedScaffold
 import org.mifos.mobile.core.designsystem.component.rememberMifosPullToRefreshState
 import org.mifos.mobile.core.designsystem.theme.DesignToken
@@ -115,17 +114,22 @@ internal fun AccountsDialog(
                 onDismissRequest = { onAction(AccountsAction.DismissDialog) },
             )
         }
-        AccountsState.DialogState.Filters -> SavingsAccountFilters(
-            state = state,
-            onAction = onAction,
+        AccountsState.DialogState.Filters -> MifosBottomSheet(
+            content = {
+                SavingsAccountFilters(
+                    state = state,
+                    onAction = onAction,
+                )
+            },
             modifier = modifier,
+            onDismiss = { onAction(AccountsAction.DismissDialog) },
         )
         null -> {}
     }
 }
 
 /**
- * Composable function that displays the Savings Account Filters Dialog.
+ * Composable function that displays the Savings Account Filters Bottom Bar.
  *
  * @param state The state of the screen.
  * @param onAction The function to be called when an action is performed.
@@ -137,68 +141,51 @@ internal fun SavingsAccountFilters(
     onAction: (AccountsAction) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    var isTypeExpanded by rememberSaveable { mutableStateOf(true) }
-    var isStatusExpanded by rememberSaveable { mutableStateOf(true) }
-
-    MifosElevatedScaffold(
-        onNavigateBack = { onAction(AccountsAction.OnNavigateBack) },
-        topBarTitle = stringResource(Res.string.feature_account_title),
-        bottomBar = {
-            Surface {
-                MifosPoweredCard(
-                    modifier = modifier
-                        .fillMaxWidth()
-                        .navigationBarsPadding(),
-                )
-            }
-        },
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState())
+            .padding(DesignToken.padding.large)
+            .padding(top = DesignToken.padding.large),
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .verticalScroll(rememberScrollState())
-                .padding(DesignToken.padding.large)
-                .padding(top = DesignToken.padding.large),
-        ) {
-            FilterTopSection(
-                isAnyFilterSelected = state.isAnyFilterSelected,
-                resetFilters = {
-                    onAction(AccountsAction.ResetFilters)
-                },
-                onApplyFilter = {
-                    onAction(AccountsAction.GetFilterResults)
-                },
-                dismissDialog = {
-                    onAction(AccountsAction.DismissDialog)
-                },
-            )
+        FilterTopSection(
+            isAnyFilterSelected = state.isAnyFilterSelected,
+            resetFilters = {
+                onAction(AccountsAction.ResetFilters)
+            },
+            onApplyFilter = {
+                onAction(AccountsAction.GetFilterResults)
+            },
+            dismissDialog = {
+                onAction(AccountsAction.DismissDialog)
+            },
+        )
 
-            Spacer(Modifier.height(DesignToken.spacing.largeIncreased))
+        Spacer(Modifier.height(DesignToken.spacing.largeIncreased))
 
-            HorizontalDivider(modifier = Modifier.height(1.dp))
+        HorizontalDivider(modifier = Modifier.height(1.dp))
 
-            FilterSection(
-                title = "Type",
-                filtersSelected = state.accountTypeFiltersCount ?: 0,
-                isExpanded = isTypeExpanded,
-                onToggle = { isTypeExpanded = !isTypeExpanded },
-                filters = state.checkboxOptions.filter { it.type == FilterType.ACCOUNT_TYPE },
-                onCheckChanged = { label ->
-                    onAction(AccountsAction.ToggleCheckbox(label, FilterType.ACCOUNT_TYPE))
-                },
-            )
+        FilterSection(
+            title = stringResource(Res.string.feature_accounts_filter_type),
+            filtersSelected = state.accountTypeFiltersCount ?: 0,
+            isExpanded = state.isTypeExpanded,
+            onToggle = { onAction(AccountsAction.ToggleTypeExpanded) },
+            filters = state.checkboxOptions.filter { it.type == FilterType.ACCOUNT_TYPE },
+            onCheckChanged = { label ->
+                onAction(AccountsAction.ToggleCheckbox(label, FilterType.ACCOUNT_TYPE))
+            },
+        )
 
-            FilterSection(
-                title = "Status",
-                filtersSelected = state.accountStatusFiltersCount ?: 0,
-                isExpanded = isStatusExpanded,
-                onToggle = { isStatusExpanded = !isStatusExpanded },
-                filters = state.checkboxOptions.filter { it.type == FilterType.ACCOUNT_STATUS },
-                onCheckChanged = { label ->
-                    onAction(AccountsAction.ToggleCheckbox(label, FilterType.ACCOUNT_STATUS))
-                },
-            )
-        }
+        FilterSection(
+            title = stringResource(Res.string.feature_accounts_filter_status),
+            filtersSelected = state.accountStatusFiltersCount ?: 0,
+            isExpanded = state.isStatusExpanded,
+            onToggle = { onAction(AccountsAction.ToggleStatusExpanded) },
+            filters = state.checkboxOptions.filter { it.type == FilterType.ACCOUNT_STATUS },
+            onCheckChanged = { label ->
+                onAction(AccountsAction.ToggleCheckbox(label, FilterType.ACCOUNT_STATUS))
+            },
+        )
     }
 }
 
@@ -207,13 +194,11 @@ internal fun SavingsAccountFilters(
  *
  * @param state The state of the screen.
  * @param onAction The function to be called when an action is performed.
- * @param modifier Modifier to be applied to the layout.
  */
 @Composable
 internal fun AccountScreenContent(
     state: AccountsState,
     onAction: (AccountsAction) -> Unit,
-    modifier: Modifier = Modifier,
 ) {
     val isRefreshing = state.isRefreshing
     val pullToRefreshState = rememberMifosPullToRefreshState(
@@ -235,7 +220,7 @@ internal fun AccountScreenContent(
         bottomBar = {
             Surface {
                 MifosPoweredCard(
-                    modifier = modifier
+                    modifier = Modifier
                         .fillMaxWidth()
                         .navigationBarsPadding(),
                 )

feature/accounts/src/commonMain/kotlin/org/mifos/mobile/feature/accounts/accounts/AccountsViewModel.kt

@@ -83,6 +83,8 @@ internal class AccountsViewModel(
             is AccountsAction.OnNavigateBack -> sendEvent(AccountsEvent.NavigateBack)
 
             is AccountsAction.ToggleCheckbox -> toggleCheckbox(action.label, action.type)
+            AccountsAction.ToggleTypeExpanded -> handleToggleTypeExpanded()
+            AccountsAction.ToggleStatusExpanded -> handleToggleStatusExpanded()
         }
     }
 
@@ -97,6 +99,20 @@ internal class AccountsViewModel(
         }
     }
 
+    /**
+     * Toggles the expanded state of the type filter section.
+     */
+    private fun handleToggleTypeExpanded() {
+        mutableStateFlow.update { it.copy(isTypeExpanded = !it.isTypeExpanded) }
+    }
+
+    /**
+     * Toggles the expanded state of the status filter section.
+     */
+    private fun handleToggleStatusExpanded() {
+        mutableStateFlow.update { it.copy(isStatusExpanded = !it.isStatusExpanded) }
+    }
+
     /**
      * Resets all filter checkboxes and filter counters.
      */
@@ -231,6 +247,8 @@ constructor(
     val refreshSignal: Long = Clock.System.now().epochSeconds,
     val dialogState: DialogState? = null,
     val uiState: ScreenUiState = ScreenUiState.Loading,
+    val isTypeExpanded: Boolean = true,
+    val isStatusExpanded: Boolean = true,
 ) {
 
     sealed interface DialogState {
@@ -258,6 +276,8 @@ constructor(
 internal sealed interface AccountsAction {
 
     data object ToggleFilter : AccountsAction
+    data object ToggleTypeExpanded : AccountsAction
+    data object ToggleStatusExpanded : AccountsAction
 
     data object ResetFilters : AccountsAction