app/src/main/java/com/mob/utsmyanmar/ui/amount/AmountRoute.kt

@@ -12,9 +12,14 @@ fun AmountRoute(
     onBack: () -> Unit,
     onNavigateCardWaiting: () -> Unit
 ) {
+    val canGoBack = !action.equals("Sale", ignoreCase = true)
+
     AmountScreen(
+        action = action,
+        canGoBack = canGoBack,
         onBackClick = onBack,
-        onChargeClick = { amount ->
+        onCancelClick = onBack,
+        onNextClick = { amount ->
             sharedViewModel.amount.value = amount
             sharedViewModel.setAmountExist(true)
             sharedViewModel.setCardDataExist(false)

app/src/main/java/com/mob/utsmyanmar/ui/amount/AmountScreen.kt

@@ -1,248 +1,372 @@
 package com.mob.utsmyanmar.ui.amount
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
+import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.rounded.KeyboardArrowLeft
+import androidx.compose.material3.Button
-import androidx.compose.material3.*
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.mob.utsmyanmar.ui.preview.P2Preview
+import com.mob.utsmyanmar.ui.theme.MOBPOSTheme
-import com.mob.utsmyanmar.ui.theme.Color
+import com.mob.utsmyanmar.ui.theme.Primary
+import com.mob.utsmyanmar.ui.theme.White
+import com.mob.utsmyanmar.R
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AmountScreen(
-    onBackClick: () -> Unit = {},
+    action: String,
-    onChargeClick: (String) -> Unit = {}
+    canGoBack: Boolean = true,
+    onBackClick: () -> Unit,
+    onCancelClick: () -> Unit = {},
+    onNextClick: (String) -> Unit = {}
 ) {
-    var amount by remember { mutableStateOf("") }
+    BackHandler(enabled = canGoBack) {
+        onBackClick()
+    }
 
-    val displayAmount = amount.ifEmpty { "0" }
+    var amount by remember {
+        mutableStateOf("0")
+    }
+
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = {
+                    Text(
+                        text = action.uppercase(),
+                        color = White,
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.SemiBold
+                    )
+                },
+                navigationIcon = {
+                    if (canGoBack) {
+                        IconButton(onClick = onBackClick) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_left_arrow),
+                                contentDescription = "Back",
+                                modifier = Modifier.size(24.dp),
+                                tint = White
+                            )
+                        }
+                    }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = Primary
+                )
+            )
+        },
+        containerColor = White
+    ) { paddingValues ->
 
         Column(
             modifier = Modifier
                 .fillMaxSize()
-            .background(Color.IvoryBeige)
+                .padding(paddingValues)
-            .padding(horizontal = 20.dp)
+                .background(White)
-            .navigationBarsPadding()
+                .verticalScroll(rememberScrollState())
-            .statusBarsPadding()
+                .padding(horizontal = 24.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(56.dp),
-            contentAlignment = Alignment.Center
-        ) {
-            IconButton(
-                onClick = onBackClick,
-                modifier = Modifier.align(Alignment.CenterStart)
-            ) {
-                Icon(
-                    imageVector = Icons.Rounded.KeyboardArrowLeft,
-                    contentDescription = "Back",
-                    tint = Color.LegacyRed
-                )
-            }
 
-            Text(
+            Spacer(modifier = Modifier.height(16.dp))
-                text = "Amount",
-                color = Color.LegacyRed,
-                fontSize = 14.sp,
-                fontWeight = FontWeight.Bold
-            )
-        }
 
-        Spacer(modifier = Modifier.height(36.dp))
+            AmountBox(
-
+                amount = formatTypedAmount(amount),
-        Text(
+                height = 134.dp
-            text = "Enter Amount",
-            color = Color.Gray,
-            fontSize = 11.sp,
-            modifier = Modifier.align(Alignment.CenterHorizontally)
             )
 
-        Spacer(modifier = Modifier.height(8.dp))
+            Spacer(modifier = Modifier.height(24.dp))
 
-        Row(
+            Keypad(
-            modifier = Modifier.align(Alignment.CenterHorizontally),
+                buttonHeight = 74.dp,
-            verticalAlignment = Alignment.Bottom
+                buttonSpacing = 12.dp,
-        ) {
+                onKeyClick = { key ->
-            Text(
+                    amount = handleAmountInput(amount, key)
-                text = "MMK",
-                color = Color.LegacyRed,
-                fontSize = 13.sp,
-                fontWeight = FontWeight.Medium,
-                modifier = Modifier.padding(end = 10.dp, bottom = 6.dp)
-            )
-
-            Text(
-                text = formatAmount(displayAmount),
-                color = Color.LegacyRed,
-                fontSize = 32.sp,
-                fontWeight = FontWeight.Bold
-            )
-        }
-
-        Spacer(modifier = Modifier.height(12.dp))
-
-        Text(
-            text = "Enter the amount to charge",
-            color = Color.Gray,
-            fontSize = 11.sp,
-            modifier = Modifier.align(Alignment.CenterHorizontally)
-        )
-
-        Spacer(modifier = Modifier.height(28.dp))
-
-        AmountKeypad(
-            onNumberClick = { value ->
-                if (amount.length < 9) {
-                    amount += value
-                }
-            },
-            onDeleteClick = {
-                amount = amount.dropLast(1)
                 }
             )
 
-        Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.height(18.dp))
 
             Row(
                 modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.spacedBy(12.dp)
+                horizontalArrangement = Arrangement.spacedBy(14.dp)
             ) {
-            Button(
-                onClick = { },
-                modifier = Modifier
-                    .weight(1f)
-                    .height(56.dp),
-                shape = RoundedCornerShape(8.dp),
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.White,
-                    contentColor = Color.LegacyRed
-                )
-            ) {
-                Text("Cancel")
-            }
 
                 Button(
                     onClick = {
-                    if (amount.isNotEmpty()) {
+                        onNextClick(normalizeAmount(amount))
-                        onChargeClick(amount)
-                    }
                     },
                     modifier = Modifier
-                    .weight(1f)
+                        .weight(if (canGoBack) 1f else 2f)
-                    .height(56.dp),
+                        .height(68.dp),
-                enabled = amount.isNotEmpty(),
+                    shape = RoundedCornerShape(18.dp),
-                shape = RoundedCornerShape(8.dp),
                     colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.LegacyRed,
+                        containerColor = Primary,
-                    contentColor = Color.White,
+                        contentColor = White
-                    disabledContainerColor = Color.LegacyRed.copy(alpha = 0.5f),
-                    disabledContentColor = Color.White
                     )
                 ) {
                     Text(
-                    text = "Next",
+                        text = "Enter",
-                    fontSize = 14.sp,
+                        fontSize = 20.sp,
-                    fontWeight = FontWeight.Medium
+                        fontWeight = FontWeight.Bold
+                    )
+                }
+
+                if (canGoBack) {
+                    Button(
+                        onClick = onCancelClick,
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(68.dp),
+                        shape = RoundedCornerShape(18.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = White,
+                            contentColor = Primary
+                        ),
+                        border = ButtonDefaults.outlinedButtonBorder
+                    ) {
+                        Text(
+                            text = "Cancel",
+                            fontSize = 20.sp,
+                            fontWeight = FontWeight.Bold
                         )
                     }
                 }
+            }
 
-        Spacer(modifier = Modifier.height(18.dp))
+            Spacer(modifier = Modifier.height(12.dp))
+        }
     }
 }
 
 @Composable
