Delete DashboardScreen2.kt
This commit is contained in:
moon
parent
ac33bbd61f
commit
070c158985
@ -1,928 +0,0 @@
|
||||
package com.mob.utsmyanmar.ui.dashboard
|
||||
|
||||
import android.os.Handler
|
||||
import android.os.Looper
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.offset
|
||||
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
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.AccountBalanceWallet
|
||||
import androidx.compose.material.icons.filled.BarChart
|
||||
import androidx.compose.material.icons.filled.Check
|
||||
import androidx.compose.material.icons.filled.ChevronRight
|
||||
import androidx.compose.material.icons.filled.CreditCard
|
||||
import androidx.compose.material.icons.filled.Lock
|
||||
import androidx.compose.material.icons.filled.LockOpen
|
||||
import androidx.compose.material.icons.filled.Menu
|
||||
import androidx.compose.material.icons.filled.Notifications
|
||||
import androidx.compose.material.icons.filled.Replay
|
||||
import androidx.compose.material.icons.filled.SwapHoriz
|
||||
import androidx.compose.material.icons.filled.Sync
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.DrawerValue
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ModalDrawerSheet
|
||||
import androidx.compose.material3.ModalNavigationDrawer
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Switch
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextButton
|
||||
import androidx.compose.material3.VerticalDivider
|
||||
import androidx.compose.material3.rememberDrawerState
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.runtime.setValue
|
||||
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.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
|
||||
import androidx.compose.ui.unit.sp
|
||||
import coil3.compose.AsyncImage
|
||||
import com.mob.utsmyanmar.R
|
||||
import com.mob.utsmyanmar.ui.components.appbar.AppBar
|
||||
import com.mob.utsmyanmar.ui.device_info.DeviceInfoUiState
|
||||
import com.mob.utsmyanmar.ui.preview.P2Preview
|
||||
import com.mob.utsmyanmar.ui.preview.P3Preview
|
||||
import com.mob.utsmyanmar.ui.theme.Color
|
||||
import com.utsmyanmar.paylibs.sign_on.EchoTestProcess
|
||||
import com.utsmyanmar.paylibs.sign_on.SignOnListener
|
||||
import com.utsmyanmar.paylibs.utils.core_utils.SystemParamsOperation
|
||||
import kotlinx.coroutines.delay
|
||||
import kotlinx.coroutines.launch
|
||||
import kotlin.time.Duration.Companion.milliseconds
|
||||
|
||||
@Composable
|
||||
fun DashboardScreen2(
|
||||
onNavigateAmount: (String) -> Unit = {},
|
||||
onNavigateSignOn: () -> Unit = {},
|
||||
onNavigateSettlement: () -> Unit = {},
|
||||
onNavigateVersion: () -> Unit = {},
|
||||
onNavigateFunctions: () -> Unit = {},
|
||||
onNavigateAction: (String) -> Unit = {},
|
||||
onNavigateNotifications: () -> Unit = {},
|
||||
dashboardUiState: DashboardUiState = DashboardUiState(),
|
||||
deviceInfo: DeviceInfoUiState = DeviceInfoUiState()
|
||||
) {
|
||||
|
||||
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
|
||||
val scope = rememberCoroutineScope()
|
||||
val mainHandler = remember { Handler(Looper.getMainLooper()) }
|
||||
var showHostActionDialog by remember { mutableStateOf(false) }
|
||||
var activeHostAction by remember { mutableStateOf("Log-On") }
|
||||
var isHostActionRunning by remember { mutableStateOf(false) }
|
||||
var dialogMessage by remember { mutableStateOf("") }
|
||||
var reversalEnabled by remember { mutableStateOf(runCatching { SystemParamsOperation.getInstance().isReversalOn }.getOrDefault(false)) }
|
||||
|
||||
val isOnline = true
|
||||
|
||||
fun confirmationMessage(action: String) = "Do you want to start ${action.lowercase()}?"
|
||||
fun processingMessage(action: String) = "Sending ${action.lowercase()} request to host..."
|
||||
fun successMessage(action: String) = "$action success."
|
||||
fun failureMessage(action: String, resultCode: Int?) =
|
||||
"$action failed. Response code: ${resultCode ?: -1}"
|
||||
|
||||
fun networkFailureMessage(action: String) = "Network error during $action."
|
||||
fun openHostActionDialog(action: String) {
|
||||
activeHostAction = action
|
||||
isHostActionRunning = false
|
||||
dialogMessage = confirmationMessage(action)
|
||||
showHostActionDialog = true
|
||||
}
|
||||
|
||||
if (showHostActionDialog) {
|
||||
AlertDialog(
|
||||
onDismissRequest = {
|
||||
if (!isHostActionRunning) {
|
||||
showHostActionDialog = false
|
||||
}
|
||||
}, title = {
|
||||
Text(
|
||||
text = activeHostAction, color = Color.LegacyRed, fontWeight = FontWeight.Bold
|
||||
)
|
||||
}, text = {
|
||||
Text(text = dialogMessage)
|
||||
}, confirmButton = {
|
||||
TextButton(
|
||||
onClick = {
|
||||
if (isHostActionRunning) return@TextButton
|
||||
|
||||
if (dialogMessage != confirmationMessage(activeHostAction)) {
|
||||
showHostActionDialog = false
|
||||
dialogMessage = confirmationMessage(activeHostAction)
|
||||
return@TextButton
|
||||
}
|
||||
|
||||
isHostActionRunning = true
|
||||
dialogMessage = processingMessage(activeHostAction)
|
||||
|
||||
val signOnProcess = EchoTestProcess.getInstance()
|
||||
val request = when (activeHostAction) {
|
||||
"Echo Test" -> signOnProcess.enqueue(false)
|
||||
"Log-Off" -> signOnProcess.enqueueLogOff()
|
||||
else -> signOnProcess.enqueueLogOn()
|
||||
}
|
||||
|
||||
request.startSignOn(object : SignOnListener {
|
||||
override fun onSuccessSignOn() {
|
||||
mainHandler.post {
|
||||
isHostActionRunning = false
|
||||
dialogMessage = successMessage(activeHostAction)
|
||||
}
|
||||
}
|
||||
|
||||
override fun onFailureSignOn(resultCode: Int?) {
|
||||
mainHandler.post {
|
||||
isHostActionRunning = false
|
||||
mainHandler.post {
|
||||
isHostActionRunning = false
|
||||
dialogMessage = failureMessage(activeHostAction, resultCode)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
override fun onNetworkFailSignOn(message: String?) {
|
||||
mainHandler.post {
|
||||
isHostActionRunning = false
|
||||
dialogMessage = message?.takeIf { it.isNotBlank() }
|
||||
?: networkFailureMessage(activeHostAction)
|
||||
}
|
||||
}
|
||||
})
|
||||
}) {
|
||||
Text(
|
||||
text = when {
|
||||
isHostActionRunning -> "Processing"
|
||||
dialogMessage == confirmationMessage(activeHostAction) -> "Start"
|
||||
else -> "Close"
|
||||
}, color = Color.LegacyRed
|
||||
)
|
||||
}
|
||||
}, dismissButton = {
|
||||
if (!isHostActionRunning) {
|
||||
TextButton(
|
||||
onClick = {
|
||||
showHostActionDialog = false
|
||||
dialogMessage = confirmationMessage(activeHostAction)
|
||||
}) {
|
||||
Text(text = "Cancel", color = Color.Gray)
|
||||
}
|
||||
}
|
||||
}, containerColor = Color.White
|
||||
)
|
||||
}
|
||||
|
||||
ModalNavigationDrawer(
|
||||
drawerState = drawerState, drawerContent = {
|
||||
ModalDrawerSheet(
|
||||
modifier = Modifier.fillMaxWidth(0.78f),
|
||||
drawerContainerColor = Color.White,
|
||||
drawerShape = RoundedCornerShape(topEnd = 24.dp, bottomEnd = 24.dp)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.background(Color.IvoryBeige)
|
||||
.padding(horizontal = 20.dp, vertical = 28.dp)
|
||||
) {
|
||||
Row {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(80.dp)
|
||||
.clip(CircleShape)
|
||||
.background(Color.White), contentAlignment = Alignment.Center
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(R.drawable.logo_mob),
|
||||
contentDescription = "mob logo",
|
||||
modifier = Modifier
|
||||
.size(100.dp)
|
||||
.padding(16.dp),
|
||||
contentScale = ContentScale.Fit
|
||||
)
|
||||
}
|
||||
|
||||
Column {
|
||||
Text(
|
||||
text = "MOB Merchant",
|
||||
color = Color.CrimsonRed,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Text(
|
||||
text = "S/N:${deviceInfo.serialNumber}",
|
||||
color = Color.Black,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Text(
|
||||
text = if (isOnline) "Online" else "Offline",
|
||||
color = if (isOnline) Color.Success else Color.Error,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(10.dp))
|
||||
Text(
|
||||
text = "Connection Settings",
|
||||
fontWeight = FontWeight.Medium,
|
||||
modifier = Modifier.padding(horizontal = 16.dp)
|
||||
)
|
||||
|
||||
Item(
|
||||
title = "Echo Test", subTitle = "Test Connection Status",
|
||||
onClick = {
|
||||
scope.launch { drawerState.close() }
|
||||
openHostActionDialog("Echo Test")
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.ic_up_down_arrow),
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
},
|
||||
trailingIcon = {},
|
||||
)
|
||||
Item(
|
||||
title = "Log-On", subTitle = "Log on to System",
|
||||
onClick = {
|
||||
scope.launch { drawerState.close() }
|
||||
openHostActionDialog("Log-On")
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.ic_lock),
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
},
|
||||
trailingIcon = {},
|
||||
)
|
||||
Item(
|
||||
title = "Log-Off", subTitle = "Log off from System",
|
||||
onClick = {
|
||||
scope.launch { drawerState.close() }
|
||||
openHostActionDialog("Log-Off")
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.ic_cancel_circle),
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
},
|
||||
trailingIcon = {},
|
||||
)
|
||||
Item(
|
||||
title = "Reversal", subTitle = "Enable / Disable Reversal",
|
||||
onClick = {
|
||||
reversalEnabled = !reversalEnabled
|
||||
runCatching { SystemParamsOperation.getInstance().setReversalFlag(reversalEnabled) }
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
Icons.Default.Sync,
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
},
|
||||
trailingIcon = {
|
||||
Switch(
|
||||
checked = reversalEnabled,
|
||||
onCheckedChange = { isChecked ->
|
||||
reversalEnabled = isChecked
|
||||
runCatching { SystemParamsOperation.getInstance().setReversalFlag(isChecked) }
|
||||
}
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
Text(
|
||||
text = "System Management",
|
||||
fontWeight = FontWeight.Medium,
|
||||
modifier = Modifier.padding(horizontal = 16.dp)
|
||||
)
|
||||
|
||||
Item(
|
||||
title = "Functions", subTitle = "System Function Settings",
|
||||
onClick = {
|
||||
scope.launch { drawerState.close() }
|
||||
onNavigateFunctions()
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.ic_four_boxes),
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed,
|
||||
modifier = Modifier.size(16.dp)
|
||||
)
|
||||
},
|
||||
trailingIcon = {},
|
||||
)
|
||||
Item(
|
||||
title = "Version", subTitle = "View App Version Info",
|
||||
onClick = {
|
||||
scope.launch { drawerState.close() }
|
||||
onNavigateVersion()
|
||||
},
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.ic_version),
|
||||
contentDescription = "icon",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
},
|
||||
trailingIcon = {},
|
||||
)
|
||||
|
||||
}
|
||||
}) {
|
||||
//body start
|
||||
Scaffold(
|
||||
containerColor = Color.IvoryBeige, topBar = {
|
||||
AppBar(
|
||||
title = "Dashboard",
|
||||
icon = Icons.Default.Menu,
|
||||
onIconClick = { scope.launch { drawerState.open() } },
|
||||
actions = {
|
||||
IconButton(onClick = onNavigateNotifications) {
|
||||
Box {
|
||||
Icon(
|
||||
imageVector = Icons.Default.Notifications,
|
||||
contentDescription = "Notifications",
|
||||
tint = Color.White
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(8.dp)
|
||||
.background(Color.GoldenGlow, CircleShape)
|
||||
.align(Alignment.TopEnd)
|
||||
.offset(x = 2.dp, y = (-2).dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}) { paddingValues ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(paddingValues)
|
||||
.fillMaxSize()
|
||||
) {
|
||||
//top section
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.fillMaxWidth(),
|
||||
) {
|
||||
AdvertisingArea()
|
||||
}
|
||||
//center section
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
SummaryCard()
|
||||
}
|
||||
//pager section
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1.3f)
|
||||
.fillMaxWidth(),
|
||||
) {
|
||||
MenuPager(
|
||||
items = buildMenuItems(
|
||||
onNavigateAmount = onNavigateAmount,
|
||||
onNavigateSignOn = onNavigateSignOn,
|
||||
onNavigateSettlement = onNavigateSettlement,
|
||||
onNavigateAction = onNavigateAction
|
||||
),
|
||||
modifier = Modifier.fillMaxSize()
|
||||
)
|
||||
}
|
||||
//transactions section
|
||||
RecentTransactions(
|
||||
transactions = dashboardUiState.recentTransactions,
|
||||
modifier = Modifier
|
||||
.weight(1.2f)
|
||||
.fillMaxWidth()
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun AdvertisingArea() {
|
||||
|
||||
val imageArray = listOf(
|
||||
"https://i.ytimg.com/vi/eRUVxGRp1Ms/maxresdefault.jpg",
|
||||
"https://i.ytimg.com/vi/AwvmgTPd7qw/maxresdefault.jpg",
|
||||
"https://mma.prnewswire.com/media/2080956/SUNMI_3rd_generation_products_T3_PRO_series_V3_MIX.jpg?p=facebook"
|
||||
)
|
||||
val pageState = rememberPagerState(pageCount = { imageArray.size })
|
||||
|
||||
LaunchedEffect(pageState) {
|
||||
while (true) {
|
||||
delay(10000.milliseconds)
|
||||
val nextPage = (pageState.currentPage + 1) % imageArray.size
|
||||
|
||||
pageState.animateScrollToPage(
|
||||
page = nextPage, animationSpec = tween(durationMillis = 700)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Card(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
shape = RoundedCornerShape(0.dp),
|
||||
colors = CardDefaults.cardColors(containerColor = Color.White),
|
||||
) {
|
||||
HorizontalPager(
|
||||
state = pageState, modifier = Modifier.fillMaxSize()
|
||||
) { page ->
|
||||
AsyncImage(
|
||||
model = imageArray[page],
|
||||
contentDescription = "ads images",
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun SummaryCard() {
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp),
|
||||
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 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)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private class DashboardMenuItem(
|
||||
val title: String,
|
||||
val iconContent: @Composable () -> Unit,
|
||||
val onClick: () -> Unit
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun buildMenuItems(
|
||||
onNavigateAmount: (String) -> Unit,
|
||||
onNavigateSignOn: () -> Unit,
|
||||
onNavigateSettlement: () -> Unit,
|
||||
onNavigateAction: (String) -> Unit
|
||||
): List<DashboardMenuItem> = listOf(
|
||||
DashboardMenuItem("Sale", { Icon(painterResource(R.drawable.ic_terminal), contentDescription = null, modifier = Modifier.size(40.dp), tint = Color.LegacyRed) }) { onNavigateAmount("Sale") },
|
||||
DashboardMenuItem("MMQR", { Image(painter = painterResource(R.drawable.ic_mmqr_logo), contentDescription = null, modifier = Modifier.height(48.dp)) }) { },
|
||||
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.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") },
|
||||
DashboardMenuItem("Pre-Auth Complete", { Icon(Icons.Default.CreditCard, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Pre-Auth Complete") },
|
||||
DashboardMenuItem("Pre-Auth Complete Void", { Icon(Icons.Default.SwapHoriz, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Pre-Auth Complete Void") },
|
||||
DashboardMenuItem("Cash Out", { Icon(Icons.Default.AccountBalanceWallet, contentDescription = null, modifier = Modifier.size(32.dp), tint = Color.LegacyRed) }) { onNavigateAction("Cash Out") },
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun MenuPager(
|
||||
items: List<DashboardMenuItem>,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
val pages = items.chunked(6)
|
||||
val pagerState = rememberPagerState(pageCount = { pages.size })
|
||||
|
||||
Column(modifier = modifier) {
|
||||
HorizontalPager(
|
||||
state = pagerState,
|
||||
modifier = Modifier.weight(1f)
|
||||
) { pageIndex ->
|
||||
MenuPage(items = pages[pageIndex])
|
||||
}
|
||||
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(vertical = 8.dp),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
repeat(pages.size) { index ->
|
||||
val selected = pagerState.currentPage == index
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 4.dp)
|
||||
.size(if (selected) 8.dp else 6.dp)
|
||||
.background(
|
||||
color = if (selected) Color.LegacyRed else Color.Gray.copy(alpha = 0.4f),
|
||||
shape = CircleShape
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun MenuPage(items: List<DashboardMenuItem>) {
|
||||
Column(
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
modifier = Modifier.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Spacer(Modifier.height(8.dp))
|
||||
items.chunked(3).forEach { rowItems ->
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
|
||||
rowItems.forEach { item ->
|
||||
MenuCard(
|
||||
title = item.title,
|
||||
icon = item.iconContent,
|
||||
modifier = Modifier.weight(1f),
|
||||
onClick = item.onClick
|
||||
)
|
||||
}
|
||||
repeat(3 - rowItems.size) {
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun MenuCard(
|
||||
title: String,
|
||||
icon: @Composable () -> Unit,
|
||||
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()
|
||||
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 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),
|
||||
)
|
||||
|
||||
@P3Preview
|
||||
@P2Preview
|
||||
@Composable
|
||||
fun PreviewDashboardScreen2() {
|
||||
DashboardScreen2(dashboardUiState = DashboardUiState(previewTransactions))
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun PreviewItem() {
|
||||
Item(
|
||||
onClick = {},
|
||||
title = "title",
|
||||
subTitle = "sub-title"
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@Composable
|
||||
fun Item(
|
||||
onClick: () -> Unit,
|
||||
title: String,
|
||||
subTitle: String,
|
||||
leadingIcon: (@Composable () -> Unit)? = null,
|
||||
trailingIcon: (@Composable () -> Unit)? = null,
|
||||
) {
|
||||
Button(
|
||||
onClick = onClick,
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = Color.White,
|
||||
contentColor = Color.Black
|
||||
),
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
// Square icon background
|
||||
leadingIcon?.let {
|
||||
Box(
|
||||
contentAlignment = Alignment.Center,
|
||||
modifier = Modifier
|
||||
.size(40.dp)
|
||||
.clip(RoundedCornerShape(16.dp)) // change to RectangleShape for sharp corners
|
||||
.background(Color.LegacyRed.copy(alpha = 0.1f))
|
||||
.padding(8.dp)
|
||||
) {
|
||||
it()
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(12.dp))
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.padding(horizontal = 8.dp)
|
||||
) {
|
||||
Text(text = title)
|
||||
Text(
|
||||
text = subTitle,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = Color.Gray
|
||||
)
|
||||
}
|
||||
|
||||
trailingIcon?.invoke()
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user