new dashboard style

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

@@ -2,6 +2,7 @@ package com.mob.utsmyanmar
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
@@ -15,7 +16,7 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         installSplashScreen()
         super.onCreate(savedInstanceState)
-        enableEdgeToEdge()
+//        enableEdgeToEdge()
         setContent {
             MOBPOSTheme {
                 val navController = rememberNavController()

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

@@ -9,6 +9,8 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import com.mob.utsmyanmar.ui.theme.Color
 import com.mob.utsmyanmar.ui.theme.Primary
 import com.mob.utsmyanmar.ui.theme.White
 
@@ -43,7 +45,15 @@ fun AppBar(
         },
 
         colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Primary
+            containerColor = Color.LegacyRed
         )
     )
 }
+
+@Preview
+@Composable
+fun PreviewAppBar(){
+    AppBar(
+        title = "Title"
+    )
+}

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

@@ -0,0 +1,392 @@
+package com.mob.utsmyanmar.ui.dashboard
+
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mob.utsmyanmar.ui.components.appbar.AppBar
+import com.mob.utsmyanmar.ui.preview.P2Preview
+import com.mob.utsmyanmar.ui.theme.Color
+
+@Composable
+fun DashboardScreen2(
+    onNavigateAmount: (String) -> Unit = {}
+) {
+    Scaffold(
+        containerColor = Color.IvoryBeige,
+        topBar = {
+            AppBar(title = "Dashboard")
+        }
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .padding(paddingValues)
+                .fillMaxSize()
+                .padding(horizontal = 16.dp)
+        ) {
+            Spacer(modifier = Modifier.height(16.dp))
+            SummaryCard()
+            Spacer(modifier = Modifier.height(16.dp))
+            MenuGrid(onNavigateAmount = onNavigateAmount)
+            Spacer(modifier = Modifier.height(18.dp))
+            RecentTransactionHeader()
+            Spacer(modifier = Modifier.height(8.dp))
+            RecentTransactionList()
+        }
+    }
+}
+
+@Composable
+private fun SummaryCard() {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(16.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.White),
+        elevation = CardDefaults.cardElevation(4.dp)
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Column(
+                modifier = Modifier.weight(1f)
+            ) {
+                SummaryItem(
+                    title = "Sales Today",
+                    value = "MMK 2,000,000",
+                    subtitle = "47 Transactions",
+                    icon = Icons.Default.BarChart,
+                    iconBg = Color.CrimsonRed
+                )
+                
+                HorizontalDivider(color = Color.Gray, modifier = Modifier.padding(vertical = 6.dp, horizontal = 6.dp))
+
+                SummaryItem(
+                    title = "Settlement",
+                    value = "Completed",
+                    subtitle = "Today 11:00 PM",
+                    icon = Icons.Default.Check,
+                    iconBg = Color.CrimsonRed
+                )
+            }
+            
+            VerticalDivider(color = Color.Gray, modifier = Modifier.height(160.dp))
+
+            Column(
+                modifier = Modifier
+                    .weight(0.75f)
+                    .padding(start = 18.dp),
+                horizontalAlignment = Alignment.Start
+            ) {
+                Row(
+                    verticalAlignment = Alignment.Bottom
+                ) {
+                    Text(
+                        text = "Last Sync",
+                        fontSize = 12.sp,
+                        )
+                    IconCircle(Icons.Default.Sync, Color.CrimsonRed)
+                }
+                
+                Spacer(Modifier.height(6.dp))
+
+                Text(
+                    text = "5 mins ago",
+                    fontSize = 18.sp,
+                    color = Color.LegacyRed,
+                    fontWeight = FontWeight.SemiBold
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun SummaryItem(
+    title: String,
+    value: String,
+    subtitle: String,
+    icon: ImageVector,
+    iconBg: androidx.compose.ui.graphics.Color
+) {
+    Row(
+        verticalAlignment = Alignment.Top,
+        modifier = Modifier.padding(6.dp)
+    ) {
+        Column(
+            modifier = Modifier.weight(1f),
+        ) {
+            Text(title, fontSize = 12.sp)
+            Text(
+                value,
+                fontSize = 14.sp,
+                color = Color.LegacyRed,
+                fontWeight = FontWeight.Bold
+            )
+            Text(subtitle, fontSize = 12.sp)
+        }
+        IconCircle(icon, iconBg)
+    }
+}
+
+@Composable
+private fun MenuGrid(
+    onNavigateAmount: (String) -> Unit
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(10.dp)
+    ) {
+        Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+            MenuCard(
+                title = "Sale",
+                icon = Icons.Default.PointOfSale,
+                modifier = Modifier.weight(1f),
+                onClick = { onNavigateAmount("Sale") }
+            )
+            MenuCard("MMQR", Icons.Default.QrCode, Modifier.weight(1f))
+            MenuCard("History", Icons.Default.History, Modifier.weight(1f))
+        }
+
+        Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+            MenuCard("Sign On", Icons.Default.Link, Modifier.weight(1f))
+            MenuCard("Settlement", Icons.Default.Wallet, Modifier.weight(1f))
+            MenuCard("See More", Icons.Default.GridView, Modifier.weight(1f))
+        }
+    }
+}
+
+@Composable
+private fun MenuCard(
+    title: String,
+    icon: ImageVector,
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null
+) {
+    Card(
+        modifier = modifier
+            .height(100.dp)
+            .then(
+                if (onClick != null) {
+                    Modifier.clickable(onClick = onClick)
+                } else {
+                    Modifier
+                }
+            ),
+        shape = RoundedCornerShape(14.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.White),
+        elevation = CardDefaults.cardElevation(5.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(6.dp)
+        ) {
+            Column {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = title,
+                    tint = Color.LegacyRed,
+                    modifier = Modifier.size(50.dp)
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = title,
+                        fontSize = 12.sp,
+                        color = Color.Black,
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 1,
+                        modifier = Modifier.weight(1f)
+                    )
+                    Icon(
+                        imageVector = Icons.Default.ChevronRight,
+                        contentDescription = null,
+                        tint = Color.LegacyRed,
+                        modifier = Modifier
+                            .size(28.dp)
+                    )
+                }
+                
+            }
+
+            
+        }
+    }
+}
+
+@Composable
+private fun RecentTransactionHeader() {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = "Recent Transactions",
+            color = Color.LegacyRed,
+            fontSize = 16.sp,
+            fontWeight = FontWeight.SemiBold,
+            modifier = Modifier.weight(1f)
+        )
+
+        Text(
+            text = "View All",
+            color = Color.LegacyRed,
+            fontSize = 14.sp
+        )
+
+        Icon(
+            imageVector = Icons.Default.ChevronRight,
+            contentDescription = null,
+            tint = Color.LegacyRed
+        )
+    }
+}
+
+@Composable
+private fun RecentTransactionList() {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(14.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.White),
+        elevation = CardDefaults.cardElevation(2.dp)
+    ) {
+        Column {
+            TransactionRow(
+                iconText = "VISA",
+                time = "4:12 PM",
+                type = "Card Payment",
+                amount = "MMK 100,000",
+                status = "Success",
+                statusColor = Color.LegacyRed,
+                statusTextColor = Color.LegacyRed
+            )
+
+            Divider(color = Color.LegacyRed)
+
+            TransactionRow(
+                iconText = "MMQR",
+                time = "8:43 AM",
+                type = "MMQR",
+                amount = "MMK 50,000",
+                status = "Success",
+                statusColor = Color.LegacyRed,
+                statusTextColor = Color.LegacyRed
+            )
+
+            Divider(color = Color.LegacyRed)
+
+            TransactionRow(
+                iconText = "MC",
+                time = "9:10 PM",
+                type = "Card Payment",
+                amount = "MMK 150,000",
+                status = "Failed",
+                statusColor = Color.LegacyRed,
+                statusTextColor = Color.LegacyRed
+            )
+        }
+    }
+}
+
+@Composable
+private fun TransactionRow(
+    iconText: String,
+    time: String,
+    type: String,
+    amount: String,
+    status: String,
+    statusColor: androidx.compose.ui.graphics.Color,
+    statusTextColor: androidx.compose.ui.graphics.Color
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(62.dp)
+            .padding(horizontal = 14.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = iconText,
+            color = Color.LegacyRed,
+            fontWeight = FontWeight.Bold,
+            fontSize = 20.sp,
+            modifier = Modifier.width(70.dp)
+        )
+
+        Column(modifier = Modifier.weight(1f)) {
+            Text(time, fontSize = 12.sp, color = Color.Black)
+            Text(type, fontSize = 12.sp, color = Color.Gray)
+        }
+
+        Text(
+            text = amount,
+            fontSize = 12.sp,
+            color = Color.Black,
+            modifier = Modifier.width(90.dp)
+        )
+
+        Box(
+            modifier = Modifier
+                .clip(RoundedCornerShape(8.dp))
+                .padding(horizontal = 10.dp, vertical = 5.dp)
+        ) {
+            Text(
+                text = status,
+                fontSize = 12.sp,
+            )
+        }
+
+        Icon(
+            imageVector = Icons.Default.ChevronRight,
+            contentDescription = null,
+            tint = Color.LegacyRed,
+            modifier = Modifier.size(26.dp)
+        )
+    }
+}
+
+@Composable
+private fun IconCircle(
+    icon: ImageVector,
+    color: androidx.compose.ui.graphics.Color
+) {
+    Box(
+        modifier = Modifier
+            .size(38.dp)
+            .clip(CircleShape)
+            .background(color.copy(alpha = 0.1f)),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            tint = color,
+            modifier = Modifier.size(22.dp)
+        )
+    }
+}
+
+@P2Preview
+@Composable
+fun PreviewDashboardScreen2() {
+    DashboardScreen2()
+}

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

