notification

app/src/main/java/com/mob/utsmyanmar/MainActivity.kt

@@ -3,10 +3,11 @@ package com.mob.utsmyanmar
 import android.os.Bundle
 import android.view.WindowManager
 import androidx.activity.ComponentActivity
-import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsControllerCompat
 import androidx.navigation.compose.rememberNavController
 import com.mob.utsmyanmar.ui.navigation.AppNavGraph
 import com.mob.utsmyanmar.ui.theme.MOBPOSTheme
@@ -17,7 +18,10 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
 //        installSplashScreen()
         super.onCreate(savedInstanceState)
-//        enableEdgeToEdge()
+        enableEdgeToEdge()
+        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
+        windowInsetsController.hide(WindowInsetsCompat.Type.navigationBars())
+        windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
         window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)
         setContent {
             MOBPOSTheme {

app/src/main/java/com/mob/utsmyanmar/ui/components/appbar/AppBar.kt

@@ -1,5 +1,6 @@
 package com.mob.utsmyanmar.ui.components.appbar
 
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -20,6 +21,7 @@ fun AppBar(
     title: String,
     icon: ImageVector? = null,
     onIconClick: (() -> Unit)? = null,
+    actions: @Composable RowScope.() -> Unit = {}
 ) {
     CenterAlignedTopAppBar(
         title = {
@@ -44,6 +46,8 @@ fun AppBar(
             }
         },
 
+        actions = actions,
+
         colors = TopAppBarDefaults.topAppBarColors(
             containerColor = Color.LegacyRed
         )

app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardScreen2.kt

@@ -11,12 +11,15 @@ 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.offset
 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.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
@@ -30,12 +33,13 @@ import androidx.compose.material.icons.filled.CreditCard
 import androidx.compose.material.icons.filled.Lock
 import androidx.compose.material.icons.filled.LockOpen
 import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.Notifications
 import androidx.compose.material.icons.filled.Replay
 import androidx.compose.material.icons.filled.SwapHoriz
 import androidx.compose.material.icons.filled.Sync
-import androidx.compose.material.icons.filled.Undo
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
@@ -45,8 +49,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
 import androidx.compose.material3.ModalNavigationDrawer
-import androidx.compose.material3.NavigationDrawerItem
-import androidx.compose.material3.NavigationDrawerItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -67,6 +69,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -83,6 +86,7 @@ import com.utsmyanmar.paylibs.sign_on.EchoTestProcess
 import com.utsmyanmar.paylibs.sign_on.SignOnListener
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import kotlin.time.Duration.Companion.milliseconds
 
 @Composable
 fun DashboardScreen2(
@@ -92,6 +96,8 @@ fun DashboardScreen2(
     onNavigateVersion: () -> Unit = {},
     onNavigateFunctions: () -> Unit = {},
     onNavigateAction: (String) -> Unit = {},
+    onNavigateNotifications: () -> Unit = {},
+    dashboardUiState: DashboardUiState = DashboardUiState(),
     deviceInfoViewModel: DeviceInfoViewModel = viewModel()
 ) {
     val deviceInfo by deviceInfoViewModel.uiState.collectAsState()
@@ -358,7 +364,26 @@ fun DashboardScreen2(
                 AppBar(
                     title = "Dashboard",
                     icon = Icons.Default.Menu,
-                    onIconClick = { scope.launch { drawerState.open() } })
+                    onIconClick = { scope.launch { drawerState.open() } },
+                    actions = {
+                        IconButton(onClick = onNavigateNotifications) {
+                            Box {
+                                Icon(
+                                    imageVector = Icons.Default.Notifications,
+                                    contentDescription = "Notifications",
+                                    tint = Color.White
+                                )
+                                Box(
+                                    modifier = Modifier
+                                        .size(8.dp)
+                                        .background(Color.GoldenGlow, CircleShape)
+                                        .align(Alignment.TopEnd)
+                                        .offset(x = 2.dp, y = (-2).dp)
+                                )
+                            }
+                        }
+                    }
+                )
             }) { paddingValues ->
             Column(
                 modifier = Modifier
@@ -382,10 +407,10 @@ fun DashboardScreen2(
                 ) {
                     SummaryCard()
                 }
-                //bottom section
+                //pager section
                 Box(
                     modifier = Modifier
-                        .weight(1.5f)
+                        .weight(1.3f)
                         .fillMaxWidth(),
                 ) {
                     MenuPager(
@@ -398,37 +423,18 @@ fun DashboardScreen2(
                         modifier = Modifier.fillMaxSize()
                     )
                 }
+                //transactions section
+                RecentTransactions(
+                    transactions = dashboardUiState.recentTransactions,
+                    modifier = Modifier
+                        .weight(1.2f)
+                        .fillMaxWidth()
+                )
             }
         }
     }
 }
 
-@Composable
-private fun DrawerItem(
-    title: String, icon: ImageVector, onClick: () -> Unit
-) {
-    NavigationDrawerItem(
-        label = {
-            Text(
-                text = title, fontWeight = FontWeight.Medium
-            )
-        },
-        selected = false,
-        onClick = onClick,
-        icon = {
-            Icon(
-                imageVector = icon, contentDescription = title
-            )
-        },
-        modifier = Modifier.padding(horizontal = 12.dp, vertical = 2.dp),
-        colors = NavigationDrawerItemDefaults.colors(
-            unselectedContainerColor = androidx.compose.ui.graphics.Color.Transparent,
-            unselectedIconColor = Color.LegacyRed,
-            unselectedTextColor = Color.Black
-        )
-    )
-}
-
 @Composable
 private fun AdvertisingArea() {
 
@@ -441,7 +447,7 @@ private fun AdvertisingArea() {
 
     LaunchedEffect(pageState) {
         while (true) {
-            delay(10000)
+            delay(10000.milliseconds)
             val nextPage = (pageState.currentPage + 1) % imageArray.size
 
             pageState.animateScrollToPage(
@@ -590,7 +596,7 @@ private fun buildMenuItems(
     DashboardMenuItem("History", { Icon(painterResource(R.drawable.ic_history), contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { },
     DashboardMenuItem("Sign On", { Icon(painterResource(R.drawable.ic_sign_on), contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateSignOn() },
     DashboardMenuItem("Settlement", { Icon(painterResource(R.drawable.ic_settlement), contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateSettlement() },
-    DashboardMenuItem("Void", { Icon(Icons.Default.Undo, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Void") },
+    DashboardMenuItem("Void", { Icon(Icons.Default.Lock, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Void") },
     DashboardMenuItem("Refund", { Icon(Icons.Default.Replay, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Refund") },
     DashboardMenuItem("Pre-Auth", { Icon(Icons.Default.Lock, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Pre-Auth") },
     DashboardMenuItem("Pre-Auth Void", { Icon(Icons.Default.LockOpen, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Pre-Auth Void") },
@@ -717,16 +723,125 @@ private fun MenuCard(
     }
 }
 
+@Composable
+private fun RecentTransactions(
+    transactions: List<TrnxRecord>,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 6.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = "Recent Transactions",
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 14.sp
+            )
+        }
+        HorizontalDivider(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            color = Color.Gray.copy(alpha = 0.2f)
+        )
+        LazyColumn(modifier = Modifier.fillMaxSize()) {
+            if (transactions.isEmpty()) {
+                item {
+                    Text(
+                        text = "No recent transactions",
+                        color = Color.Gray,
+                        fontSize = 13.sp,
+                        textAlign = TextAlign.Center,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(vertical = 24.dp)
+                    )
+                }
+            } else {
+                items(items = transactions, key = { it.pid }) { record ->
+                    TrnxRow(record = record)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TrnxRow(record: TrnxRecord) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 12.dp, vertical = 4.dp)
+            .clip(RoundedCornerShape(10.dp))
+            .background(Color.White)
+            .padding(horizontal = 12.dp, vertical = 10.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(36.dp)
+                .background(Color.LegacyRed.copy(alpha = 0.1f), CircleShape),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = record.typeLabel.take(1),
+                color = Color.LegacyRed,
+                fontWeight = FontWeight.Bold,
+                fontSize = 15.sp
+            )
+        }
+
+        Spacer(Modifier.width(10.dp))
+
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = if (record.isVoided) "${record.typeLabel} (Voided)" else record.typeLabel,
+                fontSize = 13.sp,
+                fontWeight = FontWeight.SemiBold,
+                color = if (record.isVoided) Color.Gray else Color.Black
+            )
+            Text(
+                text = record.maskedCard,
+                fontSize = 11.sp,
+                color = Color.Gray
+            )
+        }
+
+        Column(horizontalAlignment = Alignment.End) {
+            Text(
+                text = record.amountDisplay,
+                fontSize = 13.sp,
+                fontWeight = FontWeight.Bold,
+                color = if (record.isVoided) Color.Gray else Color.LegacyRed
+            )
+            Text(
+                text = record.dateTime,
+                fontSize = 10.sp,
+                color = Color.Gray
+            )
+        }
+    }
+}
+
+private val previewTransactions = listOf(
+    TrnxRecord(1L, "Sale",       "MMK 10,000", "**** 1234", "06/10 14:32", isVoided = false, isApproved = true),
+    TrnxRecord(2L, "Void",       "MMK  5,500", "**** 5678", "06/10 13:10", isVoided = true,  isApproved = false),
+    TrnxRecord(3L, "Refund",     "MMK  2,000", "**** 9012", "06/09 09:45", isVoided = false, isApproved = true),
+    TrnxRecord(4L, "Sale",       "MMK 30,000", "**** 3456", "06/09 08:00", isVoided = false, isApproved = true),
+    TrnxRecord(5L, "Settlement", "MMK  0",     "----",      "06/08 18:00", isVoided = false, isApproved = true),
+)
+
 @P2Preview
 @Composable
 fun PreviewDashboardScreen2() {
-    DashboardScreen2()
+    DashboardScreen2(dashboardUiState = DashboardUiState(previewTransactions))
 }
 
 @P3Preview
 @Composable
 fun PreviewDashboardScreen3() {
-    DashboardScreen2()
+    DashboardScreen2(dashboardUiState = DashboardUiState(previewTransactions))
 }
 
 

app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardUiState.kt

@@ -0,0 +1,15 @@
+package com.mob.utsmyanmar.ui.dashboard
+
+data class TrnxRecord(
+    val pid: Long,
+    val typeLabel: String,
+    val amountDisplay: String,
+    val maskedCard: String,
+    val dateTime: String,
+    val isVoided: Boolean,
+    val isApproved: Boolean
+)
+
+data class DashboardUiState(
+    val recentTransactions: List<TrnxRecord> = emptyList()
+)

app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardViewModel.kt

@@ -0,0 +1,71 @@
+package com.mob.utsmyanmar.ui.dashboard
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.asFlow
+import androidx.lifecycle.viewModelScope
+import com.utsmyanmar.baselib.repo.Repository
+import com.utsmyanmar.paylibs.model.PayDetail
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class DashboardViewModel @Inject constructor(
+    private val repository: Repository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(DashboardUiState())
+    val uiState: StateFlow<DashboardUiState> = _uiState.asStateFlow()
+
+    init {
+        viewModelScope.launch {
+            repository.getAllTrans().asFlow().collect { payDetails ->
+                _uiState.update {
+                    it.copy(
+                        recentTransactions = payDetails.take(10).map { pd -> pd.toRecord() }
+                    )
+                }
+            }
+        }
+    }
+}
+
+private fun PayDetail.toRecord(): TrnxRecord {
+    val type   = transType?.takeIf { it.isNotBlank() }?.let { formatTypeLabel(it) } ?: "Transaction"
+    val amount = "MMK %,d".format(amount)
+    val card   = CardNo?.takeIf { it.length >= 4 }?.let { "**** ${it.takeLast(4)}" } ?: "----"
+    val dt     = buildDateTime(TradeDate, TradeTime)
+    val approved = tradeAnswerCode == "00" || approvalCode?.isNotBlank() == true
+
+    return TrnxRecord(
+        pid          = PID ?: 0L,
+        typeLabel    = type,
+        amountDisplay = amount,
+        maskedCard   = card,
+        dateTime     = dt,
+        isVoided     = isCanceled,
+        isApproved   = approved
+    )
+}
+
+private fun formatTypeLabel(raw: String): String = when {
+    raw.contains("SALE", ignoreCase = true)        -> "Sale"
+    raw.contains("VOID", ignoreCase = true)        -> "Void"
+    raw.contains("REFUND", ignoreCase = true)      -> "Refund"
+    raw.contains("SETTLEMENT", ignoreCase = true)  -> "Settlement"
+    raw.contains("PRE", ignoreCase = true)         -> "Pre-Auth"
+    raw.contains("CASH", ignoreCase = true)        -> "Cash Out"
+    raw.contains("WAVE", ignoreCase = true)        -> "Wave Pay"
+    else -> raw.lowercase().replaceFirstChar { it.uppercaseChar() }
+}
+
+// TradeDate = "MMDD", TradeTime = "HHmmss"  (ISO 8583 fields 13 & 12)
+private fun buildDateTime(date: String?, time: String?): String {
+    val d = date?.padStart(4, '0')?.takeIf { it.length >= 4 } ?: return "--/-- --:--"
+    val t = (time ?: "").padStart(6, '0')
+    return "${d.take(2)}/${d.drop(2).take(2)} ${t.take(2)}:${t.drop(2).take(2)}"
+}

app/src/main/java/com/mob/utsmyanmar/ui/navigation/AppNavGraph.kt

@@ -4,8 +4,10 @@ import android.annotation.SuppressLint
 import android.net.Uri
 import androidx.activity.ComponentActivity
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
@@ -16,6 +18,7 @@ import com.mob.utsmyanmar.model.ProcessCode
 import com.mob.utsmyanmar.ui.cardwaiting.CardWaitingScreen
 import com.mob.utsmyanmar.ui.cardwaiting.CardWaitingViewModel
 import com.mob.utsmyanmar.ui.dashboard.DashboardScreen2
+import com.mob.utsmyanmar.ui.dashboard.DashboardViewModel
 import com.mob.utsmyanmar.ui.device_info.DeviceInfoViewModel
 import com.mob.utsmyanmar.ui.functions.FunctionsScreen
 import com.mob.utsmyanmar.ui.input_amount.AmountRoute
@@ -40,6 +43,9 @@ import com.mob.utsmyanmar.ui.tms_setup.TmsSetupViewModel
 import com.mob.utsmyanmar.ui.transaction_result.TransactionResultEvent
 import com.mob.utsmyanmar.ui.transaction_result.TransactionResultRoute
 import com.mob.utsmyanmar.ui.transaction_result.TransactionResultViewModel
+import com.mob.utsmyanmar.ui.notification.NotificationDetailScreen
+import com.mob.utsmyanmar.ui.notification.NotificationListScreen
+import com.mob.utsmyanmar.ui.notification.NotificationViewModel
 import com.mob.utsmyanmar.ui.version.VersionScreen
 import com.mob.utsmyanmar.viewmodel.CardReaderViewModel
 import com.mob.utsmyanmar.viewmodel.EmvTransactionProcessViewModel
@@ -74,8 +80,11 @@ fun AppNavGraph(
         }
 
         composable(Routes.Dashboard.route) {
-            val sharedViewModel: SharedViewModel = hiltViewModel(activity);
+            val sharedViewModel: SharedViewModel = hiltViewModel(activity)
+            val dashboardViewModel: DashboardViewModel = hiltViewModel()
+            val dashboardUiState by dashboardViewModel.uiState.collectAsStateWithLifecycle()
             DashboardScreen2(
+                dashboardUiState = dashboardUiState,
                 onNavigateAmount = { action ->
                     if(action == "Sale"){
                         sharedViewModel.transactionsType.value = TransactionsType.SALE;
@@ -109,6 +118,9 @@ fun AppNavGraph(
                         "Void" -> navController.navigate(Routes.VoidTrace.route) { launchSingleTop = true }
                         else   -> navController.navigate(Routes.Amount.createRoute(action)) { launchSingleTop = true }
                     }
+                },
+                onNavigateNotifications = {
+                    navController.navigate(Routes.NotificationList.route) { launchSingleTop = true }
                 }
             )
         }
@@ -482,6 +494,34 @@ fun AppNavGraph(
                 }
             )
         }
+
+        composable(Routes.NotificationList.route) {
+            val notificationViewModel: NotificationViewModel = hiltViewModel()
+            NotificationListScreen(
+                viewModel = notificationViewModel,
+                onBack = { navController.popBackStack() },
+                onNavigateDetail = { id ->
+                    navController.navigate(Routes.NotificationDetail.createRoute(id)) {
+                        launchSingleTop = true
+                    }
+                }
+            )
+        }
+
+        composable(
+            route = Routes.NotificationDetail.route,
+            arguments = listOf(
+                navArgument("notificationId") { type = NavType.IntType }
+            )
+        ) { backStackEntry ->
+            val notificationViewModel: NotificationViewModel = hiltViewModel()
+            val id = backStackEntry.arguments?.getInt("notificationId") ?: return@composable
+            NotificationDetailScreen(
+                viewModel = notificationViewModel,
+                notificationId = id,
+                onBack = { navController.popBackStack() }
+            )
+        }
     }
 }
 

app/src/main/java/com/mob/utsmyanmar/ui/navigation/Routes.kt

@@ -33,4 +33,8 @@ sealed class Routes(val route: String) {
         fun createRoute(destination: String, passwordType: String): String =
             "password/${Uri.encode(destination)}/$passwordType"
     }
+    data object NotificationList : Routes("notification_list")
+    data object NotificationDetail : Routes("notification_detail/{notificationId}") {
+        fun createRoute(id: Int): String = "notification_detail/$id"
+    }
 }

app/src/main/java/com/mob/utsmyanmar/ui/notification/NotificationDetailScreen.kt

@@ -0,0 +1,116 @@
+package com.mob.utsmyanmar.ui.notification
+
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mob.utsmyanmar.ui.components.appbar.AppBar
+import com.mob.utsmyanmar.ui.theme.Color
+
+@Composable
+fun NotificationDetailScreen(
+    viewModel: NotificationViewModel,
+    notificationId: Int,
+    onBack: () -> Unit
+) {
+    val notification = viewModel.getById(notificationId)
+
+    Scaffold(
+        containerColor = Color.IvoryBeige,
+        topBar = {
+            AppBar(
+                title = "Notification Detail",
+                icon = Icons.AutoMirrored.Filled.ArrowBack,
+                onIconClick = onBack
+            )
+        }
+    ) { paddingValues ->
+        if (notification == null) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(text = "Notification not found", color = Color.Gray)
+            }
+        } else {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues)
+                    .padding(16.dp)
+            ) {
+                Card(
+                    modifier = Modifier.fillMaxWidth(),
+                    shape = RoundedCornerShape(16.dp),
+                    colors = CardDefaults.cardColors(containerColor = Color.White),
+                    elevation = CardDefaults.cardElevation(4.dp)
+                ) {
+                    Column(modifier = Modifier.padding(20.dp)) {
+                        Box(
+                            modifier = Modifier
+                                .size(56.dp)
+                                .background(Color.LegacyRed.copy(alpha = 0.1f), CircleShape),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Icon(
+                                imageVector = Icons.Default.Notifications,
+                                contentDescription = null,
+                                tint = Color.LegacyRed,
+                                modifier = Modifier.size(28.dp)
+                            )
+                        }
+
+                        Spacer(Modifier.height(16.dp))
+
+                        Text(
+                            text = notification.title,
+                            fontSize = 18.sp,
+                            fontWeight = FontWeight.Bold,
+                            color = Color.Black
+                        )
+
+                        Spacer(Modifier.height(6.dp))
+
+                        Text(
+                            text = notification.timestamp,
+                            fontSize = 12.sp,
+                            color = Color.Gray
+                        )
+
+                        Spacer(Modifier.height(16.dp))
+
+                        Text(
+                            text = notification.message,
+                            fontSize = 14.sp,
+                            color = Color.Black,
+                            lineHeight = 22.sp
+                        )
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/mob/utsmyanmar/ui/notification/NotificationListScreen.kt

@@ -0,0 +1,174 @@
+package com.mob.utsmyanmar.ui.notification
+
+import androidx.compose.foundation.background
+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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mob.utsmyanmar.ui.components.appbar.AppBar
+import com.mob.utsmyanmar.ui.theme.Color
+
+@Composable
+fun NotificationListScreen(
+    viewModel: NotificationViewModel,
+    onBack: () -> Unit,
+    onNavigateDetail: (Int) -> Unit
+) {
+    val notifications by viewModel.notifications.collectAsState()
+
+    Scaffold(
+        containerColor = Color.IvoryBeige,
+        topBar = {
+            AppBar(
+                title = "Notifications",
+                icon = Icons.AutoMirrored.Filled.ArrowBack,
+                onIconClick = onBack,
+                actions = {
+                    if (notifications.any { !it.isRead }) {
+                        TextButton(onClick = { viewModel.markAllAsRead() }) {
+                            Text(text = "Mark all read", color = Color.White, fontSize = 12.sp)
+                        }
+                    }
+                }
+            )
+        }
+    ) { paddingValues ->
+        if (notifications.isEmpty()) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues),
+                contentAlignment = Alignment.Center
+            ) {
+                Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Icon(
+                        imageVector = Icons.Default.Notifications,
+                        contentDescription = null,
+                        tint = Color.Gray,
+                        modifier = Modifier.size(64.dp)
+                    )
+                    Text(text = "No notifications", color = Color.Gray, fontSize = 14.sp)
+                }
+            }
+        } else {
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues)
+                    .padding(horizontal = 12.dp, vertical = 8.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                items(items = notifications, key = { it.id }) { notification ->
+                    NotificationItem(
+                        notification = notification,
+                        onClick = {
+                            viewModel.markAsRead(notification.id)
+                            onNavigateDetail(notification.id)
+                        }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun NotificationItem(
+    notification: AppNotification,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(Color.White)
+            .clickable(onClick = onClick)
+            .padding(12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(42.dp)
+                .background(
+                    color = if (notification.isRead) Color.Gray.copy(alpha = 0.12f)
+                    else Color.LegacyRed.copy(alpha = 0.12f),
+                    shape = CircleShape
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                imageVector = Icons.Default.Notifications,
+                contentDescription = null,
+                tint = if (notification.isRead) Color.Gray else Color.LegacyRed,
+                modifier = Modifier.size(22.dp)
+            )
+        }
+
+        Spacer(Modifier.width(12.dp))
+
+        Column(modifier = Modifier.weight(1f)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = notification.title,
+                    fontSize = 13.sp,
+                    fontWeight = if (notification.isRead) FontWeight.Normal else FontWeight.SemiBold,
+                    color = if (notification.isRead) Color.Gray else Color.Black,
+                    modifier = Modifier.weight(1f),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+                if (!notification.isRead) {
+                    Box(
+                        modifier = Modifier
+                            .size(8.dp)
+                            .background(Color.LegacyRed, CircleShape)
+                    )
+                }
+            }
+            Text(
+                text = notification.message,
+                fontSize = 12.sp,
+                color = Color.Gray,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Text(
+                text = notification.timestamp,
+                fontSize = 11.sp,
+                color = Color.Gray.copy(alpha = 0.7f)
+            )
+        }
+    }
+}

app/src/main/java/com/mob/utsmyanmar/ui/notification/NotificationModel.kt

@@ -0,0 +1,9 @@
+package com.mob.utsmyanmar.ui.notification
+
+data class AppNotification(
+    val id: Int,
+    val title: String,
+    val message: String,
+    val timestamp: String,
+    val isRead: Boolean = false
+)

app/src/main/java/com/mob/utsmyanmar/ui/notification/NotificationViewModel.kt

@@ -0,0 +1,37 @@
+package com.mob.utsmyanmar.ui.notification
+
+import androidx.lifecycle.ViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import javax.inject.Inject
+
+@HiltViewModel
+class NotificationViewModel @Inject constructor() : ViewModel() {
+
+    private val _notifications = MutableStateFlow(sampleNotifications)
+    val notifications: StateFlow<List<AppNotification>> = _notifications.asStateFlow()
+
+    val unreadCount: Int get() = _notifications.value.count { !it.isRead }
+
+    fun markAsRead(id: Int) {
+        _notifications.value = _notifications.value.map {
+            if (it.id == id) it.copy(isRead = true) else it
+        }
+    }
+
+    fun markAllAsRead() {
+        _notifications.value = _notifications.value.map { it.copy(isRead = true) }
+    }
+
+    fun getById(id: Int): AppNotification? = _notifications.value.find { it.id == id }
+}
+
+private val sampleNotifications = listOf(
+    AppNotification(1, "Settlement Reminder", "Your daily settlement is pending. Please settle before end of day.", "Today, 17:30", isRead = false),
+    AppNotification(2, "TMS Update Available", "A new terminal configuration update is ready. Please restart to apply.", "Today, 09:15", isRead = false),
+    AppNotification(3, "Transaction Approved", "Sale of MMK 50,000 was approved successfully. Trace #001234.", "Yesterday, 14:22", isRead = true),
+    AppNotification(4, "Network Warning", "Intermittent network issues detected. Contact your administrator if the problem persists.", "Yesterday, 11:05", isRead = true),
+    AppNotification(5, "Log-On Required", "Your terminal session has expired. Please log on again to continue.", "06/09, 08:00", isRead = true),
+)

app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt

@@ -13,7 +13,7 @@ annotation class P2Preview
 
 @Preview(
     name = "P3",
-    device = "spec:width=720px,height=1600px,dpi=270",
+    device = "spec:width=427dp,height=949dp,dpi=270",
     showBackground = true,
     showSystemUi = true
 )