Implement New Figma Top App Bar (#2508)

Author: Arinyadav1

cmp-navigation/src/commonMain/composeResources/drawable/topbarlogo.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright 2025 Mifos Initiative
+
+    This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+    If a copy of the MPL was not distributed with this file,
+    You can obtain one at https://mozilla.org/MPL/2.0/.
+
+    See https://github.com/openMF/android-client/blob/master/LICENSE.md
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="28dp"
+    android:viewportWidth="28"
+    android:viewportHeight="28">
+  <path
+      android:pathData="M12.346,0.073C10.478,0.27 6.425,1.727 6.425,2.201C6.425,2.429 8.075,4.712 9.007,5.774L9.669,6.528L10.384,5.809C11.994,4.188 13.55,2.871 15.727,1.285L17.024,0.341L16.561,0.249C15.298,-0.001 13.687,-0.069 12.346,0.073Z"
+      android:fillColor="#76C47A"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M16.269,2.955C14.118,4.555 11.925,6.421 11.118,7.339L10.845,7.649L11.369,8.078C12.482,8.986 14.781,10.396 14.902,10.244C14.931,10.208 15.061,9.68 15.192,9.071C15.646,6.961 16.282,5.093 17.224,3.098C17.539,2.432 17.773,1.89 17.745,1.892C17.717,1.893 17.053,2.372 16.269,2.955Z"
+      android:fillColor="#0673BA"/>
+  <path
+      android:pathData="M19.681,1.667C18.388,3.608 17.189,6.8 16.603,9.86C16.587,9.945 16.571,10.024 16.557,10.096C16.474,10.516 16.431,10.734 16.507,10.874C16.589,11.026 16.812,11.087 17.274,11.213C17.348,11.233 17.428,11.255 17.514,11.279C20.108,12.005 23.778,12.282 26.742,11.977C26.849,11.966 26.944,11.957 27.027,11.95C27.38,11.917 27.539,11.903 27.593,11.813C27.637,11.738 27.61,11.613 27.56,11.385C27.546,11.319 27.53,11.244 27.513,11.16C26.728,7.224 24.175,3.728 20.63,1.734L19.908,1.328L19.681,1.667Z"
+      android:fillColor="#22B24C"/>
+  <path
+      android:pathData="M4.248,3.895C2.959,5.136 1.92,6.632 1.182,8.306L0.785,9.21L0.972,9.536C1.863,11.092 2.742,12.341 4.013,13.862L4.439,14.371L4.871,13.508C5.684,11.88 6.692,10.277 7.918,8.663L8.587,7.782L8.005,7.156C7.221,6.312 6.29,5.123 5.603,4.09C5.54,3.996 5.485,3.911 5.435,3.835C5.213,3.493 5.103,3.325 4.979,3.311C4.857,3.297 4.722,3.43 4.454,3.693C4.393,3.754 4.325,3.821 4.248,3.895Z"
+      android:fillColor="#28ACE2"/>
+  <path
+      android:pathData="M9.203,9.522C7.903,11.215 6.393,13.796 5.818,15.306L5.709,15.593L6.304,16.109C8.271,17.815 11.065,19.386 13.557,20.187C13.65,20.216 13.734,20.244 13.81,20.269C14.204,20.399 14.388,20.459 14.464,20.386C14.53,20.322 14.515,20.157 14.487,19.847L14.487,19.846C14.481,19.778 14.474,19.702 14.467,19.619C14.326,17.889 14.436,13.029 14.637,12.111C14.645,12.076 14.274,11.856 13.812,11.623C12.816,11.119 11.492,10.271 10.608,9.572C10.257,9.295 9.911,9.023 9.839,8.967C9.721,8.876 9.654,8.934 9.203,9.522Z"
+      android:fillColor="#0773BB"/>
+  <path
+      android:pathData="M16.182,12.813C15.955,13.658 16,20.647 16.233,20.902C16.29,20.964 18.587,21.256 19.614,21.331C21.622,21.48 25.483,21.253 25.894,20.963C26.656,20.426 27.801,16.296 27.801,14.085V13.583L27.094,13.696C24.105,14.171 19.499,13.749 16.341,12.71C16.266,12.686 16.205,12.725 16.182,12.813Z"
+      android:fillColor="#28ACE2"/>
+  <path
+      android:pathData="M0.13,11.939C-0.296,15.035 0.338,18.428 1.809,20.919C2.092,21.4 2.095,21.399 2.259,20.69C2.482,19.728 2.892,18.354 3.284,17.252C3.499,16.648 3.674,16.13 3.673,16.102C3.673,16.073 3.376,15.711 3.014,15.296C2.141,14.296 1.534,13.467 0.866,12.361C0.563,11.859 0.293,11.419 0.265,11.384C0.238,11.348 0.177,11.598 0.13,11.939Z"
+      android:fillColor="#22B24C"/>
+  <path
+      android:pathData="M4.483,19.044C3.912,20.945 3.406,23.05 3.474,23.245C3.64,23.719 6.014,25.615 7.32,26.316C9.711,27.601 13.29,28.288 15.491,27.885L15.825,27.824L15.686,27.292C15.444,26.358 15.054,24.414 14.886,23.302L14.722,22.224L13.562,21.863C10.713,20.978 8.078,19.634 5.869,17.941C5.451,17.62 5.083,17.358 5.05,17.358C5.017,17.358 4.762,18.117 4.483,19.044Z"
+      android:fillColor="#0773BB"/>
+  <path
+      android:pathData="M16.46,22.923C16.62,24.008 16.886,25.465 17.098,26.402L17.339,27.473L17.588,27.45C19.177,27.305 22.659,25.157 24.274,23.325L24.552,23.01L23.115,23.05C21.233,23.103 17.204,22.841 16.544,22.623C16.423,22.583 16.414,22.611 16.46,22.923Z"
+      android:fillColor="#76C47A"/>
+</vector>

cmp-navigation/src/commonMain/kotlin/cmp/navigation/authenticated/AuthenticatedNavbarNavigationScreen.kt

@@ -27,7 +27,6 @@ import androidx.compose.material3.DrawerValue
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
 import androidx.compose.material3.ModalNavigationDrawer
@@ -37,7 +36,6 @@ import androidx.compose.material3.SnackbarDuration.Indefinite
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -64,11 +62,11 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.navOptions
 import cmp.navigation.components.MifosScaffold
+import cmp.navigation.components.MifosTopAppBar
 import cmp.navigation.components.ScaffoldNavigationData
 import cmp.navigation.navigation.HomeDestinationsScreen
 import cmp.navigation.ui.rememberMifosNavController
 import com.mifos.core.common.utils.Constants
-import com.mifos.core.designsystem.icon.MifosIcons
 import com.mifos.core.designsystem.theme.DesignToken
 import com.mifos.core.ui.RootTransitionProviders
 import com.mifos.core.ui.util.EventsEffect
@@ -88,7 +86,6 @@ import com.mifos.feature.groups.navigation.navigateToCreateNewGroupScreen
 import com.mifos.feature.groups.navigation.navigateToGroupDetailsScreen
 import com.mifos.feature.groups.navigation.navigateToGroupListScreen
 import com.mifos.feature.loan.groupLoanAccount.navigateToGroupLoanScreen
-import com.mifos.feature.loan.loanAccount.navigateToLoanAccountScreen
 import com.mifos.feature.loan.loanAccountSummary.navigateToLoanAccountSummaryScreen
 import com.mifos.feature.note.notes.navigateToNoteScreen
 import com.mifos.feature.savings.navigation.navigateToAddSavingsAccount
@@ -101,6 +98,7 @@ import kotlinx.coroutines.launch
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 import org.koin.compose.viewmodel.koinViewModel
+import org.mifos.core.designsystem.component.MifosTopAppBar
 import org.mifos.navigation.generated.resources.Res
 import org.mifos.navigation.generated.resources.cmp_navigation_mifos
 import org.mifos.navigation.generated.resources.cmp_navigation_no_internet
@@ -110,14 +108,11 @@ import org.mifos.navigation.generated.resources.ic_dp_placeholder
 @Composable
 internal fun AuthenticatedNavbarNavigationScreen(
     navigateToDocumentScreen: (Int, String) -> Unit,
-    navigateToNoteScreen: (Int, String) -> Unit,
     onDrawerItemClick: (String) -> Unit,
     modifier: Modifier = Modifier,
     navController: NavHostController = rememberMifosNavController(
         name = "AuthenticatedNavbarScreen",
     ),
-    navigateToNewLoanAccountScreen: (Int) -> Unit,
-    navigateToNewSavingsAccountScreen: (Int) -> Unit,
     viewModel: AuthenticatedNavbarNavigationViewModel = koinViewModel(),
 ) {
     val scope = rememberCoroutineScope()
@@ -177,9 +172,6 @@ internal fun AuthenticatedNavbarNavigationScreen(
         },
         onDrawerItemClick = onDrawerItemClick,
         navigateToDocumentScreen = navigateToDocumentScreen,
-        navigateToNoteScreen = navigateToNoteScreen,
-        navigateToNewLoanAccountScreen = navigateToNewLoanAccountScreen,
-        navigateToNewSavingsAccountScreen = navigateToNewSavingsAccountScreen,
     )
 }
 