@@ -14,7 +14,7 @@ import androidx.navigation.navArgument
 import com.mob.utsmyanmar.ui.amount.AmountRoute
 import com.mob.utsmyanmar.ui.cardwaiting.CardWaitingScreen
 import com.mob.utsmyanmar.ui.cardwaiting.CardWaitingViewModel
-import com.mob.utsmyanmar.ui.dashboard.DashboardRoute
+import com.mob.utsmyanmar.ui.dashboard.DashboardScreen2
 import com.mob.utsmyanmar.ui.pinpad.PinPadRoute
 import com.mob.utsmyanmar.ui.processing_card.ProcessingCardRoute
 import com.mob.utsmyanmar.ui.processing_card.ProcessingCardViewModel
@@ -38,7 +38,7 @@ fun AppNavGraph(
         startDestination = Routes.Dashboard.route
     ) {
         composable(Routes.Dashboard.route) {
-            DashboardRoute(
+            DashboardScreen2(
                 onNavigateAmount = { action ->
                     navController.navigate(Routes.Amount.createRoute(action)) {
                         popUpTo(Routes.Dashboard.route) {
@@ -46,9 +46,7 @@ fun AppNavGraph(
                         }
                         launchSingleTop = true
                     }
-                },
+                }
-                settlementEnabled = true,
-                wavePayEnabled = true
             )
         }
 

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

@@ -0,0 +1,19 @@
+package com.mob.utsmyanmar.ui.preview
+
+
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    name = "P2",
+    device = "spec:width=720px,height=1440px,dpi=349",
+    showBackground = true,
+    showSystemUi = true
+)
+annotation class P2Preview
+
+@Preview(
+    name = "P3",
+    device = "spec:width=720px,height=1440px,dpi=320",
+    showBackground = true
+)
+annotation class P3Preview

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

@@ -5,13 +5,20 @@ import androidx.compose.ui.graphics.Color
 val Purple80 = Color(0xFFD0BCFF)
 val PurpleGrey80 = Color(0xFFCCC2DC)
 val Pink80 = Color(0xFFEFB8C8)
-
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
-
 val Primary = Color(0xFFCA2027)
-
 val White = Color(0xFFFFFFFF)
-
 val Black = Color(0xFF000000)
+
+object Color {
+    val IvoryBeige = Color(0xFFFFF5E6)
+    val LegacyRed = Color(0xFF6F0D1E)
+    val CrimsonRed = Color(0xFFCD2029)
+    val GoldenGlow = Color(0xFFFFCF66)
+    val SkylineBlue = Color(0xFF47A2DA)
+    val White = Color(0xFFFFFFFF)
+    val Black = Color(0xFF000000)
+    val Gray = Color(0xFF898989)
+}