Worked on browse items entries, created all screens for them

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowseBankAccountScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowseBankAccountScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowseBankAccountListScreen()
+        } else {
+            BrowseBankAccountEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowseBankAccountEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.bank),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store bank information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive banking \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store bank info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowseBankAccountListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowseContactInfoScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowseContactInfoScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowseContactInfoListScreen()
+        } else {
+            BrowseContactInfoEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowseContactInfoEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.contact_info),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store contact information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive contact \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store contact info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowseContactInfoListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowseDriverLicenseScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowseDriverLicenseScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowseDriverLicenseListScreen()
+        } else {
+            BrowseDriverLicenseEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowseDriverLicenseEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.driver_license),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store driver's license information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive driver's license \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store driver's license info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowseDriverLicenseListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowsePassportScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowsePassportScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowsePassportListScreen()
+        } else {
+            BrowsePassportEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowsePassportEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.passport),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store passport information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive passport \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store passport info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowsePassportListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowsePasswordScreen.kt

@@ -0,0 +1,143 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.ColumnScope
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+import com.fastest.pass.login.presentation.ui.components.ClickType
+
+@Composable
+fun BrowsePasswordScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowsePasswordListScreen()
+        } else {
+            BrowsePasswordEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowsePasswordEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.password_lock),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store password information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive password \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store password info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowsePasswordListScreen() {}
+
+@Composable
+fun ColumnScope.StoreInfoButton(buttonText: String) {
+    Button(
+        modifier = Modifier
+            .padding(start = 0.dp, end = 0.dp)
+            .background(colorResource(id = R.color.transparent))
+            .fillMaxWidth()
+            .height(60.dp)
+            .clickable() { },
+        onClick = {},
+        shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+        colors = ButtonDefaults.buttonColors(
+            contentColor = colorResource(id = R.color.white),
+            containerColor = colorResource(id = R.color.red_login_button),
+        ),
+    )
+    {
+        Text(
+            text = buttonText,
+            style = MaterialTheme.typography.bodyMedium.copy(
+                fontSize = 20.sp,
+                color = colorResource(id = R.color.white)
+            ),
+            textAlign = TextAlign.Center
+        )
+    }
+}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowsePaymentCardScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowsePaymentCardScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowsePaymentCardListScreen()
+        } else {
+            BrowsePaymentCardEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowsePaymentCardEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.cards),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store payment card information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive payment card \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store payment card info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowsePaymentCardListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowseSecureNoteScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowseSecureNoteScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowseSecureNoteListScreen()
+        } else {
+            BrowseSecureNoteEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowseSecureNoteEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.secure_note),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store secure note information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive secure note \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store secure note info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowseSecureNoteListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/BrowseWifiPasswordScreen.kt

@@ -0,0 +1,107 @@
+package com.fastest.pass.browse.presentation.ui.components
+
+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.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+
+@Composable
+fun BrowseWifiPasswordScreen(
+    isItemsAdded: Boolean = false
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isItemsAdded) {
+            BrowseWifiPasswordListScreen()
+        } else {
+            BrowseWifiPasswordEmptyListScreen()
+        }
+    }
+}
+
+@Composable
+fun BrowseWifiPasswordEmptyListScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .border(
+                        border = BorderStroke(
+                            1.dp,
+                            colorResource(id = R.color.home_background_color)
+                        ), shape = RoundedCornerShape(25.dp)
+                    )
+                    .clip(RoundedCornerShape(25.dp))
+                    .background(Color.Transparent)
+                    .clickable {
+                    }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.wifi),
+                    contentDescription = "Password",
+                    modifier = Modifier
+                        .padding(28.dp)
+                        .size(48.dp)
+                )
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = "Store wi-Fi password information",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontSize = 24.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Text(
+                text = "Securely store your sensitive wi-fi password \n information for your private use only.",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.labelLarge.copy(
+                    fontSize = 16.sp
+                ),
+            )
+            Spacer(modifier = Modifier.height(15.dp))
+            StoreInfoButton(buttonText = "Store wi-fi password info")
+
+        }
+    }
+}
+
+@Composable
+fun BrowseWifiPasswordListScreen() {}

app/src/main/java/com/fastest/pass/browse/presentation/ui/components/NewItemBrowseScreen.kt

@@ -26,6 +26,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.fastest.pass.R
+import com.fastest.pass.home.presentation.ui.components.GapLineANI
 
 enum class ClickTypeNewItemBrowse {
     GO_BACK_BROWSE
@@ -55,6 +56,36 @@ fun NewItemBrowseScreen(
         ShowNewItemBrowseHeader(text = screenName) { clickTypeNewItemBrowseId ->
             clickTypeNewItemBrowse(clickTypeNewItemBrowseId)
         }
+        Spacer(modifier = Modifier.height(20.dp))
+        GapLineANI()
+        
+        when (screenNameType) {
+            ClickTypeItemBrowse.Password -> {
+                BrowsePasswordScreen()
+            }
+            ClickTypeItemBrowse.Bank -> {
+                BrowseBankAccountScreen()
+            }
+            ClickTypeItemBrowse.Payment -> {
+                BrowsePaymentCardScreen()
+            }
+            ClickTypeItemBrowse.Wifi -> {
+                BrowseWifiPasswordScreen()
+            }
+            ClickTypeItemBrowse.Note -> {
+                BrowseSecureNoteScreen()
+            }
+            ClickTypeItemBrowse.Contact -> {
+                BrowseContactInfoScreen()
+            }
+            ClickTypeItemBrowse.Driver -> {
+                BrowseDriverLicenseScreen()
+            }
+            ClickTypeItemBrowse.Passport -> {
+                BrowsePassportScreen()
+            }
+        }
+
     }
 }
 

