@Composable
fun TransactionHistory(viewModel: TransactionViewModel) {
val transactions by viewModel.transactions.collectAsState()
val isLoading by viewModel.isLoading.collectAsState()
val filter by viewModel.filter.collectAsState()
val filters = listOf("all", "deposit", "withdraw", "transfer")
LaunchedEffect(Unit) {
viewModel.loadTransactions()
}
Column {
// Filter tabs
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
filters.forEach { type ->
FilterChip(
selected = filter == type,
onClick = { viewModel.setFilter(type) },
label = { Text(type.replaceFirstChar { it.uppercase() }) }
)
}
}
// Transaction list
if (isLoading) {
CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
} else if (transactions.isEmpty()) {
Text("No transactions found", color = Color.Gray)
} else {
LazyColumn {
items(transactions) { tx ->
TransactionRow(transaction = tx)
}
}
}
}
}
@Composable
fun TransactionRow(transaction: Transaction) {
val icon = when (transaction.txType) {
"deposit" -> Icons.Default.ArrowDownward
"withdraw" -> Icons.Default.ArrowUpward
"transfer" -> Icons.Default.SwapHoriz
else -> Icons.Default.Circle
}
val dateFormatter = SimpleDateFormat("MMM d, yyyy HH:mm", Locale.getDefault())
val formattedDate = dateFormatter.format(Date(transaction.createdAt.toLong() * 1000))
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(imageVector = icon, contentDescription = transaction.txType)
Spacer(modifier = Modifier.width(12.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = transaction.txType.replaceFirstChar { it.uppercase() },
style = MaterialTheme.typography.titleSmall
)
Text(
text = formattedDate,
style = MaterialTheme.typography.bodySmall,
color = Color.Gray
)
}
Text(
text = transaction.amount,
style = MaterialTheme.typography.bodyMedium
)
}
}