dashboard Ui changed

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

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