Kyaw_Min_Khant/mob_pos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new dashboard style

Browse Source
This commit is contained in:
moon 2026-05-16 10:07:00 +06:30
parent 5bbda074a8
commit fb4c832476
6 changed files with 438 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/main/java/com/mob/utsmyanmar/MainActivity.kt
View File

@ -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()

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

@ -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"
)
}

392
app/src/main/java/com/mob/utsmyanmar/ui/dashboard/DashboardScreen2.kt Normal file
View File

@ -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()
}

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

@ -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
}
)
}

19
app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt Normal file
View File

@ -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

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

@ -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)
}