389 lines
10 KiB
Dart
389 lines
10 KiB
Dart
import 'package:auto_route/auto_route.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
import '../../../../common/theme/theme.dart';
|
|
|
|
// Models
|
|
enum TransactionType {
|
|
all('Semua'),
|
|
redeemed('Poin Ditukar'),
|
|
earned('Poin Didapat'),
|
|
refunded('Poin Dikembalikan'),
|
|
bonus('Bonus Poin');
|
|
|
|
const TransactionType(this.label);
|
|
final String label;
|
|
}
|
|
|
|
class PointTransaction {
|
|
final String id;
|
|
final String title;
|
|
final String category;
|
|
final String source;
|
|
final int points;
|
|
final TransactionType type;
|
|
final DateTime date;
|
|
final String? productImage;
|
|
|
|
PointTransaction({
|
|
required this.id,
|
|
required this.title,
|
|
required this.category,
|
|
required this.source,
|
|
required this.points,
|
|
required this.type,
|
|
required this.date,
|
|
this.productImage,
|
|
});
|
|
|
|
bool get isPositive =>
|
|
type == TransactionType.earned ||
|
|
type == TransactionType.refunded ||
|
|
type == TransactionType.bonus;
|
|
}
|
|
|
|
@RoutePage()
|
|
class PoinHistoryPage extends StatefulWidget {
|
|
const PoinHistoryPage({super.key});
|
|
|
|
@override
|
|
State<PoinHistoryPage> createState() => _PoinHistoryPageState();
|
|
}
|
|
|
|
class _PoinHistoryPageState extends State<PoinHistoryPage> {
|
|
TransactionType selectedFilter = TransactionType.all;
|
|
|
|
// Sample transaction data
|
|
final List<PointTransaction> allTransactions = [
|
|
PointTransaction(
|
|
id: "t1",
|
|
title: "Es Teh Manis",
|
|
category: "Minuman",
|
|
source: "Penukaran Voucher",
|
|
points: -1500,
|
|
type: TransactionType.redeemed,
|
|
date: DateTime.now().subtract(Duration(hours: 2)),
|
|
productImage: "🧊",
|
|
),
|
|
PointTransaction(
|
|
id: "t2",
|
|
title: "Nasi Gudeg",
|
|
category: "Makanan",
|
|
source: "Transaksi Pembelian",
|
|
points: 400,
|
|
type: TransactionType.earned,
|
|
date: DateTime.now().subtract(Duration(days: 1)),
|
|
productImage: "🍛",
|
|
),
|
|
PointTransaction(
|
|
id: "t3",
|
|
title: "Member Emas",
|
|
category: "Membership",
|
|
source: "Bonus Bulanan",
|
|
points: 2000,
|
|
type: TransactionType.bonus,
|
|
date: DateTime.now().subtract(Duration(days: 2)),
|
|
productImage: "🎁",
|
|
),
|
|
PointTransaction(
|
|
id: "t4",
|
|
title: "Kopi Susu",
|
|
category: "Minuman",
|
|
source: "Pembatalan Pesanan",
|
|
points: 2000,
|
|
type: TransactionType.refunded,
|
|
date: DateTime.now().subtract(Duration(days: 3)),
|
|
productImage: "☕",
|
|
),
|
|
PointTransaction(
|
|
id: "t5",
|
|
title: "Diskon 50%",
|
|
category: "Voucher",
|
|
source: "Penukaran Voucher",
|
|
points: -5000,
|
|
type: TransactionType.redeemed,
|
|
date: DateTime.now().subtract(Duration(days: 5)),
|
|
productImage: "🏷️",
|
|
),
|
|
PointTransaction(
|
|
id: "t6",
|
|
title: "Gado-gado",
|
|
category: "Makanan",
|
|
source: "Transaksi Pembelian",
|
|
points: 350,
|
|
type: TransactionType.earned,
|
|
date: DateTime.now().subtract(Duration(days: 7)),
|
|
productImage: "🥗",
|
|
),
|
|
PointTransaction(
|
|
id: "t7",
|
|
title: "Hari Kemerdekaan",
|
|
category: "Event",
|
|
source: "Bonus Special",
|
|
points: 1700,
|
|
type: TransactionType.bonus,
|
|
date: DateTime.now().subtract(Duration(days: 12)),
|
|
productImage: "🇮🇩",
|
|
),
|
|
PointTransaction(
|
|
id: "t8",
|
|
title: "Keripik Singkong",
|
|
category: "Cemilan",
|
|
source: "Penukaran Voucher",
|
|
points: -1000,
|
|
type: TransactionType.redeemed,
|
|
date: DateTime.now().subtract(Duration(days: 14)),
|
|
productImage: "🥔",
|
|
),
|
|
PointTransaction(
|
|
id: "t9",
|
|
title: "Review Produk",
|
|
category: "Aktivitas",
|
|
source: "Bonus Review",
|
|
points: 500,
|
|
type: TransactionType.bonus,
|
|
date: DateTime.now().subtract(Duration(days: 20)),
|
|
productImage: "⭐",
|
|
),
|
|
PointTransaction(
|
|
id: "t10",
|
|
title: "Bakso",
|
|
category: "Makanan",
|
|
source: "Pembatalan Pesanan",
|
|
points: 3000,
|
|
type: TransactionType.refunded,
|
|
date: DateTime.now().subtract(Duration(days: 25)),
|
|
productImage: "🍲",
|
|
),
|
|
];
|
|
|
|
List<PointTransaction> get filteredTransactions {
|
|
if (selectedFilter == TransactionType.all) {
|
|
return allTransactions;
|
|
}
|
|
return allTransactions.where((t) => t.type == selectedFilter).toList();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColor.white,
|
|
appBar: AppBar(
|
|
title: Text("Riwayat Poin"),
|
|
centerTitle: true,
|
|
elevation: 0,
|
|
),
|
|
body: Column(
|
|
children: [
|
|
_buildFilterChips(),
|
|
Expanded(child: _buildTransactionList()),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFilterChips() {
|
|
return Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: TransactionType.values.map((type) {
|
|
final isSelected = selectedFilter == type;
|
|
return Container(
|
|
margin: EdgeInsets.only(right: 8),
|
|
child: FilterChip(
|
|
selected: isSelected,
|
|
label: Text(type.label),
|
|
onSelected: (selected) {
|
|
setState(() {
|
|
selectedFilter = type;
|
|
});
|
|
},
|
|
backgroundColor: AppColor.white,
|
|
selectedColor: AppColor.primary,
|
|
checkmarkColor: AppColor.white,
|
|
labelStyle: AppStyle.sm.copyWith(
|
|
color: isSelected ? AppColor.white : AppColor.textSecondary,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
side: BorderSide(
|
|
color: isSelected ? AppColor.primary : AppColor.border,
|
|
width: 1,
|
|
),
|
|
elevation: 0,
|
|
pressElevation: 1,
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTransactionList() {
|
|
final transactions = filteredTransactions;
|
|
|
|
if (transactions.isEmpty) {
|
|
return _buildEmptyState();
|
|
}
|
|
|
|
return ListView.builder(
|
|
padding: EdgeInsets.all(16),
|
|
itemCount: transactions.length,
|
|
itemBuilder: (context, index) {
|
|
final transaction = transactions[index];
|
|
return _buildTransactionCard(transaction);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
color: AppColor.backgroundLight,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.history_outlined,
|
|
size: 48,
|
|
color: AppColor.textLight,
|
|
),
|
|
),
|
|
SizedBox(height: 16),
|
|
Text(
|
|
"Belum Ada Transaksi",
|
|
style: AppStyle.lg.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColor.textSecondary,
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
"Transaksi ${selectedFilter.label.toLowerCase()}\nbelum tersedia",
|
|
style: AppStyle.sm.copyWith(color: AppColor.textLight),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTransactionCard(PointTransaction transaction) {
|
|
final isPositive = transaction.isPositive;
|
|
final formattedDate = _formatDate(transaction.date);
|
|
|
|
return Container(
|
|
margin: EdgeInsets.only(bottom: 16),
|
|
padding: EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: AppColor.white,
|
|
border: Border(bottom: BorderSide(color: AppColor.border, width: 1)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Category label
|
|
Text(
|
|
"Poin Didapat",
|
|
style: AppStyle.xs.copyWith(
|
|
color: AppColor.textSecondary,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 8),
|
|
|
|
// Title and Points Row
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
transaction.title,
|
|
style: AppStyle.lg.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: AppColor.textPrimary,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
SizedBox(width: 12),
|
|
Row(
|
|
children: [
|
|
// Green circle icon
|
|
Container(
|
|
width: 20,
|
|
height: 20,
|
|
decoration: BoxDecoration(
|
|
color: isPositive ? Color(0xFF10B981) : AppColor.error,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(Icons.add, color: Colors.white, size: 14),
|
|
),
|
|
SizedBox(width: 6),
|
|
Text(
|
|
"${isPositive ? '+' : ''}${transaction.points} Poin",
|
|
style: AppStyle.md.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: isPositive ? Color(0xFF10B981) : AppColor.error,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
SizedBox(height: 12),
|
|
|
|
// Date
|
|
Text(
|
|
formattedDate,
|
|
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
String _formatDate(DateTime date) {
|
|
final now = DateTime.now();
|
|
final difference = now.difference(date);
|
|
|
|
if (difference.inDays == 0) {
|
|
if (difference.inHours == 0) {
|
|
return "${difference.inMinutes} menit lalu";
|
|
}
|
|
return "${difference.inHours} jam lalu";
|
|
} else if (difference.inDays == 1) {
|
|
return "Kemarin";
|
|
} else if (difference.inDays < 7) {
|
|
return "${difference.inDays} hari lalu";
|
|
} else {
|
|
final months = [
|
|
'Jan',
|
|
'Feb',
|
|
'Mar',
|
|
'Apr',
|
|
'Mei',
|
|
'Jun',
|
|
'Jul',
|
|
'Ags',
|
|
'Sep',
|
|
'Okt',
|
|
'Nov',
|
|
'Des',
|
|
];
|
|
|
|
return "${date.day} ${months[date.month - 1]} ${date.year}";
|
|
}
|
|
}
|
|
}
|