aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: poin history page

Browse Source
This commit is contained in:
efrilm
2025-08-29 20:13:38 +07:00
parent 079813e95b
commit 00c9d8435a
4 changed files with 518 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/poin/pages/poin_history_page.dart
+388
View File
@@ -0,0 +1,388 @@
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}";
}
}
}
lib/presentation/pages/poin/poin_page.dart
+6
View File
@@ -268,6 +268,12 @@ class _PoinPageState extends State<PoinPage> {
floating: false,
pinned: true, // Made sticky
snap: false,
actions: [
IconButton(
icon: Icon(Icons.history),
onPressed: () => context.router.push(PoinHistoryRoute()),
),
],
),
// Point Card Section