Worked on account screen navigation and logout UI and its navihation to login screen

app/src/main/java/com/fastest/pass/account/di/AccountModule.kt

@@ -0,0 +1,19 @@
+package com.fastest.pass.account.di
+
+import com.fastest.pass.account.utils.AccountNavigation
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object AccountModule {
+
+    @Provides
+    @Singleton
+    fun provideNavigation() : AccountNavigation {
+        return AccountNavigation()
+    }
+}

app/src/main/java/com/fastest/pass/account/presentation/ui/components/AccountScreen.kt

@@ -1,11 +1,16 @@
 package com.fastest.pass.account.presentation.ui.components
 
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
@@ -17,30 +22,50 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.DialogProperties
+import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavHostController
 import com.fastest.pass.R
 import com.fastest.pass.home.presentation.ui.components.GapLine
 
+enum class ClickType {
+    OPEN_LOGIN_SCREEN
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun AccountScreen() {
+fun AccountScreen(clickType: (ClickType) -> Unit) {
     val keyboardController = LocalSoftwareKeyboardController.current
     val focusManager = LocalFocusManager.current
+    var isLoggedOut by remember { mutableStateOf(false) }
 
     Box(
         modifier = Modifier
@@ -74,14 +99,35 @@ fun AccountScreen() {
                         .padding(bottom = 20.dp)
                 ) {
                     Spacer(modifier = Modifier.height(50.dp))
-                    AddFeaturesRowAS(icon = R.drawable.about, title = R.string.about)
+                    AddFeaturesRowAS(icon = R.drawable.about, title = R.string.about) {}
                     Spacer(modifier = Modifier.height(20.dp))
-                    AddFeaturesRowAS(icon = R.drawable.help, title = R.string.helpandsupport)
+                    AddFeaturesRowAS(icon = R.drawable.help, title = R.string.helpandsupport) {}
                     Spacer(modifier = Modifier.height(20.dp))
-                    AddFeaturesRowAS(icon = R.drawable.logout, title = R.string.logout)
+                    AddFeaturesRowAS(icon = R.drawable.logout, title = R.string.logout) {
+                        isLoggedOut = true
+                    }
                 }
             }
         }
+
+        if (isLoggedOut) {
+            AlertDialog(
+                onDismissRequest = { isLoggedOut = false },
+                properties = DialogProperties(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(250.dp)
+            ) {
+                LogoutDialog(title = stringResource(id = R.string.logout),
+                    desc = stringResource(id = R.string.sure_logout_account),
+                    onCancel = { isLoggedOut = false },
+                    clickType = {
+                        clickType ->
+                        clickType(clickType)
+                    }
+                    )
+            }
+        }
     }
 }
 
@@ -132,7 +178,7 @@ fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
 }
 
 @Composable
-fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int) {
+fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int, onClick: () -> Unit) {
     Row(
         modifier = Modifier
             .border(
@@ -141,13 +187,17 @@ fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int) {
             )
             .clip(RoundedCornerShape(15.dp))
             .background(colorResource(id = R.color.white))
-            .padding(vertical = 15.dp)
-            .fillMaxWidth(),
+            .fillMaxWidth()
+            .clickable {
+                onClick.invoke()
+            },
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically
     ) {
         Surface(
-            modifier = Modifier.padding(start = 10.dp),
+            modifier = Modifier
+                .padding(start = 10.dp)
+                .padding(vertical = 15.dp),
             color = Color.Transparent
         ) {
             Image(
@@ -162,7 +212,9 @@ fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int) {
         }
 
         Surface(
-            modifier = Modifier.padding(start = 15.dp, end = 5.dp),
+            modifier = Modifier
+                .padding(start = 15.dp, end = 5.dp)
+            ,
             color = Color.Transparent
         ) {
             Text(
@@ -176,3 +228,102 @@ fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int) {
         }
     }
 }
+
+@Composable
+fun BoxScope.LogoutDialog(
+    title: String,
+    desc: String,
+    onCancel : () -> Unit,
+    clickType: (ClickType) -> Unit
+) {
+    Surface(
+        color = colorResource(id = R.color.white),
+        modifier = Modifier
+            .background(Color.Transparent)
+            .fillMaxWidth()
+        ,
+        shape = RoundedCornerShape(18.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .background(colorResource(id = R.color.white))
+        ) {
+            Log.d("islogoutClicked", "AlertDialog")
+
+            Text(text = title,
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.headlineSmall,
+                modifier = Modifier.padding(top = 45.dp)
+            )
+            Text(text = desc,
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(top = 26.dp)
+                    .padding(horizontal = 10.dp)
+            )
+            Row (
+                modifier = Modifier
+                    .padding(top = 34.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Bottom
+            ) {
+                Button(
+                    onClick = {
+                        Log.d("test_button", "No")
+                        onCancel.invoke()
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 15.dp, end = 5.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.blue_login),
+                    ),
+                )
+                {
+                    Text(text = stringResource(R.string.no),
+                        style = MaterialTheme.typography.headlineSmall)
+                    Log.d("test_button", "RowScope")
+                }
+
+                Button(
+                    onClick = {
+                        Log.d("test_button", "Logout Yes")
+                        clickType.invoke(ClickType.OPEN_LOGIN_SCREEN)
+                        onCancel.invoke()
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 5.dp, end = 15.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.red_login_button),
+                    ),
+                )
+                {
+                    Text(text = stringResource(R.string.yes),
+                        style = MaterialTheme.typography.headlineSmall)
+                    Log.d("test_button", "RowScope")
+                }
+            }
+        }
+
+    }
+}

app/src/main/java/com/fastest/pass/account/presentation/ui/fragment/AccountFragment.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.colorResource
@@ -17,9 +16,10 @@ import androidx.fragment.app.viewModels
 import com.fastest.pass.BaseFragment
 import com.fastest.pass.R
 import com.fastest.pass.account.presentation.ui.components.AccountScreen
-import com.fastest.pass.home.presentation.ui.components.ClickType
-import com.fastest.pass.home.presentation.ui.components.HomeScreen
-import com.fastest.pass.home.utils.HomeRoute
+import com.fastest.pass.account.presentation.ui.components.ClickType
+import com.fastest.pass.account.presentation.viewmodels.AccountViewModel
+import com.fastest.pass.account.utils.AccountNavigation
+import com.fastest.pass.account.utils.AccountRoute
 import com.fastest.pass.ui.theme.FastestPassTheme
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
@@ -27,9 +27,14 @@ import javax.inject.Inject
 @AndroidEntryPoint
 class AccountFragment : BaseFragment() {
 
+    val viewmodel: AccountViewModel by viewModels()
+
+    @Inject
+    lateinit var navigation: AccountNavigation
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        navigation.navigate(this)
     }
 
     override fun onCreateView(
@@ -48,7 +53,13 @@ class AccountFragment : BaseFragment() {
                                 .background(colorResource(id = R.color.home_background_color))
                                 .padding(paddingValues.calculateBottomPadding())
                         ) {
-                            AccountScreen()
+                            AccountScreen { clickType ->
+                                when (clickType) {
+                                    ClickType.OPEN_LOGIN_SCREEN -> {
+                                        viewmodel.navigateTo(AccountRoute.OpenLoginScreen)
+                                    }
+                                }
+                            }
                         }
                     }
                 }

app/src/main/java/com/fastest/pass/account/presentation/viewmodels/AccountViewModel.kt

@@ -0,0 +1,15 @@
+package com.fastest.pass.account.presentation.viewmodels
+
+import androidx.lifecycle.ViewModel
+import com.fastest.pass.account.utils.AccountRoute
+import kotlinx.coroutines.flow.MutableStateFlow
+
+class AccountViewModel : ViewModel() {
+
+    private val _router = MutableStateFlow<AccountRoute>(AccountRoute.OpenNoneScreen)
+    val router: MutableStateFlow<AccountRoute> = _router
+
+    fun navigateTo(accountRoute: AccountRoute) {
+        _router.value = accountRoute
+    }
+}

app/src/main/java/com/fastest/pass/account/utils/AccountNavigation.kt

@@ -0,0 +1,24 @@
+package com.fastest.pass.account.utils
+
+import androidx.lifecycle.lifecycleScope
+import androidx.navigation.fragment.findNavController
+import com.fastest.pass.R
+import com.fastest.pass.account.presentation.ui.fragment.AccountFragment
+
+class AccountNavigation {
+
+    fun navigate(accountFragment: AccountFragment) {
+        accountFragment.lifecycleScope.launchWhenStarted {
+            accountFragment.viewmodel.router.collect { router ->
+                when (router) {
+                    AccountRoute.OpenLoginScreen -> {
+                        accountFragment.findNavController().popBackStack()
+                        accountFragment.findNavController().navigate(R.id.loginFragment)
+                    }
+                    AccountRoute.OpenNoneScreen -> {}
+                }
+                accountFragment.viewmodel.navigateTo(AccountRoute.OpenNoneScreen)
+            }
+        }
+    }
+}

app/src/main/java/com/fastest/pass/account/utils/AccountRoute.kt

@@ -0,0 +1,6 @@
+package com.fastest.pass.account.utils
+
+sealed class AccountRoute {
+    data object OpenLoginScreen : AccountRoute()
+    data object OpenNoneScreen : AccountRoute()
+}

app/src/main/res/values/strings.xml

@@ -92,5 +92,9 @@
     <string name="about">About FastestPass</string>
     <string name="helpandsupport">Help &amp; Support</string>
     <string name="logout">Logout</string>
+    <string name="yes">Yes</string>
+    <string name="no">No</string>
+    <string name="logout_account">Logout Account</string>
+    <string name="sure_logout_account">Are you sure to logout the account?</string>
 
 </resources>