new success screen

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
+                .fillMaxSize()
+                .background(Color.IvoryBeige)
                 .padding(paddingValues)
-                .fillMaxSize()
+                .statusBarsPadding()
-                .padding(16.dp),
+                .navigationBarsPadding()
-            verticalArrangement = Arrangement.SpaceBetween
+                .padding(horizontal = 20.dp),
-        ) {
-            Column() {
-
-                Card(
-                    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))
-
-                Card(
-                    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))
+
+            SuccessIcon()
+
+            Spacer(modifier = Modifier.height(16.dp))
+
             Text(
-                                text = "500.00 MMMK",
+                text = state.title,
-                                style = MaterialTheme.typography.bodyLarge.copy(
+                color = Color.LegacyRed,
-                                    fontSize = 22.sp,
+                fontSize = 24.sp,
                 fontWeight = FontWeight.Bold
-                                ),
-                                color = White
             )
-                            Spacer(modifier = Modifier.height(8.dp))
+
+            Spacer(modifier = Modifier.height(6.dp))
+
             Text(
-                                text = "Received",
+                text = state.message.ifBlank { "Your payment has been processed successfully." },
-                                style = MaterialTheme.typography.bodyLarge.copy(
+                color = Color.Gray,
                 fontSize = 13.sp,
-                                    fontWeight = FontWeight.Normal
+                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
                 ),
-                                color = White
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                imageVector = Icons.Rounded.Check,
+                contentDescription = "Success",
+                tint = Color.White,
+                modifier = Modifier.size(64.dp)
             )
         }
     }
+}
 
-                }
+@Composable
-            }
+private fun AmountCard(
-
+    amount: String
-            Button(
+) {
+    Card(
         modifier = Modifier
             .fillMaxWidth()
-                    .height(50.dp),
+            .height(130.dp)
-                colors = ButtonColors(
+            .shadow(
-                    containerColor = Primary,
+                elevation = 6.dp,
-                    contentColor = White,
+                shape = RoundedCornerShape(22.dp),
-                    disabledContainerColor = Primary,
+                clip = false
-                    disabledContentColor = White,
             ),
-                shape = RoundedCornerShape(12.dp),
+        shape = RoundedCornerShape(22.dp),
-                onClick = {}
+        colors = CardDefaults.cardColors(
+            containerColor = Color.White
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(vertical = 18.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
         ) {
             Text(
-                    text = "Transaction Completed",
+                text = "PAID AMOUNT",
-                    style = MaterialTheme.typography.bodyLarge.copy(
+                color = Color.Gray,
-                        fontSize = 16.sp,
+                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 = subValue,
+                    color = Color.Black,
+                    fontSize = 11.sp
                 )
             }
         }
     }
 }
 
-@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 = {},
     )
 }