app/src/main/java/com/fastest/pass/browse/presentation/ui/fragment/BrowseFragment.kt

@@ -37,7 +37,7 @@ class BrowseFragment : BaseFragment() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        navigation.navigate(this)
+        navigation.navigate(this, requireActivity())
     }
 
     override fun onCreateView(

app/src/main/java/com/fastest/pass/browse/presentation/ui/fragment/NewItemBrowseFragment.kt

@@ -13,7 +13,9 @@ import androidx.compose.material.Scaffold
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
+import androidx.fragment.app.FragmentActivity
 import androidx.fragment.app.activityViewModels
 import androidx.fragment.app.viewModels
 import com.fastest.pass.BaseFragment
@@ -41,7 +43,7 @@ class NewItemBrowseFragment : BaseFragment() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        navigation.navigate(this)
+        navigation.navigate(this, requireActivity())
     }
 
     override fun onCreateView(

app/src/main/java/com/fastest/pass/browse/utils/BrowseNavigation.kt

@@ -1,13 +1,16 @@
 package com.fastest.pass.browse.utils
 
+import androidx.fragment.app.FragmentActivity
 import androidx.lifecycle.lifecycleScope
 import androidx.navigation.fragment.findNavController
 import com.fastest.pass.R
+import com.fastest.pass.browse.presentation.ui.fragment.NewItemBrowseFragment
+import com.fastest.pass.dashboard.presentation.ui.component.BottomTab
 import com.fastest.pass.home.presentation.ui.fragment.BrowseFragment
 
 class BrowseNavigation {
 
-    fun navigate(browseFragment: BrowseFragment) {
+    fun navigate(browseFragment: BrowseFragment, activity: FragmentActivity) {
         browseFragment.lifecycleScope.launchWhenStarted {
             browseFragment.viewmodel.router.collect { router ->
                 when (router) {
@@ -15,7 +18,12 @@ class BrowseNavigation {
                         browseFragment.findNavController().popBackStack()
                     }
                     BrowseRoute.OpenNewItemBrowseScreen -> {
-                        browseFragment.findNavController().navigate(R.id.newItemBrowseFragment)
+//                        browseFragment.findNavController().navigate(R.id.newItemBrowseFragment)
+
+                        val newItemBrowseFragment1 = NewItemBrowseFragment()
+                        activity.supportFragmentManager.beginTransaction()
+                            .replace(R.id.fragment_container_view, newItemBrowseFragment1)
+                            .commit()
                     }
                     BrowseRoute.OpenNoneScreen -> {}
                 }
@@ -24,4 +32,5 @@ class BrowseNavigation {
         }
     }
 
-}
+}
+

app/src/main/java/com/fastest/pass/browse/utils/NewItemBrowseNavigation.kt

@@ -1,17 +1,26 @@
 package com.fastest.pass.browse.utils
 
+import androidx.fragment.app.FragmentActivity
 import androidx.lifecycle.lifecycleScope
 import androidx.navigation.fragment.findNavController
+import com.fastest.pass.R
 import com.fastest.pass.browse.presentation.ui.fragment.NewItemBrowseFragment
+import com.fastest.pass.dashboard.domain.model.Screen
+import com.fastest.pass.home.presentation.ui.fragment.BrowseFragment
 
 class NewItemBrowseNavigation {
 
-    fun navigate(newItemBrowseFragment: NewItemBrowseFragment) {
+    fun navigate(newItemBrowseFragment: NewItemBrowseFragment, activity: FragmentActivity) {
         newItemBrowseFragment.lifecycleScope.launchWhenStarted {
             newItemBrowseFragment.viewmodel.router.collect { router ->
                 when (router) {
                     NewItemBrowseRoute.GoBackToBrowseScreen -> {
-                        newItemBrowseFragment.findNavController().popBackStack()
+//                        newItemBrowseFragment.findNavController().popBackStack()
+
+                        val browseFragment = BrowseFragment()
+                        activity.supportFragmentManager.beginTransaction()
+                            .replace(R.id.fragment_container_view, browseFragment)
+                            .commit()
                     }
                     NewItemBrowseRoute.OpenNoneScreen -> {}
                 }

app/src/main/java/com/fastest/pass/dashboard/presentation/ui/component/BottomTab.kt

@@ -127,6 +127,7 @@ fun loadFragment(activity: FragmentActivity, screen: Screen) {
 
     activity.supportFragmentManager.beginTransaction()
         .replace(R.id.fragment_container_view, fragment)
+        .addToBackStack(screen.route)
         .commit()
 }