183 lines
7.0 KiB
Dart
183 lines
7.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:intl/intl.dart';
|
|
import '../database/database.dart' as db;
|
|
import '../models/transaction_record.dart';
|
|
import '../utils/category_utils.dart';
|
|
|
|
class TransactionListItem extends StatelessWidget {
|
|
final TransactionRecord transaction;
|
|
final Animation<double> animation;
|
|
|
|
const TransactionListItem({
|
|
Key? key,
|
|
required this.transaction,
|
|
required this.animation,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final theme = Theme.of(context);
|
|
|
|
// Get category details
|
|
final categoryDetails = CategoryUtils.getCategoryDetails(transaction.categoryName);
|
|
|
|
// Format dates
|
|
final dateFormatter = DateFormat.MMMd(); // e.g., Sep 10
|
|
final timeFormatter = DateFormat.jm(); // e.g., 5:08 PM
|
|
|
|
// Determine if the date is today, yesterday, or another day
|
|
final now = DateTime.now();
|
|
final today = DateTime(now.year, now.month, now.day);
|
|
final yesterday = DateTime(now.year, now.month, now.day - 1);
|
|
final transactionDay = DateTime(transaction.date.year, transaction.date.month, transaction.date.day);
|
|
|
|
String displayDate;
|
|
if (transactionDay == today) {
|
|
displayDate = 'Today';
|
|
} else if (transactionDay == yesterday) {
|
|
displayDate = 'Yesterday';
|
|
} else {
|
|
displayDate = dateFormatter.format(transaction.date);
|
|
}
|
|
|
|
String displayTime = timeFormatter.format(transaction.date);
|
|
|
|
// Determine text colors based on theme
|
|
Color primaryTextColor = theme.textTheme.bodyLarge?.color ?? (isDark ? Colors.white : Colors.black87);
|
|
Color secondaryTextColor = theme.textTheme.bodyMedium?.color ?? (isDark ? Colors.white70 : Colors.grey.shade600);
|
|
Color amountColor = isDark ? Colors.red.shade200 : Colors.red.shade700;
|
|
|
|
// Use FadeTransition for item appearance
|
|
return FadeTransition(
|
|
opacity: animation,
|
|
child: Card(
|
|
margin: const EdgeInsets.only(bottom: 6, top: 2),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12.0),
|
|
),
|
|
child: SizedBox(
|
|
height: 65, // Fixed height for consistency
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(12.0),
|
|
onTap: () {
|
|
// TODO: Implement navigation to transaction details
|
|
print('Tapped transaction: ${transaction.id}');
|
|
},
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
|
|
child: Row(
|
|
children: [
|
|
// Leading icon
|
|
Container(
|
|
width: 36,
|
|
height: 36,
|
|
decoration: BoxDecoration(
|
|
color: categoryDetails.colorCode.withOpacity(isDark ? 0.2 : 0.15),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
categoryDetails.iconCode,
|
|
color: categoryDetails.colorCode.withOpacity(isDark ? 0.9 : 1.0),
|
|
size: 16
|
|
),
|
|
),
|
|
|
|
// Content
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Category and merchant on same line
|
|
Row(
|
|
children: [
|
|
Text(
|
|
transaction.categoryName,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 13
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'·', // Bullet separator
|
|
style: TextStyle(
|
|
color: isDark ? Colors.grey.shade400 : Colors.grey.shade700,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Expanded(
|
|
child: Text(
|
|
transaction.merchant,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: isDark ? Colors.grey.shade400 : Colors.grey.shade700,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 4),
|
|
|
|
// Date and time
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.access_time,
|
|
size: 10,
|
|
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
displayDate,
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Amount and Time
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
'- \$${transaction.amount.toStringAsFixed(2)}',
|
|
style: TextStyle(
|
|
color: isDark ? Colors.redAccent.shade100 : Colors.red.shade700,
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
displayTime,
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|