From fb4c8324768d6a2b126cba92359a8d16d5915eca Mon Sep 17 00:00:00 2001 From: moon <56061215+MgKyawLay@users.noreply.github.com> Date: Sat, 16 May 2026 10:07:00 +0630 Subject: [PATCH] new dashboard style --- .../java/com/mob/utsmyanmar/MainActivity.kt | 3 +- .../utsmyanmar/ui/components/appbar/AppBar.kt | 12 +- .../ui/dashboard/DashboardScreen2.kt | 392 ++++++++++++++++++ .../utsmyanmar/ui/navigation/AppNavGraph.kt | 8 +- .../com/mob/utsmyanmar/ui/preview/Preview.kt | 19 + .../java/com/mob/utsmyanmar/ui/theme/Color.kt | 15 +- 6 files changed, 438 insertions(+), 11 deletions(-) create mode 100644 app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardScreen2.kt create mode 100644 app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt diff --git a/app/src/main/java/com/mob/utsmyanmar/MainActivity.kt b/app/src/main/java/com/mob/utsmyanmar/MainActivity.kt index e6ad392..d02cb50 100644 --- a/app/src/main/java/com/mob/utsmyanmar/MainActivity.kt +++ b/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() diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/components/appbar/AppBar.kt b/app/src/main/java/com/mob/utsmyanmar/ui/components/appbar/AppBar.kt index dfb9a9e..af064ef 100644 --- a/app/src/main/java/com/mob/utsmyanmar/ui/components/appbar/AppBar.kt +++ b/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" + ) } \ No newline at end of file diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardScreen2.kt b/app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardScreen2.kt new file mode 100644 index 0000000..5060d22 --- /dev/null +++ b/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() +} diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/navigation/AppNavGraph.kt b/app/src/main/java/com/mob/utsmyanmar/ui/navigation/AppNavGraph.kt index c11e936..9d3d780 100644 --- a/app/src/main/java/com/mob/utsmyanmar/ui/navigation/AppNavGraph.kt +++ b/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 + } ) } diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt b/app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt new file mode 100644 index 0000000..3a45370 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt b/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt index 77c0ac7..1768367 100644 --- a/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt +++ b/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) -val Black = Color(0xFF000000) \ No newline at end of file +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) +} \ No newline at end of file