new success screen

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

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

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

@@ -1,275 +1,203 @@
 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.rememberScrollState
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
+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.material3.*
-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.res.painterResource
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.mob.utsmyanmar.ui.theme.MOBPOSTheme
+import com.mob.utsmyanmar.ui.preview.P2Preview
-import com.mob.utsmyanmar.ui.theme.Primary
+import com.mob.utsmyanmar.ui.theme.Color
-import com.mob.utsmyanmar.ui.theme.White
-import com.mob.utsmyanmar.R
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AmountScreen(
-    action: String,
+    onBackClick: () -> Unit = {},
-    canGoBack: Boolean = true,
+    onChargeClick: (String) -> Unit = {}
-    onBackClick: () -> Unit,
-    onCancelClick: () -> Unit = {},
-    onNextClick: (String) -> Unit = {}
 ) {
-    BackHandler(enabled = canGoBack) {
+    var amount by remember { mutableStateOf("") }
-        onBackClick()
-    }
 
-    var amount by remember {
+    val displayAmount = amount.ifEmpty { "0" }
-        mutableStateOf("0")
-    }
 
-    Scaffold(
+    Column(
-        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()
-                .padding(paddingValues)
-                .background(White)
-                .verticalScroll(rememberScrollState())
-                .padding(horizontal = 24.dp),
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            AmountBox(
-                amount = formatTypedAmount(amount),
-                height = 134.dp
-            )
-
-            Spacer(modifier = Modifier.height(24.dp))
-
-            Keypad(
-                buttonHeight = 74.dp,
-                buttonSpacing = 12.dp,
-                onKeyClick = { key ->
-                    amount = handleAmountInput(amount, key)
-                }
-            )
-
-            Spacer(modifier = Modifier.height(18.dp))
-
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(14.dp)
-            ) {
-
-                Button(
-                    onClick = {
-                        onNextClick(normalizeAmount(amount))
-                    },
-                    modifier = Modifier
-                        .weight(if (canGoBack) 1f else 2f)
-                        .height(68.dp),
-                    shape = RoundedCornerShape(18.dp),
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Primary,
-                        contentColor = White
-                    )
-                ) {
-                    Text(
-                        text = "Enter",
-                        fontSize = 20.sp,
-                        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(12.dp))
-        }
-    }
-}
-
-@Composable
-private fun AmountBox(
-    amount: String,
-    height: Dp
-) {
-
-    Box(
         modifier = Modifier
-            .fillMaxWidth()
+            .fillMaxSize()
-            .height(height)
+            .background(Color.IvoryBeige)
-            .background(
+            .padding(horizontal = 20.dp)
-                color = Primary,
+            .navigationBarsPadding()
-                shape = RoundedCornerShape(20.dp)
+            .statusBarsPadding()
-            )
-            .padding(horizontal = 24.dp),
-        contentAlignment = Alignment.CenterEnd
     ) {
-
+        Box(
-        Row(
+            modifier = Modifier
-            verticalAlignment = Alignment.CenterVertically
+                .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(
-                text = amount,
+                text = "Amount",
-                color = White,
+                color = Color.LegacyRed,
-                fontSize = 30.sp,
+                fontSize = 14.sp,
                 fontWeight = FontWeight.Bold
             )
+        }
 
-            Spacer(modifier = Modifier.width(14.dp))
+        Spacer(modifier = Modifier.height(36.dp))
 
-            Box(
+        Text(
+            text = "Enter Amount",
+            color = Color.Gray,
+            fontSize = 11.sp,
+            modifier = Modifier.align(Alignment.CenterHorizontally)
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Row(
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            verticalAlignment = Alignment.Bottom
+        ) {
+            Text(
+                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))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Button(
+                onClick = { },
                 modifier = Modifier
-                    .background(
+                    .weight(1f)
-                        color = White,
+                    .height(56.dp),
-                        shape = RoundedCornerShape(10.dp)
+                shape = RoundedCornerShape(8.dp),
-                    )
+                colors = ButtonDefaults.buttonColors(
-                    .padding(
+                    containerColor = Color.White,
-                        horizontal = 16.dp,
+                    contentColor = Color.LegacyRed
-                        vertical = 6.dp
+                )
-                    )
             ) {
+                Text("Cancel")
+            }
 
+            Button(
+                onClick = {
+                    if (amount.isNotEmpty()) {
+                        onChargeClick(amount)
+                    }
+                },
+                modifier = Modifier
+                    .weight(1f)
+                    .height(56.dp),
+                enabled = amount.isNotEmpty(),
+                shape = RoundedCornerShape(8.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Color.LegacyRed,
+                    contentColor = Color.White,
+                    disabledContainerColor = Color.LegacyRed.copy(alpha = 0.5f),
+                    disabledContentColor = Color.White
+                )
+            ) {
                 Text(
-                    text = "MMK",
+                    text = "Next",
-                    color = Primary,
+                    fontSize = 14.sp,
-                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Medium
-                    fontWeight = FontWeight.Bold
                 )
             }
         }
+
+        Spacer(modifier = Modifier.height(18.dp))
     }
 }
 
 @Composable
-private fun Keypad(
+private fun AmountKeypad(
-    buttonHeight: Dp,
+    onNumberClick: (String) -> Unit,
-    buttonSpacing: Dp,
+    onDeleteClick: () -> Unit
-    onKeyClick: (String) -> Unit
 ) {
-
     val keys = listOf(
         listOf("1", "2", "3"),
         listOf("4", "5", "6"),
         listOf("7", "8", "9"),
-        listOf(".", "0", "DEL")
+        listOf("", "0", "00")
     )
 
     Column(
-        verticalArrangement = Arrangement.spacedBy(buttonSpacing)
+        modifier = Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(6.dp)
     ) {
-
         keys.forEach { row ->
-
             Row(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
+                horizontalArrangement = Arrangement.spacedBy(6.dp)
             ) {
-
                 row.forEach { key ->
-
+                    if (key.isEmpty()) {
-                    Button(
+                        Box(
-                        onClick = {
+                            modifier = Modifier
-                            onKeyClick(key)
+                                .weight(1f)
-                        },
+                                .height(66.dp)
-                        modifier = Modifier
+                        )
-                            .weight(1f)
+                    } else {
-                            .height(buttonHeight),
+                        KeypadButton(
-                        shape = RoundedCornerShape(18.dp),
+                            text = key,
-                        colors = ButtonDefaults.buttonColors(
+                            modifier = Modifier.weight(1f),
-                            containerColor = Primary,
+                            onClick = { onNumberClick(key) }
-                            contentColor = White
+                        )
-                        ),
-                        contentPadding = PaddingValues(0.dp)
-                    ) {
-
-                        if (key == "DEL") {
-
-                            Text(
-                                text = "⌫",
-                                fontSize = 26.sp,
-                                fontWeight = FontWeight.Bold
-                            )
-
-                        } else {
-
-                            Text(
-                                text = key,
-                                fontSize = 22.sp,
-                                fontWeight = FontWeight.Bold
-                            )
-                        }
                     }
                 }
             }
@@ -277,96 +205,44 @@ private fun Keypad(
     }
 }
 
-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
-private fun AmountScreenPreview() {
+private fun KeypadButton(
-
+    text: String,
-    MOBPOSTheme {
+    modifier: Modifier = Modifier,
-
+    onClick: () -> Unit
-        AmountScreen(
+) {
-            action = "Amount",
+    Box(
-            canGoBack = true,
+        modifier = modifier
-            onBackClick = {}
+            .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,
+            color = Color.LegacyRed,
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Normal,
+            textAlign = TextAlign.Center
         )
     }
 }
+
+private fun formatAmount(value: String): String {
+    val number = value.toLongOrNull() ?: 0L
+    return "%,d".format(number)
+}
+
+@P2Preview
+@Composable
+fun PreviewAmountScreen() {
+    AmountScreen { }
+}

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

@@ -1,8 +1,9 @@
 package com.mob.utsmyanmar.ui.cardwaiting
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.BorderStroke
 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
@@ -11,18 +12,22 @@ 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.material3.Button
+import androidx.compose.material.icons.Icons
-import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material.icons.rounded.KeyboardArrowLeft
-import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material.icons.rounded.Wifi
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 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
@@ -30,23 +35,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.theme.Black
+import com.mob.utsmyanmar.ui.preview.P2Preview
-import com.mob.utsmyanmar.ui.theme.Primary
+import com.mob.utsmyanmar.ui.theme.Color
-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
 ) {
@@ -57,9 +62,9 @@ fun CardWaitingScreen(
             when (event) {
                 CardWaitingEvent.GoManualEntry -> onManualEntry()
                 CardWaitingEvent.GoProcessingCard -> onProcessingCard()
-                CardWaitingEvent.GoTimeout -> onTimeout()
                 CardWaitingEvent.GoMain -> onMain()
                 CardWaitingEvent.GoBack -> onBack()
+                CardWaitingEvent.GoTimeout -> Unit
             }
         }
     }
@@ -78,160 +83,360 @@ fun CardWaitingScreen(
         viewModel.onBackPressed()
     }
 
-    Scaffold(
+    CardWaitingScreenContent(
-        topBar = {
+        amount = amount,
-            CenterAlignedTopAppBar(
+        uiState = uiState,
-                title = {
+        onBackClick = viewModel::onBackPressed,
-                    Text(
+        onManualEntryClick = viewModel::onManualEntryClick
-                        text = "CARD CAPTURE",
+    )
-                        color = White,
+}
-                        fontSize = 16.sp,
+
-                        fontWeight = FontWeight.SemiBold
+@Composable
-                    )
+private fun CardWaitingScreenContent(
-                },
+    amount: String,
-                navigationIcon = {
+    uiState: CardWaitingUiState,
-                    if (uiState.canGoBack) {
+    onBackClick: () -> Unit,
-                        IconButton(onClick = onBack) {
+    onManualEntryClick: () -> Unit
-                            Icon(
+) {
-                                painter = painterResource(R.drawable.ic_left_arrow),
+    Column(
-                                contentDescription = "Back",
+        modifier = Modifier
-                                tint = White
+            .fillMaxSize()
-                            )
+            .background(Color.IvoryBeige)
-                        }
+            .statusBarsPadding()
-                    }
+            .navigationBarsPadding()
-                },
+            .padding(horizontal = 20.dp),
-                colors = TopAppBarDefaults.topAppBarColors(
+        horizontalAlignment = Alignment.CenterHorizontally
-                    containerColor = Primary
+    ) {
-                )
+        Box(
-            )
-        },
-        containerColor = White
-    ) { paddingValues ->
-        Column(
             modifier = Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
-                .padding(paddingValues)
+                .height(54.dp),
-                .background(White)
+            contentAlignment = Alignment.Center
         ) {
-
+            if (uiState.canGoBack) {
-            Box(
+                IconButton(
-                modifier = Modifier
+                    onClick = onBackClick,
-                    .fillMaxSize()
+                    modifier = Modifier.align(Alignment.CenterStart)
-                    .background(
-                        color = Primary,
-                        shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
-                    )
-                    .padding(18.dp)
-            ) {
-                Column(
-                    modifier = Modifier.fillMaxSize(),
-                    horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    Box(
+                    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))
+
+        ContactlessCircle(isLoading = uiState.isLoading)
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        Text(
+            text = when {
+                uiState.isCardCaptured -> "Card Detected"
+                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"
+            },
+            color = Color.Black,
+            fontSize = 9.sp
+        )
+
+        Spacer(modifier = Modifier.height(14.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,
+            fontSize = 11.sp,
+            textAlign = TextAlign.Center,
+            lineHeight = 16.sp
+        )
+
+        Spacer(modifier = Modifier.height(18.dp))
+
+        StatusPanel(uiState = uiState)
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        ManualEntryAction(onManualEntryClick = 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
-                            .fillMaxWidth()
+                            .size(72.dp)
-                            .background(
+                            .rotate(90f)
-                                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
-                            ) {
-                                Image(
-                                    painter = painterResource(R.drawable.buy_ecommerce_finance_payment_pos_shop_svgrepo_com),
-                                    contentDescription = "Card reader"
-                                )
-                            }
-
-                            Spacer(modifier = Modifier.height(20.dp))
-
-                            Text(
-                                text = if (uiState.isFallback) {
-                                    "Swipe Card"
-                                } else {
-                                    "Present Card"
-                                },
-                                color = Black,
-                                fontSize = 24.sp,
-                                fontWeight = FontWeight.Bold
-                            )
-
-                            Spacer(modifier = Modifier.height(10.dp))
-
-                            Text(
-                                text = uiState.alertMessage,
-                                color = Black,
-                                fontSize = 18.sp,
-                                lineHeight = 26.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
-                        )
-
-                        Text(
-                            text = if (uiState.isLoading) "Initializing" else "Waiting",
-                            color = White,
-                            fontSize = 15.sp
-                        )
-                    }
-
-                    Spacer(modifier = Modifier.weight(1f))
-
-                    Button(
-                        onClick = viewModel::onManualEntryClick,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .height(64.dp),
-                        shape = RoundedCornerShape(18.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            containerColor = White,
-                            contentColor = Primary
-                        )
-                    ) {
-                        Text(
-                            text = "Manual Entry",
-                            fontSize = 20.sp,
-                            fontWeight = FontWeight.Bold
-                        )
-                    }
                 }
             }
         }
     }
 }
+
+@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),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                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 = 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,5 +4,6 @@ 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,7 +78,17 @@ 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
                 )
             }
         }
@@ -122,7 +132,8 @@ class CardWaitingViewModel(
             _uiState.update {
                 it.copy(
                     alertMessage = "Initializing card reader...",
-                    isLoading = true
+                    isLoading = true,
+                    isCardCaptured = false
                 )
             }
 
@@ -136,7 +147,8 @@ class CardWaitingViewModel(
                             } else {
                                 "Please insert, tap, or swipe card"
                             },
-                            isLoading = false
+                            isLoading = false,
+                            isCardCaptured = false
                         )
                     }
                     setupCardReadProcess(isFallback)
@@ -210,6 +222,13 @@ 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,6 +87,7 @@ fun AppNavGraph(
 
             CardWaitingScreen(
                 viewModel = cardWaitingViewModel,
+                amount = formatAmountForDisplay(sharedViewModel.amount.value),
                 onManualEntry = {},
                 onProcessingCard = {
                     navController.navigate(Routes.ProcessingCard.route) {
@@ -96,7 +97,6 @@ fun AppNavGraph(
                         launchSingleTop = true
                     }
                 },
-                onTimeout = { navController.popBackStack() },
                 onBack = { navController.popBackStack() },
                 onMain = {
                     navController.navigate(Routes.Dashboard.route) {
@@ -207,3 +207,9 @@ 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,4 +21,5 @@ 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,268 +1,289 @@
 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.layout.Box
+import androidx.compose.foundation.shape.CircleShape
-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.ChevronLeft
+import androidx.compose.material.icons.filled.CalendarMonth
-import androidx.compose.material3.Button
+import androidx.compose.material.icons.filled.Numbers
-import androidx.compose.material3.ButtonColors
+import androidx.compose.material.icons.filled.Print
-import androidx.compose.material3.Card
+import androidx.compose.material.icons.rounded.Check
-import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.*
-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.blur
+import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.graphics.vector.ImageVector
 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.R
+import com.mob.utsmyanmar.ui.preview.P2Preview
-import com.mob.utsmyanmar.ui.components.appbar.AppBar
+import com.mob.utsmyanmar.ui.theme.Color
-import com.mob.utsmyanmar.ui.theme.Black
+import com.utsmyanmar.paylibs.print.PrintReceipt
-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(
-        topBar = {
+        containerColor = Color.IvoryBeige
-            AppBar(
-                title = "Transaction Results",
-                icon = if (canGoBack) Icons.Default.ChevronLeft else null,
-                onIconClick = if (canGoBack) {
-                    { onEvent(TransactionResultEvent.BackClick) }
-                } else {
-                    null
-                }
-            )
-        }
     ) { paddingValues ->
         Column(
             modifier = Modifier
-                .padding(paddingValues)
                 .fillMaxSize()
-                .padding(16.dp),
+                .background(Color.IvoryBeige)
-            verticalArrangement = Arrangement.SpaceBetween
+                .padding(paddingValues)
+                .statusBarsPadding()
+                .navigationBarsPadding()
+                .padding(horizontal = 20.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Column() {
 
-                Card(
+            Spacer(modifier = Modifier.height(8.dp))
-                    colors = CardDefaults.cardColors(
-                        containerColor = White
-                    ),
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(200.dp),
-                    elevation = CardDefaults.cardElevation(
-                        defaultElevation = 6.dp
-                    )
-                ) {
-                    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
-                            ),
-                            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))
+            SuccessIcon()
 
-                Card(
+            Spacer(modifier = Modifier.height(16.dp))
-                    colors = CardDefaults.cardColors(
-                        containerColor = Primary
-                    ),
-                    modifier = Modifier.fillMaxWidth().height(250.dp),
-                    elevation = CardDefaults.cardElevation(
-                        defaultElevation = 6.dp
-                    )
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxSize()
-                            .padding(16.dp),
-                    ) {
-                        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 = "Amount",
-                                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
-                            )
-                        }
-                        Spacer(modifier = Modifier.height(8.dp))
-                        Row(
-                            modifier = Modifier.fillMaxWidth(),
-                            horizontalArrangement = Arrangement.SpaceBetween
-                        ) {
-                            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(
+            Text(
-                modifier = Modifier
+                text = state.title,
-                    .fillMaxWidth()
+                color = Color.LegacyRed,
-                    .height(50.dp),
+                fontSize = 24.sp,
-                colors = ButtonColors(
+                fontWeight = FontWeight.Bold
-                    containerColor = Primary,
+            )
-                    contentColor = White,
+
-                    disabledContainerColor = Primary,
+            Spacer(modifier = Modifier.height(6.dp))
-                    disabledContentColor = White,
+
+            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
                 ),
-                shape = RoundedCornerShape(12.dp),
+            contentAlignment = Alignment.Center
-                onClick = {}
+        ) {
-            ) {
+            Icon(
+                imageVector = Icons.Rounded.Check,
+                contentDescription = "Success",
+                tint = Color.White,
+                modifier = Modifier.size(64.dp)
+            )
+        }
+    }
+}
+
+@Composable
+private fun AmountCard(
+    amount: String
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(130.dp)
+            .shadow(
+                elevation = 6.dp,
+                shape = RoundedCornerShape(22.dp),
+                clip = false
+            ),
+        shape = RoundedCornerShape(22.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = Color.White
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(vertical = 18.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Text(
+                text = "PAID AMOUNT",
+                color = Color.Gray,
+                fontSize = 15.sp,
+                fontWeight = FontWeight.SemiBold
+            )
+
+
+            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
+            )
+        }
+    }
+}
+
+@Composable
+private fun InfoCard(
+    date: String,
+    time: String,
+    transactionId: String
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(130.dp)
+            .shadow(
+                elevation = 4.dp,
+                shape = RoundedCornerShape(18.dp),
+                clip = false
+            ),
+        shape = RoundedCornerShape(18.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = Color.White
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 18.dp),
+            verticalArrangement = Arrangement.SpaceAround
+        ) {
+            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)
+            )
+        }
+    }
+}
+
+@Composable
+private fun InfoItem(
+    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 = "Transaction Completed",
+                    text = subValue,
-                    style = MaterialTheme.typography.bodyLarge.copy(
+                    color = Color.Black,
-                        fontSize = 16.sp,
+                    fontSize = 11.sp
-                        fontWeight = FontWeight.SemiBold
-                    )
                 )
             }
         }
     }
 }
 
-@Preview(showBackground = true, showSystemUi = true)
+
+@P2Preview
 @Composable
-fun TransactionResultScreenPreview() {
+fun PreviewTransactionResultScreen() {
     TransactionResultScreen(
         state = TransactionResultState(
-            title = "Transaction Success",
+            "Success"
-            message = "Transaction Approved",
-            isLoading = false
         ),
         canGoBack = true,
-        onEvent = {}
+        onEvent = {},
     )
 }

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

@@ -0,0 +1,24 @@
+<!--
+  ~ 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

@@ -0,0 +1,49 @@
+<!--
+  ~ 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>