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