@@ -189,9 +181,6 @@ internal fun AuthenticatedNavbarNavigationScreenContent(
     navController: NavHostController,
     onDrawerItemClick: (String) -> Unit,
     navigateToDocumentScreen: (Int, String) -> Unit,
-    navigateToNoteScreen: (Int, String) -> Unit,
-    navigateToNewLoanAccountScreen: (Int) -> Unit,
-    navigateToNewSavingsAccountScreen: (Int) -> Unit,
     modifier: Modifier = Modifier,
     snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
     onAction: (AuthenticatedNavBarAction) -> Unit,
@@ -296,26 +285,14 @@ internal fun AuthenticatedNavbarNavigationScreenContent(
     ) {
         MifosScaffold(
             topBar = {
-                TopAppBar(
-                    title = {
-                        Text(stringResource(Res.string.cmp_navigation_mifos))
-                    },
-                    navigationIcon = {
-                        IconButton(
-                            onClick = {
-                                scope.launch {
-                                    drawerState.apply {
-                                        if (isClosed) open() else close()
-                                    }
-                                }
-                            },
-                        ) {
-                            Icon(
-                                imageVector = MifosIcons.Menu,
-                                contentDescription = "Menu",
-                            )
+                MifosTopAppBar(
+                    onNavigationIconClick = {
+                        scope.launch {
+                            drawerState.open()
                         }
                     },
+                    onSearchIconClick = {},
+                    onNotificationIconClick = {},
                 )
             },
             contentWindowInsets = WindowInsets(0.dp),
@@ -398,44 +375,19 @@ internal fun AuthenticatedNavbarNavigationScreenContent(
 
                 clientNavGraph(
                     navController = navController,
-                    addLoanAccount = navController::navigateToLoanAccountScreen,
-                    addSavingsAccount = { clientId ->
-                        navController.navigateToAddSavingsAccount(0, clientId, false)
-                    },
-                    documents = { clientId ->
-                        navigateToDocumentScreen(
-                            clientId,
-                            Constants.ENTITY_TYPE_CLIENTS,
-                        )
-                    },
                     moreClientInfo = { clientId ->
                         navController.navigateToDataTable(
                             Constants.DATA_TABLE_NAME_CLIENT,
                             clientId,
                         )
                     },
-                    notes = { clientId ->
-                        navigateToNoteScreen(
-                            clientId,
-                            Constants.ENTITY_TYPE_CLIENTS,
-                        )
-                    },
-                    loanAccountSelected = { loanAccountNumber ->
-                        navController.navigateToLoanAccountSummaryScreen(loanAccountNumber)
-                    },
-                    savingsAccountSelected = { clientId, depositType ->
-                        navController.navigateToSavingsAccountSummaryScreen(clientId, depositType)
-                    },
                     activateClient = { clientId ->
                         navController.navigateToActivateRoute(
                             clientId,
                             Constants.ACTIVATE_CLIENT,
                         )
                     },
                     hasDatatables = navController::navigateDataTableList,
-                    onDocumentClicked = navigateToDocumentScreen,
-                    navigateToNewLoanAccount = navigateToNewLoanAccountScreen,
-                    navigateToNewSavingsAccount = navigateToNewSavingsAccountScreen,
                 )
             }
         }

cmp-navigation/src/commonMain/kotlin/cmp/navigation/authenticated/AuthenticatedNavbarRoute.kt

@@ -25,17 +25,11 @@ internal fun NavController.navigateToAuthenticatedNavBar(navOptions: NavOptions?
 internal fun NavGraphBuilder.authenticatedNavbarGraph(
     onDrawerItemClick: (String) -> Unit,
     navigateToDocumentScreen: (Int, String) -> Unit,
-    navigateToNoteScreen: (Int, String) -> Unit,
-    navigateToNewLoanAccountScreen: (Int) -> Unit,
-    navigateToNewSavingsAccountScreen: (Int) -> Unit,
 ) {
     composable<AuthenticatedNavbar> {
         AuthenticatedNavbarNavigationScreen(
             onDrawerItemClick = onDrawerItemClick,
             navigateToDocumentScreen = navigateToDocumentScreen,
-            navigateToNoteScreen = navigateToNoteScreen,
-            navigateToNewLoanAccountScreen = navigateToNewLoanAccountScreen,
-            navigateToNewSavingsAccountScreen = navigateToNewSavingsAccountScreen,
         )
     }
 }

cmp-navigation/src/commonMain/kotlin/cmp/navigation/authenticated/AuthenticatedNavigation.kt

@@ -18,22 +18,15 @@ import com.mifos.feature.activate.activateDestination
 import com.mifos.feature.checker.inbox.task.navigation.checkerInboxTaskNavGraph
 import com.mifos.feature.client.navigation.navigateClientDetailsScreen
 import com.mifos.feature.dataTable.navigation.dataTableNavGraph
-import com.mifos.feature.dataTable.navigation.navigateToDataTable
 import com.mifos.feature.document.navigation.documentListScreen
 import com.mifos.feature.document.navigation.navigateToDocumentListScreen
 import com.mifos.feature.individualCollectionSheet.navigation.generateCollectionSheetScreen
 import com.mifos.feature.individualCollectionSheet.navigation.individualCollectionSheetNavGraph
 import com.mifos.feature.loan.groupLoanAccount.groupLoanScreen
 import com.mifos.feature.loan.loanAccount.addLoanAccountScreen
-import com.mifos.feature.loan.navigation.loanNavGraph
-import com.mifos.feature.loan.newLoanAccount.navigateToNewLoanAccountRoute
-import com.mifos.feature.note.navigation.noteNavGraph
-import com.mifos.feature.note.notes.navigateToNoteScreen
 import com.mifos.feature.offline.navigation.offlineNavGraph
 import com.mifos.feature.path.tracking.navigation.pathTrackingRoute
 import com.mifos.feature.report.navigation.reportNavGraph
-import com.mifos.feature.savings.navigation.savingsNavGraph
-import com.mifos.feature.savings.savingsAccountv2.navigateToSavingsAccountRoute
 import com.mifos.feature.settings.navigation.settingsScreen
 import kotlinx.serialization.ExperimentalSerializationApi
 import kotlinx.serialization.InternalSerializationApi
@@ -60,9 +53,6 @@ internal fun NavGraphBuilder.authenticatedGraph(
                 }
             },
             navigateToDocumentScreen = navController::navigateToDocumentListScreen,
-            navigateToNoteScreen = navController::navigateToNoteScreen,
-            navigateToNewLoanAccountScreen = navController::navigateToNewLoanAccountRoute,
-            navigateToNewSavingsAccountScreen = navController::navigateToSavingsAccountRoute,
         )
 
         checkerInboxTaskNavGraph(navController)
@@ -80,22 +70,10 @@ internal fun NavGraphBuilder.authenticatedGraph(
             },
         )
 
-        savingsNavGraph(
-            navController = navController,
-            onBackPressed = navController::popBackStack,
-            loadMoreSavingsAccountInfo = navController::navigateToDataTable,
-            loadDocuments = navController::navigateToDocumentListScreen,
-        )
-
         aboutDestination(onBackPressed = navController::popBackStack)
 
         offlineNavGraph(navController = navController)
 
-        noteNavGraph(
-            navController = navController,
-            onBackPressed = navController::popBackStack,
-        )
-
         activateDestination(onBackPressed = navController::popBackStack)
 
         settingsScreen(
@@ -114,12 +92,6 @@ internal fun NavGraphBuilder.authenticatedGraph(
 
         reportNavGraph(navController = navController)
 
-        loanNavGraph(
-            navController = navController,
-            onMoreInfoClicked = navController::navigateToDataTable,
-            onDocumentsClicked = navController::navigateToDocumentListScreen,
-        )
-
         groupLoanScreen { navController.popBackStack() }
 
         addLoanAccountScreen(

cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosScaffold.kt

@@ -33,6 +33,7 @@ import androidx.compose.material3.FabPosition
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.ScaffoldDefaults
+import androidx.compose.material3.contentColorFor
 import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
 import androidx.compose.material3.pulltorefresh.pullToRefresh
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@@ -42,12 +43,14 @@ import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 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.platform.testTag
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import com.mifos.core.designsystem.component.MifosNavigationRail
 import com.mifos.core.designsystem.component.MifosPullToRefreshState
 import com.mifos.core.designsystem.component.rememberMifosPullToRefreshState
+import com.mifos.core.designsystem.theme.AppColors
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3WindowSizeClassApi::class)
 @Suppress("LongMethod")
@@ -62,6 +65,8 @@ fun MifosScaffold(
     floatingActionButtonPosition: FabPosition = FabPosition.End,
     navigationData: ScaffoldNavigationData? = null,
     pullToRefreshState: MifosPullToRefreshState = rememberMifosPullToRefreshState(),
+    containerColor: Color = AppColors.customWhite,
+    contentColor: Color = contentColorFor(containerColor),
     contentWindowInsets: WindowInsets = ScaffoldDefaults
         .contentWindowInsets
         .only(WindowInsetsSides.Horizontal),
@@ -74,11 +79,13 @@ fun MifosScaffold(
     val isNavigationBarVisible = isCompact && hasNavigationItems
     Scaffold(
         modifier = modifier,
-        topBar = if (isNavigationBarVisible) {
-            topBar
-        } else {
-            {}
+        topBar = {
+            if (isCompact) {
+                topBar()
+            }
         },
+        containerColor = containerColor,
+        contentColor = contentColor,
         bottomBar = {
             AnimatedVisibility(
                 visible = isNavigationBarVisible,