new dashboard style
This commit is contained in:
moon
parent
5bbda074a8
commit
fb4c832476
@ -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()
|
||||
|
||||
@ -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"
|
||||
)
|
||||
}
|
||||
@ -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()
|
||||
}
|
||||
@ -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
19
app/src/main/java/com/mob/utsmyanmar/ui/preview/Preview.kt
Normal 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
|
||||
@ -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)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user