-private fun AmountKeypad(
+private fun AmountBox(
-    onNumberClick: (String) -> Unit,
+    amount: String,
-    onDeleteClick: () -> Unit
+    height: Dp
 ) {
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(height)
+            .background(
+                color = Primary,
+                shape = RoundedCornerShape(20.dp)
+            )
+            .padding(horizontal = 24.dp),
+        contentAlignment = Alignment.CenterEnd
+    ) {
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+
+            Text(
+                text = amount,
+                color = White,
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            Spacer(modifier = Modifier.width(14.dp))
+
+            Box(
+                modifier = Modifier
+                    .background(
+                        color = White,
+                        shape = RoundedCornerShape(10.dp)
+                    )
+                    .padding(
+                        horizontal = 16.dp,
+                        vertical = 6.dp
+                    )
+            ) {
+
+                Text(
+                    text = "MMK",
+                    color = Primary,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun Keypad(
+    buttonHeight: Dp,
+    buttonSpacing: Dp,
+    onKeyClick: (String) -> Unit
+) {
+
     val keys = listOf(
         listOf("1", "2", "3"),
         listOf("4", "5", "6"),
         listOf("7", "8", "9"),
-        listOf("", "0", "00")
+        listOf(".", "0", "DEL")
     )
 
     Column(
-        modifier = Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(buttonSpacing)
-        verticalArrangement = Arrangement.spacedBy(6.dp)
     ) {
+
         keys.forEach { row ->
+
             Row(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(6.dp)
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
             ) {
+
                 row.forEach { key ->
-                    if (key.isEmpty()) {
+
-                        Box(
+                    Button(
+                        onClick = {
+                            onKeyClick(key)
+                        },
                         modifier = Modifier
                             .weight(1f)
-                                .height(66.dp)
+                            .height(buttonHeight),
-                        )
+                        shape = RoundedCornerShape(18.dp),
-                    } else {
+                        colors = ButtonDefaults.buttonColors(
-                        KeypadButton(
+                            containerColor = Primary,
-                            text = key,
+                            contentColor = White
-                            modifier = Modifier.weight(1f),
+                        ),
-                            onClick = { onNumberClick(key) }
+                        contentPadding = PaddingValues(0.dp)
-                        )
+                    ) {
-                    }
+
-                }
+                        if (key == "DEL") {
-            }
-        }
-    }
-}
 
-@Composable
-private fun KeypadButton(
-    text: String,
-    modifier: Modifier = Modifier,
-    onClick: () -> Unit
-) {
-    Box(
-        modifier = modifier
-            .height(66.dp)
-            .shadow(
-                elevation = 2.dp,
-                shape = RoundedCornerShape(8.dp),
-                clip = false
-            )
-            .background(
-                color = Color.White,
-                shape = RoundedCornerShape(8.dp)
-            )
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
                             Text(
-            text = text,
+                                text = "⌫",
-            color = Color.LegacyRed,
+                                fontSize = 26.sp,
-            fontSize = 24.sp,
+                                fontWeight = FontWeight.Bold
-            fontWeight = FontWeight.Normal,
+                            )
-            textAlign = TextAlign.Center
+
+                        } else {
+
+                            Text(
+                                text = key,
+                                fontSize = 22.sp,
+                                fontWeight = FontWeight.Bold
                             )
                         }
                     }
-
+                }
-private fun formatAmount(value: String): String {
+            }
-    val number = value.toLongOrNull() ?: 0L
+        }
-    return "%,d".format(number)
+    }
 }
 
-@P2Preview
+private fun handleAmountInput(
+    current: String,
+    key: String
+): String {
+
+    return when (key.uppercase()) {
+
+        "DEL" -> {
+            current
+                .dropLast(1)
+                .ifEmpty { "0" }
+        }
+
+        "." -> {
+            if (current.contains(".")) {
+                current
+            } else {
+                "${current.ifEmpty { "0" }}."
+            }
+        }
+
+        in "0".."9" -> {
+            val sanitizedCurrent = if (current == "0") "" else current
+
+            if (sanitizedCurrent.contains(".")) {
+                val decimal = sanitizedCurrent.substringAfter(".")
+
+                if (decimal.length >= 2) {
+                    current
+                } else {
+                    sanitizedCurrent + key
+                }
+            } else {
+                val nextValue = sanitizedCurrent + key
+                nextValue.trimStart('0').ifEmpty { "0" }
+            }
+        }
+
+        else -> current
+    }
+}
+
+private fun normalizeAmount(value: String): String {
+    if (value.isBlank()) return "0.00"
+
+    val normalized = if (value.endsWith(".")) {
+        value.dropLast(1)
+    } else {
+        value
+    }
+
+    return when {
+        normalized.isBlank() -> "0.00"
+        normalized.contains(".") -> {
+            val whole = normalized.substringBefore(".").ifEmpty { "0" }
+            val decimal = normalized.substringAfter(".")
+
+            when (decimal.length) {
+                0 -> "$whole.00"
+                1 -> "$whole.${decimal}0"
+                else -> "$whole.${decimal.take(2)}"
+            }
+        }
+        else -> "${normalized}.00"
+    }
+}
+
+private fun formatTypedAmount(value: String): String {
+    if (!value.contains(".")) return "$value.00"
+
+    val whole = value.substringBefore(".").ifEmpty { "0" }
+    val decimal = value.substringAfter(".")
+
+    return when (decimal.length) {
+        0 -> "$whole."
+        1 -> "$whole.${decimal}0"
+        else -> "$whole.${decimal.take(2)}"
+    }
+}
+
+@Preview(showBackground = true)
 @Composable
-fun PreviewAmountScreen() {
+private fun AmountScreenPreview() {
-    AmountScreen { }
+
+    MOBPOSTheme {
+
+        AmountScreen(
+            action = "Amount",
+            canGoBack = true,
+            onBackClick = {}
+        )
+    }
 }

app/src/main/java/com/mob/utsmyanmar/ui/cardwaiting/CardWaitingScreen.kt

@@ -1,9 +1,8 @@
 package com.mob.utsmyanmar.ui.cardwaiting
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
 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
@@ -12,22 +11,18 @@ 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.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
+import androidx.compose.material3.Button
-import androidx.compose.material.icons.rounded.KeyboardArrowLeft
+import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material.icons.rounded.Wifi
+import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -35,23 +30,23 @@ 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.alpha
-import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.mob.utsmyanmar.R
-import com.mob.utsmyanmar.ui.preview.P2Preview
+import com.mob.utsmyanmar.ui.theme.Black
-import com.mob.utsmyanmar.ui.theme.Color
+import com.mob.utsmyanmar.ui.theme.Primary
+import com.mob.utsmyanmar.ui.theme.White
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CardWaitingScreen(
     viewModel: CardWaitingViewModel,
-    amount: String,
     onManualEntry: () -> Unit,
     onProcessingCard: () -> Unit,
+    onTimeout: () -> Unit,
     onBack: () -> Unit,
     onMain: () -> Unit
 ) {
@@ -62,9 +57,9 @@ fun CardWaitingScreen(
             when (event) {
                 CardWaitingEvent.GoManualEntry -> onManualEntry()
                 CardWaitingEvent.GoProcessingCard -> onProcessingCard()
+                CardWaitingEvent.GoTimeout -> onTimeout()
                 CardWaitingEvent.GoMain -> onMain()
                 CardWaitingEvent.GoBack -> onBack()
-                CardWaitingEvent.GoTimeout -> Unit
             }
         }
     }
@@ -83,360 +78,160 @@ fun CardWaitingScreen(
         viewModel.onBackPressed()
     }
 
-    CardWaitingScreenContent(
+    Scaffold(
-        amount = amount,
+        topBar = {
-        uiState = uiState,
+            CenterAlignedTopAppBar(
-        onBackClick = viewModel::onBackPressed,
+                title = {
-        onManualEntryClick = viewModel::onManualEntryClick
+                    Text(
+                        text = "CARD CAPTURE",
+                        color = White,
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.SemiBold
+                    )
+                },
+                navigationIcon = {
+                    if (uiState.canGoBack) {
+                        IconButton(onClick = onBack) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_left_arrow),
+                                contentDescription = "Back",
+                                tint = White
                             )
                         }
-
+                    }
-@Composable
+                },
-private fun CardWaitingScreenContent(
+                colors = TopAppBarDefaults.topAppBarColors(
-    amount: String,
+                    containerColor = Primary
-    uiState: CardWaitingUiState,
+                )
-    onBackClick: () -> Unit,
+            )
-    onManualEntryClick: () -> Unit
+        },
-) {
+        containerColor = White
+    ) { paddingValues ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
-            .background(Color.IvoryBeige)
+                .padding(paddingValues)
-            .statusBarsPadding()
+                .background(White)
-            .navigationBarsPadding()
+        ) {
-            .padding(horizontal = 20.dp),
+
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(
+                        color = Primary,
+                        shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
+                    )
+                    .padding(18.dp)
+            ) {
+                Column(
+                    modifier = Modifier.fillMaxSize(),
                     horizontalAlignment = Alignment.CenterHorizontally
                 ) {
                     Box(
                         modifier = Modifier
                             .fillMaxWidth()
-                .height(54.dp),
+                            .background(
+                                color = White,
+                                shape = RoundedCornerShape(24.dp)
+                            )
+                            .padding(horizontal = 22.dp, vertical = 28.dp)
+                    ) {
+                        Column(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalAlignment = Alignment.CenterHorizontally
+                        ) {
+                            Box(
+                                modifier = Modifier
+                                    .size(92.dp)
+                                    .background(
+                                        color = Primary.copy(alpha = 0.08f),
+                                        shape = RoundedCornerShape(28.dp)
+                                    ),
                                 contentAlignment = Alignment.Center
                             ) {
-            if (uiState.canGoBack) {
+                                Image(
-                IconButton(
+                                    painter = painterResource(R.drawable.buy_ecommerce_finance_payment_pos_shop_svgrepo_com),
-                    onClick = onBackClick,
+                                    contentDescription = "Card reader"
-                    modifier = Modifier.align(Alignment.CenterStart)
-                ) {
-                    Icon(
-                        imageVector = Icons.Rounded.KeyboardArrowLeft,
-                        contentDescription = "Back",
-                        tint = Color.LegacyRed
-                    )
-                }
-            }
-        }
-
-        Spacer(modifier = Modifier.height(8.dp))
-
-        Text(
-            text = "AMOUNT TO PAY",
-            color = Color.Black,
-            fontSize = 10.sp,
-            fontWeight = FontWeight.Medium
-        )
-
-        Spacer(modifier = Modifier.height(6.dp))
-
-        Row(verticalAlignment = Alignment.Bottom) {
-            Text(
-                text = amount,
-                color = Color.LegacyRed,
-                fontSize = 30.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            Spacer(modifier = Modifier.width(6.dp))
-
-            Text(
-                text = "MMK",
-                color = Color.LegacyRed,
-                fontSize = 10.sp,
-                fontWeight = FontWeight.Bold,
-                modifier = Modifier.padding(bottom = 6.dp)
                                 )
                             }
 
-        Spacer(modifier = Modifier.height(32.dp))
+                            Spacer(modifier = Modifier.height(20.dp))
-
-        ContactlessCircle(isLoading = uiState.isLoading)
-
-        Spacer(modifier = Modifier.height(24.dp))
 
                             Text(
-            text = when {
+                                text = if (uiState.isFallback) {
-                uiState.isCardCaptured -> "Card Detected"
+                                    "Swipe Card"
-                uiState.isFallback -> "Swipe Your Card"
-                else -> "Tap Your Card"
-            },
-            color = Color.LegacyRed,
-            fontSize = 13.sp,
-            fontWeight = FontWeight.Bold
-        )
-
-        Text(
-            text = if (uiState.isCardCaptured) {
-                "Reader captured card data"
                                 } else {
-                "Hold your card near the reader"
+                                    "Present Card"
                                 },
-            color = Color.Black,
+                                color = Black,
-            fontSize = 9.sp
+                                fontSize = 24.sp,
+                                fontWeight = FontWeight.Bold
                             )
 
-        Spacer(modifier = Modifier.height(14.dp))
+                            Spacer(modifier = Modifier.height(10.dp))
-
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            HorizontalDivider(
-                modifier = Modifier.weight(1f),
-                color = Color.Gray.copy(alpha = 0.4f)
-            )
-
-            Text(
-                text = "OR",
-                modifier = Modifier.padding(horizontal = 12.dp),
-                color = Color.Gray,
-                fontSize = 10.sp
-            )
-
-            HorizontalDivider(
-                modifier = Modifier.weight(1f),
-                color = Color.Gray.copy(alpha = 0.4f)
-            )
-        }
-
-        Spacer(modifier = Modifier.height(12.dp))
-
-        InsertCardRow()
-
-        Spacer(modifier = Modifier.height(18.dp))
 
                             Text(
                                 text = uiState.alertMessage,
-            color = Color.Black,
+                                color = Black,
-            fontSize = 11.sp,
+                                fontSize = 18.sp,
-            textAlign = TextAlign.Center,
+                                lineHeight = 26.sp,
-            lineHeight = 16.sp
+                                textAlign = TextAlign.Center
+                            )
+                        }
+                    }
+
+                    Spacer(modifier = Modifier.height(16.dp))
+
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(
+                                color = White.copy(alpha = 0.12f),
+                                shape = RoundedCornerShape(22.dp)
+                            )
+                            .padding(horizontal = 18.dp, vertical = 16.dp),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = if (uiState.isLoading) {
+                                "Reader status"
+                            } else {
+                                "Ready for card"
+                            },
+                            color = White,
+                            fontSize = 16.sp,
+                            fontWeight = FontWeight.SemiBold
                         )
 
-        Spacer(modifier = Modifier.height(18.dp))
+                        Text(
-
+                            text = if (uiState.isLoading) "Initializing" else "Waiting",
-        StatusPanel(uiState = uiState)
+                            color = White,
+                            fontSize = 15.sp
+                        )
+                    }
 
                     Spacer(modifier = Modifier.weight(1f))
 
-        ManualEntryAction(onManualEntryClick = onManualEntryClick)
+                    Button(
-
+                        onClick = viewModel::onManualEntryClick,
-        Spacer(modifier = Modifier.height(18.dp))
-
-        CardLogoRow()
-
-        Spacer(modifier = Modifier.height(34.dp))
-
-        PoweredByMob()
-
-        Spacer(modifier = Modifier.height(12.dp))
-    }
-}
-
-@Composable
-private fun ContactlessCircle(isLoading: Boolean) {
-    Box(
-        modifier = Modifier.size(190.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        CircleBorder(180, 0.1f)
-        CircleBorder(150, 0.20f)
-
-        Surface(
-            modifier = Modifier.size(108.dp),
-            shape = CircleShape,
-            color = Color.White,
-            shadowElevation = 8.dp
-        ) {
-            Box(contentAlignment = Alignment.Center) {
-                if (isLoading) {
-                    CircularProgressIndicator(
-                        color = Color.LegacyRed,
-                        strokeWidth = 3.dp,
-                        modifier = Modifier.size(40.dp)
-                    )
-                } else {
-                    Icon(
-                        imageVector = Icons.Rounded.Wifi,
-                        contentDescription = null,
-                        tint = Color.LegacyRed,
-                        modifier = Modifier
-                            .size(72.dp)
-                            .rotate(90f)
-                    )
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun CircleBorder(
-    size: Int,
-    alpha: Float
-) {
-    Surface(
-        modifier = Modifier
-            .size(size.dp)
-            .alpha(alpha),
-        shape = CircleShape,
-        border = BorderStroke(1.dp, Color.LegacyRed)
-    ) {}
-}
-
-@Composable
-private fun InsertCardRow() {
-    Row(
-        modifier = Modifier.height(44.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Icon(
-            painter = painterResource(id = R.drawable.ic_insert_card),
-            contentDescription = null,
-            tint = Color.LegacyRed,
-            modifier = Modifier.size(28.dp)
-        )
-
-        Spacer(modifier = Modifier.width(10.dp))
-
-        Column {
-            Text(
-                text = "Insert Your Card",
-                color = Color.LegacyRed,
-                fontSize = 11.sp,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = "Chip facing up",
-                color = Color.Black,
-                fontSize = 9.sp
-            )
-        }
-    }
-}
-
-@Composable
-private fun StatusPanel(uiState: CardWaitingUiState) {
-    Surface(
-        modifier = Modifier.fillMaxWidth(),
-        color = Color.White,
-        shape = RoundedCornerShape(12.dp)
-    ) {
-        Row(
                         modifier = Modifier
                             .fillMaxWidth()
-                .padding(horizontal = 14.dp, vertical = 12.dp),
+                            .height(64.dp),
-            horizontalArrangement = Arrangement.SpaceBetween,
+                        shape = RoundedCornerShape(18.dp),
-            verticalAlignment = Alignment.CenterVertically
+                        colors = ButtonDefaults.buttonColors(
-        ) {
+                            containerColor = White,
-            Text(
+                            contentColor = Primary
-                text = when {
-                    uiState.isCardCaptured -> "Reader status"
-                    uiState.isLoading -> "Reader status"
-                    else -> "Ready for card"
-                },
-                color = Color.LegacyRed,
-                fontSize = 12.sp,
-                fontWeight = FontWeight.Bold
                         )
-
-            Text(
-                text = when {
-                    uiState.isCardCaptured -> "Captured"
-                    uiState.isLoading -> "Initializing"
-                    else -> "Waiting"
-                },
-                color = Color.Gray,
-                fontSize = 11.sp
-            )
-        }
-    }
-}
-
-@Composable
-private fun ManualEntryAction(onManualEntryClick: () -> Unit) {
-    Surface(
-        modifier = Modifier.fillMaxWidth(),
-        color = Color.White,
-        shape = RoundedCornerShape(12.dp)
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(Color.White)
-                .clickable(onClick = onManualEntryClick)
-                .padding(vertical = 16.dp),
-            contentAlignment = Alignment.Center
                     ) {
                         Text(
                             text = "Manual Entry",
-                color = Color.LegacyRed,
+                            fontSize = 20.sp,
-                fontSize = 14.sp,
                             fontWeight = FontWeight.Bold
                         )
                     }
                 }
             }
-
-@Composable
-private fun CardLogoRow() {
-    Surface(
-        modifier = Modifier.fillMaxWidth(),
-        color = Color.White,
-        shape = RoundedCornerShape(3.dp)
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(42.dp)
-                .padding(horizontal = 14.dp),
-            horizontalArrangement = Arrangement.SpaceBetween,
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Text("VISA", fontSize = 22.sp, fontWeight = FontWeight.Bold)
-            Text("MC", fontSize = 18.sp, fontWeight = FontWeight.Bold)
-            Text("MPU", fontSize = 20.sp, fontWeight = FontWeight.Bold)
-            Text("UnionPay", fontSize = 12.sp, fontWeight = FontWeight.Bold)
         }
     }
 }
-
-@Composable
-private fun PoweredByMob() {
-    Row(verticalAlignment = Alignment.CenterVertically) {
-        Text(
-            text = "Powered by",
-            color = Color.Gray,
-            fontSize = 8.sp
-        )
-
-        Spacer(modifier = Modifier.width(4.dp))
-
-        Text(
-            text = "MOB",
-            color = Color.Gray,
-            fontSize = 9.sp,
-            fontWeight = FontWeight.Bold
-        )
-    }
-}
-
-@P2Preview
-@Composable
-fun PreviewCardWaitingScreen() {
-    CardWaitingScreenContent(
-        amount = "50,000",
-        uiState = CardWaitingUiState(),
-        onBackClick = {},
-        onManualEntryClick = {}
-    )
-}

app/src/main/java/com/mob/utsmyanmar/ui/cardwaiting/CardWaitingUiState.kt

@@ -4,6 +4,5 @@ data class CardWaitingUiState(
     val alertMessage: String = "Please insert, tap, or swipe card",
     val isLoading: Boolean = false,
     val isFallback: Boolean = false,
-    val canGoBack: Boolean = true,
+    val canGoBack: Boolean = true
-    val isCardCaptured: Boolean = false
 )

app/src/main/java/com/mob/utsmyanmar/ui/cardwaiting/CardWaitingViewModel.kt

@@ -78,17 +78,7 @@ class CardWaitingViewModel(
             _uiState.update {
                 it.copy(
                     alertMessage = "Fallback!\nPlease stripe!",
-                    isFallback = true,
+                    isFallback = true
-                    isCardCaptured = false
-                )
-            }
-        } else {
-            _uiState.update {
-                it.copy(
-                    alertMessage = "Please insert, tap, or swipe card",
-                    isFallback = false,
-                    isLoading = false,
-                    isCardCaptured = false
                 )
             }
         }
@@ -132,8 +122,7 @@ class CardWaitingViewModel(
             _uiState.update {
                 it.copy(
                     alertMessage = "Initializing card reader...",
-                    isLoading = true,
+                    isLoading = true
-                    isCardCaptured = false
                 )
             }
 
@@ -147,8 +136,7 @@ class CardWaitingViewModel(
                             } else {
                                 "Please insert, tap, or swipe card"
                             },
-                            isLoading = false,
+                            isLoading = false
-                            isCardCaptured = false
                         )
                     }
                     setupCardReadProcess(isFallback)
@@ -222,13 +210,6 @@ class CardWaitingViewModel(
                     }
 
                     viewModelScope.launch {
-                        _uiState.update {
-                            it.copy(
-                                alertMessage = "Card detected.",
-                                isLoading = false,
-                                isCardCaptured = true
-                            )
-                        }
                         _events.send(CardWaitingEvent.GoProcessingCard)
                     }
                 }

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

@@ -87,7 +87,6 @@ fun AppNavGraph(
 
             CardWaitingScreen(
                 viewModel = cardWaitingViewModel,
-                amount = formatAmountForDisplay(sharedViewModel.amount.value),
                 onManualEntry = {},
                 onProcessingCard = {
                     navController.navigate(Routes.ProcessingCard.route) {
@@ -97,6 +96,7 @@ fun AppNavGraph(
                         launchSingleTop = true
                     }
                 },
+                onTimeout = { navController.popBackStack() },
                 onBack = { navController.popBackStack() },
                 onMain = {
                     navController.navigate(Routes.Dashboard.route) {
@@ -207,9 +207,3 @@ fun AppNavGraph(
         }
     }
 }
-
-private fun formatAmountForDisplay(amount: String?): String {
-    val normalizedAmount = amount.orEmpty()
-    val value = normalizedAmount.toLongOrNull() ?: return normalizedAmount.ifBlank { "0" }
-    return "%,d".format(value)
-}

app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt

@@ -21,5 +21,4 @@ object Color {
     val White = Color(0xFFFFFFFF)
     val Black = Color(0xFF000000)
     val Gray = Color(0xFF898989)
-    val Success = Color(0xFF007E33)
 }

app/src/main/java/com/mob/utsmyanmar/ui/transaction_result/TransactionResultScreen.kt

@@ -1,289 +1,268 @@
 package com.mob.utsmyanmar.ui.transaction_result
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.shape.CircleShape
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CalendarMonth
+import androidx.compose.material.icons.filled.ChevronLeft
-import androidx.compose.material.icons.filled.Numbers
+import androidx.compose.material3.Button
-import androidx.compose.material.icons.filled.Print
+import androidx.compose.material3.ButtonColors
-import androidx.compose.material.icons.rounded.Check
+import androidx.compose.material3.Card
-import androidx.compose.material3.*
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.CircularProgressIndicator
+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.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.draw.shadow
+import androidx.compose.ui.draw.blur
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.mob.utsmyanmar.ui.preview.P2Preview
+import com.mob.utsmyanmar.R
-import com.mob.utsmyanmar.ui.theme.Color
+import com.mob.utsmyanmar.ui.components.appbar.AppBar
-import com.utsmyanmar.paylibs.print.PrintReceipt
+import com.mob.utsmyanmar.ui.theme.Black
-
+import com.mob.utsmyanmar.ui.theme.Primary
+import com.mob.utsmyanmar.ui.theme.White
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TransactionResultScreen(
     state: TransactionResultState,
     canGoBack: Boolean,
     onEvent: (TransactionResultEvent) -> Unit,
 ) {
-    BackHandler(enabled = canGoBack) {
+    BackHandler(enabled = !canGoBack) {}
-        onEvent(TransactionResultEvent.BackClick)
-    }
 
     Scaffold(
-        containerColor = Color.IvoryBeige
+        topBar = {
+            AppBar(
+                title = "Transaction Results",
+                icon = if (canGoBack) Icons.Default.ChevronLeft else null,
+                onIconClick = if (canGoBack) {
+                    { onEvent(TransactionResultEvent.BackClick) }
+                } else {
+                    null
+                }
+            )
+        }
     ) { paddingValues ->
         Column(
             modifier = Modifier
-                .fillMaxSize()
-                .background(Color.IvoryBeige)
                 .padding(paddingValues)
-                .statusBarsPadding()
+                .fillMaxSize()
-                .navigationBarsPadding()
+                .padding(16.dp),
-                .padding(horizontal = 20.dp),
+            verticalArrangement = Arrangement.SpaceBetween
-            horizontalAlignment = Alignment.CenterHorizontally
         ) {
+            Column() {
 
-            Spacer(modifier = Modifier.height(8.dp))
-
-            SuccessIcon()
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            Text(
-                text = state.title,
-                color = Color.LegacyRed,
-                fontSize = 24.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            Spacer(modifier = Modifier.height(6.dp))
-
-            Text(
-                text = state.message.ifBlank { "Your payment has been processed successfully." },
-                color = Color.Gray,
-                fontSize = 13.sp,
-                textAlign = TextAlign.Center
-            )
-
-            Spacer(modifier = Modifier.height(28.dp))
-
-            AmountCard(amount = "50,000")
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            InfoCard(
-                date = "26 May 2026",
-                time = "12:06 PM",
-                transactionId = "1234568333"
-            )
-            
-        }
-    }
-}
-
-@Composable
-private fun SuccessIcon() {
-    Box(
-        modifier = Modifier.size(132.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Box(
-            modifier = Modifier
-                .size(132.dp)
-                .background(
-                    color = Color.Success.copy(alpha = 0.12f),
-                    shape = CircleShape
-                )
-        )
-
-        Box(
-            modifier = Modifier
-                .size(96.dp)
-                .background(
-                    color = Color.Success,
-                    shape = CircleShape
-                ),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(
-                imageVector = Icons.Rounded.Check,
-                contentDescription = "Success",
-                tint = Color.White,
-                modifier = Modifier.size(64.dp)
-            )
-        }
-    }
-}
-
-@Composable
-private fun AmountCard(
-    amount: String
-) {
                 Card(
+                    colors = CardDefaults.cardColors(
+                        containerColor = White
+                    ),
                     modifier = Modifier
                         .fillMaxWidth()
-            .height(130.dp)
+                        .height(200.dp),
-            .shadow(
+                    elevation = CardDefaults.cardElevation(
-                elevation = 6.dp,
+                        defaultElevation = 6.dp
-                shape = RoundedCornerShape(22.dp),
+                    )
-                clip = false
+                ) {
+                    Column(
+                        modifier = Modifier.fillMaxSize(),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Icon(
+                            painter = painterResource(R.drawable.ic_success),
+                            modifier = Modifier.size(100.dp),
+                            tint = Primary,
+                            contentDescription = "success icon"
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                        Text(
+                            text = "Transaction Status",
+                            style = MaterialTheme.typography.bodyLarge.copy(
+                                fontSize = 18.sp,
+                                fontWeight = FontWeight.SemiBold
                             ),
-        shape = RoundedCornerShape(22.dp),
+                            textAlign = TextAlign.Center,
+                            color = Black
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                        Text(
+                            text = state.message,
+                            style = MaterialTheme.typography.bodyLarge.copy(
+                                fontSize = 16.sp,
+                                fontWeight = FontWeight.Medium
+                            ),
+                            textAlign = TextAlign.Center,
+                            color = Black
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                    }
+                }
+
+                Spacer(Modifier.height(24.dp))
+
+                Card(
                     colors = CardDefaults.cardColors(
-            containerColor = Color.White
+                        containerColor = Primary
+                    ),
+                    modifier = Modifier.fillMaxWidth().height(250.dp),
+                    elevation = CardDefaults.cardElevation(
+                        defaultElevation = 6.dp
                     )
                 ) {
                     Column(
                         modifier = Modifier
                             .fillMaxSize()
-                .padding(vertical = 18.dp),
+                            .padding(16.dp),
-            horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
-            verticalArrangement = Arrangement.Center
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Text(
+                            text = "Transaction Details",
+                            style = MaterialTheme.typography.bodyLarge.copy(
+                                fontSize = 18.sp,
+                                fontWeight = FontWeight.SemiBold
+                            ),
+                            color = White
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.SpaceBetween
                         ) {
                             Text(
-                text = "PAID AMOUNT",
+                                text = "Amount",
-                color = Color.Gray,
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 14.sp,
+                                    fontWeight = FontWeight.Medium
+                                ),
+                                color = White
+                            )
+                            Text(
+                                text = "1,000 MMK",
+                                style = MaterialTheme.typography.bodyLarge.copy(
                                     fontSize = 15.sp,
                                     fontWeight = FontWeight.SemiBold
-            )
+                                ),
-
+                                color = White
-
-            Text(
-                text = amount,
-                color = Color.LegacyRed,
-                fontSize = 30.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            Spacer(modifier = Modifier.height(6.dp))
-
-            Text(
-                text = "MMK",
-                color = Color.LegacyRed,
-                fontSize = 14.sp,
-                fontWeight = FontWeight.Bold
                             )
                         }
-    }
+                        Spacer(modifier = Modifier.height(8.dp))
-}
+                        Row(
-
+                            modifier = Modifier.fillMaxWidth(),
-@Composable
+                            horizontalArrangement = Arrangement.SpaceBetween
-private fun InfoCard(
-    date: String,
-    time: String,
-    transactionId: String
                         ) {
-    Card(
+                            Text(
+                                text = "Transaction Type",
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 14.sp,
+                                    fontWeight = FontWeight.Medium
+                                ),
+                                color = White
+                            )
+                            Text(
+                                text = "MPU",
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 15.sp,
+                                    fontWeight = FontWeight.SemiBold
+                                ),
+                                color = White
+                            )
+                        }
+                        Spacer(modifier = Modifier.height(8.dp))
+                        HorizontalDivider(thickness = 1.dp, color = White)
+                        Spacer(modifier = Modifier.height(8.dp))
+                        Column(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalAlignment = Alignment.CenterHorizontally
+                        ) {
+                            Text(
+                                text = "Transaction Amount",
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 14.sp,
+                                    fontWeight = FontWeight.Medium
+                                ),
+                                color = White
+                            )
+                            Spacer(modifier = Modifier.height(8.dp))
+                            Text(
+                                text = "500.00 MMMK",
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 22.sp,
+                                    fontWeight = FontWeight.Bold
+                                ),
+                                color = White
+                            )
+                            Spacer(modifier = Modifier.height(8.dp))
+                            Text(
+                                text = "Received",
+                                style = MaterialTheme.typography.bodyLarge.copy(
+                                    fontSize = 13.sp,
+                                    fontWeight = FontWeight.Normal
+                                ),
+                                color = White
+                            )
+                        }
+                    }
+                    
+                }
+            }
+
+            Button(
                 modifier = Modifier
                     .fillMaxWidth()
-            .height(130.dp)
+                    .height(50.dp),
-            .shadow(
+                colors = ButtonColors(
-                elevation = 4.dp,
+                    containerColor = Primary,
-                shape = RoundedCornerShape(18.dp),
+                    contentColor = White,
-                clip = false
+                    disabledContainerColor = Primary,
+                    disabledContentColor = White,
                 ),
-        shape = RoundedCornerShape(18.dp),
+                shape = RoundedCornerShape(12.dp),
-        colors = CardDefaults.cardColors(
+                onClick = {}
-            containerColor = Color.White
-        )
             ) {
-        Column(
+                Text(
-            modifier = Modifier
+                    text = "Transaction Completed",
-                .fillMaxSize()
+                    style = MaterialTheme.typography.bodyLarge.copy(
-                .padding(horizontal = 18.dp),
+                        fontSize = 16.sp,
-            verticalArrangement = Arrangement.SpaceAround
+                        fontWeight = FontWeight.SemiBold
-        ) {
-            InfoItem(
-                icon = Icons.Default.CalendarMonth,
-                title = "Date & Time",
-                value = date,
-                subValue = time,
-//                modifier = Modifier.weight(1f)
                     )
-            InfoItem(
-                icon = Icons.Default.Numbers,
-                title = "Transaction ID",
-                value = transactionId,
-                subValue = "",
-//                modifier = Modifier.weight(1f)
                 )
             }
         }
     }
+}
 
+@Preview(showBackground = true, showSystemUi = true)
 @Composable
-private fun InfoItem(
+fun TransactionResultScreenPreview() {
-    icon: ImageVector,
-    title: String,
-    value: String,
-    subValue: String,
-    modifier: Modifier = Modifier
-) {
-    Row(
-        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Box(
-            modifier = Modifier
-                .size(46.dp)
-                .background(
-                    color = Color.LegacyRed.copy(alpha = 0.1f),
-                    shape = CircleShape
-                ),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(
-                imageVector = icon,
-                contentDescription = null,
-                tint = Color.LegacyRed,
-                modifier = Modifier.size(25.dp)
-            )
-        }
-
-        Spacer(modifier = Modifier.width(10.dp))
-
-        Column {
-            Text(
-                text = title,
-                color = Color.Gray,
-                fontSize = 11.sp
-            )
-
-            Text(
-                text = value,
-                color = Color.Black,
-                fontSize = 13.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            if (subValue.isNotEmpty()) {
-                Text(
-                    text = subValue,
-                    color = Color.Black,
-                    fontSize = 11.sp
-                )
-            }
-        }
-    }
-}
-
-
-@P2Preview
-@Composable
-fun PreviewTransactionResultScreen() {
     TransactionResultScreen(
         state = TransactionResultState(
-            "Success"
+            title = "Transaction Success",
+            message = "Transaction Approved",
+            isLoading = false
         ),
         canGoBack = true,
-        onEvent = {},
+        onEvent = {}
     )
 }

app/src/main/res/drawable/ic_insert_card.xml

@@ -1,24 +0,0 @@
-<!--
-  ~ Copyright (C) 2026 The Android Open Source Project
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="800dp"
-    android:height="800dp"
-    android:viewportWidth="15.133"
-    android:viewportHeight="15.133">
-  <path
-      android:pathData="M14.487,0H0.647C0.306,0 0.028,0.277 0.028,0.619v2.165c0,0.342 0.277,0.619 0.619,0.619h0.966h0.074h0.902l-0.726,10.54c0,0.654 0.532,1.186 1.186,1.188l9.033,0.002c0.653,0 1.188,-0.53 1.188,-1.187L12.552,3.402h0.891c0.005,0 0.008,-0.002 0.013,-0.002v0.002h1.031c0.341,0 0.618,-0.277 0.618,-0.619V0.619C15.105,0.277 14.828,0 14.487,0zM7.883,14.339L3.05,14.337c-0.218,0 -0.395,-0.178 -0.395,-0.396L3.441,2.518c0,-0.218 0.178,-0.395 0.396,-0.395l4.051,0.001L7.883,14.339zM12.084,14.339h-1.062L10.246,2.125h1.061c0.22,0 0.396,0.177 0.396,0.395l0.776,11.424C12.478,14.164 12.301,14.341 12.084,14.339zM12.524,2.963L12.524,2.963l-0.03,-0.442c0,-0.655 -0.531,-1.187 -1.188,-1.187L3.837,1.331c-0.654,0 -1.187,0.532 -1.187,1.186L2.62,2.965H2.619H1.717l0.006,-0.084c0.02,-1.148 0.96,-2.077 2.113,-2.077l7.47,0.003c0.564,0 1.096,0.22 1.496,0.62c0.391,0.392 0.609,0.908 0.617,1.459l0.006,0.077C13.425,2.963 12.524,2.963 12.524,2.963zM3.387,10.312l1.075,-0.009l0.025,3.125l-1.074,0.009L3.387,10.312z"
-      android:fillColor="#030104"/>
-</vector>

app/src/main/res/drawable/ic_wifi.xml

@@ -1,49 +0,0 @@
-<!--
-  ~ Copyright (C) 2026 The Android Open Source Project
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="800dp"
-    android:height="800dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <path
-      android:pathData="M4.91,11.84C9.21,8.52 14.8,8.52 19.1,11.84"
-      android:strokeLineJoin="round"
-      android:strokeWidth="1.5"
-      android:fillColor="#00000000"
-      android:strokeColor="#292D32"
-      android:strokeLineCap="round"/>
-  <path
-      android:pathData="M2,8.36C8.06,3.68 15.94,3.68 22,8.36"
-      android:strokeLineJoin="round"
-      android:strokeWidth="1.5"
-      android:fillColor="#00000000"
-      android:strokeColor="#292D32"
-      android:strokeLineCap="round"/>
-  <path
-      android:pathData="M6.79,15.49C9.94,13.05 14.05,13.05 17.2,15.49"
-      android:strokeLineJoin="round"
-      android:strokeWidth="1.5"
-      android:fillColor="#00000000"
-      android:strokeColor="#292D32"
-      android:strokeLineCap="round"/>
-  <path
-      android:pathData="M9.4,19.15C10.98,17.93 13.03,17.93 14.61,19.15"
-      android:strokeLineJoin="round"
-      android:strokeWidth="1.5"
-      android:fillColor="#00000000"
-      android:strokeColor="#292D32"
-      android:strokeLineCap="round"/>
-</vector>